Mecha CMS

Mecha CMS blog and documentation.

Custom Pagination

Updated: Sunday, 07 August 2016

Some filters are available to manipulate the HTML output of pagination.

Image

Mecha has a very minimal standard HTML markup for the pagination, which was intended to make it easier to the users in selecting the existing HTML markup pattern, for customization purposes:

<span class="pagination">
  <span>First</span>
  <span>Previous</span>
  <span>
    <strong class="current">1</strong>
    <a href=" … ">2</a>
    <a href=" … ">3</a>
    <a href=" … ">4</a>
    <a href=" … ">5</a>
  </span>
  <a href=" … " rel="next">Next</a>
  <a href=" … ">Last</a>
</span>

Some filters are available to manipulate the HTML output of pagination, one of them is pager:step.anchor which will affect the generated HTML markup of every pagination item in step mode. This is useful for theme developers, especially if they want to adapt a theme from another CMS, but they find it difficult to adjust the CSS to match with the standard HTML markup of Mecha CMS. You can change the default HTML markup by utilizing the existing filter. Here’s an example:

Filter::add('pager:step.anchor', function($anchor) use($speak) {
    $prefix = 'pagination-';
    $anchor = str_replace(
        array(
            '>' . $speak->first . '</', // `First` navigation link
            '>' . $speak->prev . '</', // `Previous` navigation link
            '>' . $speak->next . '</', // `Next` navigation link
            '>' . $speak->last . '</' // `Last` navigation link
        ),
        array(
            ' class="' . $prefix . 'first">' . $speak->first . '</',
            ' class="' . $prefix . 'prev">' . $speak->prev . '</',
            ' class="' . $prefix . 'next">' . $speak->next . '</',
            ' class="' . $prefix . 'last">' . $speak->last . '</'
        ),
    $anchor);
    // `\d+` navigation link
    $anchor = preg_replace_callback('#<(.*?)>(\d+?)<\/#', function($s) use($prefix) {
        if(strpos($s[1], ' class="') === false) {
            return '<' . $s[1] . ' class="' . $prefix . 'step ' . $prefix . 'step-' . $s[2] . '">' . $s[2] . '</';
        } else {
            return '<' . str_replace(' class="', ' class="' . $prefix . 'step ' . $prefix . $s[2] . ' ', $s[1]) . '>' . $s[2] . '</';
        }
    }, $anchor);
    return $anchor;
});

And this is the generated HTML output after being manipulated:

<span class="pagination">
  <span class="pagination-first">First</span>
  <span class="pagination-prev">Previous</span>
  <span>
    <strong class="pagination-step pagination-step-1 current">1</strong>
    <a href=" … " class="pagination-step pagination-step-2">2</a>
    <a href=" … " class="pagination-step pagination-step-3">3</a>
    <a href=" … " class="pagination-step pagination-step-4">4</a>
    <a href=" … " class="pagination-step pagination-step-5">5</a>
  </span>
  <a href=" … " rel="next" class="pagination-next">Next</a>
  <a href=" … " class="pagination-last">Last</a>
</span>

CSS code for the screen capture above:

.pagination {
  padding:.5em 0;
  line-height:2em;
  background-color:#F1E390;
  color:#A29B62;
  text-shadow:0 1px 0 #FCF0AF;
}

.pagination * {
  display:inline-block;
  cursor:default;
}

.pagination a {
  color:#6A6443;
  cursor:pointer;
}

.pagination a:focus,
.pagination a:hover {color:#464024}

.pagination .pagination-first,
.pagination .pagination-prev,
.pagination .pagination-step,
.pagination .pagination-next,
.pagination .pagination-last {
  border:2px solid;
  border-color:#FCF0AF #DED186 #C9BF7C #E8D889;
  margin:0 .25em;
  padding:0 .8em;
}

.pagination .current,
.pagination a:active {border-color:#C9BF7C #E8D889 #FCF0AF #DED186}
Donation and Email Subscription