FREELessons: 15Length: 1.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.7 Add Pagination

Hey, welcome back to Build a Blog with Craft CMS. In this lesson we're gonna add pagination to our blog. So we're gonna make sure that when you get to the end of a series of entries, if there are more, you have a little link down the bottom here that allows you to page through to the next lot of entries. And where appropriate, that you can also page through in the other direction to see, perhaps, newer entries. So we're gonna be back into our index.html template, and we're gonna change up how we're retrieving entries in order to enable pagination. And we're gonna do that by using the paginate template tag. So up above our existing for loop, we're gonna add paginate. Now here we need to enter what we actually wanna paginate. And what we can actually do here is copy the first part of this query here. So we're just specifying that we want to paginate entries that are coming from craft.entries in the section name blog, with a limit of five entries before we separate onto a new page. So we're gonna copy that and just paste it in here. Then we need to include as and we need to specify two variable names that we wanna use. The first one is gonna hold all the information about the page that you're currently on, so we're just gonna call this first one info. The second variable is gonna hold all the entries for that page, so we'll just call this one entries. So now, we're no longer using this query, all the entries that we wanna iterate through and output on our page are stored in this variable. So we'll just copy that, And replace our query with it. Now we need to decide what HTML we wanna output at the bottom of each page of entries, in order to create links to take you through to the next page or the previous page. Now we're gonna be using this pagination in a couple of places, so once again we're gonna create a partial template. So we'll jump into our partials folder and we'll create a new file and we'll call it _pagination. So in our pagination area we're gonna have a link on the left that's gonna go to the previous page, and we're gonna have a link on the right that's gonna go to the next page. Now these are gonna be floated. So the first thing that we want is a div with the class clearfix. Inside this, we're gonna set up our layout with two classes that are already in our style sheet. We're gonna have one div with the class prev_page. And then we're gonna have another div with the class next_page. Now inside our first link here, our previous page link, we have to check and see if there is a previous page for us to link to, because obviously you don't wanna put a previous page link up if that's gonna link through to nowhere. So we're gonna say if info, and you remember that this info variable has been defined here and it contains all the info about the page you're currently on. So we're gonna say info.prevURL. And then we'll add endif. And then in between these tags, this is where we'll output our link. So we're gonna add a link with the class underline_from_right. And then the link that we wanna connect this to is info.prevUrl. And we made sure that this link actually exists with our check here. In between the tags we're just gonna add a left pointing arrow, And then we're gonna say Previous Page. Now let's just put our syntax highlighting on, so that's a little bit more easily read. So now that's our previous page link, all done. So we're just gonna copy this whole thing, Paste it down here for our next page. Now all we need to do is switch prevURL over to nextURL, change this to underline_from_left. Swap the left arrow, For a right arrow and then say, Next Page. Now that's our pagination partial finished, and we can go ahead and include it into our index page. We'll copy this include line to make things a little quicker. And then underneath our for loop we'll paste that in and we'll load in our pagination partial. Now right now we've only got three test posts in our site, you may have more. But in order to test if this is gonna work, we're just gonna need to change this number so that it's lower than the number of entries that you currently have in your blog. So we'll just switch this to one for now. Now let's test what we've done. All right, so there's our Next Page link, click on that. And now we have our Previous Page link as well. So everything is working as we expect with our pagination. There's one more thing that we're going to change. It's not very user friendly right now to have to get in here and change this number by hand in your template whenever you decide that you want to have a different number of entries showing before your pagination kicks in. So what we're gonna is set up a global variable in the back end of Craft that can be easily changed by a user. So we'll jump back into our dashboard. We're gonna go into Settings and then we're gonna look for this area here, Globals. The Globals area allows you to set up a bunch of data that you just need to have defined once per site. So you might have things like the name of a company that's related to the site, that company's phone number, anything that you need to have set just once and then available for use in any template. Now the first thing that we're gonna need to do is set up a global set so you can organize your Globals into little categories basically. So we're gonna create a new global set, and we're gonna call it Blog Settings. So we'll just give it the name Blog Settings. And then we use the auto generated handle, that's just fine. And now over here in this tab, this is where you're gonna set up your field layout in much the same way that you would when you're creating an entry type. So for our actual posts per page setting, we're gonna need to jump into the Fields settings area and create a new field to hold that posts per page setting. So we'll create a new group just to keep it separated from everything else, we'll also call this Blog Settings. And then in our Blog Settings group we'll create the new field that we wanna use, we're gonna call it Posts per Page. We'll go with the autogenerated handle. We're gonna set this one to be a number field and we'll set the minimum value to be 1, no less than one post per page. And we'll save that and now, we'll just save this to refresh. In our field layout, we have our posts per page field, we'll drop that in here, we'll save. And now, up on the left here, you'll see we have this Globals menu item. Now, if we go in here, here is our Posts per Page setting. So you can create as many different settings as you need to have, in order to allow for easy user configuration of any blog that you create. So we're gonna set this to 1 post per page for now. We'll save that. Now we'll go back into our template. We're gonna delete the number that we have here, and we're gonna replace it with the handles that we just set up for our settings group and for our field. So we'll have blogSettings.postsPerPage. Now if we go back to our front end, actually you know what, we're gonna to change this to 2, just so that we'll see that it's different to the 1 that we already had there. Now, if we go to the front page we should see two posts. One, two, and then there's our pagination. Now, if we go back into the settings and we change this to the 5 that we had before and go back to the home page, now all of the posts can display without needing to pull in the pagination at all. So now our index page is all finished and the next thing that we need to work on is a template that's going to display our individual entries. Right now we don't have anything set up to show our individual entries. So in the next lesson, we're gonna go through and create our single blog entry template. I'll see you in the next lesson.

Back to the top