How to Customize BuddyBoss Theme – Add A Blank Page

After trying Mighty Networks and Circle.so I decided that BuddyBoss was the way to go for the all-new for 2023 Write & Direct Film School.

So far? Love BuddyBoss.

Like most modern site configurations I have a main url, and then a client dashboard/community at a ‘my’ sub domain. The sub domain site is where BuddyBoss lives. It’s also where I collect enrollments for the school.

As you can imagine, my primary site is themed completely different than BuddyBoss. And though the BuddyBoss theme offers a plethora of options to customize the look and feel, I wanted the enrollment page on the ‘my’ subdomain to be identical in look and feel to my primary site. For me, this is a better user experience.

So I needed to customize the BuddyBoss theme outside of the normal parameters, and create a completely blank page that would allow header to footer styling. The first step to accomplish this is activate the BuddyBoss child theme.

1. Activate BuddyBoss Child Theme

BuddyBoss provides a child theme out of the box which makes it easier to add custom styling to aspects of your BuddyBoss site. Simply activate the child theme and with your sFTP client, browse to the /wp-content/themes/buddyboss-theme-child folder. In this folder you’ll find items like functions.php, screenshot.png, etc.

You can add your own PHP functions to the functions.php file, change the theme image in the WordPress Admin by replacing the screenshot.png file — You get it. I’m not going to dive into child theme possibilities here.

Let’s get onto styling a page to match my primary site.

2. Create New Page Template

My registration page on the BuddyBoss site is called ‘enroll’. To customize this page I simply create a page-enroll.php file and drop it in the root of the child theme. The contents of the PHP file should look like this (download it here):

3. Override BuddyBoss Styling

When I created my blank page and added content, it worked. But I couldn’t change the header and footer of the page to match my primary site. And this didn’t work for me.

Reached out to BuddyBoss support and asked them for a way to have a completely blank page without including their styling in any way. They don’t have that option. So, it was off to the wild wild west of overriding CSS with !important declarations. Not ideal, but guess what? It works.

In the assets > css folder (in the BuddyBoss child theme) you’ll see a ‘custom.css’ file. This is the file for customizing your CSS.

4. Create Your Page & Get The ID

I’m not saying this is the only way to do this. For example, you could play around with creating a template that you choose from the admin, etc. But that route wasn’t working for me in this scenario.

With that said, simply create the page you want to style in the WordPress admin (if you haven’t already). Make sure the permalink matches the name you give your PHP file.

In the top of the WordPress admin (with the page in edit mode) look for “post=” and a number. That number is your page ID. Jot that down.

5. Add CSS Overrides

Next add the lines below to the custom.css file. *Note: Use your page ID number instead of 877.

/* buddy boss mods */
.page-id-877 #content{padding:0 !important;margin:0 !important;width:100% !important;}
.page-id-877 .site-content{padding:0 !important;margin:0 !important;width:100% !important;}
.page-id-877 .container{padding:0 !important;margin:0 !important;width:100% !important;max-width:100% !important;}
.page-id-877 .bb-grid{display:block !important;}
.page-id-877 .site-content-grid{padding:0 !important;margin:0 !important;width:100% !important;flex:0 1 100% !important;}
.page-id-877 img {padding:0 !important;}
.page-id-877 .buddypanel {display:none !important;}
.page-id-877 #page {margin:0 !important;}
.page-id-877 .site-header-container {height:0px !important;position:fixed !important;margin:-100px 0 0 0 !important;}
.page-id-877 .footer-bottom {display:none !important;}

This will move the BuddyBoss header off the page and completely hide the footer. You can also do a display:none on the site-header-container if you’d like.

This CSS removes margins, spacing, hides the BuddyPanel and changes the .bb-grid class to not display as flex box. That’s a huge one as your content that you add in the next step will not look right until .bb-grid is set to display:block.

6. Add Your Own Styling

Now you can add your own header, main content and footer using the same styling from your primary site! Of course the actual BuddyBoss header and footer is being processed, which includes the WordPress loop, etc. We have just hid them.

You can check out both of my pages and see how they now match up:

https://writedirect.co/film-school-details/

https://my.writedirect.co/enroll/

In Summary

As mentioned, there could be other ways to customize the BuddyBoss theme and create your own blank template page, but for my scenario this gave me what I needed. Obviously you could add other page-name.php template files, grab the ID and add to your CSS. Or try creating a template to select from the admin. As mentioned, I had issues with that route and BuddyBoss.