In this tutorial, i’ll provide the code you can use to link all single posts within a category together. This code displays next and ‘previous post in category’ navigation links after your post content.
You’ll be able to:
- Link all posts in all categories together with next and previous post in category links
- Add styling to your single post navigation links
- Display Next & Previous nav links to all posts assigned to a specific custom post type
I’ll provide working examples of PHP code as well as some sample CSS code you can modify according to your own styling preferences.
Why Link Posts Within A Category?
You’d have to think linking all posts assigned to one specific category together provides links to more highly related content than simply linking to the next and previous post regardless of which category they’re assigned to.
Posts assigned to one specific category may contain related content whereas posts in another category may not contain any related content therefore decreasing the chance your reader would feel the need to click on the links.
Linking Posts In All Categories
This code will display previous and next post in category links after the content. This means all single posts will be linked only to the next and previous posts assigned to the same category.
add_action( 'genesis_entry_footer', 'category_post_nav', 5 );
function category_post_nav() {
if( !is_single() )
return;
previous_post_link('<span class="single-post-nav previous-post-link">%link</span>', '<< Previous Post in Category', TRUE);
next_post_link('<span class="single-post-nav next-post-link">%link</span>', 'Next Post in Category >>', TRUE);
}Style Single Previous & Next Post Nav Links
You’ll then want to add some basic CSS code to your child themes style.css file to float the links to the left and right otherwise they will be displayed together on the left.
.previous-post-link {
float: left;
}
.next-post-link {
float: right;
text-align: right;
}Here’s what it looks like with only the minimal CSS above added.
You can then add some CSS code like this to your child themes style.css file:
.single-post-nav {
background-color: #F5F5F5;
border: 1px solid #6ec6ea;
color: #fff;
cursor: pointer;
font-family: 'Oswald', arial, serif;
font-size: 12px;
font-weight: normal;
padding: 10px;
text-decoration: none;
}Here’s the result after adding the styling:
Adding Buttons To Post Nav Links
You could easily create CSS to add buttons for each link using a free CSS 3 online generator.
Linking Posts In Custom Post Types
I’ve already provided several code snippets which you can use to link all posts assigned to a custom post type together.
function wpsites_custom_post_type_links() {
if( 'portfolio' == get_post_type() && is_single() ) {?>
<?php previous_post('« « %', 'Previous Slide Show', 'no'); ?>
| <?php next_post('% » » ', 'Next Slide Show', 'no'); ?>
<?php
} }
add_action('genesis_entry_footer', 'wpsites_custom_post_type_links', 5 );
[/code]
The only problem with the above code is it doesn't generate a class to enable you to style your links.
So you may prefer to use this code instead and use the above CSS code for styling your links.
[code]
function wpsites_cpt_pagination_links() {
if( 'portfolio' == get_post_type() && is_single() ) {?>
<span class="nav-previous alignleft"><?php previous_post('« « %', 'Previous Slide Show', 'no'); ?></span>
<span class="nav-next alignright"><?php next_post('% » » ', 'Next Slide Show', 'no'); ?></span>
<?php
} }
add_action('genesis_entry_footer', 'wpsites_cpt_pagination_links', 25 );
[/code]
You could also use
[code]
if( is_singular( 'portfolio' ) ) {?>in replace of
if( 'portfolio' == get_post_type() && is_single() ) {?>Note: Both next_post and previous_post functions are deprecated and have been replaced with next_post_link and previous_post_link however these will not work for single CPT’s.
Other Options
You can also install the WP Page Navi plugin and add pagination in your template files. This plugin also adds styling.
Add previous and next post nav links to all single posts not linked within a category.
Add single post nav links using code in your template files for themes which don’t include any built in links.
Do You Know The Answer To This Question
Can you still use the template tags previous_post() and next_post()?
Source: WordPress Codex
Leave a Reply
You must be logged in to post a comment.