getButterfly Logo getButterfly

The other day, I had to create a numbered navigation section for child pages. The parent page would hold 15 child pages which needed to be navigated through using a previous/next system and have the current index displayed (i.e. 3/15).

Numbered siblings (outcome)

The previous/next arrows use FontAwesome and the index is styles using CSS. The code below doesn’t style the navigation in any way. Use CSS or modify the second function (numbered_navigation()) in order to achieve a similar result.

Subscribe to getButterfly Blog

Once a week or so we send an email with our best content. We never bug you, we just send you our latest piece of content.

If you found any value in this post, agree, disagree, or have anything to add - please do. I use comments as my #1 signal for what to write about. Read our comment policy before commenting! Comments such as "Thank you!", "Awesome!", "You're the man!" are either marked as spam or stripped from URL.

Leave a Reply

Your email address will not be published. Required fields are marked *