How to Customize Paginated Links for BuddyPress Members & Groups Directory Pages
Tags: buddypress
Published: 2019-06-25 11:17:28

---
title: How to Customize Paginated Links for BuddyPress Members & Groups Directory Pages
published: true
tags: buddypress
canonical_url: https://upnrunn.com/blog/2019/06/how-to-customize-paginated-links-for-buddypress-directory-pages/
---

BuddyPress is using the [paginate\_links()](https://codex.wordpress.org/Function_Reference/paginate_links) function for building paginated navigation links on members and groups directory pages. The [paginate\_links()](https://codex.wordpress.org/Function_Reference/paginate_links) function is working fine on directory pages but we want to customize the output a little bit.

![](https://thepracticaldev.s3.amazonaws.com/i/xcxdyz1g2v31ko0udsd8.png)

We’d like to add the following changes to the default output of the [paginate\_links()](https://codex.wordpress.org/Function_Reference/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()](https://codex.wordpress.org/Function_Reference/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()](https://codex.wordpress.org/Function_Reference/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.

<script src="https://gist.github.com/bhoot-biswas/8882d4db8441eace79b855df7957e364.js"></script>

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.

<script src="https://gist.github.com/bhoot-biswas/a3e8a74d908d4f988e5efaa28567ff61.js"></script>

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.

<script src="https://gist.github.com/bhoot-biswas/5e4e8f02fc4531971285a7348a5ba5a2.js"></script>

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

<script src="https://gist.github.com/bhoot-biswas/3a6b5420670431150692fae002c095ec.js"></script>

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

<script src="https://gist.github.com/bhoot-biswas/cb0c6f97757723e39f744b037914d72b.js"></script>

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.

<script src="https://gist.github.com/bhoot-biswas/c7b4aa75534f0d6b509113773e89f0c4.js"></script>

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

<script src="https://gist.github.com/bhoot-biswas/33e15af95f7838556a681bd93f6ad4f7.js"></script>

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\_footer](https://developer.wordpress.org/reference/functions/wp_footer/)hook.

<script src="https://gist.github.com/bhoot-biswas/0e0045f9725d2c47a48ba1ceed972a0b.js"></script>

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.

<script src="https://gist.github.com/bhoot-biswas/dad85f39c93f58c61ccb6806b676f742.js"></script>

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](https://github.com/upnrunnHQ/bp-custom-pagination) 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](https://upnrunn.com/blog/2019/06/how-to-customize-paginated-links-for-buddypress-directory-pages/) appeared first on [upnrunn® | Build & Deploy Powerful Application](https://upnrunn.com).