How To Add Pagination To WordPress Posts and Pages Easily

Total
1
Shares
Add Pagination

There may be occasions when you want to split a WordPress post or page into multiple pages. This can be useful to reduce load times if it is a particularly long article or has a lot of images embedded in it.

Splitting the long WordPress posts or pages is the best way to display your long articles into multiple pages without changing the Post or Page’s URL. If you paginate WordPress long post or page, it will be easy for readers to jump from different parts of the post. In such a way you can make your post more interesting for blog readers.

WordPress has had this little-known ability built-in for some time now. It’s a real easy way to split your posts or pages into as many pages as you want.

The numbering of pages called “Pagination” is not an option available from either the default Visual or HTML WordPress editors. This option is not to be confused with the “More” tag that is used to show usually the first part of a post on the main blog page and then the whole post on its own page. The More tag is available from the post editor toolbar.

Add Pagination

You must have seen such features on different websites and you may have been thinking which WordPress Plugin used to present the post in this way. But WordPress has a Built-in feature for Post or Page pagination. All you have to add the following tag in your post where you want to break the page or Post.

To split the page into multiple pages you first switch to the HTML or Code Editor. Then just use the following code wherever you want to split the page or post: Go the HTML editor and add the following code:

<!--nextpage-->
QuickPostPageWithMultiPages
Screenshot of quicktags Post dividing post into Multiple Pages

That’s all, by putting one simple <!–nextpage–> tag in the content of your post or page, you are breaking the post to get more views for a single post or page.

So a multiple page post would look something like this:

WordPress Posts Pagination

 

Styling the pagination View

Most of the WordPress themes use single.php file to display the Post content, in that file need to tell WordPress to show the pagination links for <!–nextpage–> quicktag. If you don’t want to display the default nextpage quicktags then you have to create the CSS class for styling and need to edit the PHP loop on single.php file or need to add a function in the function.php file.

If you are using DIYTheme, then read this tutorial for detail about Customizing and Styling the NextPage “Post Pagination” for your theme.

Otherwise, add in single.php (or loop-single.php) you’ll find the WordPress loop which displays your post or page.

wp_link_pages();
<div id="content" role="main">

<?php while ( have_posts() ) : the_post(); ?>

<nav id="nav-single">
<h3 class="assistive-text"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h3>
.
.
</nav><!-- #nav-single -->

<?php get_template_part( 'content', 'single' ); ?>
wp_link_pages();
<?php comments_template( '', true ); ?>

<?php endwhile; // end of the loop. ?>

</div><!-- #content -->

When you add the wp_link_pages function in the loop, this loop will show the post or page title and the content and displays pagination in the single post or page.

Twenty Eleven WordPress theme by default have the Pagination style as follow:

<span class="nav-previous">
<?php previous_post_link( '%link', __
( '<span class="meta-nav">&larr;</span> Previous', 'twentyeleven' ) ); ?>
</span>
<span class="nav-next">
<?php next_post_link( '%link', __
( 'Next <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?>
</span>

In the above loop displaying some default arguments as used by the Twenty-Ten WordPress theme.

If you find any difficulty in styling the pagination, then contact us, we can help you to match your pagination according to your theme. If you find this post is helpful for you, like the WP Arena’s Facebook fan page.

5 comments
  1. Hello WPArena Team, I have a free theme that not supporting that nextpage quicktag, so how to make it work? just add those PHP codes?

    1. by the way which free theme are you using, if your theme’s < !--nextpage--> tag is not working, then you should need to edit your loop in the single.php file, the code is given above, try yourself, if you are still not able to get the pagination, send us your details via contact us pages and we can do it for you…

      Thanks

  2. Is it possible to add pagination to a section of a post or page? I have a specific section in the middle of my page that I want to add pagination to, but only to that specific block of long text. I don’t want it to be the entire page. Is that possible?

    1. Hi @James, It’s entirely possible and needs some custom coding. Where does this pagination lead to? Can you please guide me a bit, so I can guide you better.

      Thanks

Leave a Reply to Editorial Staff Cancel reply

Your email address will not be published. Required fields are marked *

Sign Up for Our Newsletters

Get notified of the best deals on our WordPress themes.

You May Also Like