Please note that this is an affiliate link, as described on my Privacy and Cookie Notice page and I am happy to recommend GeneratePress. The theme and plugin together provide powerful features for customising numerous aspects of a website. They are designed to be lightweight and the level of support given by the developer, Tom Usborne, is amazing. I trust Tom and his team to provide a solid, dependable base for building my websites.
This is an ongoing exercise and I intended to add to this article as I build the site. I’ll use this as an overview of the project, and will include links to other articles, both on this website and elsewhere, that go into more detail. Note that the screen prints below show examples of how the customiser can be used to change things such as colours, spacing and typography. However, since I am still tweaking the website and making changes as I go, the actual settings I use may not be the same as the examples shown.
- First Steps
- Site Identity
- Navigation Menu
- Colour Scheme
- Building the Homepage
- Page Headers
- Contact Form
- Additional CSS
- PHP Code Snippets
As usual when building a new WordPress website, I followed the steps outlined in my WordPress Website Checklist.
Having installed the GeneratePress theme (free from WordPress.org) and the GeneratePress Premium plugin, I went to Appearance > GeneratePress in the WordPress dashboard and activated all the modules with the exception of Secondary Nav, Sections, Site Library and WooCommerce.
I added some pages called “Home”, “About” and “Blog” and then adjusted the settings in the Customiser so that the homepage would be the new page I had just created.
It’s easy enough to add a logo and site icon in the Customiser with GeneratePress – for instructions see the GeneratePress documentation at https://docs.generatepress.com/article/site-identity-overview/ However, for the logo, I wanted to use an SVG file so that it would look sharp at all sizes. I created a basic logo in Affinity Designer just by typing the name of my website in a particular font (Stephen Type by Joanne Marie) and saving it as a vector.
WordPress won’t allow SVG files to be uploaded for security reasons. However, I was able to get around that restriction by installing and activating the Safe SVG plugin.
I created a new menu and added the pages I had set up. Later on, whenever I added a new page, I went back and edited the menu to include it. It’s important to remember to hit the “Save Menu” button after making any changes.
It’s not just pages that can be added to the navigation menu. For example, adding a custom URL with a # sign means that it does not link to anything. Indenting my blog page and blog categories below this menu item means that they turn into sub-menu items that drop down when the top level “Blog” item is clicked.
GeneratePress Premium makes it easy to change the copyright information in the site footer, although this setting is a little hidden as it’s within the Layout > Footer area of the Customiser. This is also where I enabled the Back to Top button and changed a few of the padding values (I like to use multiples and factors of 12 for padding and margins throughout my websites).
I went to Layout > Container and changed a few of the values to my preferred multiples of 12.
I chose “One Container” for the Content Layout.
Under Layout > Sidebars, I set the default for pages and single posts to be Content (no sidebars) and adjusted the widget padding.
I adjusted a few settings in the Layout > Primary Navigation area of the Customiser.
I assigned a label of “Menu” to the Mobile Menu, set the Navigation Location to “Float Right” and set the Navigation Drop-down to “Click – Menu Item”.
Note: The section of the Customiser below the area shown in my screen shot is where GeneratePress Premium allows you to change the width and height of menu items.
I switched on the Sticky Navigation, so that the navigation menu would remain at the top of the page as people scrolled down, and added my logo here too.
See the GeneratePress documentation at https://docs.generatepress.com/article/colors-overview/
The free GeneratePress theme has limited options for changing colours via the Customiser.
Activating the GP Premium Color Module makes it possible to change the colours of numerous other items.
I set the background colour to white in the Customiser.
A plugin that is popular amongst GeneratePress users is Central Color Palette. This is a handy tool to help you keep your colours consistent when building a website.
Once colours have been added via the Settings of the plugin, they become available to pick in the Customiser and when editing blocks.
See the GeneratePress documentation at https://docs.generatepress.com/article/typography-overview/
The free theme allows you to change the font and its size, weight, etc. for the body and H1, H2 and H3 headings. Activating the Premium Typography module extends this to give options for areas such as the header, navigation, blog post titles, footer, buttons and widgets.
I’ve used GeneratePress Header Elements for most pages. The hero image on the homepage is just a block within the page content.
The following sections will be added as I work my way through building the website.
Building the Homepage
More details to follow as I build the page, but I intend to use the WordPress Block Editor and the GenerateBlocks plugin. I have an article talking about that plugin here: https://janebwebsitehelp.co.uk/a-simple-page-layout-with-generateblocks/
I’m expecting to use a GeneratePress Block Element (with a type of “Site Footer) for the footers throughout the website.
See the GeneratePress documentation at https://docs.generatepress.com/collection/blog/
For some other suggested plugins to try, see my article: Building My “Boxed” Demo Site – Part 2 Photo Galleries and Slideshow.
I expect to use the Fluent Forms plugin.