learning WordPress Pagination Tutorial (Custom Query & Template Integration) > WordPress learning

 

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 index.php 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