The awesome Show Posts plugin from Tom Usborne. Used for the Related Posts section on our single posts.

Happy Forms

User friendly effective way of adding Forms to your Site. Used on the Front page for a simple sign up.

GP Social Sharing

Simple SVG Icon sharing. Its currently added to the Single Product pages using the plugins shortcode in a Hook Element.

Advanced Woo Search

Ajax searching for Woocommerce products. Added as a widget to the sidebar.

Woo Shop Page

New GP Premium 1.8 Features

• Display mini cart sub-menu
  No more need for a plugin with this beautiful min cart shown when hovering the nav cart icon
• Menu Item Content
  Choice between Amount and Number of Items. I have chosen the latter
• Display cart panel on add to cart
  Replacing the standard WooCommerce add to cart notification with a great slide out panel.

Shop Page Product – add to cart ( desktop )

Using a little CSS to create a show / hide on hover effect. This uses some CSS which you can find in the Customizer > Additional CSS. It looks like this:

.woocommerce ul.products li.product {
    overflow: hidden;
}

.woocommerce ul.products li.product:hover .button {
    -webkit-transform: translatey(0) !important;
    transform: translatey(0) !important;
}

.woocommerce ul.products li.product .button {
    font-size: 12px;
    line-height: 15px;
    padding: 8px 12px;
    min-height: 15px;
    font-weight: bold;
    text-transform: uppercase;
}

@media (min-width: 1024px) {
    .woocommerce ul.products li.product .button {
        position: absolute;
        top: 0;
        -webkit-transform: translatey(-150%);
        transform: translatey(-150%);
        -webkit-transition: 0.35s;
        transition: 0.35s;
        margin-top: 10px;
        margin-left: 10px !important;
    }
}

The radius corners have been added using the Button CSS which is covered in the Styling Guide.

Sale Badge

To compliment the positioning and rounded corners of the add to cart I used this CSS:

.woocommerce span.onsale {
    position: absolute;
    margin: 10px !important;
    border-radius: 4px !important;
}

WooCommerce Sidebars – Common

The Site uses the standard right hand sidebar, packed full of WooCommerce widgets. There is of course some CSS to add the borders, adjust padding & margins. It looks like this:

@media (min-width: 768px) {
    #right-sidebar {
        border-left: 1px solid #d6d7d8;
    }

    #right-sidebar .widget {
        margin-bottom: 0;
    }

    #right-sidebar aside:first-child {
        padding-top: 0;
    }

    #right-sidebar aside:not(:first-child) {
        border-top: 1px solid #d6d7d8;
    }
}

Please see the separate notes on the Single Product Sidebar

WooCommerce Single Product

The Single Product page has had some seriousl love applied with GP Premium 1.8. Aside of the Hook Elements at play and the little rounded corners on buttons all of the styling is controlled from within the Customizer. Freaking awesome. It is by virtue of these new features that means there is very little Woo CSS being used at all. So first off check out all the new features in Customizer > Layout > WooCommerce.

New GP features

• Product Image area width
  Set to 65% as this site should be all about the image.
• Display add to cart panel on scroll
  Sliding into view when the on page add to cart is scrolled past keeping this important function always in view
• Display quantity buttons
  The new new + / – qty fields really do add a touch of finesse

Then take a look at the few customizations made using Hooks and the little extra CSS

Jump Link – Full Description

Using a Hook Element: Single Product Jump to Description we have added a simple jump link to take us from the summary to the Full Description. Here is the HTML for that. It uses the custom loud-link class on its container to provide the hover and arrow. It also uses the GP smooth-scroll class, with this option active in the Customizer > General

<p class="loud-link">
	<a class="smooth-scroll" href="#tab-title-description">Full description</a>
</p>

Variations background styling

Adding a little background color and some padding to make product variations stand out required this CSS:

.woocommerce.single-product div.product form.cart .variations {
    background-color: #f2f3f4;
    padding: 30px 40px;
}

Social Share

Using Jon Mathers GP Social Sharing plugin to display social share links on Woo was easy. Within the GP Social Share settings we have disabled the built in Hooks. Then creating a Hook Element: Woo Social Sharing I simply added the shortcode and selected the dedicated woocommerce_share hook from the extensive list of hooks.

Single Product Sidebar

Big images and sharp summary is an important part of the design. This meant I had to sacrifice some space without losing that important sidebar. So instead I moved the Sidebar below the summary. It took a few steps but all achievable within GP and the Customizer. Here’s how its done:

• Remove sidebar from default position
  Customizer > Layout > WooCommerce –> Single Product > Sidebar Layout: Content / No Sidebar
• Add the sidebar in a new position
  Hook Element: Woo Single Product Sidebar a simple function to hook the sidebar back in where I wanted it.
• Then some custom CSS to make sure it positions correctly on Desktop

Single Product Sidebar CSS

@media (min-width: 768px) {
    .single-product #right-sidebar {
        float: right;
    }

    .single-product div.product .woocommerce-tabs,
    .single-product div.product .related.products,
    .single-product div.product .upsells.products {
        width: 66%;
        display: inline-block;
    }
}

Woocommerce Product Images

In the latest version of Woo they changed the way you size the images. In Customizer > WooCommerce > Product Images you now have only two choices.

• Main Image Width
  This is the image used on the Single Product. It has been set to 800px to match the single product image area width.
• Thumbnail Width
  Set to 400px which is just right for the 2 column layout. You may be inclined to reduce this if using more columns. But as there is no mobile option i leave this at 400px so it fits nicely on those plus size mobile devices.

The great part about the new Woo Product Images is that they auto generate the sizes. No need to renegerate thumbnails and they don’t interfere with your normal WP thumbnail sizes.

Image advice

Making your images look great in Woo takes a lot of upfront work. If you’re expecting Woo to do the magic for you then you’re gonna get in trouble. Start off with this handy checklist:

• Aspect Ratio
  Consistent aspect ratio will eradicate mis-alignment of images in your grid or unsightly movement in your product gallery. Preferably i would stick with square images. If that means editing them in your favourite photo editor and adding some white space than do so.
• Image sizes
  Woo allows you to set the Thumbnail and the Main Image. Ideally they should be equally divisible into your original image e.g
  Original: 1600px , Main: 800px , Thumbnail: 400px.
  What you don’t want is odd sized images where they become blurry on resizing due to stray fractions of a pixel.
• Setting your image sizes
  Load some oversized images in your dummy products. Set the Customizer > WooCommerce > Product Image sizes so they fill the container. Now use the browser inspector to see the size they are being displayed in your Shop and Single Product. Make sure you done this after you have finished your layout design.
• Mobile First
  Consider that your probably gonna use a single column for mobile. Which could mean it needs a wider image than those in the desktop columns. Use this for your Thumbnail size. Its no big issue that their larger then you need on desktop.
• Zoom
  The Product Gallery Zoom and Lightbox will use the largest image it can get it hands on. So make sure your original image is larger then the Main Image width you have set.

• Write your post
• Add a manual excerpt
• Select your featured image
• Give it a category

A note on Categories: The custom post navigation and related posts section displays content based on the current posts category. It uses the first Category assigned to the post. So if you choose to assign a post to multiple categories it will only query the first category.

The hero header

The single post header is quite a complicated set-up. Using four separate GeneratePress Elements. Including 2 hooks, a featured image header and a layout element. There is nothing the user needs to do for this to be displayed or dynamically updated.

The basics

Before diving into the detail if you’re not familiar with the Elements module and its Hook, Header and Layout Element then start reading here:

The four elements

#1 Hook: Single Post Custom Entry Header

This hook element contains custom PHP. It outputs the Category, Post Title and Post Excerpt. Changing this set-up requires knowledge of PHP. It is therefore advisable that it is left alone.

If you do not want the custom post header then you can remove the Single Post Custom Entry Header Hook element. You also won’t be needing the following hook element and layout element.

#2 Hook: Fade Out Header Element on Scroll up

This hook contains some simple vanilla javascript. This provides the subtle fade out on the custom header element upon scrolling. There is no CSS required. Here is the JS if you’re interested.

<script>
window.onscroll = function () {
    var target = document.getElementById("custom-post-entry-header");

    var height = window.innerHeight;

    var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;

    // Change this if you want it to fade faster
    height = height / 3;
    var fader = (height - scrollTop) / height;
    if (fader > 0) {
        target.style.opacity = fader;
    }

};
</script>

#3 Layout: Remove single post title

As we have the Single Post Custom Entry Header and Post Navigation element we don’t need the Post title in our content. So this element simply removes that.

#4 Header: Single Post Header Featured Image

A standard Header Element that uses the posts featured image for the background. It has been set-up to a preset size using Padding and uses the Parallax scrolling effect.

A note on using Elements

Duplicating Elements

Elements are like a clever custom post type. Sometimes you may want to make multiple variations of them. But instead of creating them from scratch you can use the Duplicate Post plugin. Just make sure to check the Elements option in the plugins settings and use the New Draft option it provides on any element.

The Content

The single post uses a narrower content width for easier reading. In GP Premiums 1.8 updated Layout Element this is real simple to do. Simply go to Appearance > Elements > Single Post Layout –> Content Tab > Content Width.

To note you can combine this setting with the above Remove Single Post Layout element. I have kept the two separate for clarity and in case you want to remove one but not the other.

The custom header element does require a bit of CSS to achieve the same effect. To change this width requires editing some CSS. Please note that this CSS has been specifically designed for the custom header. Making it wider may conflict with the post navigation.

#post-nav .post-nav-entry-header {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto
}

Narrow Content Pre GP Premium 1.8

If you’re not using GP Premium 1.8 then the post width will not be narrowed. You can either update to 1.8 or find the above CSS in Customizer > Additional CSS and change it to:

#post-nav .post-nav-entry-header, .single-post #content {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto
}

Single Post – Centred date and by-line

Most of the Meta Data on the Single post has been moved to the custom post header. The remaining meta, the date and by-line is centred.

.single-post .entry-header {
    text-align: center;
}

Single Post – increased whitespace

For clearer definition of the posts content structure I have increased the space between paragraphs and H2 Headings. This clearly identifies to the reader they are starting a new section. This CSS creates a larger white space above the H2 block the proceeds any other type of block.

.single-post .entry-content *+h2 {
    margin-top: 64px;
}

Adding content

This site was built using the WP 5.0 Block (Gutenberg) editor. For post writing it is an excellent tool. You can of course install and use the Classic editor for your writing. Likewise you could add your favorite page builder although i personally would never use one for writing posts.

Related Posts

Related Posts are displayed below each of the posts. This is provided by the excellent WP Show Posts. Again it is 100% dynamic and displays posts within the same category of the current post.

How I made the Related Posts

#1 A WP Show Posts List

In the Dashboard > WP Show Posts you will see a Post List named Related. The title of this List is very important as it is used in the next step. If the List name is changed you will need to update the code that follows. The set-up of the List is quite simple. We select the content and the number of columns to be displayed. We do NOT select a Taxonomy. This will be done by our code.

#2 Hook: Related Posts

We use the hook found in Appearance > Elements > Related Posts. We have selected the before_footer hook and checked Execute PHP. Our Display Rules are set to All Posts. For the content we’re using some PHP instead of the usual WP Show Posts Shortcode. This is so it dynamically displays our content.

<div class="wpsp-related-posts  grid-container">
	<h2>Related Posts</h2>
<?php
if ( is_single() ) {
    $cats =  get_the_category();
    $cat = $cats[0];
} else {
    $cat = get_category( get_query_var( 'cat' ) );
}

$cat_slug = $cat->slug;
$list = get_page_by_title( 'related', 'OBJECT', 'wp_show_posts' );
wpsp_display( $list->ID, 'tax_term="' . $cat_slug . '"' );
?>
</div>

You will see in this line the related list name:

$list = get_page_by_title( 'related', 'OBJECT', 'wp_show_posts' );

As noted in #1 the name of the List must match this label.

#3 Styling the related posts block

In our PHP / HTML you will see two classes added to the parent DIV. They are wpsp-related-posts and grid-container.
grid-container is a GeneratePress class and it simply sets the container width to that within the Customizer. Its dynamic which is nice.
wpsp-related-posts is a Custom class and sets the padding, margins and background colors. Look for this in the Customizer > Additional CSS:

.wpsp-related-posts {
    background-color: #f2f3f4;
    padding: 64px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.wpsp-related-posts h2 {
    margin-bottom: 64px;
}

Changing the background colors or styles are done by editing that CSS

Page Structure

Let’s begin with looking at the hierarchy.

• Header Element – This is covered in this article
• H2 Headings
• Shop Categories
• Latest Products
• Call to Action Row – forty / sixty split
• Call to Action Row – sixty / forty split
• Sale Products
• Sign Up
• GP Footer – The default Theme widgets

H2 Headings

For our landing page I wanted some big bold H2 headings. Larger than what we have specified in our Customizer. But also make them super responsive. To make this happen I created some custom CSS using an Additional CSS Class of:

large-heading

Simply select your Heading Block, make sure it’s a H2, open the Advanced Dropdown in the Settings Sidebar and add the class to Additional CSS Class field. Please note: You won’t see the style change in the editor. Like all CSS you will find it in the Customizer > Additional CSS. It looks like this

h2.large-heading {
    font-size: calc(28px + (86 - 28)*(100vw - 400px)/(1600 - 400));
    line-height: 1.1em;
}

So this looks complicated but is what provides the responsive controls. If you want more information on what this all means then check out Responsive And Fluid Typography With vh And vw Units

Shop Categories

Built using a Columns Block set to two columns. Each column contains an Image, Heading, Text and link block. Nothing fancy and real simple to edit. Adding additional columns can be done from the Column Settings. Creating additional rows is simply a case of duplicating the existing one.

Making the image link to the category

Images Settings have a Link to Option. Just set the Link to: Custom URL and add your category link

Custom Link Styling

Hopefully you noticed the custom style link. This is achieved using custom CSS. To add this style to any of your in content links just give the block an Additional CSS Class of: loud-link

Latest Products

After our Title Block we simply add a Woocommerce: Recent Products Shortcode.

Call to Action (CTA) Rows

Once again the Columns Block comes into play. Out of the box there is no way to adjust the column widths. So within the editor you’re stuck with equally sized columns. To get around this to display unequal sized columns we added some simple CSS Classes.

Please note: these classes do not apply the styles within the editor

Sign Up

The Sign Up form is provided by the Happy Forms plugin. The form is added to the second column using a Short Code widget. The short code for your form is found in the Dashboard > Happy Forms. A common design is to use these types of CTA to break up a page. To do this we have given it our own special styling.

First off we need to make this row extend to the edge of the container ( outside of the content padding). This is done simply by selecting the Align Wide option from the Block toolbar. The rest requires some familiar CSS from our CTA Rows and a little extra. here are the classes it uses:

• sixty-forty-columns
  a 60% / 40% two column row
• column-banner
  this makes necessary padding adjustments
• center-vertical
  vertically centring any content placed within one of the CTA Columns
• bg-grey
  Applies the grey background color

Editing the Form

The form can be edited from the Dashboard > Happy Forms. If you create a new form you will need to update the short-code used on the front page.

Changing the rows background color

Go to the Customizer > Additional CSS ( or to your Child Theme Style sheet if you have moved it). And edit this CSS:

.bg-grey {
    background-color: #f2f3f4;
}

You can of course simply create your own classes with more relevant names for the colors you choose.

Can i use a different form?

Of course. If you want to use another form plugin then simply go about setting that up and replacing the short code with your new one.

The Merged Site Header Element

To edit the header go to: Appearance > Elements –> Home Page Hero – Merged. To note this header has been designed specifically around the image. We now cover the different settings and their purpose. This should provide you enough understanding on how to manipulate the header for your own content.

Page Hero Tab Settings

• Hero Content > Basic HTML markup consisting of span tag subheading, H1 tag for main heading and an anchor tag using GP Button class.
• Element Classes > None
• Container > Set to contained
• Padding Desktop > Notable the 30% RHS padding is creating a safe zone to stop the page hero content from overlapping the RHS of the image.
• Padding Mobile > Separate padding to allow the text to span the header element.
• Background Image > Uses the Featured Image and set to centred. The featured images is disabled in the page content.
• Colors > no background color or overlay. Text colors have been adjusted for the heading. All colors left as default respect the customizer settings.

Site Header Tab Settings

• Merge with Content > Merged
• Offset Site Header Height > Set to 169px on desktop and 50px on Mobile. These values are the rough height of the Site Header and Mobile Header. This stops our content from moving under the navigation and site header.
• Colors > Background is set to a transparent white and Site Title and Tag Line remain as default and respect the colors set in the Customizer.
• Navigation Location > Default
• Navigation Colors > Checked and background is set to transparent.

Display Rules

This Header is set to display on the Front Page. This is the standard term for the page has been assigned in Dashboard > Settings > Reading –>Your Home Page Displays.

Frequently asked questions

How to change the background Image?

The Header Element uses the Featured Image background. Simply change the featured image within the post editor on the home page.

How to change the Heading and Sub heading?

Edit the header elements hero content. The font styles and sizes are set within the Customizer > Typograpghy settings

How to adjust the containment of the text?

The current heading and subheading are contained, so it does not overlap the darker part of the image on the right hand side. This is done by adding additional padding to the right hand side of the header element. Remove or change the padding to suit your requirements.

How to change the navigation colors?

In the Site Header tab you are given color controls for the header and the navigation. These override the colors set in the customizer. To note: the colors in the customizer will still apply to the Sticky Navigation.

How to use this header element on other pages?

If you want an exact copy of this header then you can simply add more pages, posts or templates to the Display Rules. But seeing as the home page would deserve some pretty specific headlines, you probably want to make a copy of it and change the content for your needs. Of course you can do this manually or use the Duplicate Post plugin – just make sure to edit the plugin settings and include Elements.

It should be noted that Custom CSS is only displayed on the Front End. Adding editor styles ( at this time ) is not achievable with an imported Site.

Typography

The vast majority of the theme styling, particularly Typography, Spacing and Colors are set in the customizer. But there is some custom CSS at play.

Large H2 Heading

The large-heading class can be added to a H2 Title Block to increase its size.

This is the large H2 heading

h2.large-heading {
    font-size: calc(28px + (64 - 28)*(100vw - 400px)/(1600 - 400));
    line-height: 1.1em;
}

Unless you’re a fan of algebra this CSS looks complicated. In a nut shell it sets the font size dynamically based on the current screen size. Our font size range is 28px to 64px. And our screen size range is 400px to 1600px. Try adjusting your browser width to see the effect.
If you want more information on fluid typography then check out Responsive And Fluid Typography With vh And vw Units

Hover Link

The loud-link class will add an icon and underline hover effect. It should only be applied to a Text Block that only contains the link.

Like this here

Buttons

All Theme button colors and typography are controlled via the customizer. The Happy Forms button has its own styling controls in the plugins settings. The additional rounded corners and hover styling is applied using this CSS:

a.button,
.wp-block-button__link,
.happyforms-submit,
.woocommerce button.button {
    -webkit-box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
    box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
    -webkit-transition: all .15s ease;
    transition: all .15s ease;
    border-radius: 4px !important;
}

a.button:hover,
a.wp-block-button__link:hover,
.happyforms-submit:hover,
.woocommerce button.button:hover {
    -webkit-box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);
    box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
}

Header

Underline

For this minimalist design I thought it best that we make a clear distinction between the Site Header and the page content. This is achieved with a simple bottom border on our Site Header. It comes in two varieties. White for pages with a Merged Header Element, and black for the ones without.

.header-wrap .site-header {
    border-bottom: 1px solid #fff;
}
.site-header {
    border-bottom: 1px solid #ccc;
}

Primary Navigation

Hover Effect

A simple underline that scales from zero to menu item width on hover. It inherits the current color of the menu items.

.main-navigation .menu>.menu-item>a:before,
.main-navigation .menu>.current-menu-item:not(.wc-menu-item)>a:before,
.loud-link a:before {
    content: "";
    position: absolute;
    display: block;
    bottom: 1em;
    width: 0%;
    height: 2px;
    background-color: currentColor;
    -webkit-transition: 0.3s width ease;
    transition: 0.3s width ease;
}

.main-navigation .menu>.menu-item>a:hover:before,
.main-navigation .menu>.current-menu-item:not(.wc-menu-item)>a:before,
.loud-link a:hover:before {
    width: calc(100% - 40px);
}