Break or split large post into pages in wordpress. Show Next Page and Previous page instead of paginated numbers .

When your post in WordPress got bigger/larger it is a good idea to break the post in pages using

<!--nextpage-->

this helps your larger post to break either in paginated way like 1,2,34 …. or simply ” Previous page Next page “. Here I am sharing you to modify

<!--nextpage-->

to show “Previous Page Next Page ” instead of numbers (like 1,2,3,4…) so that when readers will click on “Next page” they will see the remaining part of the posts.

The Next Page and Previous page will be looked something like the image attached.
wordpress single post modification

**** The code is divided into 2 parts, CSS style sheet portion and PHP code portion

1. The style sheet portion can go either in custom css portion or in the template file (sing post template)


<style>
@media only screen and (min-width:240px) and (max-width: 540px) {
.opc1,.opc2{display:none;}
}
 .opc {
    float: left;
    font-size: 18px !important;
    width: 123px;
}
 
.opc2 {
    position: absolute;
    left: 0px !important;
margin-top: 17px !important;
}
.opc1 {
    position: absolute;
    right: 0 !important;
margin-top: 17px !important;
}
</style>

	


2. The PHP code will go into the single post php template file in WordPress.

<?php
 	$defaults = array(
		'before'           => '<p class="opc">' . __( ' ' ),
		'after'            => '</p>',
		'link_before'      => '',
		'link_after'       => '',
		'next_or_number'   => 'next',
		'separator'        => ' ',
		'nextpagelink'     => '<span class="opc1">' . __( 'Next page' ).'</span>',
		'previouspagelink' => '<span class="opc2">' . __( 'Previous page' ).'</span>',
		'pagelink'         => '%',
		'echo'             => 1
	);
 
        wp_link_pages( $defaults );

?>

*** If you are not experienced enough to edit theme file please feel free to ask help in the comments section.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: