Andrea Fercia 3:36 pm on January 14, 2019
Tags: 5.1 ( 24 ), dev-notes ( 542 )

New Styling for Admin Table Pagination Links in WordPress 5.1

In WordPress 5.1 the adminadmin (and super admin) table pagination links have had their CSSCSS Cascading Style Sheets. styling modified.

New styling of admin table pagination links in WordPress 5.1

This CSS change improves the color contrast ratio for better accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) and improves consistency across the admin screens. The pagination links are now styled like the standard WordPress buttons. By default, they have a lighter background color. The background color will no longer change to blue on hover and focus.

Plugins and themes should not be affected by this change unless they are re-using the .tablenav and .tablenav-pages CSS classes. All pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party and theme developers should verify that this change does not affect them.

You can read more information about this change in the related TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. ticketticket Created for both bug reports and feature development on the bug tracker., #41858

#5-1, #dev-notes

Jon Brown 3:44 pm on January 14, 2019

This looks really good. Nice work and thank you!
Tom J Nowell 6:17 pm on January 14, 2019

This looks a lot better than what we have right now, thanks to all involved 🙂

The navigation arrows now use the “button” class. This is what the htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. looks like:

<div class='tablenav-pages'><span class="displaying-num">5,059 items</span>
   <span class='pagination-links'><span class="tablenav-pages-navspan button disabled" aria-hidden="true">&laquo;</span>
   <span class="tablenav-pages-navspan button disabled" aria-hidden="true">&lsaquo;</span>
   <span class="paging-input"><label for="current-page-selector" class="screen-reader-text">Current Page</label><input class='current-page' id='current-page-selector' type='text' name='paged' value='1' size='3' aria-describedby='table-paging' /><span class='tablenav-paging-text'> of <span class='total-pages'>253</span></span></span>
   <a class='next-page button' href='https://www.staging2.classical-scene.com/wp-admin/edit.php?paged=2'><span class='screen-reader-text'>Next page</span><span aria-hidden='true'>&rsaquo;</span></a>
   <a class='last-page button' href='https://www.staging2.classical-scene.com/wp-admin/edit.php?paged=253'><span class='screen-reader-text'>Last page</span><span aria-hidden='true'>&raquo;</span></a></span>
</div>

Many plugins use the paginate_links function defined in wp-includes/general-template.php. This function needs to now add the “button” class to the navigation arrows.

The following lines need to be changed to add the button class:

                $page_links[] = '<a class="prev page-numbers" href="' . esc_url( apply_filters( 'paginate_links', $link ) ) . '">' . $args['prev_text'] . '</a>';

                $page_links[] = '<a class="next page-numbers" href="' . esc_url( apply_filters( 'paginate_links', $link ) ) . '">' . $args['next_text'] . '</a>';

They should be changed to this:

                $page_links[] = '<a class="prev page-numbers button" href="' . esc_url( apply_filters( 'paginate_links', $link ) ) . '">' . $args['prev_text'] . '</a>';

                                $page_links[] = '<a class="next page-numbers button" href="' . esc_url( apply_filters( 'paginate_links', $link ) ) . '">' . $args['next_text'] . '</a>';

Without this change the navigatoin buttons don’t have the proper styling.

Andrea Fercia 5:06 pm on February 14, 2019

@joneiseman thanks for your feedback. I’m not sure `paginate_links()` can be changed, as it’s used in other parts in WordPress and also plugins might use it in a different context. Adding the `.button` class by default would change the default styling with unpredictable results.

Instead, if plugins implement their own custom pagination links using `paginate_links()` they should be fully responsible of their custom implementation styling. If they want to match the new WordPress styling, they can do so by adjusting their own CSSCSS Cascading Style Sheets..

Hope this makes sense 🙂
joneiseman 5:50 pm on February 14, 2019

Hi Andrea,

It would be helpful to have some hint on how to provide your own styling to the navigation since this change causes you to lose the default styling. It looks like the “navigation_markup_template” filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. can be used to add the button class. The plugins are not providing custom pagination links they are using the default pagination links provided by the paginate_links function (which does not add the button class). The other pages within the WordPress adminadmin (and super admin) are adding the button class somewhere else (I haven’t figured out where the button class is being added). Without the button class you don’t have any class to use in your css for updating the styling of these links (in order to match the new WordPress styling).

Thanks,
Jon
Ahmad Awais 7:15 pm on February 14, 2019

Super nice changes. Thanks Andrea!
joneiseman 10:54 pm on February 14, 2019
I ended up adding a filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. to the pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party which called the paginate_links function then in my functions.php I used that filter to add the “button” class.
```
$version = preg_replace('/-.*/', "", get_bloginfo('version')); // get rid of -RC1
if (version_compare($version, '5.1', '>='))
    add_filter('gigpress_paginate', 'my_gigpress_paginate', 10, 2);
function my_gigpress_paginate($page_links)
{
     return str_replace("page-numbers", "button page-numbers", $page_links);
}
```
I’m pretty sure wherever paginate_links is called, it will have this problem.
Andrea Fercia 11:19 pm on February 14, 2019

@joneiseman thanks for your exploration. To clarify, the various list-tables in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. (posts, pages, etc.) don’t use `paginate_links()`. Instead, `WP_List_Table` provides its own method to generate the pagination links and it’s recommended to use that method.

If plugins authors implement a custom pagination with `paginate_links()`, then it’s their responsibility to take care of it and the related styling. By default, `paginate_links()` outputs unstyled links.

Only when wrapped within a container with `class=”tablenav-pages”` the links generated by `paginate_links()` used to get some styling, but that was not intended and not supported by core. It worked that way just by coincidence. This was also mentioned in the related ticked, see this comment: https://core.trac.wordpress.org/ticket/41858#comment:19
joneiseman 5:58 pm on February 15, 2019

Hi Andrea,
Thanks for your explanation. I made pull requests in githubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ for the plugins to add some css for styling the pagination links (based on your css for the media uploader).
Andrea Fercia 6:17 pm on February 15, 2019

@joneiseman great, thanks. I’ve seen the GigPress one. Great way to contribute actively, thank you.

Comments are closed.

Welcome!

Communication

New Styling for Admin Table Pagination Links in WordPress 5.1

Welcome!

Communication

Share this: