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

Share this on:

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!

Share this on:
Mike Nuttall

Author: Mike Nuttall

Mike has been web designing, programming and building web applications in Leeds for many years. He founded Onsitenow in 2009 and has been helping clients turn business ideas into on-line reality ever since. Mike can be followed on Twitter and has a profile on Google+.

7 comments
  1. Ian

    Ian
    May 13, 2014 at 10:56 PM

    Great snippet Mike, I was trying think of a way to do this a few weeks ago and gave up do this for fun not my day job would never have come up with a snippet like this.
    Found this post via Twitter while checking my phone at work it was re-tweeted by modx.

    Thanks for sharing all the best

    Ian

  2. Mike Nuttall

    Mike Nuttall
    May 14, 2014 at 06:13 AM

    Hi Ian,

    Thanks.

    Yes, there's so many ways to do things in MODX that sometimes you can confuse yourself.... but there's usually a way.

    Yes, the power or Twitter to spread the word :-)

    Mike

  3. Martin Gartner

    Martin Gartner
    May 20, 2014 at 11:50 AM

    Why not simply use the siblingNav snippet and this piece of code:

    <div class="siblingnav row">
    !siblingNav? &showHidden=`1` &limit=`1` &prevTpl=`olderNews` &nextTpl=`newerNews` &placeholderPrefix=`snparent.`
    +snparent.next+snparent.prev
    </div>

  4. Mike Nuttall

    Mike Nuttall
    May 20, 2014 at 12:40 PM

    Hi Martin,

    Because I was unaware of it!

    Thanks for letting me know about it, I'll give it a try.

    That's the thing with MODX there's so many ways to do things (including some you don't know about)

  5. Martin Gartner

    Martin Gartner
    May 20, 2014 at 01:46 PM

    The code above is a little bit destroyed. So if you need help I could provide a GIST.

  6. Mike Nuttall

    Mike Nuttall
    May 20, 2014 at 03:17 PM

    Hi Thanks, I think I can work it out, but if you provide a link it might be useful to others who are trying to work it out.

  7. Ian

    Ian
    May 20, 2014 at 09:06 PM

    The extras page on this can be found at the following link:
    siblingNav

    Some interesting examples and it does work but requires a little working out and styling.

    Thanks to Martin for highlighting this MODX extra

    Cheers

    Ian

Add a Comment



notify me of new replies


Allowed tags: <b><i><br>