patric-boehner
6/23/2015 - 11:15 AM

Single Post Navigation (Pagination)

Single Post Navigation (Pagination)

// Some additional styaling in sass to take advantage of the pseudo elements
// in the markup using a sass variable for the dashicon font.
// Does not include any media query styles

.pagination
	clear: both
	border-top: 2px solid #f5f5f5
	padding-top: 24px

.post-pagination
	width: 50%
	padding: 0 35px 0 35px
	position: relative

	a 
		font-size: 0.9em

.post-pagination span
	display: block
	font-weight: 700
	font-size: 0.9em

.nav-icon-left:before
	font-family: $dashicons
	font-size: 1.4em
	content: "\f341"
	position: absolute
	left: 0
	top: -3px

.nav-icon-right:before
	font-family: $dashicons
	font-size: 1.4em
	content: "\f345"
	position: absolute
	top: -3px
	right: 0
/* Just some basic styling that meets my needs and works well with the default genesis theme styling.
Does not include any media query styles */

.post-pagination {
  width: 50%;
}

.post-pagination span {
  display: block;
  font-weight: 400;
}
<?php
//* Do NOT include the opening php tag shown above. Copy the code shown below.


//* Customize previous and next post links after entry
add_action ( 'genesis_entry_footer', 'pb_genesis_prev_next_post_nav' );


/**
 * Customize and display links to previous and next post, from a single post.
 * https://gist.github.com/patric-boehner/d9529f88fb20482571b8/
 * @since 1.5.1
 * @return null Return early if not a post.
 */

function pb_genesis_prev_next_post_nav() {

	if ( ! is_singular( 'post' ) )
		return;

	genesis_markup( array(
		'html5'   => '<div %s>',
		'xhtml'   => '<div class="navigation">',
		'context' => 'adjacent-entry-pagination',
		) );

	$previous_post = get_adjacent_post(false, '', true);
	$next_post = get_adjacent_post(false, '', false);

	//* Add class 'post-pagination' for additional styling
	echo '<div class="post-pagination pagination-previous alignleft">';
	//* Display navigation text above link with angular quote (») only if their is another post
	if ( ! empty($next_post) ) {
	  // Seprate Span element for navigation arrows using pseudo elements for styling
		echo '<span class="nav-icon-left"></span>';
		echo '<span>Next Post</span>';
	}
	//* Move the "Next" post link to the left
	//* Remove the angular quote (») at the end of link
	next_post_link( '%link' );
	echo '</div>';

	//* Add class 'post-pagination' for additional styling
	echo '<div class="post-pagination pagination-next alignright">';
	//* Display navigation text above link with angular quote (») only if their is another post
	if ( ! empty($previous_post ) ) {
	  // Seprate Span element for navigation arrows using pseudo elements for styling
		echo '<span class="nav-icon-right"></span>';
		echo '<span>Previous Post</span>';
	}
	//* Move the "Previous" post link to the right
	//* Remove the angular quote (») at the end of link
	previous_post_link( '%link' );
	echo '</div>';

	echo '</div>';

}

#Customize and display links to previous and next post, from a single post


This snippet is for displaying and customizing the links to previous and next posts, for single post entries within the Genesis Framework.

Normally the links to the previous and next post are displayed in the entry footer as the title of the next and previous posts. I wanted to customize the function to swap the link order so that the newest article was accessible from the link on the left and the previous article was accessible form the link on the right, to better navigate posts in an ascending order. I also wanted to add the text "Previous Post" and "next Post" above the linked post titles for better clarification. See the comment in the code for more detail.

For additional customizable permeates, see the codex links under References.

Normally single post navigation is added via:


//* Add post navigation
add_action( 'genesis_after_loop', 'genesis_prev_next_post_nav' );

#Source:

Find the source file in the Genesis theme under: genesis/lib/structure/post.php

/**
 * Display links to previous and next post, from a single post.
 *
 * @since 1.5.1
 *
 * @return null Return early if not a post.
 */
function genesis_prev_next_post_nav() {

    if ( ! is_singular( 'post' ) )
        return;

    genesis_markup( array(
        'html5'   => '<div %s>',
        'xhtml'   => '<div class="navigation">',
        'context' => 'adjacent-entry-pagination',
    ) );

    echo '<div class="pagination-previous alignleft">';
    previous_post_link();
    echo '</div>';

    echo '<div class="pagination-next alignright">';
    next_post_link();
    echo '</div>';

    echo '</div>';

}

#Refrance:

Notes:

Codex: