Merch Styling

The Single Post

Categorising post to create guides, how to's and featured content is a great way to boost your shops presence. The single post header and single post has been designed to do just that. With custom hero title, excerpt and post navigation. 100% dynamic all you need to is add content.

The sin­gle post has been sty­led to pro­vi­de a bold intro­duc­tion, lar­ge fea­tured image and clean easy to read con­tent. Star­ting with a cus­tom hero hea­der and finis­hing with a rela­ted posts sec­tion. It should pro­vi­de all you need to crea­te cate­go­ri­sed post con­tent to sup­port your shop. All of the cus­tom fea­tures are 100% dyna­mic you sim­ply need to:

  • Wri­te your post
  • Add a manu­al excerpt
  • Select your fea­tured image
  • Give it a category

A note on Cate­go­ries: The cus­tom post navi­ga­ti­on and rela­ted posts sec­tion dis­plays con­tent based on the cur­rent posts cate­go­ry. It uses the first Cate­go­ry assi­gned to the post. So if you choo­se to assign a post to mul­ti­ple cate­go­ries it will only que­ry the first category.

The hero header

The sin­gle post hea­der is qui­te a com­pli­ca­ted set-up. Using four sepa­ra­te Gene­ra­te­Press Ele­ments. Inclu­ding 2 hooks, a fea­tured image hea­der and a lay­out ele­ment. The­re is not­hing the user needs to do for this to be dis­play­ed or dyna­mi­cal­ly updated.

The basics

Befo­re diving into the detail if you’­re not fami­li­ar with the Ele­ments modu­le and its Hook, Hea­der and Lay­out Ele­ment then start rea­ding here:

The four elements

#1 Hook: Single Post Custom Entry Header

This hook ele­ment con­tains cus­tom PHP. It out­puts the Cate­go­ry, Post Tit­le and Post Excerpt. Chan­ging this set-up requi­res know­ledge of PHP. It is the­re­fo­re advi­s­able that it is left alone. 

If you do not want the cus­tom post hea­der then you can remo­ve the Sin­gle Post Cus­tom Ent­ry Hea­der Hook ele­ment. You also won’t be nee­ding the fol­lowing hook ele­ment and lay­out element.

#2 Hook: Fade Out Header Element on Scroll up

This hook con­tains some simp­le vanil­la java­script. This pro­vi­des the sub­t­le fade out on the cus­tom hea­der ele­ment upon scrol­ling. The­re is no CSS requi­red. 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 Ent­ry Hea­der and Post Navi­ga­ti­on ele­ment we don’t need the Post tit­le in our con­tent. So this ele­ment sim­ply remo­ves that.

#4 Header: Single Post Header Featured Image

A stan­dard Hea­der Ele­ment that uses the posts fea­tured image for the back­ground. It has been set-up to a pre­set size using Pad­ding and uses the Par­al­lax scrol­ling effect.

A note on using Elements

Duplicating Elements

Ele­ments are like a cle­ver cus­tom post type. Some­ti­mes you may want to make mul­ti­ple varia­ti­ons of them. But ins­tead of crea­ting them from scratch you can use the Dupli­ca­te Post plugin. Just make sure to check the Ele­ments opti­on in the plugins set­tings and use the New Draft opti­on it pro­vi­des on any element.

The Content

The sin­gle post uses a nar­rower con­tent width for easier rea­ding. In GP Pre­mi­ums 1.8 updated Lay­out Ele­ment this is real simp­le to do. Sim­ply go to Appearan­ce > Ele­ments > Sin­gle Post Lay­out –> Con­tent Tab > Con­tent Width.

To note you can com­bi­ne this set­ting with the abo­ve Remo­ve Sin­gle Post Lay­out ele­ment. I have kept the two sepa­ra­te for cla­ri­ty and in case you want to remo­ve one but not the other.

The cus­tom hea­der ele­ment does requi­re a bit of CSS to achie­ve the same effect. To chan­ge this width requi­res edi­t­ing some CSS. Plea­se note that this CSS has been spe­ci­fi­cal­ly desi­gned for the cus­tom hea­der. Making 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­ro­wed. You can eit­her update to 1.8 or find the abo­ve CSS in Cus­to­mi­zer > Addi­tio­nal CSS and chan­ge 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 hea­der. The remai­ning meta, the date and by-line is centred.

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

Single Post – increased whitespace

For clea­rer defi­ni­ti­on of the posts con­tent struc­tu­re I have incre­a­sed the space bet­ween para­graphs and H2 Hea­dings. This clear­ly iden­ti­fies to the rea­der they are star­ting a new sec­tion. This CSS crea­tes a lar­ger white space abo­ve the H2 block the pro­ceeds 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 (Guten­berg) edi­tor. For post wri­ting it is an excel­lent tool. You can of cour­se install and use the Clas­sic edi­tor for your wri­ting. Like­wi­se you could add your favo­ri­te page buil­der alt­hough i per­so­nal­ly would never use one for wri­ting posts.

Related Posts

Rela­ted Posts are dis­play­ed below each of the posts. This is pro­vi­ded by the excel­lent WP Show Posts. Again it is 100% dyna­mic and dis­plays posts wit­hin the same cate­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 Rela­ted. The tit­le of this List is very important as it is used in the next step. If the List name is chan­ged you will need to update the code that fol­lows. The set-up of the List is qui­te simp­le. We select the con­tent and the num­ber of colum­ns to be dis­play­ed. We do NOT select a Taxo­no­my. This will be done by our code.

#2 Hook: Related Posts

We use the hook found in Appearan­ce > Ele­ments > Rela­ted Posts. We have selec­ted the before_footer hook and che­cked Exe­cu­te PHP. Our Dis­play Rules are set to All Posts. For the con­tent we’­re using some PHP ins­tead of the usu­al WP Show Posts Short­code. This is so it dyna­mi­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 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 clas­ses added to the parent DIV. They are wpsp-rela­ted-posts and grid-con­tai­ner.
grid-con­tai­ner is a Gene­ra­te­Press class and it sim­ply sets the con­tai­ner width to that wit­hin the Cus­to­mi­zer. Its dyna­mic which is nice.
wpsp-rela­ted-posts is a Cus­tom class and sets the pad­ding, mar­gins and back­ground colors. Look for this in the Cus­to­mi­zer > Addi­tio­nal 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;
}

Chan­ging the back­ground colors or styles are done by edi­t­ing that CSS

Item added to cart.
0 items - CHF 0.00