Change pagination Previous / Next labels

Beaver Builder
1

In the Posts module with Pagination Style = Numbers, is it possible to change the “Previous” and “Next” text links to say “Newer” and “Older” instead? Is there a way to customize these labels with a CSS tweak or via some other method?

“Previous” and “Next” are a bit ambiguous. People may not immediately grasp that “Next” means backwards in time and “Previous” means forward in time.

The WordPress search results page uses “Older Posts” and “Newer Posts” to navigate, so it would be nice to make the pagination text for the Posts module use similar wording.

2

I took a look at BB’s code in class_fl_theme.php, and I have some suggestions. The way you guys coded post_navigation() and archive_nav() seems inconsistent. I’d recommend updating one or both of these functions to have more consistent behavior.

Here are some inconsistencies in how they work:

post_navigation() uses &larr and &rarr, but archive_nav() uses &laquo and &raquo for the navigational arrows. I think both should use &larr and &rarr since those look nicer. Why use two different kinds of arrows?

post_navigation() uses <nav> and <div>s while archive_nav() uses <div> and <span>s for the same structures. Ideally these should use identical elements for identical structures. Otherwise it just makes it more complicated to tweak the CSS for these elements.

post_navigation() places its content after .fl-post-content but before </article>, so it’s still inside the article body. However, archive_nav() places its content after </article>, so it’s outside the article body. This is weird and makes it harder to do CSS tweaking on these elements since the location of the navigation area is inconsistent. Pick a side (inside or outside of <article>), and use that same location for both.

3

Hey Steve,

I hope you are prepared, let’s do this on a child theme. When you are done, copy the index.php file from our BB theme into your child theme. Open class-fl-child-theme.php in your child theme and insert the following code into the helper class. Change the Newer Posts/ Older Posts text to whatever you want.

static public function archive_nav_child()
	{
		global $wp_query;

		if(function_exists('wp_pagenavi')) {
			wp_pagenavi();
		}
		elseif($wp_query->max_num_pages > 1) {
			echo '<nav class="fl-archive-nav clearfix">';
			echo '<div class="fl-archive-nav-prev">' . get_previous_posts_link(__('&laquo; Newer Posts', 'fl-automator')) . '</div>';
			echo '<div class="fl-archive-nav-next">' . get_next_posts_link(__('Older Posts &raquo;', 'fl-automator')) . '</div>';
			echo '</nav>';
		}
	}

When you are done, open index.php in your child theme and navigate to line 18. Change the following code.

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

To this
<?php FLChildTheme::archive_nav_child(); ?>

Just save the file and you should be good to go. If you are still not sure about this, please provide your server FTP login details and your WordPress WP login. We’ll try to apply the changes for you.

Thanks!

KC

4

Thanks, KC. I know PHP pretty well, so making those changes was no trouble. That lets me customize the navigation at the bottom of search and archives pages, which is great. How do I similarly customize the pagination link text that appears at the bottom of BB’s Posts module?

Those links appear in little boxes and look like this:

« Previous 1 2 3 4 … 127 Next »

5

It looks like what I’d need to do to accomplish the above is to override the function called pagination() in class-fl-builder-loop.php.

That pagination() function calls the WordPress function paginate_links(), and I’d just need to add a couple extra arguments there to override the default, so I’d edit this call on line 147 of class-fl-builder-loop.php:

		echo paginate_links(array(
			'base'	   =&gt; get_pagenum_link(1) . '%_%',
			'format'   =&gt; $format,
			'current'  =&gt; $current_page,
			'total'	   =&gt; $total_pages,
			'type'	   =&gt; 'list'
		));

to add these two extra arguments:

                        'prev_text' =&gt; __('« Newer'),
                        'next_text' =&gt; __('Older »'),

That should change the default labels for the Previous and Next links in the BB Posts module.

So is there a way I can override the pagination() function from class-fl-builder-loop.php with a BB child theme?

6

Hey Steve,

I would like to apologize that I might have misunderstood your question earlier. I thought you want to modify the default blog posts navigation. I will come back to you shortly. :slight_smile:

Thanks!

KC

7

Hey Steve,

Great news, our BB plugin allows Overriding Built-In Modules. Try to keep up with the guide I’m about write.

Insert the code below into class-fl-child-theme.php in your Child Theme.

static public function child_pagination($query) 
	{
		$total_pages = $query->max_num_pages;
		$permalink_structure = get_option('permalink_structure');
		$paged = is_front_page() ? get_query_var('page') : get_query_var('paged');
		
		if($total_pages > 1) {
		
			if(!$current_page = $paged) {
				$current_page = 1;
			}
		
			if(empty($permalink_structure)) {
				$format = '&paged=%#%';
			} 
			else {
				$format = 'page/%#%/';
			}
			
			echo paginate_links(array(
				'base'	   => get_pagenum_link(1) . '%_%',
				'format'   => $format,
				'current'  => $current_page,
				'total'	   => $total_pages,
				'prev_text' => __('Newer Posts'),
				'next_text' => __('Older Posts'),
				'type'	   => 'list'
			));
		}
	}

  1. Create a new folder in your theme’s folder named fl-builder.

  2. Create a new folder within your theme’s fl-builder folder named modules.

  3. Copy the module post-grid into the folder.

In your child theme, navigate to fl-builder/modules/post-grid/includes/frontend.php Line 32
Change to
<?php FLChildTheme::child_pagination($query); ?>

Just save the file and you should be good to go. Let me know how it goes.

Thanks!

KC

8

Thanks so much, KC. That worked perfectly. :slight_smile:

It might be a nice feature to add this simple customization to the BB posts module for everyone by letting them pick the labels for the Previous and Next links… or by adding it to the BB theme if that’s doable.

My readers have often found Previous and Next confusing. They automatically think of Next as referring to the future, when it actually retrieves older posts.