11 - Implementing the Blog - Part 3

The last step in implementing the blog index page is getting the pagination links in place at the bottom. These are the links that let you page back or forth page by page when the blog has a lot of content.

 

There are a few steps to get pagination working on an EE-powered blog:

  • Configure the channel:entries tag to set per-page limit and pagination links position
  • Choosing a pagination style
  • Placing the pagination code in your template

Configuring the channel:entries Tag
The first step to paginated content is telling ExpressionEngine how many entries you want per page.  This is done with the limit parameter. For testing purposes set this to a lower number than you have entries in the channel. I currently have 6 entries total so I’ll set my limit to 2 - this way I know EE will be triggered to create three pages of two entries per page.

The second thing is to decide where we want the pagination links to appear with regard to our entries. Using the paginate parameter we can choose top, bottom, or both. Since the design calls for bottom links that’s what I’m specifying.

Here then is my updated channel:entries tag opening:

{exp:channel:entries channel="blog_audio|blog_video|blog_link|blog_quote|blog_post|blog_image" limit="2" paginate="bottom"

Bottom is the default if nothing else is specified but I’ll specify it anyway so the future me isn’t confused.

Choosing a Pagination Style
ExpressionEngine has two basic ways to implement pagination.  You can do simple Next/Previous links or the more complex approach with these types of links:

Page 10 of 25 pages  « First  <  11 12 13 14 15 >  Last » 

In the latter case there are a number of variables to use for greater flexibility with styling.  If you’ve been away from EE for awhile this is relatively new functionality coming in with EE version 2.3 in late 2011.

For our purposes here I’ll stick to the design and its Next/Previous links as I appreciate the simplicity. I’ve never fully been convinced of the value of the more complex approach (not to say that I haven’t used it).

Placing Pagination Code in your Template
The idea here is to mash-up the design’s HTML with ExpressionEngine’s tag library for the desired output.  Here’s what I came up with:

{paginate}
    
<!-- page-navigation -->
    <
div class="page-navigation cf">
        
{if previous_page}
            
<div class="nav-next"><a href="{auto_path}">Newer Entries</a> &nbsp;</div>
        
{/if}
        {if next_page}
            
<div class="nav-previous"><a href="{auto_path}">Older Entries</a></div>
        
{/if}
    
</div>
    <!--
ENDS page-navigation -->                
{/paginate} 

The interesting thing about the pagination code is that it doesn’t matter where it goes within your channel:entries tag pair. The placement of the rendered pagination links will ignore your placement and totally depend on what you’ve specified in the pagination parameter on the channel:entries tag.

URL Implications of Pagination
Once you have the pagination code in place, click one of the links it generates and take a look at the URL that is now generated. You should have something like:

http://localhost:8888/portfolio/index.php/blog/P4 

You can see that EE has now added a segment to your URL - the letter “P” then a number. The number is not a page number as you might expect, rather it reflects the value that you set for your limit parameter in the channel:entries tag. It tells EE how many entries to pull based on the URL of the current page and then your limit.

This is another way the channel:entries tag is dynamic, reading the URL of the current page and taking action based on what appears there. Even with dynamic set to off, EE’s pagination still works.

Keep in mind that these links will get indexed by search engines, and you do need to account for them if you are doing any segment-based logic on your pages.

From here we’ll tackle the single-entry / comments views of each blog post type.

Category Navigation

<< Previous Entry   

Next Entry >>

 

Previous Comments

Picture of Jefry Dewangga

by Jefry Dewangga

Date: Thursday, April 9th, 2015
Comment: #1

Hei, i have implement that code but my pagination doesn’t appear. Can you help me to solve it?

Picture of Boyink

by Boyink

Date: Thursday, April 9th, 2015
Comment: #2

Make sure you have pagination turned on in the channel:entries tags, have enough entries to pagination based on your limit variable, and the pagination code is inside the channel entries tag pair.  If that’s all true it should work.

Picture of Jefry Dewangga

by Jefry Dewangga

Date: Friday, April 10th, 2015
Comment: #3

I’ve tried it and read all of the expressionengine documentation about pagination, it still doesn’t work on my site.
But yesterday i found the documentation about next/previous entry linking and it work. I think it’s better to use Next/Previous entry linking than pagination when in single page. ^_^

Add Your Comment

Commenting is not available in this channel entry.

Unless otherwise stated all content is © Michael Boyink of Train-ee.com & Boyink Interactive. Please don't steal - I've got kids to feed...

dy>