Why Use BuddyPanel in Your Community?

BuddyPanel is a menu area at the side navigation panel in the BuddyBoss theme. It’s a great place for adding links to help your members to find important content in your community. The whole set up is customizable in terms of the links, icons, sections, and positioning and even which pages for it to show on. of the panel. This tutorial will assist you to configure BuddyPannel from scratch. 

Configure BuddyPanel

1. Before customizing your BuddyPannel you must create a BuddyPanel menu. To do so, navigate to Appearance - Menus, click Create a New Menu. 

In BuddyBoss 1.0, there is only one location- which displays the same menu for the both Logged In and Logged Out users. However, in BuddyBoss 1.0, we have separated the locations- one for the Logged In and another for the Logged Out users. You can select both of them as I have done here.

Now, under BuddyBoss, add menu items such as- Profile, Account, Notifications, Messages, Videos, Photos, and Documents. Click Add to Menu to add them in your desired place. 

Another option you can customize is the icon of each menu. BuddyBoss 2.0 is offering Modern Icon Packs for the users. 

Let’s open up the new area called BuddyPannel Section. Press the Add Section button twice because we will open two sections only. You are allowed to add more sections for the convenience of your users. There will be two sections named Get Started. You will have the drag & drop option to place the sections wherever you want. 

Click and rename them. Just like I have named Personal and Media. and don’t miss out pressing the Save Menu, otherwise the changes won’t work out in the frontend.

Reload the frontend and check out the BuddyPanel we have just created now. 

2. Let’s now go to the BuddyBoss - Theme Options - BuddyPanel. With the first BuddyPanel option, you can select either to display your BuddyPanel or not. Under the Show Logo in BuddyPanel option, when you press the On button, the Desktop Logo will be hidden from the header and shown in the BuddyPanel's open state. In the Off state, your Site Icon will be used. Put it in On state and save the changes.

Reload the frontend to see the logo is no longer in the header section instead it’s on the BuddyPanel. If your logo is larger, it won’t look good in the smaller header area, so it’s a great way to fit the logo. 

Under the BuddyPanel Position, select which side of the screen the BuddyPanel should be aligned to. We are keeping it that way. In the Toggle BuddyPanel section, when it is enabled, the BuddyPanel can be toggled between open and closed. Let’s turn Off the Toggle and click the Save Changes button.

Check out the frontend to see the update.

In the BuddyPanel Default State option, select the BuddyPanel's default state for new sessions. We are opening the option here. Don’t forget to hit the Save Changes button.

You will see the change in frontend after reloading. 

3. Now I will show you how to use the BuddyPanel Gutenberg block in the widget area. Navigate to the Appearances - Widgets. Open the widget area Activity -> Directory Right and Press the plus (+) icon. 

Type Buddy on the search bar and choose the BuddyPanel block. It will see the BuddyPanel section at the end of this widget. 

Scroll down to the block and press the up button and set it above the other widgets. 

Lastly, click the Update button. 

Let’s refresh the frontend and have a look at the right side of the page. 

Now, if you turn Off the BuddyPanel option and Save Changes, the BuddyPanel option will not show on the left side.

Instead there would be just a BuddyPanel Menu in the widget area that we have created earlier. Refresh the frontend of your web page to see if it's working or not. 

This is the configuration of the BuddyPanel section. Hope you will enjoy the customization.  

Related Materials

BuddyPanel Menu in BuddyBoss Theme 2.0