11. Griddr - Building your Homepage and Filterable Menu
12. Griddr - Special CSS Classes
13. Griddr - Portfolio Overview
14. Griddr - Team Post Type Overview
15. Contact Form 7 Overview
16. How do I reorder categories/posts etc?
17. Theme Post Type Options
18. Common Issue Troubleshooting
19. How To Rate Your Theme
20. Theme support Policy
1. Griddr - Getting Started
Welcome to Griddr for WordPress
An important note - Griddr is primarily a single page theme, this means all of your homepage content resides on a single page, which you then filter through the various sections of this single page via the menu.
2. How To Install Your Theme
Installing your new theme is very straight forward and should be familiar to anyone who has worked with WordPress to any degree before, however we will outline the process here for you to ensure a trouble-free installation.
To begin, head to your WordPress dashboard and navigate to Appearance in the main menu, from the sub-menu on this page you will then need to select Install Theme, followed by the Upload button. You can see these steps in the animation below.
Its importing you upload the correct zip. By default most users will download the entire package when purchasing a theme, this needs to be unzipped and within this you will see various files and folders covering documentation, demo-data and of course the theme itself - typically the zip you need to upload will have a name similar to themename.zip - this is the one to upload here.
Once the upload has taken place, you will need to hit the Activate link to begin using your awesome new theme.
If your working with a fresh installation of WordPress, one final step you may wish to follow is to set your sites permalinks to something a bit nicer to look at (for a details overview of this settings you can view our blog post). To apply 'pretty permalinks' to your WordPress installation, just head to Settings > Permalinks and set the option to 'Postname'.
3. Installing Theme Plugins
When you first install the theme you'll see a popup on your dashboard from the theme asking you to install a number of plugins.
Allow the theme to install these for you. The plugins which are installed are dependent of the theme, the images below are for illustrative purposes only.
TIP - You can install all plugins at the same time by checking the box at the top of the this list, see below for an example.
Once done (the process should take no more than a few minutes) You will see a confirmation notice similar to the image below.
Now you have the themes plugins installed, you can continue to the next stage of the setup and import the demo data without any issues.
4. Importing Demo Data (Auto Method)
We have created a very simple system which can help you get your new theme setup like the demo in just a few clicks, however its crucial that you install all of the themes required plugins prior to beginning the import.
To begin single click import, you need to head to Appearance > Customize - within the theme options you will see a Demo Data area similar to the animation below. Simply click the import button and await the confirmation of the process's completion.
Bare in mind, the import process can take anywhere from 5 to 50 minuits (depending on the speed of your server etc) - you must not navigate away from the page whilst the import takes place.
5. Importing Demo Data (Fallback Method)
I have created a folder labeled "Demo XML Data" which contains an export for the Live Preview. The place to upload this XML file is in WordPress under Tools > Import.
Once you've arrived on the Import page, you will click on the "WordPress" link: Wordpress - Install the WordPress importer to import posts, pages, comments, custom fields, categories, and tags from a WordPress export file.
The first time you do this you will get a pop-up prompting you to install the "WordPress Importer". You will need to click "Install Now". Then You will have installed the plugin and need to click "Activate Plugin & Run Importer".
From here you will just need click "Choose File" and select the demo-data.xml file. Then click "Upload file and import".
You will then be prompted to Assign Authors. You can read the description at the top as this explains everything. Note: Make sure you Import Attachments.
Check the box "Download and import file attachments". This will download attachments for images included in the Live Preview demo.
You now just need to wait for the importer to finish. This might take a few minutes depending on your hosting server speed.
6. Initial Theme Setup
Ok, so far we have installed the theme, we have installed the plugins and imported the demo data, whats next?
The final step in getting your new theme setup and ready for you to edit as you wish is to setup your home page and menu. To begin, head to Settings > Reading, here you will need to set your Front Page.
By default WP is set to show your latest posts, however to make your theme just like our demo you should select a static front page from the pages provided in the demo data.
Please note - is important to set the Posts Page here also (you should find a blog page in the demo data)
Finally, if you have not done so already, its highly advisable to update your permalink settings. To do this, head to Settings > Permalinks and select any option other than default. We recommended 'postname' - as you can see below.
7. Griddr - Theme Options Overview
8. Using The Theme Options
All options for the theme are found within the WordPress theme customizer, from here you can change logos, colours, loads of stuff!
When you've done making changes, be sure to click the Save Changes button to apply your modificaitons to the front end of the site.
9. Setting Up A Logo
You can add your own custom logo in seconds, thanks to our easy to use theme options. To begin, just head to Appearance > Customize in your WordPress admin area.
From here you will need to navigate to the Header Options, where you will find an area to upload your logo. For reference, these options will look similar to the animation below, however be aware the exact option may differ in your particular theme.
Retina Logo Support
Your theme theme of course supports a retina logo for devices that support them - you will find the retina logo upload area in the same place as the regular logo upload area. When supplying a reiina ready logo, you must ensure the filename is identical to your normal logo, followed by @2x
For example, if your logo is called my-logo.png, your retina logo must be called my-logo@2x.png
10. Modifying Fonts & Font Colours
To modify fonts & fonts colours, you'll want to install the Easy Google Fonts plugin, it's fantastic.
Advanced: for very specific font control, you can add additional selectors to the plugin if you need to. To do this have a watch of this video:
11. Griddr - Building your Homepage and Filterable Menu
Building Your Filterable Homepage
The process for setting up your new filterable homepage is quite simple (you can see this outlined in the video above) however ill also detail this here to ensure its easy to follow.
Step One - Add a SECTION block to your page and give it an id of 'masonry'
Step Two - Add a row (or several rows) to your section and split them into columns. Its these columns which are your content blocks and will house your text/images etc
Step Three - Give your columns a unique class, this will act as your filter so if you want a block to appear under 'About' for example, give your column a class of
about
You can then go ahead and add your block content as you wish.
Step Four - Head to Appearance > Menus and add your filterable classes to your menu. This is done via the Custom Link menu item type - so using the 'about' example above, if you wanted to add a filter for your About blocks to the menu, you would create a custom link like this
#about
Step Five - Now you have created your menu, you need to assign it to your homepage so it can be used to filter through your blocks - to do this, edit your freshly created page and use the Page Overrides provided
12. Griddr - Special CSS Classes
Griddr uses a number of special CSS classes for adding styling to your page sections/blocks. These are added to the column CSS class field, which can be accessed via your column settings (see gif below)
Here we will detail the available CSS classes and there uses
overlay
This class is used when applying an image background to a column, it gives the image a slight overlay to allow the text to have more contrast and increase legibility
box
Use this class to give a block a white background with dark text - great for highlighting certain areas of features
border
This CSS class gives a block a neat padding and border, see below for an example
double-height
If you want to show extra content or make a specific block stand out, this class can be used to create double height blocks with ease
Content CSS Classes
The theme also offers a CSS class which can be applied to content within a column, this is added to the content blocks extra class field
stick-to-middle
This class is used to have the content stick to the vertical center of the block, ideal when using background images or a contrasting colour bg for a block.
13. Griddr - Portfolio Overview
14. Griddr - Team Post Type Overview
15. Contact Form 7 Overview
Contact Form 7 is our recommended form plugin for WordPress. It is a simple but powerful form creator for WordPress. Here we will show you how to use Contact Form 7 to create and edit a basic form.
After Contact Form 7 is installed, you’ll find a new menu item in your WordPress admin area called Contact, here is where your forms and created and edited. From the Contact main screen, you will see your first contact form, its usually a default form called 'Contact Form 1' OR if you have imported the demo data for our theme you may see a few forms that we have made specially for you.
When creating and editing forms CF7 uses simple shortcodes (in WordPress these shortcodes are words surrounded by square brackets like “[” and “]”) - these shortcodes are generated via the 'Generate Tag' area (marked in red) and then placed in the form builder area (marked in blue) - you can also add your own HTML to the form for extra control.
16. How do I reorder categories/posts etc?
Sadly, by default, WordPress has no easy method built into it for taking control of things such as the order of your Posts, categories (Portfolio, Team, Classes etc based on your theme) - Thankfully there is a very handy plugin which can help - Intuitive Custom Post Order
To install the plugin, simply head to Plugins > Add New and search for Intuitive Custom Post Order - once installed, you will need to head to Settings > Intuitive CPO to set things up. Once there you will see the following screen (the items will vary depending on your theme)
Simply Tick the box next to the content you wish to control and hit save.
Now you can quickly and easily re-order your items by simply dragging them within the WP Dashboard - you can see this wonderful plugin in action below.
17. Theme Post Type Options
Our themes allow you to control the urls used for the provided post types (such as team, portfolio etc). The Post Type Options page can be found within Settings in your WP admin area.
By standard, the usual url for your portfolio items would be yoururl.com/portfolio - however, using the provided area you can replace 'portfolio' with whatever slug you wish to use! The same principal applies to other post types also, depending on the theme in use.
Once you have changed your slug you may recieve a 404 error when trying to access your items, to remedy this, simply head to Settings > Permalinks and hit save. This refreshed WP permalink settings and should resolve this for you.
Im seeing a 'stylesheet missing' error when trying to upload the theme
This means your uploading the wrong zip package. When downloading your theme you have the option to download the full package, or the installable theme itself.
We suggest to download the whole package, then unzip this to locate your theme.zip file (theme name will change based on your purchased theme.
Im setting a max_upload_size error when trying to upload the theme
Some hosting, especially budget shared hosting, may impose file restrictions for uploads to your WP site. In some cases, installing this plugin and work very well https://wordpress.org/plugins/increase-upload-max-filesize/ however if it fails to work then you will need to contact your hosts to they can make the necessary changes from there end as this is something we cannot help with from a theme point of view.
Where is my Visual Composer/Revolution license?
Premium plugins such as Revolution Slider and Visual Composer may request a purchase code during use. This code is used to provide direct updates and support from the plugins creator and as such is not required or supplied for use with our themes. Our frameworks have been carefully create to ensure your running the latest compatible version at all times, so you have no need to worry. Please note that we manually update our bundled plugins after thorough testing as some plugin updates have bugs that we are unhappy to ship to our customers, you will receive updates when we are happy with the plugin. If you truly require auto-updates from these plugins you’ll need to purchase a personal license, please note this is the same for each theme on themeforest that bundles plugins.
I cant import the demo data, why?
Some budget hosting such as godaddy etc are quite poor and offer little in the way of resources so a large task such as importing a whole demo and images etc can be a little too much for them. In cases like this, the 1st thing you should try is the Fallback method - it uses special plugins to lighten the load and helps in 99% of cases.
if the issue persists, then you will need to contact your hosts who can hopefully increase your servers performance to suit the task.
Im getting a 404 error when viewing my portfolio/team etc
WordPress is a rock solid platform in most cases, but sometimes, when working with a new theme for instance, it needs a little nudge to update all of its core settings etc. If your seeing a 404 error or such when trying to view your projects (or team members, clients etc - depending on your theme)
To do this, simply head to Settings > Permalinks and select 'postname' from the options listed - even if this option is already selected, hit save anyway (this is the nudge we mentioned earlier) - Once done, you should be able to view all your content with no issues.
Should any issues remain, this indicates an issue with your server (the theme has no control of this) so you will need to contact your hosts for further support.
My site is slow to load, why?
As you saw when viewing the demos of our themes, our themes are capable of being blisteringly fast, however you may ocationally notice your site is not loading as fast as you hoped – here you can find some tips for ensuring your new site loads as quickly as possible http://www.tommusrhodus.com/speeding-up-wordpress/
Iv received an email saying there is an update, what do I do?
Why are my page builder blocks not appearing on my blog page?
Basically the way WP works means that archive pages, such as blog categories, search results and the page you nominate to be your blog page under Settings > Reading are controlled by WP so any page builder (Variant, Visual Composer etc) can no longer be used as WP itself handles the page.
For this reason you will find options for you blog layout within the theme options (Appearance > Customize > Blog Settings) where you can pick the layout, title etc as you wish
19. How To Rate Your Theme
20. Theme support Policy
Hey There! Please Read The Following:
These Tickets are not for Customisation requests (theme modification, behaviour changes, moving elements, 3rd party plugin integration etc.) Any ticket relating to customisation will be politely forwarded to -- http://www.tommusrhodus.com/contact/ -- and then your ticket will be closed.
"style.css is missing" scroll to the bottom of this message for the answer.
I run support Weekdays 9am - 5pm GMT. You can expect a response within 12 - 48 hours, Monday to Friday unless there is a national holiday. Here is a list of UK national holidays: https://www.gov.uk/bank-holidays. Note that "bumps" to tickets put you to the back of my queue, be patient, every ticket is answered promptly.
Any issues relating to 3rd party plugins not recommended by the theme, theme customisations, or theme changes your client requires.
What counts as customisation?
If you want to change the appearance or functionality of the theme by editing or extending the theme's code, then that is customisation, and will not be supported through these tickets. Likewise if your client has a function request that does not exist in the theme, these tickets are not the place to have the theme extended for this.
You must leave a link to your site, if not we will ask you to do this anyway and it will result in a delay to your ticket.
Please be descriptive when leaving a ticket, use screenshots if possible, "doesn't work" is not an acceptable descriptive term and you will be asked to explain further.
Disable all non-theme-recommended plugins, undo any code changes, and ensure you're using a default, unmodified version of the theme files. You'll find a lot of the time this fixes your issue.
Tickets without a validated purchase will not be answered. Properly validate your purchase.
If you have a modified theme, or are using a child theme for modification, we cannot help with bugs. Please present bugs to us within the default, unmodified theme, and we will help every time!
Please note Envato's Licensing covers 1 URL per 1 purchase of a theme: http://themeforest.net/licenses/regular - ticket profiles covering multiple URLs with 1 license code, will be stopped until the remaining licenses are provided.
Cheers & Thanks again for your purchase!
A quick point on theme support: All of my themes are tested and thoroughly scrutinised by themeforest support staff and are confirmed 100% working, if you're having any issues you should be 99.9% sure it's a user error, or a bug I will be happy to fix with you. With this in mind, please keep your tone calm & professional, you will always get the same from me. Any tickets left with vulgar language, or with threatening, unprofessional language will be promptly closed and/or deleted. All tickets left with a calm, professional tone will receive awesome support, as always.
"style.css is missing", no it isn't, one of two things has happened and I can help you with both:
You've bought a HTML template. Was your purchase under $17? Then you've not bought a WordPress theme, you've bought a HTML template, contact Envato support, they can help: http://support.envato.com
You've uploaded the main theme .zip, instead, unzip this, inside you'll find documentation and another .zip called themenameWPTheme.zip <= this is what you should be installing.
