I couldn’t find anyone else asking about this, so: I’d like to use pagination instead of the “pager” div, but I can’t seem to find the function in Roots. I’m not sure if it exists!
Does it?
If not, is there a simple way to add a Bootstrap-looking function?
// in functions.php or a custom plugin
function pagination_simple( $args = array() ) {
global $wp_query;
$total_pages = $wp_query->max_num_pages;
if ($total_pages > 1){
$current_page = max(1, get_query_var('paged'));
echo '<div class="page_nav">';
echo paginate_links(array(
'base' => get_pagenum_link(1) . '%_%',
'format' => '/page/%#%',
'current' => $current_page,
'total' => $total_pages,
'prev_text' => 'Prev',
'next_text' => 'Next'
));
echo '</div>';
}
}
// in template file
<?php pagination_simple() ;?>
This probably doesn’t cut it as it didn’t for me so I frankenstein’ed a function by taking parts from some plugins and making them work for my use case. While I have used it in a couple of projects, I am constantly finding ‘bugs’ and refining it, so you may want to test it out before you commit to it. I’ve created the following gist of the template function to be used as above
Please send me a link to any improvements you make
Thanks
Just to add some notes:
The “Previous Page” and “Next Page” link texts are visible to screen readers only (.sr-only bootstrap class)
You probably want to replace all instances of ‘enollo’ with your theme name/domain
A lot of the arguments in the $args array are still to be implemented. - I have refined and completed these now.
Does this go into custom.php? I’m assuming that there need to be some markup added into the archive.php to reference this. Do you have a usage guide at all?
I used this function, only thing I had to do was to remove the extra DIV that was wrapped around the UL and assign the classes accordingly to match current Bootstrap ver and it worked out perfectly.
@corey, there are some simpler ways to do it as seen in @corradomatt’s and @buretta’s solutions.
Mine probably meeds to be evaluated again and shortened down. I needed a quick solution that will let me pass a custom query if needed as well as a few options.
You can place any of these functions in custom.php or wherever it makes sense in your project.
To use with the standard query, just call the function after your post list in index.php instead of the standard roots post-nav
Below is the output of the function I suggested to try if you were curious. I would post a working preview but only have it on a local DEV site right now, sry
hello
i tried to add your function inside my “content-page.php” but it did not worked.
The idea is to display a list of posts only on the “news” page .
Here’s my code :
Try it on index.php or an archive template first to ensure you can get it working there and then migrate that over to whatever custom templates you may be wanting to apply pagination on.
Below is my index.php with the custom pagination added.
<?php get_template_part('templates/page', 'header'); ?>
<?php if (!have_posts()) : ?>
<div class="alert alert-warning">
<?php _e('Sorry, no results were found.', 'roots'); ?>
</div>
<?php get_search_form(); ?>
<?php endif; ?>
<?php while (have_posts()) : the_post(); ?>
<?php get_template_part('templates/content', get_post_format()); ?>
<?php endwhile; ?>
<?php if ($wp_query->max_num_pages > 1) : ?>
<?php
// custom function to output Bootstrap pagination, found in custom.php
page_navi();
?>
<?php endif; ?>
thx for your answer !
it’s not working with your index.php…
i don’t understand where the number of articles limit to display pagination is set in your page_navi function ?
does this function work for articles pagination ?
The number of articles is set in WP dash > settings > reading > blog pages to show
This is another setup I have, basic roots skeleton with the pagination function relaced in the index. I have set to only show 3 posts per page giving you an idea of the above setting and showing it working in context to the function.
Have you placed the function in your custom.php and then replaced the roots default pagination with the new function? The below goes into the index. At the bottom you will see the default call for pagination, just replace it with the new function below.
<?php if ($wp_query->max_num_pages > 1) : ?>
<?php
// custom function to output Bootstrap pagination, found in custom.php
page_navi();
?>
<?php endif; ?>
However, I did not use the regular expressions in his post because LESS makes it easy enough to simply add Bootstrap class styles to any element by class or id, so I did:
.page-numbers {
.pagination;
}
It’s much cleaner (and faster) than the regex.
Edit*
Even better, use LESS’s extend feature and don’t forget to extend the active page number:
ul.page-numbers {
&:extend(.pagination all, .pagination-sm all);
> li .current {
&:extend(.pagination > .active > span all);
}
}
I’m trying to use this on Roots Sage 8.1.1. We now have extras.php instead of custom.php. I’ve pasted the function there and included the pagination hook in my index.php file but it does not seem to work.
Any ideas on how I can get it to work?
EDIT: I figured it out. Extras.php is namespaced so I used this in my index.php file instead. Note the Roots\Sage\Extras before the function name:
Trying to ge this to work but not been able to. I inserted the function page_navi in the lib/extras.php and then used the path/namespace bit it’s not rendering anything in the front end.
I am using a custom query, from a custom made plugin, so that might be the reason why. Still can’t get around it to make it work.
I went with an approach that still leverages WordPress! core to do the heavy lifting and just applies the necessary Bootstrap markup.
Just add this function to functions.php and call <?php echo paginate_links_as_bootstrap(); ?> in your theme.