Displaying navigation for a single post in WordPress – lesson 21

by Nikolaenko Maxim · Published January 6, 2015 · Updated August 7, 2018

In this tutorial, we'll talk about how to navigate between posts., if you are on record (template single.php).

First, open the single.php template and add to the template code, to the right place navigation code.

wordpress next privios navigation - курсы по woordpress

Code for inserting navigation into the template:

<div id="single-nav" class="clearfix"> 
											<div class="prev"><?php next_post_link('%link', '<span>%title</span>', false); ?></div>
											<div class="next"><?php previous_post_link('%link', '<span>%title</span>', false); ?></div>
											<div class="prev-responsive"><?php next_post_link('%link', '<span>Previous</span>', false); ?></div>
											<div class="next-responsive"><?php previous_post_link('%link', '<span>Next</span>', false); ?></div>
										</div>
										<!-- /single-nav -->

<div class="prev"><?php next_post_link('%link', '<span>%title</span>', false); ?></div>

<div class="next"><?php previous_post_link('%link', '<span>%title</span>', false); ?></div>

<div class="prev-responsive"><?php next_post_link('%link', '<span>Previous</span>', false); ?></div>

<div class="next-responsive"><?php previous_post_link('%link', '<span>Next</span>', false); ?></div>

</div>

After adding the navigation code, we need to make it beautiful and add styles to the /wp-content/themes/my_theme_tmp/css/style.css file.

/* Next/Previous Navigation */
#single-nav{
	font-size: 12px;
	height: 60px;
	line-height: 60px;
	background: #969696; 
}
body #single-nav a{
	display: block; 
	height: 60px;
	line-height: 60px;
	padding: 0 25px;
	color: #fff;
	font-size: 14px;
	text-decoration: none;
}
#single-nav a:hover{
	background: #737373;
}
#single-nav .next,
#single-nav .prev,
#single-nav .prev-responsive,
#single-nav .next-responsive{
	width: 50%;
	float: left;
}
#single-nav .next,
#single-nav .next-responsive{
	margin: 0;
	float: right;
	text-align: right;
}

#single-nav .prev a span,
#single-nav .prev-responsive a span{
	display: block;
	padding-left: 17px;
	background-image: url("../images/arrow-left.png");
	background-position: left;
	background-repeat: no-repeat;
}
#single-nav .next a span,
#single-nav .next-responsive a span{
	display: block;
	padding-right: 17px;
	background-image: url("../images/arrow-right.png");
	background-position: right;
	background-repeat: no-repeat;
}

.prev-responsive,
.next-responsive{ display: none; }
/* Next/Previous Navigation */

/* Next/Previous Navigation */

#single-nav{

font-size: 12px;

height: 60px;

line-height: 60px;

background: #969696;

}

body #single-nav a{

display: block;

height: 60px;

line-height: 60px;

padding: 0 25px;

color: #fff;

font-size: 14px;

text-decoration: none;

}

#single-nav a:hover{

background: #737373;

}

#single-nav .next,

#single-nav .prev,

#single-nav .prev-responsive,

#single-nav .next-responsive{

width: 50%;

float: left;

}

#single-nav .next,

#single-nav .next-responsive{

margin: 0;

float: right;

text-align: right;

}

#single-nav .prev a span,

#single-nav .prev-responsive a span{

display: block;

padding-left: 17px;

background-image: url("../images/arrow-left.png");

background-position: left;

background-repeat: no-repeat;

}

#single-nav .next a span,

#single-nav .next-responsive a span{

display: block;

padding-right: 17px;

background-image: url("../images/arrow-right.png");

background-position: right;

background-repeat: no-repeat;

}

.prev-responsive,

.next-responsive{ display: none; }

/* Next/Previous Navigation */

For a beautiful display of arrows, we need to upload two images to the /wp-content/themes/my_theme_tmp/images/ folder… .

Images for navigation:

Before navigation styling:

next privios navigation without style - wordpress courses

After styling the navigation:

wordpress next privios navigation with style - wordpress courses

That's all there is to it, as we see, our favorite content management system has long taken care of that, so that developers do not have to write navigation with the name of the previous and next article from scratch.

Good luck in learning and developing user-friendly and beautiful sites, and from me, as always, the source code of the topic at the moment.

In the next lesson, we'll look at, how to make templates for pages and create a site menu.

Online tutoring services. List of courses I teach

Basic web design course;
Site layout;
General course on CMS WordPress and continuation of the course on template development;
Website development in PHP.