free tuts

Sometimes we may want to replace default WordPress navigation between pages to numeric navigation. Usually we browse website clicking Older–Newer (or Next–Previous, depends which words we prefer to use). However, there is nice and simple method to revert default navigation into numeric one like shown on screenshot above.

To do this we need just to add certain function to functions.php, insert function into template file itself and style it. So, here we go.

Step 1, add function to functions.php:

In code above (line #4) replace “yourprefix” in function name with your own.

Step 2, add function to index.php:

Next, open index.php and add this piece of code outside of the loop:

We wrapped the code into nav tag which we can also style. Also we added a role (this is fine for accessibility).

Step 3, add styles to styles.css:

Last thing left is to style the navigation (or pagination, call it as you wish). Open styles.css and add styles. You can take as a base these styles: