How to design WordPress websites using themes - Properly

August 24, 2020

In the last 7 years or so, we have designed a lot of websites using an existing WordPress theme. We have a well-established process for using themes in the best possible way. We work with themes rather than against them, designing robust websites that are easy for our clients to maintain in future. You can see this in MySimpleSite, our affordable web design service - and also our affordable WooCommerce service, MySimpleStore.

I'm always surprised by how few people know how to use themes properly. In this post, I will share our insights into the best possible way to use popular WordPress themes.

Study the theme demo

When you choose a theme, you always look at the theme demo. If it looks good, you buy the theme. You naturally want your website to look like the demo.

With this in mind, it's incredible that most people never check the demo again once they've bought the theme!

The theme demo is the best possible implementation of the theme. Study it carefully while you're setting up your website. Look at what makes the demo so effective and aim to replicate this for your site.

Yes, you will tailor the theme to your business - for example by using your own colour scheme. However, do this in a way that respects the essence of the original design. If you depart too far from the theme, you end up reinventing the wheel and the design falls apart.

For example, the Mallow Maid and The Keys websites each have their own identity and colour scheme. However, they build on what is effective about the demo of the theme they are both based on.

Logo design

Be prepared to change your logo to look good with the theme. Most WordPress themes are designed with shallow header areas and the demo sites have very simple logos that don’t require much vertical space. A lot of companies have taller and more complex logos that don’t fit into this sort of space.

Some WordPress themes have flexible header layouts. They might allow you to have a standard header layout with the logo on the left and the menu on the right, or if you have a bigger logo then you can have it centered above the logo. This is fine, but bear in mind that it will make your header much taller which will push all your other content downwards. Your visitors will have to scroll down to view the content on each page, which might increase your bounce rate. You can minimise this by making sure that the header makes it obvious what your website is about, which will encourage people to scroll down. However it’s better to have a smaller header and adjust your logo accordingly.

By the way, please don’t just shrink your logo to fit the available space. Think creatively and redesign the logo to fit.

For example, we redesigned the Youd Andrews logo as follows to work better with the WordPress theme we were using. The new logo makes much better use of space and works better with a shallow website header.

Write your website content with the theme in mind

The best way to use a WordPress theme to its full potential is to write the content of your website with the theme in mind.

Don’t write a long Word document and then paste it into the page. Instead, look carefully at each page of the theme demo site. Look at the various styles and layouts that are available in the theme. Think about which ones would be a good way to present your content.

You can then write the text for your website and find images that will work well with the theme. For example:

  • The theme might have a nice 4-column layout for displaying unique selling points or features with an icon over each point. Think of your 4 main selling points or features. Write text to describe each one that is exactly the same length as the text on the theme demo site.
  • If the theme has built-in pricing tables then don’t list your prices within a bullet list, as many less effective websites do. Look at the pricing table in the theme demo and add similar information about your own pricing.
  • If the theme has a 3-column layout with an image in each column and a title and short paragraph underneath then use this on your homepage to signpost visitors to the different areas of your site. 3 main services works best with a column for each service, linking to their respective landing pages. If you have 5 main services then use this layout to create 2 rows, with 6 boxes in total. You can use the 6th box for ‘About Us’ or ‘Contact Us’ and it will look much better than stopping at 5.

Choose the right images

Images can make or break a website.

Look at the images on the theme demo site. What makes them work with the overall design? Do you intend to use similar images on your website? If not, you might struggle to make your website look as good as the theme demo.

If you can't be bothered to get your images right, avoid having them at all. You can achieve great things with blocks of bold colour and alternating backgrounds. Advertise a Job are a good example of this.

Optimize your website images

It's best to manually crop and size your images before uploading them to the WordPress media library. To find out the ideal size, visit the theme demo and right click to download the images.

I understand that not everyone knows how to size and format images. If you're not planning to edit your images manually before uploading them, install these plugins to prevent them from slowing down your site:

  • Smush Image Compression and Optimisation - compresses the images as you upload them to WordPress for faster page load times.
  • Imsanity - Automatically reduces the actual size of your images in case you accidentally upload anything huge. If you're using images from your mobile or digital camera, they're likely to be far bigger than you need for a website. This plugin reduces the size in the background, when you upload them.

Our web design services include sourcing free professional images that are licensed for commercial use. Get in touch if you need help creating a website with effective images.

Vertical spacing

A major reason why most WordPress theme demos look so good is their use of vertical space. Most of this doesn't happen automatically when you design a website using a theme - you have to add the correct spacing. If you forget this then the vertical rhythm of your website will be disrupted which has a subtle but important effect.

Pay attention to:

  • The amount of vertical space at the start and end of each section. This should be consistent throughout your website. The latest web design trends favour large gaps between sections, for example 80 pixels or more.
  • The space after each type of text formatting. The best way to check this is to create a sample page containing all the available styles - paragraph text, Heading styles 1-6 etc. Mix and match the different styles and make sure all the spacing is correct.
  • Line height - i.e. the space between each line of text. It's particularly important to check the line height of your headings. A heading may fit onto 1 line on a full-size screen and drop onto 2 lines on smaller screens. If you forget to check what your website looks like on other screen sizes, you may not notice that the lines are too close together.
  • The space after bullet and numbered lists - a lot of themes forget to add styling for these, so if you add a paragraph of text immediately after a list then it doesn't look right.

Choose 1 method for adding vertical space, and stick to it!

To sidebar or not to sidebar?

It may not be the ultimate question, but it’s important to consider whether each page will benefit from a sidebar (i.e. a left and/or right column). Do this before you start planning each page, not as an afterthought.

Make your decision by weighing up the following factors.

Benefits of having a sidebar

  • Easy to add calls to action – A sidebar creates a logical place for a call to action. For example, you can create a widget with a ‘Contact us’ or ‘Sign up today’ or ‘Join our mailing list’ button, depending on the aims of your website.
  • ‘About us’ widget – If you have a sidebar then you can include an ‘About us’ widget introducing your website or company to visitors. This gives them an overview of what you do, wherever they enter your site.
  • Complex navigation – If your main navigation menu is at the top of your website then a left sidebar is a good opportunity to add extra levels of navigation. For example, you might add lists of other pages in that section that may not be linked to from the main menu.
  • Product filtering – If you are designing an e-commerce website – for example using the WooCommerce plugin – then a left (or even right) sidebar is the best place to add filters. These allow your visitors to refine their search and find the products they’re looking for.
  • Shopping cart widget – For e-commerce websites, your visitors need to be able to easily access their shopping cart. How else will they complete their purchase? You can add links to the cart to the website header, but some websites also like to display the contents of the shopping cart in the right hand column.
  • Quick contact form – It’s well documented that people will be more likely to contact you the easier you make it for them. Adding a contact form to the sidebar each page of your website achieves this goal better than just linking to the contact page.

Benefits of full-width layouts with no sidebar

  • Modern design - The latest web design trends favour websites with full-width layouts. For example, pages divided into multiple sections with different backgrounds as you scroll down. If you have a sidebar then the page will probably look less stylish, so only have a sidebar if you actively need one.
  • Distracting - People like clean websites without distractions.
  • Confusing calls to action - Sidebars pull the reader in multiple directions. As part of your website content strategy, you want to lead each visitor to one desired course of action. This may be to sign up to your newsletter, buy a product or make an enquiry. Whatever the desired action, make sure the sidebar doesn't detract from it.

If your sidebar needs to include important navigation elements then you should definitely have one. If not, think more carefully and don't just add a sidebar by default.

In theory, a well designed website should incorporate all the information that you'd normally add to a sidebar - without a sidebar! By this, I mean that elements such as 'About us' and 'Newsletter signup' should flow naturally within the main content of each page. The header and navigation menu should make it clear who you are and what you do. People are more likely to sign up to a newsletter if you include clear calls to action within your pages or blog posts, not placed separately in a sidebar. Floating social sharing buttons can be added to the side of your pages, without needing a sidebar.

Make it SEO-friendly

I know this post is about designing WordPress websites rather than SEO. However, you should always design websites with search engine optimisation in mind. What's the point in designing a website if no one will ever see it!

With this in mind, it's important to have a basic understanding of SEO. This is because it's easy to accidentally mess up your SEO, either through missed opportunities or by doing things that actively damage your rankings. For example:

  • NEVER embed text within an image, as search engines can't read it. Add all your text directly to your website, not in an image.
  • Use an SEO plugin such as Yoast SEO, and add relevant keywords to the page titles and descriptions. Do this in a natural way that doesn't look spammy.
  • Avoid making silly mistakes that slow down your website can damage your SEO, such as adding huge images or unnecessary plugin. Performance is now a major ranking factor.

For more like this, I recommend Yoast's Introduction to SEO tutorial.

If search engine rankings are important to your business and you're still not confident with SEO, then I recommend an ongoing SEO service. You can still set up your own website using a theme, as our Standard and Ultimate SEO packages include optimising your website for you.

Take your time!

If you think that setting up a WordPress theme is a matter of installing a theme and pasting in your content, then you shouldn't build your own website!

Whether or not you use a theme, designing a professional WordPress website takes time. Every part of your site should be carefully crafted and there for a reason.

We've been designing WordPress websites using themes for over 7 years. For a simple website, we spend a minimum of 2 days setting everything up and adding the content. It takes much longer for bigger or more complex sites.

Don't kid yourself that you can buy a theme and get your website looking great in an afternoon! If you don't have time, get us to do it for you under our affordable web design service.

Finishing touches

Most WordPress themes (and WordPress itself) come with lots of finishing touches. You can use these to design a more effective website. If you forget about these elements then the website will have less impact. For example:

  • Favicon – Add a site icon or favicon. This should be a small version of your logo that will appear in the tab at the top of your visitors’ browser window and when they bookmark your site. Design a favicon that looks good in this format. Don’t just add your entire logo, as it won’t be readable. If your logo incorporates a graphic then the graphic might make a nice favicon. If your logo is a word then use the first letter as the favicon.
  • Sidebar length – If any of your pages or post have a sidebar (left or right column), go through each page manually and make sure the sidebar is never longer than the main content. This looks messy and suggests poor attention to detail. Use the Display Widgets or Jetpack Visibility WordPress plugin to hide some of the widgets to make the sidebar the correct length for each page.

Website maintenance during the project

It’s important to keep your website properly maintained while you’re still working on it. Most themes and plugins are updated regularly, so don’t ignore the update notices in the admin. Install updates on an ongoing basis.

Don’t forget about updates that you may not be notified about from the Dashboard. For example, you have to manually check for updates for most premium WordPress themes (unless you bought your theme directly from Plugins that come bundled with the theme such as Revolution Slider or Visual Composer often don’t display update noticed, but it’s just as important to keep them up to date.

Create a fantastic WordPress website

Used properly, off-the-shelf WordPress themes offer a unique opportunity for a cheap but incredibly professional website. Use the tips in this article to design a website that is just as good as the demo site that made you want the theme in the first place.

And if you can't be bothered, check out our affordable WordPress web design service - MySimpleSite. Or the WooCommerce version, MySimpleStore. We offer theme-based websites for affordable prices, with a free setup option. Choose between a range of excellent themes, and go for a simple brochure site or fully fledged WooCommerce online shop.

Please share your thoughts...

Your email address will not be published.