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.

This article is an overview of the project, and includes links to other articles, both on this website and elsewhere, that go into more detail.

Please note that things move quickly in the world of WordPress. I haven’t updated this article since early 2024 and it’s likely that there are things I would do differently if I was building the website now. I hope there are still some useful tips here though.

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, as I was constantly tweaking the website, the actual settings I ended up with may not be the same as those shown in the screen prints. The Style Guide page of Standard will show you the colours and fonts I decided to go with.

Contents

First Steps

As usual when building a new WordPress website, I followed the steps outlined in my WordPress Website Checklist. I’ve described some of these in more detail in this article, but my checklist mentions other things not covered here for example:

  • finding a host and connecting a domain name
  • installing WordPress
  • checking the permalinks
  • installing a security plugin
  • anti-spam, SEO and search plugins
  • setting up backups.

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.

Please note that this is an affiliate link, as described on my Privacy and Cookie Notice page. I am happy to recommend GeneratePress and also GenerateBlocks. The theme and plugins together provide useful features for customising numerous aspects of a website. They are designed to be lightweight and the level of support is amazing. I trust the developer, Tom Usborne, and his team to provide a solid, dependable base for building my websites. GeneratePress 3.1 introduced global colours and dynamic typography which makes the free GP theme more easily customisable than it was previously. This means there is less need than before to purchase GP Premium, although it still adds some powerful extra functionality.

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.

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 makes them into sub-menu items that drop down when the top level “Blog” item is clicked.

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, you can get around that restriction by installing and activating the SVG Support 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. Note that I continued to tweak the padding as I built the website, so the values shown in the screen shot below are not the ones I ended up with.

I went to Layout > Container and changed a few of the values.

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: There is a section of the Customiser below the area shown in my screen shot where GeneratePress Premium allows you to change the width and height of menu items.

I switched on the Sticky Navigation, but ticked “Hide when scrolling down”. This will help people who might have read all, or part, of a page but then want to move to a different page. If they start to scroll back up the navigation menu will appear at the top of the screen. I added my logo here too.

Colour Scheme

GeneratePress 3.1 has introduced Global Colours to the free theme – see the documentation at https://docs.generatepress.com/article/using-global-colors/

When the GeneratePress theme is activated for the first time, it comes with a global colour palette containing default colours which have already been assigned to various items on the website.

Changing the global colours automatically changes the colours of these items.

It’s possible to change which global colours are assigned to different areas of the site and to add more global colours to the palette (by clicking the circle containing the plus sign).

Once the new colours were in the global colour palette, they were available for me to use in the Customiser, and also when adding blocks to a page or post.

I could even use these colours when adding CSS.

Using global colours throughout the website meant that, by changing the images and changing the colours in just one place, I could completely alter the colour scheme of my site.

Typography

GeneratePress 3.1 has introduced Dynamic Typography to the free theme. The GeneratePress YouTube channel has a helpful video explaining how this works: “GeneratePress – Dynamic Typography Demonstration“.

For one way to download and use Google Fonts, see my article “Local Fonts with GeneratePress“.

Page Headers

For the homepage (as covered in my article about the homepage) I created a hero image within the page content, using blocks.

I chose to build this from scratch, although I could have given myself a head start by copying and pasting one of the hero patterns from the GenerateBlocks Pattern Library. Some of these are free and therefore available to use without buying GenerateBlocks Pro.

For most of the other pages on the website I’ve used GeneratePress Block Elements. Note that Elements are available only if you have the GeneratePress Premium plugin.

New Block Elements are added via the Dashboard by choosing Appearance>Elements>Add New Element and then choosing an Element of type “Block”.

Most pages on the website have a header that I created with a Block Element that I called “My Page Heroes”. This Element is built with a GenerateBlocks Container Block which has a background image and a GB Headline Block. The Element type has been set to “Page Hero” and the Location set to “Entire Site” with a few exceptions.

I had to give the Container Block a background image and then was able to set this to dynamically pick up the page’s featured image.

Similarly, I set the GB Headline Block to display the page title.

The blog page has its own Block Element which does not use dynamic data.

For the plant category archive page there is a Block Element of type “Page Hero” with a hook to make it appear after the header. A GB Headline Block within this Block Element dynamically picks up the page title (“Plants”). Note that the Hook name box was automatically filled in once I chose “Page Hero” as the Element type.

However, most of the page archives (category and tag pages) use a Block Element which dynamically pulls in the category description, if it exists, as well as the page title.

The GeneratePress YouTube channel has a video showing how to do something very similar: “GeneratePress – Dynamic Page Hero for Category/Tag Archives“.

The usual WordPress way of adding content to a footer area is to use widgets, and GeneratePress provides up to five footer widget areas. This is a convenient way to display the widgets that are provided in core WordPress or added by plugins.

The widget areas are spread out evenly across larger screens, or stacked on top of each other on small mobile devices. For example, if four widget areas have been set in the customiser each will take up 25% of the width. Often this layout is fine, but it’s not always ideal if the content is a mixture of wide and narrow items.

GeneratePress Block Elements (a feature of the GP Premium Plugin) can be used to build footers out of core WordPress blocks and GenerateBlocks blocks to give more precise control.

I could have built the entire footer area using a GeneratePress Block Element, but I decided on a hybrid approach where I kept the widgets but then added an extra section below this using a Block Element of type “Hook” with a position of generate_after_footer_widgets.

The video “GeneratePress – How to Replicate #2: Custom Footer from Stream” , on the GP YouTube Channel, demonstrates something similar to what I’ve done (with a few differences). This video is also an excellent introduction to using GenerateBlocks.

Note that if don’t want to start from scratch, you could copy and paste from the GenerateBlocks Pattern Library.

Building the Homepage

To prevent this article from becomming too unwieldy, I’ve written a separate one just about the homepage: “Building a Homepage with GenerateBlocks“.

About Page

At the top of this page I’ve put an image next to some text. It’s possible to get text to wrap around an image simply by adding a paragraph block preceded by an image block set to align right or align left. However, this doesn’t always look great on smaller screens as you can get narrow bands of text down the sides of the image.

Instead, I’ve use GenerateBlocks with a Grid block inside a Container block.

Below this, I’ve added a team section with some free stock photos from rawpixel.com.

This is yet another case where I could have saved some time by using a layout from the GenerateBlocks Pattern Library. But I decided to build this area from scratch using GenerateBlocks Container, Grid and Headline blocks and core WordPress Image and Social Icons blocks.

This page has an example using the Meow Gallery and Meow Lightbox plugins.

I’ve also shown examples using the core WordPress Gallery block and the Kadence Advanced Gallery block, which would be another good choice.

For some other suggested plugins to try, see my article: A Look at Some WordPress Photo Gallery Plugins.

Blog

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

The appearance of the blog page is set in the customiser. As with many features of GeneratePress, the free theme gives a few options but you’ll have a lot more control if you install the GP Premium plugin.

Note that the screen print above has the options selected for a “read more” button, but I decided to remove this and so deleted the text in the “Read more label” box.

FAQ Page

This page uses a Kadence Accordion block.

Contact Form

I have used the Fluent Forms plugin which has some comprehensive documention here: https://wpmanageninja.com/docs/fluent-form/

Although the plugin has some fairly sophisicated features, all I really needed to do was create a new form using a pre-made form template. I edited the settings of the form to enable email notifications and clicked the blue button in the Actions column, then the “Advanced” option at the bottom of the page, then entered {inputs.email} in the “Reply to” box.

The plugin gave me a Form block that I could include in my page.

Additional CSS

If I had been using a child theme, I could have put my CSS in its style sheet but I chose to add the code to the Additional CSS area of the customiser instead. Another option could have been to use a plugin such as Simple Custom CSS and JS or Simple CSS.

As well as the code shown below, there are a few extra items listed in my article “Building a Homepage with GenerateBlocks“.

A Couple of Tweaks to the Header Area

/** move menu lower **/

.nav-float-right .inside-header .main-navigation {
    padding-top: 36px;
}

/** border under the header **/

#masthead {border-bottom: 1px solid var(--base-2);}

Appearance of Text Links

One of the General Settings in the Customiser allows you to specify that all links are underlined. I added some CSS code to target the links that I don’t want to be underlined. This included setting up a class that I can apply to specific links when editing a page, if necessary.

/** remove underlining from links **/

h3 a, .widget a, .jb-not-underlined, .jb-not-underlined a  {text-decoration:none;}

h3 a:hover, .widget a:hover,.jb-not-underlined:hover, .jb-not-underlined a:hover {text-decoration:underline;}

Appearance of Image Links

/** image links **/

a img:hover {opacity: 0.85;}

Colour of Bullet Points and List Markers

/** bullet points **/

li::marker {
     color: var(--main);
}

Default Appearance of Separator Block

(Note that this can be changed for individual blocks when editing pages and posts).

/** horizontal lines **/

hr {color: var(--main);}

A Class That I Like to Add to Images of Screenshots etc. to Give Them a Border and Shadow

/** image border and shadow **/

.jb-image-border img {border: solid 1px #e2e2e2;
-webkit-box-shadow: 6px 6px 5px 0px rgba(207,207,207,1);
-moz-box-shadow: 6px 6px 5px 0px rgba(207,207,207,1);
box-shadow: 6px 6px 5px 0px rgba(207,207,207,1);}

Grey Background for Blog Posts

/** put blog posts in boxes with grey backgrounds on archive pages **/

.blog .inside-article, .archive .inside-article {
    background-color: var(--base-2); padding:24px;
}

PHP Code Snippets

The GeneratePress documentation has a page about adding PHP and I tend to use one of the methods recommended there i.e. the Code Snippets plugin. I’ve also tried, a new plugin that is attracting some interest, FluentSnippets.

The only snippet I am using on the Standard website, is one to make the “read more” link jump to the top of the blog post rather than opening the post at the point where the More block was inserted. 

add_filter( 'generate_more_jump', '__return_false' );

On some of my websites I’ve used Kyle’s code for enqueuing the additional CSS so that the fonts etc. are used in the editor. This can be found at https://generatetweaks.ogal.dev/

More Tutorials

3 thoughts on “Building My “Standard” Demo Site”

Leave a comment