Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Single Post Navigation (Pagination)

#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:

<?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_customize_entry_pagination' );
/**
* 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_customize_entry_pagination() {
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>';
}
<?php
//* Do NOT include the opening php tag shown above. Copy the code shown below.
//* Hook the new pagination in the location thats right for you.
add_action ( 'genesis_entry_footer', 'pb_customize_entry_pagination' );
// add_action( 'genesis_after_entry', 'pb_customize_entry_pagination' );
/**
* 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_customize_entry_pagination() {
if ( ! is_singular( 'post' ) )
return;
// Links
$prev_link = get_previous_posts_link( apply_filters( 'genesis_prev_link_text', '' . __( 'Previous Page', 'blank-child-theme' ) ) );
$next_link = get_next_posts_link( apply_filters( 'genesis_next_link_text', __( 'Next Page', 'blank-child-theme' ) . '' ) );
// Screen Reader Text
$screen_reader = '<h2 id="pagination-nav" class="screen-reader-text">' . __( 'Pagination Menu', 'blank-child-theme' ) . '</h2>';
// Output
if ( $prev_link || $next_link ) {
$pagination = $prev_link ? sprintf( '<div class="pagination-previous first one-half">%s</div>', $prev_link ) : '';
$pagination .= $next_link ? sprintf( '<div class="pagination-next one-half">%s</div>', $next_link ) : '';
genesis_markup( array(
'open' => '<nav %s>',
'close' => '</nav><!-- End of Pagination -->',
'content' => $screen_reader . $pagination,
'context' => 'archive-pagination',
) );
}
/* 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;
}
// 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment