Previous Post, Next Post Buttons

This article will teach you how to add "Previous and Next Post" buttons to appear on pages where posts are displayed.



To achieve this, you must first have a page setup to display posts.  This is commonly setup by creating a Post Category at a page called /news/.

This article makes use of the functions:
\Components\Website\Posts::getPreviousForCurrentPage() and \Components\Website\Posts::getNextForCurrentPage()

Edit Your Design
In order to have the buttons appear on every 'child page' of the /news/ page, or in other words, on every full version of the article, we need to add code into the design.

Normally, this code would be added underneath the 'main content region'.

The code does following:

  • If the page we're currently viewing is a child page of /news/
  • Get the 'previous post' and 'next post' for the current page
  • If there is either a 'previous post' or a 'next post', show a section
  • If there is a 'previous post', show a button
  • If there is a 'next post', show a button
<!-- If on a child page of news --> <logic:if test="\Components\Website\Pages::currentIsChildPageOf('/news/')"> <logic:variable as="previous_post" value="[? \Components\Website\Posts::getPreviousForCurrentPage() ?]" /> <logic:variable as="next_post" value="[? \Components\Website\Posts::getNextForCurrentPage() ?]" /> <logic:if test="$previous_post || $next_post"> <templates:section contentsize="md" bgcolor="#fafafa" style="text-align: center"> <logic:if test="$previous_post"> <templates:button bgcolor="#32a4cd" color="#fff" href="[? $previous_post['post_content_url'] ?]">Previous Post</templates:button> </logic:if> <logic:if test="$next_post"> <templates:button bgcolor="#32a4cd" color="#fff" href="[? $next_post['post_content_url'] ?]">Next Post</templates:button> </logic:if> </templates:section> </logic:if> </logic:if>

You can replace the buttons with <a> href tags.