How to Customize Paginated Links for BuddyPress Members & Groups Directory Pages

BuddyPress is using the paginate_links() function for building paginated navigation links on members and groups directory pages. The paginate_links() function is working fine on directory pages but we want to customize the output a little bit.

We’d like to add the following changes to the default output of the paginate_links() function.

• We will display the number of total items.
• Instead of disabling the current page link, we will add text input so the user can put any number to navigate pages easily.
• We have links for previous and next page but will also add two additional links to navigate to the first and last page easily and remove unnecessary links.

Let’s start.‌

First, we will prepare our main function which will display pagination links based on parameters. We have customized the WordPress’s existing paginate_links() function to create our own my_theme_buddypress_paginate_links() function.‌

You can check WordPress Codex to learn more about how paginate_links() function works.‌

Let’s start with my_theme_buddypress_paginate_links() function which will return empty string for now instead of paginated links.

We will define our default arguments which will be parsed with the arguments you pass when calling the function. You can pass an array of arguments for generating paginated links, and your arguments will be parsed with the defaults.

Conditionally we have to disable first, previous, next and last buttons, so the user can’t click on these buttons to navigate. Let’s add conditions to update our arguments.

Now update the $output variable to display the number of total items.

We will save our paginated links in an array and add these to the output using the join() function.

We have added a class button to each link, this will prevent running BuddyPress’s default JavaScript function for our custom paginated links.‌

Now we have our own my_theme_buddypress_paginate_links() function, and it’s ready to use when filtering the BuddyPress members and groups pagination links before getting displayed.‌

We will filter bp_get_members_pagination_links and bp_get_groups_pagination_links hooks.‌

The following code is for adding a hook callback to filter the members’ pagination links.

The following code is for adding a hook callback to filter the members’ pagination links.

We are almost done! ‌

Pagination links will not work properly until we add some Javascript to send Ajax request to update the results.‌

Let’s add inline Javascript in the footer of your website with WordPress wp_footerhook.

The above Javascript will listen to onclick JavaScript event when you click on paginated links and send Ajax filter request to display the updated results of the current page.‌

Let’s update the my_theme_footer_scripts callback function with the following code.

The above Javascript will listen to onchange JavaScript event when you enter a new value in the input field of the current page and send Ajax filter request to display the updated results of the current page.‌

Full source code is available to download on GitHub as a WordPress plugin, you can download or clone the repository easily.‌

Enjoy!

The post How to Customize Paginated Links for BuddyPress Members & Groups Directory Pages appeared first on upnrunn® | Build & Deploy Powerful Application.