Numbered Post Navigation in the Beaver Builder Theme to increase reader usability

The default Post Navigation that comes with the Beaver Builder Theme does what it’s suppose to do.

It allows your readers to navigate through the pages of your blog.

Below is a screenshot of what the default Post Navigation looks like with the Beaver Builder Theme and what we’ll be changing to a numbered Post Navigation through this tutorial.


But there’s a serious downfall in our eyes.

With the default Post Navigation in the Beaver Builder Theme the reader can only navigate between one Post at a time.

This is why we always recommend a numbered Post Navigation for your Blog, similar to the below.

Final outcome of this custom numbered Post Navigation tutorial.
This is the final custom numbered Post Navigation that we have created.

And this is exactly what we’re going to create in this Post.

Step 1: Copy index.php from the Parent Beaver Builder Theme into your Child Theme

NOTE: You should always use a Child Theme when designing your websites, so we will assume for this tutorial that you ARE in fact using a child theme.

Using your FTP client or cPanel, navigate to the Parent Beaver Builder Theme folder located at /wp-content/themes/bb-theme and copy the index.php file from the Parent Beaver Builder Theme and paste it into your child theme.

For example, if you are using our highly popular Electro CHARGE child theme, you would copy the index.php file from the BB Parent Theme folder into /wp-content/themes/electrocharge.

NOTE: If your Beaver Builder Child Theme already contains an index.php file, you may be able to skip directly to step two but it will depend on how your Child Theme is coded.

[product_category category=”child-themes”]

Step 2: Replace the built-in Beaver Builder Post Navigation with the custom numbered Post Navigation

In the index.php file that you just copied into your child theme, look for the line

<?php FLTheme::archive_nav(); ?>

(that appears AFTER the while loop) and replace it with all the code below.

Then, save the index.php file you just edited in your Child Theme.

Step 3: Add some CSS to style the numbered Post Navigation and ensure the navigation sits under the Posts

Edit your Child Theme’s style.css file (or go to wherever you add your CSS in your website) and add the below CSS code.


  1. We float the navigation left and add a CSS clear on it so that the custom numbered Post Navigation sits under the list of posts on our Blog page.
  2. .odw-pagination * we space out our numbers so they aren’t too close together

And that’s it!

After you’ve added the simple code snippets above, you should have something similar to the below on your blog.

Final outcome of this custom numbered Post Navigation tutorial.
This is what we’ve created as the end result. You can add additional CSS to style the numbers.

Here’s some ready-made CSS styles

We’ve written some CSS to help you quickly style your new numbered Post Navigation. All you have to do is fill out the form below to get the CSS for the different styles below.




Complete the form below to instantly get the CSS for styling the numbered Post Navigation in the styles shown above

[thrive_lead_lock id=’2858′]


Hey! I'm Grant Ambrose,

My WordPress website generates millions of dollars in sales each year and I put together this website to help you do the same

I believe that a lot of the time, we aren't doing things that will help our business NOT because we don't know how to do it, but rather we don't even know it is possible. My website aims to change this. My website is here to help show YOU what is possible - what YOU could set up in your business with WordPress to increase sales, automate tasks and (ultimately) turn your ideas into working WordPress solutions.

2 thoughts on “Numbered Post Navigation in the Beaver Builder Theme to increase reader usability”

  1. Hey Grant:

    How could this be modified to create custom Previous/Next buttons for paginated single posts? I’d like to be able to drop these buttons in the Themer single post type for use instead of the standard WP page navigation for single multipage posts. The client has used the standard separator for the pages but I need to be able to place some other modules between the navigation and the post content.

  2. Hey Grant,

    This is so helpful. Could you tell me how to add the post thumbnails to the Previous and Next Posts? I am just using the Beaver Builder Child Theme.

Leave a Comment

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

Grow your WordPress business by getting...
My best tips to your inbox!

I'll send you emails when I publish content I think will help you and your business. You can opt-out at any time and change the topics of emails you get.

This site is not a part of the Facebook website or Facebook Inc. Additionally, this site NOT endorsed by Facebook in any way. FACEBOOK is a trademark of FACEBOOK, Inc.

Scroll to Top