Advertisement
  1. Web Design
  2. WordPress Themes
Webdesign

So You Bought a Website Theme; What’s Next?

by
Length:LongLanguages:

In this article I’ll explain how to understand what a website theme can do from its demo, how to put the demo through its paces, which important pre-sales questions you should ask, and how to work with a theme the right way!

We’ll use WordPress themes to demonstrate most of the points, but most of the principles can be applied to website themes of all kinds.

Choosing the Right Theme

Let’s take a step back for a moment and talk about actually choosing a theme. This is no mean feat. On Themeforest alone these days you’ll find around 50,000 templates to browse through!

It all starts by understanding your project requirements. Ask yourself what category your project should be listed in; is it a corporate website, or maybe entertainment, or is it an online store? Perhaps it’s a combination of several categories? We’ll talk about which categories might apply to your website in a moment.

Once you’ve identified your project’s category, list your project’s most required features, as this will help you narrow down the right theme.

Tip: Check out the WordPress theme roundups we regularly publish here on Tuts+. You’re certain to find a roundup to suit your purpose!

Working With Marketplace’s Search and Filter

Go to Themeforest’s All Categories page to get an idea of the categories available: 

Themeforest categories
Themeforest categories

For now, forget about “Best sellers”. These are (obviously) great themes from very successful theme authors, but I recommend you first try to find the right theme using the search and filter tools. 

Best sellers

Most of the “Best sellers” themes are multipurpose, meaning they’re suited to a wide range of categories, but can’t excel at each one. Saying that, if you don’t have time, or your project category is multipurpose, don’t waste your time–buy one of the best seller themes, you can’t go wrong; they are really great themes!

Select a category from the list, for example WordPress > Corporate > Business. Eventually you’ll have whittled your way down all available nested categories, but your search will still be incomplete. So from categories we will switch to tags, selecting at least three tags that best match your project requirements, for example

Order by

With so many search results we need to make sure we surface the ones which are most likely to give us what we want. For now forget about the Sales, Rating, Price, and Date Added filters. Instead switch the order to Newest–we may just unearth some brand new treasures!

newest

Now concentrate on the Compatible With filter. For example, if you plan your website to be multilingual you will need the WPML or Polylang plugin (if a theme is compatible with WPML, it will automatically be compatible with Polylang). 

Or if you plan to have an additional shop you will need to choose WooCommerce or WP e-commerce plugins. Select the plugins that will be required for your project.

theme compatibility

The Price is Right

At this point identify up to five themes that you like, concentrating largely on design. Bookmark these items using the handy favorite feature on Themeforest.

favorite

To narrow things down further let’s look at the rating and price. Set rating to 4 stars and higher.

Choose up to five themes that you like, and again concentrate on design. Bookmark these items.

Next we have the price filter. The vast majority of themes on Themeforest aren’t priced higher than $60. New items, however, often have a so-called intro price which can be up to 40% off the regular price. If your budget is limited I suggest you filter items that best match your budget (though don’t concentrate on budget only).

Testing the Theme Demo

Examine your favourite theme demos with different browsers and different screen sizes to test the browser support and responsive design. Remove items from your list that have eye-catching issues, then check the remaining items with a Markup Validation Service. And again, remove items from your list that have multiple errors (skip the warning messages). 

Performance is also something you might want to check, especially if the theme author uses performance as one of the theme’s selling points.

Take a closer look at the theme’s elements–if anything confuses you it’s time to submit a pre-sale question.

Asking the Right Pre-Sales Questions

Create a pre-sales question list and ask each theme author. This will give you the answers to your questions and let you know the average response time. You are free to ask any questions, but to save you and the author time choose the three most important short questions, like:

  • Can I upload custom fonts?
  • Are you free to use any icons with any icon based elements?
  • Can you change the header layout, or is it predefined?

Most of the time you will work with the theme by yourself, but if something goes wrong, or you mix something, or can’t find a certain option, the only person who will know the answers is the theme author. It’s therefore important to build a good relationship with the author.

Installation and Configuration: the Right Way

After purchasing your theme you will get access to the files via https://themeforest.net/downloads. Download the full zip file. Many customers make a mistake here by directly uploading the whole downloaded zip and getting upload error (in WordPress and other CMSs). The theme pack contains not only the theme files, but often PSD files, help documentation, snippets and so on. So make sure when uploading a theme you use the right installable zip file. 

Check out How to Install Your ThemeForest WordPress Theme for full details.

Activate the theme and follow the instructions. Most of WordPress themes will come with linked plugins (like Revolution Slider, Visual Composer, Contact form 7) and addon plugins that contain all the custom functionality that you see in the theme demo. So before using the theme’s front-end, make sure you install all the required plugins. For full instructions on how this works take a look at this free course:

Having done that, install the sample demo that comes with the theme. Most themes come with step by step installation instructions, so follow the steps provided. Once completed check your website’s front-end. Make sure it doesn’t show any errors, that the links work, and that there aren’t any broken images. 

Note: If something goes wrong I recommend you reset WordPress to its default state using this plugin (skip user and user_meta tables). Then go to Settings > Media and uncheck the checkbox Organize my uploads into month- and year-based folders. Try uploading the sample content once more.

If your site contains absolute links (not relative to your domain) I suggest making a global search/replace of the domain with this plugin.

Switch to Using a Child Theme

No matter how customizable your theme is, at some point you will need to make styling corrections, modifications, and overwrite the theme files. You can do all of this within the core theme files, but by doing this you’ll no longer be able to update the theme. For this reason you should use a child theme instead; a theme which piggybacks the main (parent) theme and contains only the files which need to be different from the originals. 

If your theme comes with a child theme, activate that one after you’ve installed the parent theme and required plugins. If your theme does not provide child theme, you can easily create your own using the tutorial above, or with this plugin.

Designing the Right Way

So many websites are created with beautiful themes, but still look awful! The main reason is that the website owner fails to follow the established theme colors, typography, spacing, sizing, and alignment rules.

So before creating your own pages and layouts take a closer look at the theme demo. Pay attention to how colors are used in the design, what the primary and secondary fonts are, and how they’re used. Possibly most importantly, make note of the spacing! Look at how much space is used in the design, the padding of rows, the margins of headings, the visual relationship between sections.

To better inspect the theme use your browser’s developer console, for example in Google Chrome press F12, or right-click and Inspect the element.

Overwriting Theme Code

You should at least be familiar with CSS and HTML to successfully overwrite parts of your new theme.

Here I want to show how you can overwrite styles, shortcodes, even full theme/plugin files.

CSS

To overwrite any style first copy the original style to your child theme, or in WordPress go to Appearance > Customize > Additional CSS (a feature that has existed for years, but not many users know about it). At the end of each rule you can add the !important keyword to give force your custom style. You might prefer to avoid using the !important keyword in which case you can add a parent element to your custom css, or increase the specificity some other way. Take a look at cssspecificity.com for an amusing guide to how this works.

WordPress Shortcodes

Sometimes you will need to overwrite a WordPress shortcode. This can be done without modifying the core theme or plugin files, but you will need to remove the shortcode and add it again with your own modification. Let’s say you have a shortcode [video], and you want to modify the output of the shortcode. Begin in your child theme’s functions.php by adding an action with the after_setup_theme hook, which is called when a page is loading, after the theme is initialized:

In the my_child_theme_setup function we’ll remove the original shortcode and add a new one:

Now we just need to define what happens in that shortcode. You might want to paste in the contents from the original shortcode, so you can modify them accordingly:

Testing

Even if you examined and tested the theme demo thoroughly, after you complete your website you should double-check it with the following points:

  • Make sure the website has no PHP errors and warnings. Enable the wp_debug from wp-config.php and test each page.
  • Check your site validation for styles and HTML using the Markup Validation Service.
  • Check your website performance using Pingdom Website Speed Test. The results here will reflect the website as a whole, including the hosting, the content, not just the theme files.
  • Test your website on different browsers and different screen sizes and devices. Make sure no critical errors are present. If you find anything that you think comes from the theme, ask the theme author to make the necessary corrections (they will want to know if something isn’t right with the theme!).

Optimizing and Maintaining Performance

To take your website to the next level performance-wise you should consider using a caching and image optimization plugin, my personal favorites being WP Super Cache and Smush Image Compression and Optimization. These two combined will earn you up to 200% optimization and load improvements.

You should also use a backup system like updraftplus or vaultpress so that any mistakes made when making changes or updates can be reversed.

Working with Theme Support

A theme’s author is your new best friend. Whenever you have questions, feel free to ask for support through the author’s preferred channel, whether that be through the comments on Themeforest, or a support ticket system. There are no silly questions, as only the theme author truly knows how the theme works. Saying that, please do not panic if you don’t get an immediate answer, as different authors work in different time zones. Generally speaking, the maximum gap to be expected between question and answer is 24 hours. Theme reviews will usually feature the level of support, as it’s a key part of the theme-buying experience.

Note: as an Envato customer you’ll have access to the Envato forums. Here’s you’ll find customers, theme authors, and moderators alike comparing notes, sharing advice, and asking questions. Join in!

Officially support will not include customization or modifications, it will only include general questions and bug fixing. However, if you build a good relationship with the theme author, give the theme in question a deserved rating, I guarantee that you will get thorough and professional support.

Conclusion

That wraps up this guide! You’re the proud owner of a new website theme (be it WordPress, another CMS, or for a static website), so go ahead and enjoy it! If you have any tips of your own, or any questions, please leave them in the comments.

More Resources to Help You Buy the Right Website Theme

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.