Add a Numeric Pagination with Accessibility in the Beaver Builder Theme

The default WordPress post pagination used in Beaver Builder Theme uses wp_pagenavi() and gives output as below.

wp-pagenavi-beaver-theme

 

You can swap this single post navigation for a numeric display using the navigation function the_posts_pagination(), this also has the added benefit of using accessibility features for screen readers.

First up is to make sure you copy the index.php file from the parent Beaver Theme to your child theme and file in the child theme includes directory.

The function code is as below…

<?php   

the_posts_pagination( array(

    'prev_text' => '&laquo; Previous' . '<span class="screen-reader-text">' . __( 'Previous page', 'yourtheme' ) . '</span>',
    'next_text' => '<span class="screen-reader-text">' . __( 'Next page', 'yourtheme' ) . '</span>' . 'Next &raquo;',
    'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'yourtheme' ) . ' </span>',

) ); ?>

So the three main elements are Previous, Next and Before Page Number for which you can add screen reader text as well as the text you want output to the screen.

This will render as…

the-posts-pagination-beaver-theme
You can see what is read by a screen reader and what is displayed on screen in the code. The ‘screen reader text’ class already comes with the parent Beaver Theme.

 
post-nav-accessible
 

Your child theme index.php should contain the added code where previously it had <?php FLTheme::archive_nav(); ?> so it should resemble…

<?php get_header(); ?>
<div class="fl-archive container">
<div class="row">
<?php FLTheme::sidebar('left'); ?>
<div class="fl-content <?php FLTheme::content_class(); ?>" itemscope="itemscope" itemtype="http://schema.org/Blog">
<?php FLTheme::archive_page_header(); ?>
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<?php get_template_part('content', get_post_format()); ?>
<?php endwhile; ?>
<?php
the_posts_pagination( array(
'prev_text' => '&laquo; Previous' . '<span class="screen-reader-text">' . __( 'Previous page', 'themename' ) . '</span>',
'next_text' => '<span class="screen-reader-text">' . __( 'Next page', 'themename' ) . '</span>' . 'Next &raquo;',
'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'themename' ) . ' </span>',
) ); ?>
<?php else : ?>
<?php get_template_part('content', 'no-results'); ?>
<?php endif; ?>
</div>
<?php FLTheme::sidebar('right'); ?>
</div>
</div>
<?php get_footer(); ?>
view raw index.php hosted with ❤ by GitHub

And some CSS to get started…
/* Pagination
--------------------------------------------- */
.pagination {
display: block;
clear: both;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 14px;
margin: 40px 0 0 20px;
text-transform: uppercase;
text-align: center;
}
.pagination a {
color: #fff;
}
.pagination li {
display: inline;
}
.pagination a {
background-color: #fff;
border-radius: 3px;
color: #333;
cursor: pointer;
display: inline-block;
margin-bottom: 4px;
padding: 8px 12px;
}
.pagination span.current {
padding: 12px;
border: 1px solid #f5f5f5;
border-radius: 3px;
}
.pagination a:hover,
.pagination a.active {
background-color: #9EC7D7;
color: #fff;
}
view raw pagination.css hosted with ❤ by GitHub

Change your CSS colors to suit your theme.

Leave a Comment