WordPress Pagination Tutorial (Customized Question & Template Integration)

by birtanpublished on July 3, 2020

Oh kitties carrots cookies no hello

everyone in this video we will learn

about pagination in WordPress now I know

pagination sounds like a super boring

topic and it kind of is but it's a basic

building block that we need to get out

of the way before we learn about more

exciting topics like custom post types

custom fields and all of the things that

make WordPress truly powerful okay so

let's begin this video by asking the

question what is pagination and answer

that I will share my screen so this is

the home page of my website but if I

click this blog link in the header here

we see a typical blog listing page so

here's one blog post here's another

here's another and if I scroll down I

can tell you that there are a total of

10 blog posts on this page now my

website has more than 10 total posts but

by default WordPress will show 10 per

page so tens of the default but we can

customize that by going into our

dashboard and in the settings menu in

the sidebar if we click on reading here

we see an option that reads blog pages

show at most and by default it's 10 but

I could change this to 2 or 3 just to

make the change dramatic and click Save

Changes and now if I go back to my

front-end blog and refresh just as we

would expect now there are only two blog

posts per page so clearly we need some

sort of links down here that would let

visitors click to read the next two

posts and then the next tube and then

the next two okay so that's where

pagination comes into play now my

website currently doesn't have those

links because I'm using the theme that

we've coded from scratch throughout this

video series or this playlist so let's

add in those links right now together so

over in my text editor I have opened the

folder of the currently activated theme

and the file that controls

output of this blog listing page is

index dot PHP so here we see the

beginning of the loop code and here's

the line that gets repeated once for

each post so if we want to add a bit of

content just once down at the bottom

here right after this while loop we

could just say echo hello as a test and

there we see it but we don't actually

want to output hello what we actually

want to output is a link that will take

us to a new URL with the next two posts

and WordPress makes this super easy

because there's a function named next

posts link all right so let's save this

and there we have it so if I click this

next page link we are taken to a new

page with two different blog posts and

most importantly notice the URL so

WordPress added on a slash page / –

because we're on the second page of

results and if we click next page again

no surprises here we have two new posts

and now we're on slash page / – go back

a page so instead of clicking next page

again to go to page four of results what

if they wanted to go back to page two

well in our PHP file we can just say

previous posts link all right save this

and now we have this previous page link

so I can click that to go back to page

two and we could click it again to go

back to the original page so these two

functions get the job done but WordPress

also offers us something a bit more

advanced so check this out I could

delete these two functions and instead

echo out the results of a function named

paginate links let's save this and

refresh and you can see that this is

similar to how Google handles pagination

so we're currently on page one of PO

so it's not a link we can't click to go

where we already are but we could click

to go to the second page of results or

we could click on the third or fourth

page you get the idea and this function

also outputs traditional previous and

next links so I'm happy with this

pagination but my work is not done yet

because when you're creating a theme you

want to be sure to add pagination

support to any and all listing or

results templates what do I mean by that

well we've added pagination support to

our indexphp file

but what if a visitor clicked to view a

category archive screen so if I click on

opinion here is a filtered view of only

posts with the category opinion and this

page is being powered by archive dot PHP

so I want to go ahead and add pagination

to this template so let's scroll down

and right after this while loop ends we

can just once again echo out paginate

links save that refresh this page

perfect and now we can see that our

archived template has pagination and

before we move on to the juicy part of

this video let's also add pagination

support to our search results template

so in the header if I search this

website for the word about here's the

results screen so results for about I

know that there are more than just these

two posts that are showing all right so

to add pagination support to search

results in our text editor I will open

up search dot PHP and once again right

after this while loop right after it

closes I go out paginate links save that

perfect okay so that was pretty simple

and the takeaway point here is that when

you're dealing with a page where the URL

defines which content should be queried

in situations like that

adding pagination is a piece of cake

what do I mean by that well if I click

on the

a link on this page I don't need to

write PHP to tell WordPress what to

query just based on the URL alone it

knows to query the most recent posts and

if I view a category archive page so if

I click on opinion again I don't need to

write PHP to tell WordPress to only

query the posts that have the category

of opinion just based on the URL alone

WordPress already knows to do that

okay so adding pagination to this type

of a page is a piece of cake however

what if we have a page where we do not

want to rely on the URL to define what

is getting queried from the database or

in other words what if we are using our

own custom queries within our own custom

templates well getting pagination to

play nicely with our custom queries can

be a bit tricky so for the remainder of

this video that's what we're going to

focus on so as an example if I click my

about page currently my about page is

just a standard page entry that uses the

standard page PHP template so this is

the content that gets queried from the

database but let's imagine that for

whatever reason I want this page to use

a custom template and maybe down here

below the main content I want to have a

list of the most recent blog posts that

have a category of about so maybe I want

to output three of those posts and then

have a next pagination link you get the

idea

so now we have a goal of what we want to

achieve let's work on it together so

first we will create a custom template

together then we will write a custom

query together and then finally we'll

make sure that pagination successfully

works with it okay so let's start with

step one we want to create a custom

template for this about page so I'm

going to take note of the fact that the

slug of this page is simply the word

about and with that in mind over in my

text editor within the theme folder if I

just create a new file and name it page

and then the slug of the page that I'm

targeting so about dot php' and I can

say oh hello in this file and if we

refresh this page we can see that it's

using that custom template file now

there's no sense in writing a brand new

template from scratch so I'm just going

to go into the standard page PHP and

copy all of the contents to my clipboard

and then paste it into this new template

page – about okay so now we're back to

where we started with this original

template but now we have a file that we

are free to modify so maybe on this

about page I don't want this sidebar so

in page – about I'll just delete this

get sidebar line and also delete the

main column div alright next let's add

in a custom query of blog posts right

about here so back in our text editor

right below this entire if statement

even right after we drop out of PHP here

I will just create a heading level one

that says blog posts about us and now we

just want to write a custom query that

pulls in only posts that have a category

of about so to do that I'm going to need

to drop into PHP and the first thing I'm

going to do is create my own variable I

can name it anything I'd like let's call

it about posts and we'll set it to equal

a new instance of the WP query class all

right and now we just provide an array

of arguments that will tell WordPress

what to query from the database so we'll

say array new pair of parentheses and

then within that new pair I'm going to

drop down just to stay organized alright

and remember we only want posts from the

about category so we will say category

name and then we'll set that to eat

all about now notice I didn't just use

an equal sign here I used an equal sign

and then the greater than symbol okay

next let's also say that when it comes

to pagination we only want to list three

posts per page so we can say posts per

page and set it to equal three all right

this is all we need for now this query

looks good so WordPress will query the

database and the collection of posts

that it returns will live within our

about posts variable so now we just need

to loop through this collection loop

through this variable and output them

onto the page

so let's write a bit of traditional

wordpress loop code we always want to

begin our loop with an if statement to

first check to make sure we actually

have anything to loop through in the

first place so we'll say if our about

posts collection if it actually contains

content so we can look within our object

for method named have posts and it will

return a value of true if there are any

posts and then we'll add a semicolon and

then on a new line we'll end the if

statement okay and now in between these

two lines so if this condition is met if

it's true we just want to loop through

the collection of posts so we'll use a

while loop and we'll say while our about

posts collection as long as it still has

more posts to loop through keep the loop

running so we'll just again use the have

posts method add a semicolon here and

then we want to end this while statement

so and while okay and then in between

these two lines

anything we type here will happen once

for each post in the collection now I

want to output a bit of HTML so I'm

going to drop out of PHP and then I want

to create an HTML list item element and

after this let's be sure to drop back

into PHP so this code will work properly

all right and then within our list item

let's create an HTML hyperlink

okay and the text that users will

actually click on is the title of each

blog post so if I want the title I can

drop back into PHP and say the title and

then we want to provide a URL for each

post so we can just output the permalink

so PHP the permalink and in order for

these functions to actually work so the

permalink and that title in order for

those to work properly we need to

prepare the right data for each post

every time the loop runs so above this

line within our while loop we want to be

sure to dig into our collection variable

and call the method that is named the

post this method will prepare the data

for each post as the loop runs so that

these functions can do their job all

right so let's save this and test it out

in the browser perfect so we see the

three most recent blog posts that have a

category of about now in terms of

pagination remember we said posts per

page equals three so if I wanted to see

the next three blog posts from the about

category you might think it would be as

simple as going up to the URL and typing

slash page

/ – and before I press ENTER and

actually go to that URL pay attention to

the three posts that are on this

original page so we have about us

related blog post blogging about our

team and about us this decade and even

when I go to slash page / –

unfortunately we don't see the next

three posts we see the exact same three

so pagination doesn't work with custom

queries out-of-the-box but it's totally

within our power to fix that so check

this out I'm going to go back to the

original page just the normal slash

about and if I go back to our code

within our array of arguments for

creating a new query

I can add on another property named

paged and if I set this to two

now we are indeed seeing the next three

posts right so this is what we were

hoping to see on the slash page / 2

results and if I change this to page 2

equals 3 obviously we only see two new

posts because this is all the posts that

currently exist in my about category but

the idea is that this is what we would

see it the traditional slash page /

it doesn't do us much good to hard-code

this paged value like this we want our

query to be dynamic we want it to be

aware of the URL that a user is visiting

so back in the browser if I go to slash

page / – the question becomes within our

PHP code how can we extract data from

the current URL so in this instance

within our PHP how can we extract the

value of – well luckily the developers

of WordPress have us covered so check

this out on a new line I'll create

another variable I can name anything I'd

like let's call it our current page and

WordPress has a function named get query

VAR now this function accepts all kinds

of arguments you can use this function

to extract all sorts of data from the

current URL but in this case what we are

interested in is the paged value so the

argument in this case that we're looking

for is paged all right and now with this

variable setup within our actual query

instead of hard-coding in a number here

we can just use our variable so our

current page let's save this and refresh

perfect so I'm on slash page / – and I'm

seeing these posts and if I go back to

just the normal page we see the first

three beautiful alright now we're almost

done next let's work on adding the

actual pagination links below the list

right so the links that will take you to

the next or previous page of results now

earlier in this lesson we learned about

a

Inchon named next posts link so let's

try using that function again so it

outputs a link right about here so right

after the while loop ends I'll just say

next posts link and you'll notice that

did absolutely nothing and this is

because again pagination including

pagination functions don't work with

custom queries out of the box

so if we want this function to play

nicely with our custom query we're going

to need to go the extra mile we're going

to need to pass this function two

arguments

so the first argument is what we want

the link text to say so I'll just say

next page and the second argument is

what's important in order for this

function to work we need to tell it the

maximum number of pages that this query

needs right so are there going to be

three total pages of results are there

going to be 5 or 10 pages of results so

to figure out that number of total pages

of results we can just look within our

collection of posts remember the

variable name is about posts so we can

just say about posts and then we can

look within it for max num pages so now

if I save this and refresh perfect we

see the next page link so if I click

that the URL it takes me to slash page /

2 and if I click next page again we're

on to the third page of results perfect

and if we want to add in the previous

page link it does work with custom

queries out-of-the-box so we can just

say previous posts link that's all we

need and there it is but what if you

don't want to use these simplistic

previous and next links and what if you

want to use the Google like pagination

with individual numbered links so

remember earlier in the lesson we can

delete these two functions remember

earlier in the lesson when we used echo

paginate links well as you might expect

that function doesn't work with

custom queries out-of-the-box but it's

very simple to fix that so within these

parentheses we can just provide an array

of options and this function just like

the next posts link needs to know the

maximum number of pages that this query

will produce so this function is on the

lookout for a property named total and

then we can just set that to equal our

about posts collection look within it

again for max num pages so this way this

function has all of the information

about our custom query that it needs to

work so let's save this refresh and

there we have it so now we have the

numbered pagination so I'm on page two I

can't click it but if I want to go to

page one beautiful and if I want to go

to page three there you have it

alright so our task is complete but

before I close out this video I want to

give you one last piece of info that

might save you a ton of frustration so

throughout this example we've been using

the paged property or the paged

parameter and this works beautifully on

most WordPress pages but if you're going

to work on a static front page right so

if I go to the home page of my website

notice how my home page isn't just a

generic blog listing screen but instead

it's using a custom template alright and

if you also have what we call a quote

static front page if you ever try to

implement pagination on a static front

page instead of using the paged option

or the paged parameter when you're

working on a static front page instead

you would use an option named simply

page instead of paged with addy alright

so hopefully that saves you a bit of

frustration and troubleshooting in the

future and that's going to bring this

lesson to a close thank you so much for

watching I hope you feel like you

learned something and stay tuned for a

bunch of new WordPress tutorials now

that we've got pagination out of the way

we can cover more exciting topics like

custom post types custom fields and a

whole bunch of other fun stuff alright

so I'll see you in a new video next week

and until then take care in case you're

interested I am

working on two brand-new premium

WordPress courses one is aimed at

absolute beginners and the other is more

advanced and it's aimed at developers in

the more advanced course we will create

a fully featured site for a university

we'll learn how to create relationships

between different types of content so

for example between professors and

courses and campuses we'll also learn

how to set up live search results using

the brand new WordPress REST API we'll

learn the basics of user registration

and we'll also learn how to keep our

project organized and how to deploy it

from your local dev environment up to a

real host now these two courses won't

launch for another couple of months but

if either of them interests you and you

want to be notified as soon as they do

launch you can go to my website learn

web code comm and towards the top of the

home page you can join my newsletter not

only will that let you know as soon as

the course is launched but you'll also

receive hugely discounted coupons one

last thing you'll never ever ever see

this channel with a patreon account

because if you do want to support this

channel I want you to receive massive

value in return

so I do already have two premium courses

available the first course is about nine

hours and it will teach you HTML and CSS

from absolute scratch and the second

course is about 15 hours and it's for

you if you already know HTML and CSS but

you want to build up the rest of your

skill set so you can land a full-time

job as a web developer all right that's

enough shameless promotion I will see

you in the next video

Related Videos

Be the first to comment “WordPress Pagination Tutorial (Customized Question & Template Integration)”

Your email address will not be published.

There are no comments yet.