The Single Post

The sin­gle post has been styled to pro­vide a bold intro­duc­tion, large fea­tured image and clean easy to read con­tent. Start­ing with a cus­tom hero head­er and fin­ish­ing with a relat­ed posts sec­tion. It should pro­vide all you need to cre­ate cat­e­gorised post con­tent to sup­port your shop. All of the cus­tom fea­tures are 100% dynam­ic you sim­ply need to:

• Write your post
• Add a man­u­al excerpt
• Select your fea­tured image
• Give it a category

A note on Cat­e­gories: The cus­tom post nav­i­ga­tion and relat­ed posts sec­tion dis­plays con­tent based on the cur­rent posts cat­e­go­ry. It uses the first Cat­e­go­ry assigned to the post. So if you choose to assign a post to mul­ti­ple cat­e­gories it will only query the first category.

The hero header

The sin­gle post head­er is quite a com­pli­cat­ed set-up. Using four sep­a­rate Gen­er­atePress Ele­ments. Includ­ing 2 hooks, a fea­tured image head­er and a lay­out ele­ment. There is noth­ing the user needs to do for this to be dis­played or dynam­i­cal­ly updated.

The basics

Before div­ing into the detail if you’re not famil­iar with the Ele­ments mod­ule and its Hook, Head­er and Lay­out Ele­ment then start read­ing here:

Ele­ments Overview

The four elements

#1 Hook: Single Post Custom Entry Header

This hook ele­ment con­tains cus­tom PHP. It out­puts the Cat­e­go­ry, Post Title and Post Excerpt. Chang­ing this set-up requires knowl­edge of PHP. It is there­fore advis­able that it is left alone. 

If you do not want the cus­tom post head­er then you can remove the Sin­gle Post Cus­tom Entry Head­er Hook ele­ment. You also won’t be need­ing the fol­low­ing hook ele­ment and lay­out element.

#2 Hook: Fade Out Header Element on Scroll up

This hook con­tains some sim­ple vanil­la javascript. This pro­vides the sub­tle fade out on the cus­tom head­er ele­ment 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 Sin­gle Post Cus­tom Entry Head­er and Post Nav­i­ga­tion ele­ment we don’t need the Post title in our con­tent. So this ele­ment sim­ply removes that.

#4 Header: Single Post Header Featured Image

A stan­dard Head­er Ele­ment that uses the posts fea­tured image for the back­ground. It has been set-up to a pre­set size using Padding and uses the Par­al­lax scrolling effect.

A note on using Elements

Duplicating Elements

Ele­ments are like a clever cus­tom post type. Some­times you may want to make mul­ti­ple vari­a­tions of them. But instead of cre­at­ing them from scratch you can use the Dupli­cate Post plu­g­in. Just make sure to check the Ele­ments option in the plu­g­ins set­tings and use the New Draft option it pro­vides on any element.

The Content

The sin­gle post uses a nar­row­er con­tent width for eas­i­er read­ing. In GP Pre­mi­ums 1.8 updat­ed Lay­out Ele­ment this is real sim­ple to do. Sim­ply go to Appear­ance > Ele­ments > Sin­gle Post Lay­out –> Con­tent Tab > Con­tent Width.

To note you can com­bine this set­ting with the above Remove Sin­gle Post Lay­out ele­ment. I have kept the two sep­a­rate for clar­i­ty and in case you want to remove one but not the other.

The cus­tom head­er ele­ment does require a bit of CSS to achieve the same effect. To change this width requires edit­ing some CSS. Please note that this CSS has been specif­i­cal­ly designed for the cus­tom head­er. Mak­ing it wider may con­flict 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 Pre­mi­um 1.8 then the post width will not be nar­rowed. You can either update to 1.8 or find the above CSS in Cus­tomiz­er > Addi­tion­al 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 Sin­gle post has been moved to the cus­tom post head­er. The remain­ing meta, the date and by-line is centred.

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

Single Post — increased whitespace

For clear­er def­i­n­i­tion of the posts con­tent struc­ture I have increased the space between para­graphs and H2 Head­ings. This clear­ly iden­ti­fies to the read­er they are start­ing a new sec­tion. This CSS cre­ates a larg­er white space above the H2 block the pro­ceeds any oth­er type of block.

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

Adding content

This site was built using the WP 5.0 Block (Guten­berg) edi­tor. For post writ­ing it is an excel­lent tool. You can of course install and use the Clas­sic edi­tor for your writ­ing. Like­wise you could add your favorite page builder although i per­son­al­ly would nev­er use one for writ­ing posts.

Related Posts

Relat­ed Posts are dis­played below each of the posts. This is pro­vid­ed by the excel­lent WP Show Posts. Again it is 100% dynam­ic and dis­plays posts with­in the same cat­e­go­ry of the cur­rent post. 

How I made the Related Posts

#1 A WP Show Posts List

In the Dash­board > WP Show Posts you will see a Post List named Relat­ed. The title of this List is very impor­tant as it is used in the next step. If the List name is changed you will need to update the code that fol­lows. The set-up of the List is quite sim­ple. We select the con­tent and the num­ber of columns to be dis­played. We do NOT select a Tax­on­o­my. This will be done by our code.

#2 Hook: Related Posts

We use the hook found in Appear­ance > Ele­ments > Relat­ed Posts. We have select­ed the before_footer hook and checked Exe­cute PHP. Our Dis­play Rules are set to All Posts. For the con­tent we’re using some PHP instead of the usu­al WP Show Posts Short­code. This is so it dynam­i­cal­ly dis­plays 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 not­ed 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 class­es added to the par­ent DIV. They are wpsp-relat­ed-posts and grid-con­tain­er.
grid-con­tain­er is a Gen­er­atePress class and it sim­ply sets the con­tain­er width to that with­in the Cus­tomiz­er. Its dynam­ic which is nice.
wpsp-relat­ed-posts is a Cus­tom class and sets the padding, mar­gins and back­ground col­ors. Look for this in the Cus­tomiz­er > Addi­tion­al 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;
}

Chang­ing the back­ground col­ors or styles are done by edit­ing that CSS