Flexible, Customisable WordPress Themes

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. 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.

GeneratePress 3.0 was released in October 2020.

Introducing GeneratePress 3.0 – our biggest update ever! With it comes a fresh theme design, modernized flexbox grids, new theme functionality, and overall it’s lighter, faster, and more flexible than ever before.

Tom Usborne

GeneratePress 3.1 has introduced Global Colours and Dynamic Typography for both GP Premium and the free GP theme. This means that some of my comments in this article about needing the Premium plugin to change colours and fonts no longer apply.

If you scroll down to the comments section at the bottom of this page, you can see links to some articles by other people about the GeneratePress theme.

Another theme that I see recommended over and over again is Astra. Again there’s a free version, but Astra Pro provides more features.

If you are on a tight budget, then OceanWP is worth a look. This free theme, together with the free Ocean Extra plugin, provides more options for customising the appearance of a website than the free versions of GeneratePress and Astra. For even more features, and pro demos, you can purchase extensions.

UPDATE: If I was writing this article today (October 2020) there are some other themes that I might consider including:

• Neve from ThemeIsle
• Zakra from ThemeGrill
• Blocksy from CreativeThemes
• Kadence WP
• Page Builder Framework

Perhaps I should apologise if this article seems to be biased towards GeneratePress. I have heard good things about Astra but GP is the one for which I own a Premium license, so I’ll be able to demonstrate its features below. I can try out the free versions of Astra and OceanWP, but for Astra Pro and the OceanWP extensions, I’ll have to rely on consulting their documentation to see what they can do.

---

Contents

• page 1: Introduction and GeneratePress example
• page 2: Astra example
• page 3: OceanWP example
• page 4: Pre-designed sites and layouts (but I suggest considering using the block editor instead of a page builder plugin)
• page 5: Conclusion

---

GeneratePress

Out of the Box

As you’d expect, all three themes tend to be pretty basic looking straight out of the box. Here’s a GeneratePress screen print with just a simple menu, a photo, some dummy text and a search widget added to the sidebar.

UPDATE: GeneratePress 3.0 has a more modern and cleaner appearance.

Site Identity

The free theme has options which allow 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.

Colours

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.

GeneratePress 3.1 has introduced Global Colours and Dynamic Typography for both GP Premium and the free GP theme. This means that some of my comments in this article about needing the Premium plugin to change colours and fonts no longer apply.

But GP Premium adds dozens of colour options.

Typography

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.

Background Images

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.

Navigation Menus

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.

Layout

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: The Content Title (but not the other items) can now be removed without the GP Premium plugin.]

[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 options enable you to adjust the padding and margins of various areas and change the height of the menu.

Widget Areas

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.

Blog Options

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.

Headers

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. GP Premium 1.11.0 introduced Block Elements allowing you to use the WordPress block editor to create hooks, site headers, site footers and sidebars. ]

Hooks

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.

Another Exercise with GeneratePress

For another example of how I use this theme, see my blog post: “Building My “Standard” Demo Site“.