Search code examples
paginationexpressionblogsexpressionengine

ExpressionEngine pagination - one template, multiple channels


I've create a blog using a few templates in ExpressionEngine 2, but am struggling with how to get pagination implemented in the main/list view. I can obviously reduce the entry limit and apply the paginate attribute to the channel tag, but it doesn't work properly. It simply outputs the pagination links, but each link simply goes to a standalone page with only the newest entry.

I feel as though I may be missing something obvious, but I'm really not sure. I'd appreciate it if anyone has any input/suggestions as to how to properly implement things.

{exp:channel:entries channel="notes_entry|notes_link|notes_photo|notes_quote|notes_video" limit="20" orderby="date"}
  {if channel_short_name == 'notes_link'}
  <div class="link">
      <h2><a href="{notes-link-URL}">{title}</a></h2>
      {notes-link-description}
      <span class="date">Posted on {entry_date format="%F %j, %Y"}&nbsp;&nbsp;|&nbsp;&nbsp;<a href="{title_permalink="notes"}">Permalink</a></span>
  </div>
  {if:elseif channel_short_name == 'notes_quote'}
  <div class="quote">
      <h2><a href="{notes-quote-URL}">{title}</a></h2>
      <blockquote>{notes-quote}</blockquote>
      <span class="source"><a href="{notes-quote-URL}">{notes-quote-source}</a></span>
      {notes-quote-description}
      <span class="date">Posted on {entry_date format="%F %j, %Y"}&nbsp;&nbsp;|&nbsp;&nbsp;<a href="{title_permalink="notes"}">Permalink</a></span>
  </div>
  {if:elseif channel_short_name == 'notes_entry'}
  <div class="entry">
      <h2><a href="{title_permalink="notes"}">{title}</a></h2>
      <span class="author">Written by {author}</span>
      <p>{notes-entry-summary} <span><a href="{title_permalink="notes"}">Read&nbsp;More&hellip;</a></span></p>
      <span class="date">Posted on {entry_date format="%F %j, %Y"}&nbsp;&nbsp;|&nbsp;&nbsp;<a href="{title_permalink="notes"}">Permalink</a></span>
  </div>
  {if:elseif channel_short_name == 'notes_photo'}
  <div class="photo">
      <h2><a href="{title_permalink="notes"}">{title}</a></h2>
      <img src="{notes-photo-upload}" alt="" />
      {notes-photo-description}
      <span class="date">Posted on {entry_date format="%F %j, %Y"}&nbsp;&nbsp;|&nbsp;&nbsp;<a href="{title_permalink="notes"}">Permalink</a></span>
  </div>
  {if:elseif channel_short_name == 'notes_video'}
  <div class="video">
      <h2><a href="{notes-video-url}">{title}</a></h2>
      <div class="video-container">
          <!-- start of embed code -->
          {notes-video-embed}
          <!-- end of embed code -->
      </div>
      {notes-video-description}
      <span class="date">Posted on {entry_date format="%F %j, %Y"}&nbsp;&nbsp;|&nbsp;&nbsp;<a href="{title_permalink="notes"}">Permalink</a></span>
  </div>
  {/if}
{/exp:channel:entries}

Solution

  • Here's a simplified example of paginating multiple channel entries, using the Agile Records theme:

    {exp:channel:entries channel="about|news" dynamic="on" limit="5" paginate="bottom"}
        <p>
            {if channel_short_name == "about"}
                <!-- Link to the About Section Entries -->
                <a href="{url_title_path=about/staff/index}">{title}</a>
            {if:else}
                <!-- Link to the News Section Entries -->
                <a href="{permalink=news/comments/index}">{title}</a>
            {/if}
        </p>
    
        {paginate}
            <p>Page {current_page} of {total_pages} pages {pagination_links}</p>
        {/paginate}
    {/exp:channel:entries}
    

    The output of the paginate tag pair results in the following markup:

    <p>
        Page 1 of 5 pages
        <strong>1</strong>
        <a href="http://example.com/template_group/template_name/P2">2</a>
        <a href="http://example.com/template_group/template_name/P4">3</a>
        <a href="http://example.com/template_group/template_name/P2">&gt;</a>
        <a href="http://example.com/template_group/template_name/P8">Last &rsaquo;</a>
    </p>
    

    Which looks like the following unstyled HTML in a browser:

    The creative use of the {channel_short_name} conditional allows this single code block to link to each respective section's correct single entry page URL:

    <a href="http://example.com/about/staff/about_the_label">About the Label</a>
    <a href="http://example.com/news/comments/1">Getting to Know ExpressionEngine</a>