Templates and Pagination

When you use pagination on the front end of a Joomla site for the first time, you might be surprised to see pagination controls like the ones shown on the right.

Pagination is managed by Joomla, but it's the site template that controls the button styles. Some templates come with nice pagination buttons, and some don't. If your template doesn't, you'll see pagination controls like the ones on the right. That's because, by default, Joomla builds pagination controls as an HTML "Unordered List".

One solution is to choose a commercial site template that properly supports pagination. Alternatively, you can add pagination support to any template and style the buttons exactly the way you want.

When Joomla renders a pagination list, it looks for a file called pagination.php in the site template's html override directory:

/templates/template_name/html/pagination.php

If this file is present, the functions in it are used instead of Joomla's built-in default functions. This allows you to render the pagination controls using any HTML you choose.

Our Demo Template

The template that we use on our demonstration sites makes the pagination buttons look like this:

You can download our demo template below and copy its pagination support into your own template:

  • Download the template and unzip it to a temporary directory.
  • Unzip your own template to another directory.
  • Copy html/pagination.php from the demo template to the html directory in your own template.
  • Edit css/template.css and copy everything after /* PAGINATION BUTTONS */ to your own template css.
  • Copy the four "pag-*.png" images from the demo template images directory to the images directory in your own template. You might need to alter the CSS if the directory structure isn't an exact match.
  • Edit the xml manifest file of your template and make sure the html folder is included in the list of folders to install.
  • Re-zip your template and install it.

The demo template is perfectly usable for simple sites. It comes with a selection of top images and the title and some of the colours are parameters that you can change in the template configuration. It's designed for a vertical menu in the left panel, and is responsive. It works well with our Simple Responsive Menu.

Demo Site Template Version 8.03