BuddyPress is a plugin that transforms your WordPress site in a Social Network. Changing or extending the profile page is a common thing then, especially if you are working on a custom WordPress solution. In this tutorial you will learn how to add an additional tab on the profile page.

Why Would you add a Tab to the BuddyPress Profile Page?

Before we begin coding, I would like to list a few situations where a new tab is really useful. This will probably come up when you are creating a plugin with a new BuddyPress Component or even when you are creating a custom WordPress solution which uses BuddyPress.

In a project of mine, www.bookcoverpedia.com, I have added a few BuddyPress tabs on the profile page:

  • Wishlisted covers
  • Bought covers
  • Reserved covers

Do you see how these additional tabs can really be helpful in a custom WordPress solution? You can even add something else such as your own custom messages to that user or special offers which he can view from his profile page.

Now that you understand why you may need these additional tabs in the BuddyPress Profile Page, let’s get going and create one!

BuddyPress function

Since BuddyPress is extendable, there is a core function that enables us to add the new tab. Our new tab will be used for showing recent posts from that user. The function that we will use to add this tab is called bp_core_new_nav_item.

The whole definition of that function is:

Parameters that are passed in the array are:

  • name – Name displayed on the tab
  • slug – a sanitized title to be used in URL such as  ../members/admin/my-tab
  • position – position in the tab list. The default position is set to 99
  • show_for_displayed_user – If set to TRUE, other visitors looking at the user profile page will be able to see that tab. Default value is set to TRUE
  • site_admin_only – if set to TRUE, only administrator can see this tab
  • screen_function – function name which will be called to show the content of that tab
  • default_subnav_slug – the default slug of the subnav tabs which will be selected if there is any subnav under that tab
  • item_css_id – ID that will be used in the HTML so that it can be used for CSS styling

Adding the new Tab on BuddyPress Profile Page

We will add the new tab by defining a function that will be used to add the tab. After that our function will be passed to the action when the BuddyPress is initialised. The code can be added to the functions.php inside your theme or in a plugin.

Now our tab will be added on the profile page but before trying to look for the tab we need to define the function that will be called to show all those recent posts.

Displaying the Tab Content

After the code we have added last, paste this:

In this function we have actually added two new functions to actions that are used by BuddyPress to show the content of the tab. We have also loaded the template that BuddyPress uses to set additional templates that are used on the Profile Page.

Display the Tab Title

This function is pretty simple for our case. We will only display the actual title of the tab to show before the recent posts.

Display the Recent Posts

This function will be used to display the recent posts from the user. We will need to get the ID of the user on the Profile Page and then query the database for the last 5 posts this user has published.

In this example we have retrieved the ID of the user on the profile page and if there is an ID greater than zero, then we query our database for posts by that user. If there are any posts, we display them as a list of posts.

Conclusion

In this tutorial you have learned how to add tabs on the BuddyPress profile page and you have also seen how to get the ID of the user on the profile page. This can be implemented in many situations and we have done it for a simple one where we need to display the recent posts of that user. Could be useful for a publishing website? 🙂

Have you ever developed anything in BuddyPress? Did you also implement additional tabs on the BuddyPress profile page? Please let us know and share your thoughts on it in the comments below!

Become a Sponsor

Posted by Igor Benic

Web Developer who mainly uses WordPress for projects. Working on various project through Codeable & Toptal. Author of several ebooks at https://leanpub.com/u/igorbenic.

13 Comments

  1. Can this be used for custom post types also? Say you want to display a custom message to a user, would this work?

    Reply

    1. Hi Steve, if you are referring to the BuddyPress user profile where you want them to see some other content: Yes. You can do whatever you want with the content within the tab.

      Just be sure that you are displaying the correct message/content for the user.

      Reply

    2. Hi Steve, if you are referring to the BuddyPress user profile where you want them to see some other content: Yes. You can do whatever you want with the content within the tab.

      Just be sure that you are displaying the correct message/content for the user whose profile it is.

      Reply

  2. Hi Igor, I’m curious if it’s possible to make a tab with lets say a shortcode (entered for every user by Admin). But i want that tab to be user specific.
    So text or shortcodes inserted by the admin will display only for that user. I hope I made myself clear…

    Reply

    1. Yes, that is possible. You could add the text field to the current tab and show that if you’re viewing it as an admin. Or you could add a text field on the profile admin page as I have done that in this article: Create Custom WordPress Profile Fields.

      Then, you can check when adding the tab if there is anything in that field. If it is, then show the tab. When you’re on tab, you can then parse the content from that field as echo apply_filters( 'the_content', $field_content );. That will then parse the shortcodes and execute them. The only “drawback” is that you will need to remove several other functions with remove_filter( 'the_content', 'function_name' ); if you don’t want their code there (for example: Jetpack sharing buttons).

      Reply

  3. The problem here is the cache, the display of shortcode will not work next time when something updated. How to get around this?

    Reply

    1. Hi Scott, you mean the page cache? Since we’re talking about a BuddyPress profile page, the shortcode displayed there should be fine with cache as each profile page is cached differently.

      Or have I misunderstood you?

      Reply

    2. can you tell me where to upload files to like what folder ?

      Reply

    3. hi again i only see the user name of the admin and not any post showing under the my recent post tab?
      can you help me

      Reply

  4. hi scott where do i upload the files to in my cpanel like folder?

    Reply

  5. Hi Igor,

    Should this code also work for adding a new tab to a group page?

    I’ve tried it but the same code doesn’t make a new tab show on a group page.

    Hopefully you can give me a pointer in the right direction, thanks in advance!

    Reply

    1. Hi Kevin, I think group pages and such have different hooks or methods for that. Have you checked this one https://codex.buddypress.org/add-custom-tab-to-groups-directory/?

      Reply

  6. Hi Igor, didn’t find that earlier. Thanks for pointing me in the right direction!

    Reply

Leave a reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.