Typegrid

Thanks for your purchase, your support is truly appreciated!

WPBandit · Support Forums · More Themes

Thanks for your purchase! We know that you're excited to get your site up and running and we want to help. Please take the time to read through this documentation as it will help to answer most of your questions. If you encounter any issues or discover any bugs please contact us in our support forum so that we may help you.

How To Find Your Purchase Code

To create an account on the support forum requires your purchase code. See the picture below for help finding your code.

Licence Code

Installing your theme is pretty easy! After downloading and uncompressing your theme you should find a file named Typegrid.zip. This is a compressed file containing all of the required templates and images required for the theme to function properly.

Install Theme

  1. Click on Themes in the Appearance Menu
  2. Click on the Install Themes tab
  3. Click the Upload link
  4. Select the Typegrid.zip file
  5. Click Install Now

Activate Theme

  1. Click on Themes in the Appearance Menu
  2. Click on Activate under the Typegrid theme
Additional Information: WordPress Codex – Using Themes

Finding Theme Options & Modules

As soon as you've activated your theme, you will see a new link appearing at the bottom of the dashboard sidebar with your theme name. This is where all of your theme options and theme modules are.

This step is optional. If you don't want to import any extra pages and texts to your site, you can skip to the next section. If you want a base similar to the demo site to work on and edit (mainly for content layouts and text formats), this is for you.

Important: If your site is not a fresh install with no content, but has a lot of existing content and pages on it already, it is important to remember that this file will add a lot of pages (and media if you choose to import that) to your site, that you will have to edit or remove.

Importing

  1. Click on Import in the Tools Menu
  2. Click on the WordPress link
  3. Install the plugin it asks for and activate, if you haven't already installed it.
  4. Now you should see a select button on the Import > WordPress page.
  5. Upload the .XML file that can be found in /resources/XML/ folder of the theme-package.zip file. Choose if you want to import media or not (images).
  6. Wait for the import process to finish. When it's finished it will say so.
  7. Go to Appearance > Menus and add the menu areas to for example header.
  8. Your page should now look similar to the demo page. Refer to the Frontpage section "Setting up a Static Front Page" if you want to setup a static front page (non-blog)

If this is your first-time install, you can skip this step.

If a new version of the theme is released (for example if we add new features or fix some bugs), you need to do the following to update your theme:

  1. Download the latest version from your ThemeForest "downloads" tab.
  2. Unzip the package file and locate the theme.zip to upload.
  3. Upload the theme and activate it (with new version number), just as you did on first-time install.
  4. Copy over your custom.css and custom-functions.php to the new theme if you've made customizations. Your admin settings will be saved.
Important: Your old files and theme will not be overwritten, as it creates a new folder such as for example "theme12" (where "12" represents version 1.2). Please note that any customizations made to files of the old theme will have to be moved over.

Theme Style

Change the theme base style by selecting an option from the dropdown box.

Custom Stylesheet

Instead of editing style.css, enable the custom.css file in options. In this file you can create new styles or override existing styles. By doing this, you will be able to easily install a new updated version of the theme and copy over your custom styles to it.

You can edit the custom.css and other theme files directly in the dashboard, just go to Appearance > Editor.

Favicon

Upload favicon by clicking the Select Image button and selecting from Media Library. As an example, a 16x16 px .PNG image is often used.

Afterwards, select the Full Size option and click the Insert into Post button.

RSS Feed

If you use a service such as FeedBurner enter full URL of your feed.

Analytics Script

If you use a service such as Google Analytics paste your tracking code in the box and set whether you want this script to load in the header or the footer of your site.

Most of the blog options are self-explaining, however we will clarify a few options to make sure they are understood correctly.

Featured Slider

Note that posts are ordered by date. Your most recent posts will be displayed first. Also note that the slider is only shown on blog home.

Newsflash

What we call "newsflash" is the dark block shown at the top of blog home and/or single pages. It lists most discussed entries (most popular), most recent posts and recent comments. You can enable and disable them as you see fit.

Title

Site Name
Append the site name to the title of each post.
Separator
The separator to display between the site name and the page/post title.

Home Page

Title
Set a custom title for the home page.
Meta Description
The home page meta description.
Meta Keywords
The home page meta keywords.

Robot Meta Tags

noindex
Do not allow search engines to index the selected page types.
noarchive
Do not allow search engines to archive the selected page types.
nofollow
Instruct search engines not to follow links on the selected page types.
noodp,noydir
If your site is listed in DMOZ or the Yahoo Directory search engines will use descriptions from these sites instead of your meta description. Select the options here to prevent this.

Header options are for the most part self-explaining. However, we would like to clarify the logo option.

Mobile Sidebar

Here you can enable the option to show sidebar widgets on mobile layouts. The sidebar widgets will appear below the content whether you use a sidebar to the right or left.

For information on how to use unlimited sidebar widget areas, please refer to the Theme Modules: Sidebar section.

Advanced Styling

The first thing you need to do to use the styling options is to enable it. This will load a style-advanced.css in the theme.

Theme Color

Body

Enable

Enable a custom login page.

Logo

Upload your own logo and change the logo URL. By default your login page shows a WordPress logo and links to wordpress.org.

Note: Setting the URL to your home page is a good idea.

Colors

Change the background, link, and link hover colors.

CSS

Customize the page by including your own CSS to override default WordPress styles.

Enable Maintenance Mode

Allow others to work on the site while disabling access from visitors. If you need to quickly modify a template or adjust the CSS on your site this is a perfect option to use. Visitors will be temporarily redirected to a maintenance page.

The access role option allows you set what type of users have access to your site.

The sidebar module makes it possible to add unlimited sidebar widget areas to your WordPress website.

This is how to use the module:

  1. First, go to the sidebar module. Themename > Theme Modules > Sidebar
  2. To create a new sidebar, give it any name you want and then click the "Add Sidebar" button. (ID is not required, it will be auto-created)
  3. (Optional) Add this newly created widget area to common pages, such as Archive or Single pages.
  4. Now we can leave the module page. Go to Appearance > Widgets to add widgets to your newly created sidebar.
  5. Lastly, you can add your new sidebar to any page or post. To do so, edit the page or post where you want the sidebar to be. On the right side, there is a block called "Sidebar". Select your sidebar from the dropdown and update the page.
  6. All done! Create as many sidebars as you want, anywhere you want.

The social module allows you to quickly and easily manage your social media links.

Create Link

To create a new link enter the URL, set a Label, and select an Icon. As an example:

Once you are done click the Add Item button. Links are automatically displayed in theme's footer. If you make any updates be sure to click the Update button.

Order Links

Drag link items using the "bars" to reorder link items.

To see examples of each page template, please visit our theme demo page.

To set a page template for your page, do the following:

  1. Edit or create the page you want to use.
  2. In the dashboard, locate the second block to the right called "Page Attributes".
  3. Find the "Template" dropdown in this block. Select the template you want to use and hit save/update.
  4. You now use the page template! All additional options, if there are any, will appear below the large text field.

We recommend using the Contact Form 7 plugin for your contact page. You are free to use any plugin you are comfortable with but it is what we use.

How To Setup Your Contact Page

  1. Install and activate Contact Form 7
  2. Go to Contact in your WordPress dashboard
  3. Edit Contact form 1
  4. In the form field, paste the following:

    <p>[text* your-name] <label>Your Name</label></p>
    
    <p>[email* your-email] <label>Your Email</label></p>
    
    <p>[text your-subject] <label>Subject</label></p>
    
    <p>[textarea your-message]</p>
    
    <p>[submit "Send Email"]</p>
    
  5. Copy the code in the brown field and insert it on the page where you want your contact form.

Example of full contact page (as seen on demo site)

[googlemap address="Stockholm, Sweden" fullwidth="true" height="300" zoom="13"]

[column size="one-fourth"]
<h3>Contact Info</h3>
30 South Park Avenue
San Francisco, CA 94108
USA

<strong>Phone:</strong> (123) 456-7890
<strong>Fax:</strong> +08 (123) 456-7890
<strong>Email:</strong> contact@company.com
<strong>Web:</strong> companyname.com
[/column]

[column size="three-fourth" last="true"]
<h3>Get in touch</h3>
[contact-form-7 id="1310" title="Contact form 1"]
[/column]

Remember to use the HTML-tab of the WordPress editor when pasting this code. You can switch back to visual editor after you have inserted it.

Shortcodes are easy to add and access directly from the WordPress text editor. Locate the following icon and click on it:

All available shortcodes will be shown in the expanded dropdown. If additional options exist for the shortcode, a popup will open up. Otherwise it will be directly inserted when you click on it.

Please note that this button will not show up when using the HTML-tab of the editor.

Uploading and usage

Whether you are adding a portfolio item, a blog post, a gallery format post or upload images to your gallery template the same method is always used in our themes.

  1. Go to the page/post/portfolio item you want to edit.
  2. Click the Add Media button.
  3. Upload your images.
  4. Since you uploaded the image(s) on this page, they will now be attached to it. Our themes uses these attached images and displays them.
  5. When you've uploaded your images, you can now manage your attached images by selecting this option:
  6. To re-order images, simply drag them around. To remove them, simply delete them.
  7. Captions will appear in the bottom right corner on top of the image.
  8. If you want to link the image, add your link in the description field of the image (works only on some specific places).
  9. In order for the images to show up on thumbnails you need to pick one of your images and click "Set Featured Image".

Additional Notes

Featured Image on Regular Pages

If you upload and set an image as featured on a regular page, it will show up in the header. Image captions will be large-text, centered on top of the image. Image description will show up in a small box below the caption.

Things which we have not yet covered in this documentation are most likely standard WordPress features. Here is some more useful information.

Questions about how to use images? Refer to the Managing Images section.

Adding items to your sidebars - widgets

To add items to your sidebars, you need to use WordPress widgets. In the WordPress dashboard you need to go to Appearance > Widgets to edit your sidebars.

To insert whatever code or text you want in the sidebar, simply use one or multiple "Text" widget blocks. This widget will give you a textfield that you can add anything to, including text, html and shortcodes.

Uploading and managing images

Images are a big part of most themes, and we use WordPress default gallery functionality for most image features. Read more about media uploads and usage below.

Regenerating thumbnail-sizes

If you used another theme for your website before changing, you most likely will see that old thumbnails are of the wrong size. This is because most themes have custom thumbnail sizes. In order to easily fix this, all you need to do is download, activate and run a plugin called "Regenerate Thumbnails".

Better blog pagination

While many are happy with the "Next" and "Previous" links at the bottom of the blog, archive and search pages - others want a better pagination. This is why all of our themes support the plugin WP-PageNavi, which solves this issue. Install and activate it, and it will work right away.

Download plugin: Plugin - WP-PageNavi

Changing theme language

In order to change language of your theme you need to edit the language .pot file in the /languages/ folder of the theme. This can be easily done with a program such as PoEdit. Your favourite text editor should also work, such as Notepad++.