{"id":2394,"date":"2019-02-10T17:46:55","date_gmt":"2019-02-10T17:46:55","guid":{"rendered":"https:\/\/gpsites.co\/merch\/?p=2394"},"modified":"2019-02-10T17:46:55","modified_gmt":"2019-02-10T17:46:55","slug":"the-single-post","status":"publish","type":"post","link":"https:\/\/notalotofspace.com\/?p=2394","title":{"rendered":"The Single Post"},"content":{"rendered":"\r\n<p>The single post has been styled to provide a bold introduction, large featured image and clean easy to read content. Starting with a custom hero header and finishing with a  related posts section. It should provide all you need to create categorised post content to support your shop. All of the custom features are 100% dynamic you simply need to:<\/p>\r\n\r\n\r\n\r\n<ul><li>Write your post<\/li><li>Add a manual excerpt<\/li><li>Select your featured image<\/li><li>Give it a category<\/li><\/ul>\r\n\r\n\r\n\r\n<p>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.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">The hero header<\/h2>\r\n\r\n\r\n\r\n<p>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.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">The basics<\/h3>\r\n\r\n\r\n\r\n<p>Before diving into the detail if you&#8217;re not familiar with the Elements module and its Hook, Header and Layout Element then start reading here:<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-documentation\"><div class=\"wp-block-embed__wrapper\">\r\n<blockquote class=\"wp-embedded-content\" data-secret=\"nrrgcyuu4B\"><a href=\"https:\/\/docs.generatepress.com\/article\/elements-overview\/\">Elements Overview<\/a><\/blockquote><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" src=\"https:\/\/docs.generatepress.com\/article\/elements-overview\/embed\/#?secret=nrrgcyuu4B\" data-secret=\"nrrgcyuu4B\" width=\"600\" height=\"338\" title=\"&#8220;Elements Overview&#8221; &#8212; Documentation\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\r\n<\/div><\/figure>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">The four elements<\/h3>\r\n\r\n\r\n\r\n<h4 class=\"wp-block-heading\">#1 Hook: Single Post Custom Entry Header<\/h4>\r\n\r\n\r\n\r\n<p>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. <\/p>\r\n\r\n\r\n\r\n<p>If you do not want the custom post header then you can remove the <strong>Single Post Custom Entry Header <\/strong>Hook element. You also won&#8217;t be needing  the following hook element and layout element.<\/p>\r\n\r\n\r\n\r\n<h4 class=\"wp-block-heading\">#2 Hook: Fade Out Header Element on Scroll up<\/h4>\r\n\r\n\r\n\r\n<p>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&#8217;re interested.<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>&lt;script>\r\nwindow.onscroll = function () {\r\n    var target = document.getElementById(\"custom-post-entry-header\");\r\n\r\n    var height = window.innerHeight;\r\n\r\n    var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;\r\n\r\n    \/\/ Change this if you want it to fade faster\r\n    height = height \/ 3;\r\n    var fader = (height - scrollTop) \/ height;\r\n    if (fader > 0) {\r\n        target.style.opacity = fader;\r\n    }\r\n\r\n};\r\n&lt;\/script><\/code><\/pre>\r\n\r\n\r\n\r\n<h4 class=\"wp-block-heading\">#3 Layout: Remove single post title<\/h4>\r\n\r\n\r\n\r\n<p>As we have the <strong>Single Post Custom Entry Header and Post Navigation<\/strong> element we don&#8217;t need the Post title in our content. So this element simply removes that.<\/p>\r\n\r\n\r\n\r\n<h4 class=\"wp-block-heading\">#4 Header: Single Post Header Featured Image<\/h4>\r\n\r\n\r\n\r\n<p>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.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">A note on using Elements<\/h3>\r\n\r\n\r\n\r\n<h4 class=\"wp-block-heading\">Duplicating Elements<\/h4>\r\n\r\n\r\n\r\n<p>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.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">The Content<\/h2>\r\n\r\n\r\n\r\n<p>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 <strong>Appearance &gt; Elements &gt; Single Post Layout &#8211;&gt; Content Tab &gt; Content Width<\/strong>. <\/p>\r\n\r\n\r\n\r\n<p>To note you can combine this setting with the above <strong>Remove Single Post<\/strong> Layout element. I have kept the two separate for clarity and in case you want to remove one but not the other.<\/p>\r\n\r\n\r\n\r\n<p>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.<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>#post-nav .post-nav-entry-header {\r\n    max-width: 680px;\r\n    margin-left: auto;\r\n    margin-right: auto\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Narrow Content Pre GP Premium 1.8<\/h3>\r\n\r\n\r\n\r\n<p>If you&#8217;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 &gt; Additional CSS and change it to:<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>#post-nav .post-nav-entry-header, .single-post #content {\r\n    max-width: 680px;\r\n    margin-left: auto;\r\n    margin-right: auto\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Single Post &#8211; Centred date and by-line<\/h3>\r\n\r\n\r\n\r\n<p>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.<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>.single-post .entry-header {\r\n    text-align: center;\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Single Post &#8211; increased whitespace<\/h3>\r\n\r\n\r\n\r\n<p>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.<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>.single-post .entry-content *+h2 {\r\n    margin-top: 64px;\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Adding content<\/h3>\r\n\r\n\r\n\r\n<p>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.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Related Posts<\/h2>\r\n\r\n\r\n\r\n<p>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. <\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">How I made the Related Posts<\/h3>\r\n\r\n\r\n\r\n<h4 class=\"wp-block-heading\">#1 A WP Show Posts List<\/h4>\r\n\r\n\r\n\r\n<p>In the <strong>Dashboard &gt; WP Show Posts<\/strong> you will see a Post List named <strong>Related<\/strong>. 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.<\/p>\r\n\r\n\r\n\r\n<h4 class=\"wp-block-heading\">#2 Hook: Related Posts<\/h4>\r\n\r\n\r\n\r\n<p>We use the hook found in A<strong>ppearance &gt; Elements &gt; Related Posts.<\/strong> We have selected the <code>before_footer<\/code> hook and checked Execute PHP. Our Display Rules are set to All Posts. For the content we&#8217;re using some PHP instead of the usual WP Show Posts Shortcode. This is so it dynamically displays our content.<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>&lt;div class=\"wpsp-related-posts  grid-container\">\r\n\t&lt;h2>Related Posts&lt;\/h2>\r\n&lt;?php\r\nif ( is_single() ) {\r\n    $cats =  get_the_category();\r\n    $cat = $cats[0];\r\n} else {\r\n    $cat = get_category( get_query_var( 'cat' ) );\r\n}\r\n\r\n$cat_slug = $cat->slug;\r\n$list = get_page_by_title( 'related', 'OBJECT', 'wp_show_posts' );\r\nwpsp_display( $list->ID, 'tax_term=\"' . $cat_slug . '\"' );\r\n?>\r\n&lt;\/div><\/code><\/pre>\r\n\r\n\r\n\r\n<p>You will see in this line the <code>related<\/code> list name:<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>$list = get_page_by_title( 'related', 'OBJECT', 'wp_show_posts' );<\/code><\/pre>\r\n\r\n\r\n\r\n<p>As noted in #1 the name of the List must match this label.<\/p>\r\n\r\n\r\n\r\n<h4 class=\"wp-block-heading\">#3 Styling the related posts block<\/h4>\r\n\r\n\r\n\r\n<p>In our PHP \/ HTML you will see two classes added to the parent DIV. They are <strong>wpsp-related-posts<\/strong> and  <strong>grid-container<\/strong>.<br><strong>grid-container<\/strong> is a GeneratePress class and it simply sets the container width to that within the Customizer. Its dynamic which is nice.<br><strong>wpsp-related-posts<\/strong> is a Custom class and sets the padding, margins and background colors. Look for this in the <strong>Customizer &gt; Additional CSS<\/strong>:<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>.wpsp-related-posts {\r\n    background-color: #f2f3f4;\r\n    padding: 64px;\r\n    -webkit-box-sizing: border-box;\r\n    box-sizing: border-box;\r\n}\r\n\r\n.wpsp-related-posts h2 {\r\n    margin-bottom: 64px;\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n<p>Changing the background colors or styles are done by editing that CSS<\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>Categorising post to create guides, how to&#8217;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.<\/p>\n","protected":false},"author":1,"featured_media":294,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[],"_links":{"self":[{"href":"https:\/\/notalotofspace.com\/index.php?rest_route=\/wp\/v2\/posts\/2394"}],"collection":[{"href":"https:\/\/notalotofspace.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notalotofspace.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notalotofspace.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notalotofspace.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2394"}],"version-history":[{"count":0,"href":"https:\/\/notalotofspace.com\/index.php?rest_route=\/wp\/v2\/posts\/2394\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notalotofspace.com\/index.php?rest_route=\/wp\/v2\/media\/294"}],"wp:attachment":[{"href":"https:\/\/notalotofspace.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2394"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notalotofspace.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2394"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notalotofspace.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}