WordPress allowed me to get a better job & better projects in just a Year. I will give you tips, tricks and guide you into WordPress development so you can get more income. Sign up to my 7-day email course!
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.
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:
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!
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:
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.
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.
This function is pretty simple for our case. We will only display the actual title of the tab to show before 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.
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!
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.