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.

I also recommend the videos “GeneratePress – Crypto Template Walkthrough” and “GeneratePress – Search Template Walkthrough” on the GeneratePress YouTube channel.

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 the examples shown.

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

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 means that they turn 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, I was able to 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: 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, 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

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.

Page Headers

I’ve used GeneratePress Block Elements for most pages (but note that this does not apply to the homepage where the hero image is simply a block within the page content, as covered in the article about the homepage).

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.

I used a merged header for the Contact page, simply to demonstrate that this is an option. If you’d like to see how this is done, I recommend the YouTube video “GeneratePress – Merging a Page Hero or Page Content with the Header and Navigation“.

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 you have a license for GenerateBlocks Pro then you can import ready made footer templates from its 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. If I’d been using GenerateBlocks Pro then I could have saved some time by using one of their team templates. Alternatively, since I have a GeneratePress Premium license, I could have turned to the GeneratePress Site Library for inspiration and copied a layout from there.

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 uses the Meow Gallery and Meow Lightbox plugins.

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.

I added a little CSS to give the blog posts a grey background.

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

.blog .inside-article, .archive .inside-article {
    background-color: #f3f3f3; padding:24px;
}

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 then added a form block to 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 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 #eeeeee;}

Appearance of Text and Image Links

/** links **/

.inside-article a {font-weight: 600;  text-decoration: underline #777777 1px;  
}

.entry-meta a, .entry-title a, a.button, a.next-link, a.read-more,.wp-block-button a, .wp-show-posts-entry-title a {text-decoration: none;} 

/** image links **/

a img:hover {opacity: 0.85;}

Colour of Bullet Points and List Markers

/** bullet points **/

li::marker {
     color: #D42254;
}

Default Appearance of Separator Block

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

/** horizontal lines **/

hr {height: 2px; background: #D42254;}

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);}

Appearance of Quote Blocks

(Adds a large quotation mark at the front, amongst other things)

/** block quotes **/

blockquote {border:none; font-family: Georgia, serif;}

blockquote::before {
content: "\201C";
display: block;
font-size: 100px;
color: #D42254;	
	top: -60px;
	left: -48px;
position: relative;
height: 0;
}

Grey Background for Blog Posts

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

.blog .inside-article, .archive .inside-article {
    background-color: #f3f3f3; padding:24px;
}

Style of Footer Widgets

The customiser allows you to determine much of the style of the footer but I did want to change the weight of the text.

.footer-widgets p, .footer-widgets a {font-weight: 300;}

On Full-Width Pages Prevent Certain Items Stretching Across the Whole Page

.full-width-content .entry-header {
    max-width: 1128px;
    margin-left: auto;
    margin-right: auto;
}

.full-width-content .entry-meta {
    max-width: 1128px;
   margin-left: auto;
    margin-right: auto;
   }

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.

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' );

More Tutorials

Leave a comment