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.

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

Page Headers

I’ve used GeneratePress Header 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). In additon, the Plant category has a Block Element hooked below the header.

Again, there’s a great video on the GP YouTube channel: “Using Header Elements in GeneratePress“.

I won’t go into much detail here as it’s likely that I will be re-building the headers now that GeneratePress Premium 2.0 has been released.

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

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

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