Adding an secondary sidebar to your Commons in a Box Theme
Step 1: Download our pre-made CBOX Child Theme
You should never modify the CBOX Parent theme directly. We went to great efforts to allow you to change pretty much everything through a Child Theme (Theme Developers: Read our detailed getting starting guide). To help you get started quickly we’ve created a pre-made Child Theme that has some inline documentation and pre-made folder structures. This allows you to learn as you go and develop your child themes the same way as we do for our clients. Download the CBOX Child ThemeStep 2: Register our new sidebar
To add the new sidebar we need to register it through our functions file. Because we hate working from a messy functions.php file, we always organize our custom functionality into seperate files. In the case of CBOX we are put all our custom code intoengine/includes/custom.php. So go ahead and open that file and add the following code to it.
As a theme developer you’ve probably used this code before, all the details about the function can be found here.
Step 3: Use a hook to add the HTML
The CBOX Theme is filled with all kinds of hooks you can use to insert your custom content easily. You can read all about this here. We are going to use theopen_main_wrap hook to insert the HTML we need for our sidebar:
As you can see we are calling the sidebar we’ve just created in Step 2, and if no widgets are added to the sidebar, show a message to “Add Widgets” to it. The trickiest thing we’re doing here, is using the conditional bp_is_blog_page to only add the sidebar pages on BuddyPress pages. The reason behind this is that we don’t want to show the alternative sidebar on regular WordPress pages, posts and the custom page templates (like the homepage template). If we would not add this conditional we would have the 2nd sidebar showing on every single page.
Step 4: Add some CSS make everything look nice!
Now all we need to do is add some basic CSS to make everything look nice. CBOX is completely build using the amazing box-model grid, provided by Zurb Foundation . This allows us to simply divide our three columns using percentages. We’ll use thebp_is_blog_page conditional again to insert a tiny bit of inline CSS to only the pages where the actual sidebar is actually shown. Add the following code to engine/includes/custom.php
The last few lines of CSS float the sidebar to the right, so that it will display as the right column.
Enjoy the result!
That’s all there is to it! We’ve added a secondary sidebar to the CBOX Theme, with just a few lines of code, and without modifying a single file in the CBOX Parent Theme. That’s really how easy it is! If you are an experienced developer you can easily expand upon this code. Extra Tip If you’d like to show different widgets in the new sidebar based on where you are, you can use something like widget logic. If you are having trouble getting the above tutorial to work, I’ve packaged up the Child Theme into an easy to install .zip file.Download: CBOX Child Theme with Sidebar















