Building a Version of My Standard Site Using the Ollie Block Theme

My original Standard demo website was built using the GeneratePress theme. I wanted to attempt to re-create it using a WordPress block theme, to compare the two methods, and I chose to use the Ollie theme.

The GeneratePress version of the website can be found at https://standard.janeb.co.uk/ and the new Ollie block theme version is at https://standard-block.janeb.co.uk/.

Child Theme

This is an optional step. It would be absolutely fine to build a website using Ollie without bothering with a child theme, but I wanted a bit more control over the global font sizes and spacing. A child theme also gave me the ability to start off with an extended colour palette.

A blank child theme can be downloaded from https://olliewp.com/docs/resources/#child-theme.

If you’d rather use Ollie’s default values and not worry about creating a child theme, then just ignore all references to the child theme in this blog post.

theme.json

The theme.json file was where I could include code to set the initial colour palette and global variables for spacing etc. I’ve gone into more detail about that in the Global Styles section below.

style.css

I added a line of code to reduce the opacity of linked images when they are hovered over.

/** links **/

a img:hover {opacity: 0.85;}

functions.php

In order to get the CSS to take effect on the front end of the website, I needed to enqueue it with a functions.php file. (see JAKSON’s YouTube video “Block Themes: How to load and use Style.CSS in the WordPress Full Site Editor“)

I also created a shortcode for inserting the current year, so that I could use this in the footer.

<?php

// Loads style.css in the front end
function jb_front_end_scripts() {
    wp_enqueue_style(
        'style-css-child',get_stylesheet_uri(),[],wp_get_theme()->get( 'Version' ));
}
add_action( 'wp_enqueue_scripts', 'jb_front_end_scripts' );

// Create a shortcode for the current year

function current_year() {
    $year = date('Y');
    return $year;
}

add_shortcode('year', 'current_year');

Installing the Child Theme

I installed the Ollie theme on my practice website and uploaded and activated my new child theme.

Adding Some Initial Pages

I added pages called “Home”, “About” and “Blog” and went to the Reading settings in the dashboard to set the homepage (as a static page) and the posts page.

Once I’d done this, the Blog page used the index template and the Home and About pages used the page template – see https://olliewp.com/docs/block-theme-structure/

Site Identity

The General settings are where I could input the site title, site tagline and site icon.

Global Styles

The WordPress YouTube channel has a good video explaining this topic, called “Styling Your Site with Global Styles“.

Layout

Ollie’s default content width is 740px, with a wide width of 1260px. These are lower values than I would usually set. I decided to put some wider values in the theme.json of my child theme.

"layout": {
			"contentSize": "1200px",
			"wideSize": "1404px"
		},

I could also have changed these values in the site dashboard by choosing Appearance > Editor > Styles > Edit Styles – see https://wordpress.org/documentation/article/styles-overview/#layout

I included a section in my child theme’s theme.json file to replace Ollie’s usual spacing sizes with my own version. Here’s the first part of that section.

"spacing": {
			"spacingSizes":  [
				{
					"name": "Tiny",
					"size": "clamp(8px, 1vw, 12px)",
					"slug": "tiny"
				},
				{
					"name": "Small",
					"size": "clamp(12px, 1.5vw, 18px)",
					"slug": "small"
				},
				{
					"name": "Medium",
					"size": "clamp(24px, 3vw, 36px)",
					"slug": "medium"
				},

Once these values had been defined, they could be accessed with the Dimensions settings of various core WordPress blocks – see https://wordpress.org/documentation/article/dimension-controls-overview/

Colour Scheme

I used the child theme’s theme.json file to extend the colour palette. I decided to use the same naming convention as the default Ollie colour palettes, so as to be compatible with Ollie’s patterns.

Here are the first few lines of the theme.json

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"color": {
			"palette": [
				{
					"color": "#2f3a7c",
					"name": "Primary",
					"slug": "primary"
				},
				{
					"color": "#e1e5f4",
					"name": "Primary Accent",
					"slug": "primary-accent"
				},
				{
					"color": "#f0f2f9",
					"name": "Tertiary",
					"slug": "tertiary"
				},

Ollie sets the Tertiary colour to be, more or less, a light version of the Primary colour, so I stuck with this, although my normal inclination would be to call this colour something along the lines of “Primary Lighter”.

The child theme gave me my new starting palette.

Then, within WordPress, I changed the global colours, and added some more, to match my Standard website – see https://wordpress.org/documentation/article/styles-overview/#colors

Typography

As with the colour palettes, Ollie comes with a perfectly usable framework for text sizes but I wanted to use my child theme to set my own. Here’s an example showing part of that section of my theme.json file.

"typography": {
			
			"fontSizes": [
				{
					"fluid": {
						"min": ".825rem",
						"max": ".95rem"
					},
					"size": ".95rem",
					"slug": "x-small",
					"name": "Extra Small"
				},
				{
					"fluid": {
						"min": "1rem",
						"max": "1.06rem"
					},
					"size": "1.06rem",
					"slug": "small",
					"name": "Small"
				},

See https://wordpress.org/documentation/article/styles-overview/#typography for how to apply these pre-set sizes, and the installed fonts, to Blocks on a website.

The Standard website uses the Source Sans Pro typeface – available as the Google Font Source Sans 3.

To install this font, I went to Appearance > Editor > Styles > Edit Styles and chose the Typography option.

Clicking on the slider icon opened up a panel for installing a custom font.

I was asked to give permission for my site to connect to Google Fonts and could then search for, and install, the Source Sans 3 font. The video I mentioned previously shows this process.

I used the global styles controls to make a few changes to the font sizes, weights and colours – for example changing the h1 size to extra extra large and the h1 colour to the primary (pink) colour.

Header and Navigation

The Header template part appears at the top of each page. Out of the box, the Ollie theme displays this area with a dark background, and I wanted to change this.

There appear to be various different ways to move around the backend of the website and this is one of the most confusing aspects of using a block theme. There is certainly a learning curve! When I was logged in, and viewing a page from the front end, it appeared that clicking “Edit site” in the admin bar at the top, took me to the page template screen. Note that if I had wanted to edit the content of the page itself, I should have clicked on “Edit Page” instead.

I could also have accessed the templates, and template parts, from the dashboard by choosing Appearance > Editor > Templates.

The page template has the Header template part at the top and the Footer template part at the bottom. I could edit the Header template…

… and replace it with one of the alternative Header patterns that Ollie provides…

… or I could edit the blocks that were already there.

I changed the text and background colours, set the inner content width and reduced the top and bottom padding. Then I added a Site Logo block and removed the Site Title block.

I clicked on “Create a new menu” then the 3 dots to the right of the message “This Navigation Menu is empty”.

This gave me the option of choosing an existing navigation menus (if there had been one), creating a new one, or just choosing “Navigation” which added all my pages.

You can find a detailed explanation of the Navigation block at https://wordpress.org/documentation/article/navigation-block/

I edited the Navigation block to change the order of the pages. I was also able to add a submenu to the Blog page link and to add Category link blocks.

The Navigation block’s settings included an option in the Submenus section to “Open on click” and I toggled this on.

This is one area where GeneratePress Premium has more features than the block editor. I decided to install the free Twentig plugin to expand on the core functionality of the blocks. See Jamie Marsland’s video “The Perfect WordPress Plugin for your Block Theme” for an introduction to this plugin. Twentig added an extra Link style option to the Navigation block, enabling me to set the hover style to the “accent colour” (which appeared to be the primary colour in my colour palette).

I did not have the option of making the navigation sticky, as I would have done if I’d been using GeneratePress Premium.

If I wanted to make changes to the navigation menu then I could access it directly from the dashboard by choosing Appearance > Editor > Navigation.

Footer

The Footer template part works in the same way as the Header template part. I could edit the template part so that the Footer section’s layout, appearance and content met my requirements.

I decided to use Grid blocks to build the layout of this section – see Jamie Marsland’s YouTube video “Master WordPress Grid Layouts” (note that the Grid block is now in core WordPress so you no longer need the Gutenberg plugin.)

I used a couple of the Twentig plugin’s predefined CSS classes to remove bullet points from the List blocks and to show the underline on links only upon hover. See https://twentig.com/quickstart-guide/#add-css-classes

I used a Shortcode block to insert the current year using the shortcode I’d defined in the functions.php file of my child theme.

GeneratePress Premium allows you to enable a “back to top” button, but this feature is not available in the Ollie theme.

Page Hero Sections

Pages

For the GeneratePress Premium version of the website, I’d used GP Elements for the page heroes. But the way to approach this with block themes is to use templates.

Out of the box, Ollie’s Pages template includes an outer Group block with an inner Group block containing a Title block followed by a Featured Image block.

I gave the outer Group block a background colour that would be visible on pages without a featured image.

I replaced the inner Group block with a Cover block and set its background to be the featured image. I no longer needed the separate Featured Image block, so I removed that.

I used the Layout setting of the Cover block to restrict the width of the Title block inside it. The colour and background of the Title block were edited to match the other version of the website.

I set the min height of the Cover block to 374px, but found that this was being over-ridden for small screens so I added some code to the Additional CSS area (I’m not entirely happy with this solution but decided it was acceptable for now).

@media (max-width: 781px) {
  .wp-block-cover:not(.has-aspect-ratio) {
    min-height: 244px !important;
  }
}

Archives

I copied the Group I’d created above, pasted it into the All Archives template, and replaced the Title block with an Archive Title block and a Term Description block.

Because the Cover block I’d copied was using the featured image as a background, I found that the featured image of the first blog post in each category was picked up. This was not what I’d done in the GeneratePress version, and I could have removed it, but I quite liked the result.

The main blog page uses the Index template so I followed the same method to put a hero section at the top of that, although this time the text and image were static, rather than being pulled from the page or archive details.

With GeneratePress Premium, I’d been able to give the Plants category a different type of hero section by assigning a different GP Element to that category. I found that I could do something similar here by creating a new template.

Then I could lay out the Plants archive page differently from the other category archives.

Layout of Blog and Archive Pages

As well as editing the templates to add a hero section (see above), I could also change the layout of the pages. Note that in the GeneratePress version of the website, I had used the Customiser to do this, but block themes do not have a Customiser.

Ollie’s archive pages do not have a sidebar, but there is another template that does, called “Page (With Sidebar)”. I looked at this to find out how to add a sidebar to my archive pages. I could see that I needed to add a Column block and put the Sidebar template into this.

I did this for the All Archives template and tweaked the appearance (colour, text size, padding etc). There was not an option to feature the first post by making it larger (as in GeneratePress) although I may have been able to achieve this by using two Query Loop blocks.

I copied the changes across to the Index and Category:Plants templates.

Sidebar Template Part

This is another template part, like the ones for the Header and Footer, that can be edited to add any blocks that you would like to display in the sidebar area.

I replaced the existing content of the sidebar template with Group blocks holding a Search block, a Categories List block and a Posts list block.

Single Blog Posts

I wanted my single blog posts to be narrower than the website’s pages, so I edited the Single Posts template and changed the width of the Group block containing the body of the blog post to 960px. See https://wordpress.org/documentation/article/group-block/#block-settings. I also removed the wide setting from a couple of the blocks making up the template.

Since my Standard website has only one author, I did not need the Author block, so I removed it from the template.

I moved the Feature Image block to before the title, and moved the Categories block down to the area where Ollie already had a Tags block, and changed the container for these to a Stack block.

I tweaked the appearance of the categories and tags, along with various other little details (such as padding and margins) throughout the template.

The template came with a Group block, just below the Footer, that displayed the three most recent posts. I replaced this with Previous Post and Next Post blocks.

Building the Homepage

I edited the page called “Home” and swapped its template to the one called “Page (Full Width, No Title)”.

Hero Section

I added a full width Group block with a background image and, within this, another block with a transparent background colour containing a Header block and a Buttons block.

Row of Boxes

I used another full width Group block, this time with a repeating pattern as the background image.

I put a Row block inside this outer Group block, and then three Group blocks in the Row. Each of these contained an Icon block (added by The Icon Block plugin) and a Paragraph block.

In order to make the whole of each box clickable, I used the Stretch link setting that was added by the Twentig plugin.

To get the boxes to change colour when hovered over, I gave them each a class and added some CSS in the Additional CSS area.

/** hover colours **/

.jb-hover-primary-dark:hover {background-color:var(--wp--preset--color--primary-dark)!important;}
.jb-hover-secondary-dark:hover {background-color:var(--wp--preset--color--secondary-dark)!important;}
.jb-hover-additional-dark:hover {background-color:var(--wp--preset--color--custom-additional-dark)!important;}

Quote

The next section was enclosed in a full width Group block with a coloured background. Because I wanted to include a quotation mark, I used another Icon block. I put this next to a Paragraph block, inside a Row block.

Full Width Sections with Images and Text

I used Media and Text blocks for these two sections. I wasn’t entirely happy with the lack of control over the spacing etc. but it was a simple solution that seemed good enough for my purposes.

Testimonials

This was an opportunity to try out one of Ollie’s patterns.

I put one of the Cards patterns into a Grid block, duplicated it a couple of times, and edited the contents.

Featured Posts

This section uses a Query Loop block.

About Page

The top section of the page is simply a Columns block, with Paragraph blocks in the first column and an Image block in the second. I used a setting, added by the Twentig plugin, to stack the columns on tablets as well as mobile phones.

I used a Grid block for the team section.

Gallery Page

I usually use a plugin, Meow Gallery, for galleries but for this exercise I wanted to see what I could achieve using core WordPress blocks. I did still use the Meow Lightbox plugin.

Gallery Block

The core Gallery block is a bit limited but I feel it could be a good solution if all your images have the same aspect ratio, or you don’t mind them being cropped.

The Twentig plugin added some layout options that I used to change the aspect ratio to square, unstretch the last row and display two columns on tablets.

Grid Block

As an alternative approach, I simply added Image blocks inside a Grid block, For the particular images I chose to display, I was able to create a satisfactory layout by making my portrait orientation photos span two rows.

Lightbox

I changed a couple of settings in the WordPress Dashboard’s Meow Apps Lightbox sections:

• I removed all the selectors that were not specific to galleries, but added a new one of my own, .jb-lightbox. I applied this to my Grid block on the Gallery page of the website.
• In the “Behaviour” section, I enabled the Separate Galleries option.

FAQ Page

This was created using a series of core WordPress Details blocks.

Contact Page

For this exercise, I simply used one of Ollie’s patterns and did not change the content.

For contact forms, I usually use the Fluent Forms plugin which has some comprehensive documention here: https://wpmanageninja.com/docs/fluent-form/

Additional CSS

As I mentioned, I’d included a css.styles file in my child theme with some code that I like to use on most of the websites I make.

But, during the build of this website, I added some more code to the Additional CSS area, for things that were specific to that particular website – see https://wordpress.org/documentation/article/styles-overview/#applying-custom-css

/** hover state for buttons **/

.wp-element-button:hover, .wp-block-button__link:hover {background-color:var(--wp--preset--color--secondary-dark);}


/** bullet point colour **/

li::marker 
{color: var(--wp--preset--color--primary);}


/** replace the default min-height that is applied to Cover blocks **/

@media (max-width: 781px) {
  .wp-block-cover:not(.has-aspect-ratio) {
    min-height: 244px !important;
  }
}