Building My “Standard” Demo Site

Standard is a WordPress website that I’ve set up to demonstrate how I use my favourite theme, GeneratePress, with its Premium plugin.

Please note that this is an affiliate link, as described on my Privacy and Cookie Notice page. I am happy to recommend GeneratePress and you can find out why it’s my favourite theme by reading my blog post “Flexible, Customisable WordPress Themes“.

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.

Contents

First Steps

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.

Navigation Menu

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.

Site Identity

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.

Layout

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.

Colour Scheme

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.

Typography

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.


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/

Page Headers

I’m expecting to use GeneratePress Header Elements for most pages, and a GeneratePress Block Element (with a type of “Site Header) for the header on the homepage.

I’m expecting to use a GeneratePress Block Element (with a type of “Site Footer) for the footers throughout the website.

Blog

See the GeneratePress documentation at https://docs.generatepress.com/collection/blog/

This page uses the Meow Gallery and Meow Lightbox plugins.

For some other suggested plugins to try, see my article: Building My “Boxed” Demo Site – Part 2 Photo Galleries and Slideshow.

Contact Form

I expect to use the Fluent Forms plugin.

Additional CSS

PHP Code Snippets

Leave a comment