Merch Styling

The Sin­gle 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 custom 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 custom 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 cate­go­ry

A note on Cate­go­ries: The custom 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 cate­go­ry.

The hero hea­der

The sin­gle post hea­der is qui­te a com­pli­ca­ted set-up. Using four sepa­ra­te Gene­rate­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 ele­ments

#1 Hook: Sin­gle Post Custom Ent­ry Hea­der

This hook ele­ment con­tains custom 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 alo­ne.

If you do not want the custom post hea­der then you can remo­ve the Sin­gle Post Custom Ent­ry Hea­der Hook ele­ment. You also won't be nee­ding the fol­lo­wing hook ele­ment and lay­out ele­ment.

#2 Hook: Fade Out Hea­der Ele­ment on Scroll up

This hook con­tains some simp­le vanil­la java­script. This pro­vi­des the subt­le fade out on the custom hea­der ele­ment upon scrol­ling. The­re is no CSS requi­red. Here is the JS if you're inte­rested.

<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 Lay­out: Remo­ve sin­gle post tit­le

As we have the Sin­gle Post Custom 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 Hea­der: Sin­gle Post Hea­der Fea­tured 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 Ele­ments

Dupli­ca­ting Ele­ments

Ele­ments are like a cle­ver custom 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 ele­ment.

The Con­tent

The sin­gle post uses a nar­ro­wer 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 above 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 custom 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 custom hea­der. Making it wider may con­flict with the post navi­ga­ti­on.

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

Nar­row Con­tent Pre GP Pre­mi­um 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 above 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
}

Sin­gle Post — Cent­red date and by-line

Most of the Meta Data on the Sin­gle post has been moved to the custom post hea­der. The remai­ning meta, the date and by-line is cent­red.

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

Sin­gle Post — increa­sed white­space

For clea­rer defi­ni­ti­on of the posts con­tent struc­tu­re I have increa­sed the space bet­ween para­graphs and H2 Hea­dings. This clear­ly iden­ti­fies to the reader they are star­ting a new sec­tion. This CSS crea­tes a lar­ger white space above the H2 block the pro­ceeds any other type of block.

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

Adding con­tent

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.

Rela­ted 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 Rela­ted 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 columns to be dis­play­ed. We do NOT select a Taxo­no­my. This will be done by our code.

#2 Hook: Rela­ted 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 con­tent.

<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 Sty­ling the rela­ted 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­rate­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 Custom 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