There are a couple of different approaches to choosing a WordPress theme:
1. Try to find a theme that looks just how you want it straight out of the box (or with a few small tweaks). Then just add your own text and images
2. Choose a plain looking, but flexible, theme as a starting point and customise it to look just as you want it to.
I favour the 2nd approach, but that doesn’t mean it’s right for everyone.
My favourite theme, which tends to be my first choice for any WordPress project, is GeneratePress. The theme itself is free but, to get the most from it, you need the Premium plugin, which costs $39.95 for the first year (for use on unlimited sites) with a 40% discount on annual license renewals [updated price: now $49.95]. Note that this is an affiliate link so I may receive commission for refering you. But I would happily recommend GeneratePress even if I wasn’t an affiliate. The theme and plugin together provide an easy way to customise numerous aspects of a website. They are designed to be lightweight and the level of support given by the developer, Tom Usborne, is amazing – he frequently answers questions personally in the GP Facebook group. To put it simply, I trust Tom and his team to provide a solid, dependable base for building my websites.
The other theme that I see recommended over and over again is Astra. Again there’s a free version, but Astra Pro provides more features for $59 in the first year, with a 20% renewal discount. There’s currently a lifetime option for $249 and an agency bundle (with extra plugins and premium sites) for $249 per year or $699 for the lifetime option. Astra Pro can be used on an unlimited number of websites.
Out of the Box
As you’d expect, these themes tend to be pretty basic looking straight out of the box. Here are some screen prints with just a simple menu, a photo, some dummy text and a search widget added to the sidebar.
The free theme allows you to choose to hide or display the site title and tagline and to upload a logo and site icon.
If you do as I’ve done above, then the logo appears under the site title. The GP documentation does provide instructions for adding code to put the logo next to the title, but recommends that you use a logo with text incorporated into it. [UPDATE: In June 2019 the option to “Place logo next to title” was introduced.]
The free theme puts the theme name in the footer, but if you want to remove it then you can find instructions in the documentation telling you how to do this.
The Premium plugin gives you the option of adding your own details to the footer.
Again, the free theme has options for showing any of the site title, tagline and logo as well as a site icon, and you can choose to show the logo and title in a line.
By default, the Astra theme name appears in the footer bar, along with the site name, but you can change this information, even in the free version of the theme.
It appears that you have to choose to display either the site title and tagline or a logo, so I used the logo version with text. There are sliders to change the logo size, but only upto a maximum width of 500px.
The information in the footer can be altered.
Strictly speaking, it isn’t difficult to customise a website’s colours regardless of the theme you are using, just by adding the right CSS code, but the object of this exercise is to see how easy these themes make it to change a site’s appearance without using code.
The free theme has very few options for changing colours without using code. [UPDATE: There are now also a handful of “navigation preset colours” allowing you to change the menu bar to white, grey, red, green or blue.]
The free theme provides base colour options, i.e. a theme colour for elements such as buttons and colours for links, text and the overall background. You can also change the colours of the footer bar and footer widget area.
Astra Pro’s Colors & Background Module adds a lot more options including the header, navigation menu and headings.
The free theme includes quite a lot of colour options, spread around the various areas of the customiser – which can make it a bit tricky to find them.
Colours can be changed for elements such as page titles, forms, buttons, the top bar, header, navigation menu, sidebar, widgets and footer.
Again, this is something that can be altered with code or a plugin, but I wanted to see what font options are built into the themes I’m trying out here.
The free version of GP allows you to choose from several system fonts or any of the top 200 Google fonts – but the same font choice will be applied to all the elements on your website.
The Premium plugin gives much more control, enabling you to choose separate fonts (and their size, weight etc.) for numerous different items, and to specify a different size for headings on mobile devices.
The free Astra theme does allow you to pick different Google fonts for the body text and headings, but not for elements such as the navigation menu.
Different heading sizes can be chosen for display on tablets and mobile phones.
Astra Pro’s Typography Module extends the choice to include, for example, menus, buttons and widget titles.
I wasn’t surprised to see that the free OceanWP theme provides a lot of options for choosing fonts (including sizes, weights, line height etc.) for a great many elements on a website.
This is yet another case where it’s fairly straightforward to change a site’s appearance with a bit of simple CSS code. But theme options can make this even easier.
You’ll need the Premium Plugin in order to see background options in the customiser.
The free version of the theme has options for changing the overall background of the website, as well as the footer widget area and footer bar.
Astra Pro’s Colors & Background module extends this to other areas.
This is one case where the free theme does not seem to provide options, apart from the overall background of the site and a header background image. In fact, I couldn’t see a paid extension for adding background images either, so I think you’d need to use CSS code for this.
Everything I’ve discussed so far involves using the customiser to make it easy to change aspects of a website that could really have been altered with CSS code without too much difficulty.
The format and position of the navigation menu is not so easy to change on most themes and this is where the strengths of the particular themes I’m discussing here really start to become more apparent.
The primary navigation menu’s default position is under the header. However, even the free GP theme has several options for displaying the menu – including moving it into one of the sidebars.
The Premium plugin adds more features.
There is a sticky menu (meaning that the menu stays at the top of the screen as the visitor scrolls down the page.)
You can create a secondary menu to display at the top of the screen.
Enabling the slideout navigation adds an extra hamburger menu icon to the primary navigation bar. When visitors click this, the slideout navigation appears. This can contain a menu, but it is also a widget area.
The free version of Astra allows you to display the menu in 3 locations within the header. It also has a custom menu item which I’ve used to add a widget with a Facebook link in my example below.
There’s also the option to add a footer menu.
Astra Pro adds other features such as a sticky header and transparent header.
OceanWP has both a top bar and a footer bar menu in addition to the main menu.
The free OceanWP theme includes a range of hover effects for the menu.
There’s a Sticky Header extension available for purchase and you can also buy a Side Panel extension which could be used in a similar way to GeneratePress Premium’s slideout navigation.
The free theme includes various layout options.
You can change the width and layout of the content.
The header, navigation and footer can be centred and contained, so that they do not stretch across the full width of the screen. The number of footer widgets can be set to any number between 0 and 5 – I’ve chosen 0 in my example below.
The number and position of the sidebars can be set globally (for the site as a whole) and can be changed when editing individual pages.
When editing individual pages, it’s also possible to change the number of footer widgets (so this can differ from the default global value) and pages can be set to full width, which is useful when using a page builder plugin as you may require sections spanning the full width of the screen.
The GP Premium plugin is required in order to disable elements on the page …
… so I can finally get rid of the word “Home” without using code. [Update: from GP Premium 1.7 layouts can be set globally using the Elements module, and can then be applied to selected pages.]
GP Premium’s Spacing add-on provides options for adding padding to various areas and changing the height of the menu.
Astra’s free theme has options to make the content boxed or full width, and to change the position of, or remove, the sidebar. This can be done globally or on a page-by-page basis.
When editing a page, I can also choose to disable sections, including that “Home” page title.
There are a whole load of layout related options included in the free theme. Some of these can be changed globally and there are also lots of options that can be set for individual pages, including disabling the page title and even showing different logos, menus and sidebars on different pages.
There are settings for changing the padding of various sections throughout the customiser.
GP has an option for two sidebars, widget areas in the header, footer bar and top bar, and up to five footer widgets. The Premium plugin is not required for this.
There aren’t quite as many widget areas in Astra. It has one main sidebar, one widget area in the header, two in the footer bar, and four in the footer.
The Astra Pro Footer Widgets module adds a choice of 7 footer widget layouts.
This theme gives you right and left sidebars, a special search results sidebar and four footer widget areas.
There’s an interesting feature, where you can set any of these widget areas as the sidebar on an individual page. For example, you can add widgets to Footer 4 but only display three footer widgets on your site, then specify that Footer 4 is used as the sidebar on a specific page.
What’s more, OceanWP has a free Custom sidebar extension which can be used to make as many different sidebars as you require. You could use this to put different sidebars on individual pages without using up one of the footer widgets as I described above.
The free Ocean Extra plugin gives you some new widgets such as the “About Me” one, that I have added to the default Right Sidebar in the example below.
The default blog layout is simple: the post title, date and author, a featured image, the content of the post, and the category and tags.
Without the Premium plugin, apart from the choice of whether or not to have a sidebar, the only blog layout option is between displaying the full content or an excerpt. GP Premium provides much more customisation.
Date, author etc. can be turned on or off and there’s an infinite scroll option.
The size and position of the featured image can be changed.
Posts can be displayed in columns. You can set the number of columns and you can choose a masonry grid layout (shown below).
It’s also possible to feature the first post by making it larger than the rest.
As I found with other features, Astra does offer a few more options than GeneratePress when the free versions of both are compared. The amount of information displayed can be changed and the various elements can be dragged into a different order.
Astra Pro’s Blog Pro module offers similar features to GeneratePress Premium – including grid and masonry layouts and highlighting the first post by making it larger. There’s also an option for formatting the date.
The blog has three styles: large image (which I’m not too keen on as it upsizes images, which affects their quality), thumbnail and grid. Choosing grid gives you extra options including whether or not to have a masonry layout, which elements to display and what order to show them in.
I couldn’t see any blog specific extensions to purchase, except for the Posts Slider.
GP Premium headers are a brilliant way to put content at top of pages, including category archives. Headers can be assigned globally or to individual pages, as in the example below, where I have set up a full width hero image to use on the homepage. I have snuck in some html here to improve the style of the text, but you could do without this.
There are a number of interesting additional features here that I have not demonstrated, such as being able to insert template tags (e.g. the post title) and being able to have a different logo on the page where your header is used.
[Update: from GP Premium 1.7 the Header Element replaces, and improves upon, the old Page Header module.]
As I don’t have the Pro version of Astra, I wasn’t able to try out the Page Headers module, but the documentation suggests that this is also a powerful feature.
The OceanWP documentation recommends that you use a page builder plugin to build templates for your custom headers. However, for this quick test, I just used an image and the logo and navigation shortcodes that are provided.
Custom headers can be applied to individual pages.
Hooks enable you to add your own content and code that will be inserted at specific points. These can be very powerful. I’d guess that most people reading this article would feel the topic is too advanced for them, but it’s good to know that the possibility is there if you need it.
The Premium plugin provides numerous hook positions, including before and after the header, entry title, content, footer and sidebars. One of the things I like about GeneratePress is the documentation, which is always a good place to look when trying to understand how a feature works. The documentation includes a list of hooks and a visual guide to hook locations.
[Update: from GP Premium 1.7 the Hooks Element replaces the GP Hooks module.]
Here’s an example showing how a shortcode, generated by the useful WP Show Posts plugin, could be used to display the thumbnails of selected posts at the bottom of each single blog post.
Astra Pro has a hooks option as part of the Custom Layouts module. There is also a free Astra Hooks plugin, which enabled me to add actions in the customiser. I couldn’t seem to add conditional filters with the free plugin, which meant that, with my shortcode example, the featured posts appeared at the bottom of every page and blog post, not just on single posts.
Hooks are available with a paid OceanWP extension.
The free theme also has an interesting feature – when editing an individual page, shortcodes can be displayed in various positions on the page.
At the start of this article, I pointed out that the themes I’m discussing do need some customisation to make them look attractive. If you aren’t great at design, or you struggle to decide on page layouts, this could be quite daunting.
If you are finding the layout of individual pages to be a challenge, then it might be worth looking into page builder layouts (see below), which could be used with any of the themes featured in this article.
However, the three themes take this further, each with their own approach to helping you get a new site up and running.
Please note that I am not advocating this method of website building. Personally, I’m too much of a control freak to want my site to be built by someone else, but I think that these pre-built pages and sites could be useful tools in the right circumstances.
UPDATE: This article was originally written before the introduction of the WordPress block editor (a.k.a. Gutenberg). The information I’ve given above, about customising colours and so on, is still relevant. The suggestions below should still work, but it is now much easier to layout pages than it used to be, as I’ve described in my articles “A Simple Page Layout With GenerateBlocks” and “A Simple Page Layout with the WordPress Block Editor“. I’d suggest you check them out before diving into using one of the following methods.
Page Builder Layouts
Page builder plugins, such as Beaver Builder and Elementor, enable you to drag and drop rows, columns and modules onto a page. It’s also possible to obtain ready built layouts for various types of page.
Here’s an example using the free Beaver Builder Lite plugin and the Ultimate Addons for Beaver Builder plugin ($69 for 1 year with a 40% renewal discount).
As well as a range of Beaver Builder modules, UABB gives you over a hundred templates, including several that are intended for use on about pages.
I installed a template that seemed appropriate for my gardening website, and then it became available for me to use on my about page.
Using the template as a starting point, I could for example, change the words, add or delete modules, use my own photo (from microstock site Dreamstime, in this case) and change the shade of green to one which matched my branding.
GeneratePress Sites are available only with the Premium plugin and are described as “importable demo sites to kickstart your next build”.
As I write this article, in early May 2018, GP Sites were launched only a few weeks ago and there are just 22 to chose from. The sites have been contributed by several different developers. Some are based on either Elementor (free or Pro) or Beaver Builder (Pro), and some do not use a page builder plugin.
Sites are far more extensive than the layouts I discussed earlier; they import plugins, change settings, add CSS code, pages, posts, menus and (in some cases) contact forms.
I decided to try the Zeal site, which uses the free version of the Elementor plugin. The dark colour scheme and overall design may not have been a great fit for my gardening test site. It’s likely that in the months and years to come it will become easier to find a site that suits your brand without too many changes.
Importing the site turned my own website into an exact copy of the preview, which I could use as a starting point for my new website.
The hero image on the homepage was a GP header, so I changed the featured image and text.
I could use the customiser to change some of the colours etc. on the website.
But in order to change the colour of certain little details, I had to delve into the additional CSS.
Most of the content could be edited using the Elementor page builder to swap out the dummy text and images. I believe that colours of buttons and dividers would have to be altered individually as the content of each module was changed.
I feel that if design is not one of your strengths, then GP sites could be a good way to build an attractive website. Inexperienced users may find it helpful to have a site already set up for them with pages, menus, contact forms etc. already in place – but could find it challenging to change certain aspects of the design. It helps to have a bit of knowledge about Elementor / Beaver Builder and about GeneratePress – particularly how the headers feature works.
My attitude is that it’s best to keep things as simple as possible and use a page builder plugin only if there’s a real benefit to it. The Elementor and Beaver Builder GP sites look impressive, but if you aren’t already a fan of one of these two plugins then you may find it easier to use one of the non-page builder sites. These use premium GeneratePress features (such as sections and headers) and, in some cases, use a couple of other excellent plugins by Tom Usborne – Lightweight Grid Columns, and WP Show Posts.
The Catalyst site uses GP headers, GP sections and the Lightweight Grid Columns plugin. Personally, I find this plugin to be a quick and easy way to add columns – although non-coders might panic (needlessly) at the sight of its shortcodes.
Most of the colours in this site can be changed in the customiser.
GP Sites are still in their infancy so it’s likely that in future there will be a far greater range to choose from, and there may be improvements in the way they work.
Astra sites have been around for longer than the GeneratePress equivalent and there is a larger selection to choose from, although some of them require the Astra agency bundle. However, the free Astra Starter Sites plugin enables you to import certain sites with just the free version of the theme.
All the sites are based on a page builder plugin, either Elementor or Beaver Builder, and it isn’t necessary to have the paid versions of these. UPDATE: Gutenberg (i.e. block editor) starter sites are now available too.
I was able to find a free site that seemed perfect for my gardening test website. It automatically installed some free plugins…
… and then importing the demo content added pages ready built with Beaver Builder lite.
Because I was using the free version of Astra, there were limits to the extent that I could change colours via the customiser.
But it was easy to add my logo and to use Beaver Builder to change the content of the pages. I could have added other modules (provided by Ultimate Addons for Beaver – lite) or widgets from the SiteOrigin Widgets bundle.
I was impressed by how easy it was to get the new site up and running.
The free OceanWP demo import plugin provides access to a selection of 13 free demo sites. All of these, except the “Blogger” and “Personal” demos, which do not use a page builder, are based on the free Elementor plugin. Pro demos are also available if you purchase the extension.
I wasn’t sure there was a free demo that exactly matched the requirements for my garden site, but perhaps that’s not the point – this is supposed to be a starting point that I can customise. I decided to go with the “Yoga” demo. This installed the Elementor and Contact Form 7 plugins and suggested that I purchased the Ocean Sticky Header extension for $9.99 but I decided not to do this.
As with the other two themes, once I’d installed the demo content, my site was transformed, with new posts and pages.
Various elements could be customised, as usual.
The Elementor page builder was used to edit the content of the pages.
This has been a long article but I’m sure I have missed out some aspects that I could have considered. Hopefully, I have demonstrated that although the three themes I’ve discussed are not particularly pretty straight out of the box, they can all be used to build websites with highly customised designs.
My top recommendation is GeneratePress, mainly because of the helpful, sensible and hard-working attitude of its developer, Tom Usborne. Tom released GeneratePress four years ago and has a track record of continuing development and excellent support.
The Astra team also has a good reputation, and I can understand why. Astra was launched a year ago by Brainstorm Force, the developers of the Ultimate Addons for Beaver Builder and Ultimate Addons for Elementor plugins.
While the free versions of GeneratePress and Astra are good, solid themes, I’d recommend buying the Premium / Pro versions to get the most from them.
Nicolas, the founder of OceanWP, has packed his free theme and plugin full of features, since its release just over 18 months ago. Extensions can be purchased to add even more functionality to the theme.
UPDATE: In my opinion, the WordPress block editor makes it easier to build pages than it was when I originally wrote this article. I personally choose to use the block editor, along with the GeneratePress theme, rather than a page builder plugin.