How To Add Previous And Next Buttons To Individual Posts In MODX's Articles

MODX's blog writing package 'Articles' has pagination built in for listing all the blog posts, but if your posts are sequential and you would like previous and next buttons in the individual posts then you are left to your own devices.

This article explains how to create next and previous buttons to go from one blog post to the next, like this example in my journal.

I initially tried using getPage and getResources but that seemed over complicated. So I thought I would solve the problem from the ground up.

This is my solution which uses a snippet and two chunks.

It works out which posts are the next and previous ones by comparing the publishedon timestamp.

This is my snippet which I call singleArticleNav

<?php
$id = $modx->resource->id;
$parent = $modx->resource->get('parent');
$siteUrl = $modx->config['site_url'];

$db = $modx->prepare('SELECT publishedon from modx_site_content where id = :id AND parent = :parent AND published = 1 AND deleted != 1');
$db->bindParam(':parent', $parent);
$db->bindParam(':id', $id);
$db->execute();
$row = $db->fetch(); $publishedon = $row[0];
// Get the address for the next article
$sql = 'SELECT uri from modx_site_content where publishedon > :publishedon AND parent = :parent AND published = 1 AND deleted != 1';
$sql .= ' order by publishedon asc limit 1 ';
$db = $modx->prepare($sql);
$db->bindParam(':publishedon', $publishedon);
$db->bindParam(':parent', $parent);
$db->execute(); $row = $db->fetch(); $nextUri = $row[0] ;
if(!empty($nextUri)){ $nextButton = $modx->parseChunk('nextButton',array('link'=>$siteUri.$nextUri)); }
else { $nextButton = ''; }

// Get the address for the previous article

$sql = 'SELECT uri from modx_site_content where publishedon < :publishedon AND parent = :parent AND published = 1 AND deleted != 1';
$sql .= ' order by publishedon desc limit 1 ';
$db = $modx->prepare($sql);
$db->bindParam(':publishedon', $publishedon); $db->bindParam(':parent', $parent);
$db->execute(); $row = $db->fetch(); $prevUri = $row[0] ;

if(!empty($prevUri)){ $prevButton = $modx->parseChunk('prevButton',array('link'=>$siteUri.$prevUri)); }
else { $prevButton = ''; }
$buttons = array ( 'NextButton' => $nextButton, 'PrevButton' => $prevButton ); // $modx->setPlaceholders($buttons);

Now in your article template add code something like this:

[ [singleArticleNav] ] <div class="navBar clearfix"> [ [+PrevButton] ] [ [+NextButton] ] </div>

And create your two button chunks something like this:

<span class="nextButton"><a href="">Next ></a></span>

Hope that helps!