This guide will take you through all the steps needed to quickly create a custom Commons In A Box Theme. We’ll show you exactly how you can easy customize the default theme and make them in a upgrade safe manner. Let’s get started shall we?
- Part 1: Introduction to the basic concepts for theming with CBOX
- Part 2: Adding and overwriting custom CSS
- Part 3: Overwriting theme templates and using hooks
- Part 4: Adding/Modifying the CBOX Dashboard and it’s Theme Options
- Part 5: Advanced Customization: Adding Theme Options and Sections
Introduction to the basic concepts of CBOX Theming
The most important concept you need to learn about before you get started is the concept of Child Theming. Child Theming is a powerful WordPress feature that allows you to overwrite templates and functionality from a “parent theme”. The Infinity Theme is developed to make this process is easy as possible, allowing you to overwrite pretty much every single aspect of the theme.
A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme.
The parent/child structure has been a very popular method to harness the power of WordPress Frameworks because it allows you to modify the styling and layout of a parent theme to any extent without editing the files of the parent theme itself. That way, when the parent theme is updated, your modifications are preserved.
We strongly advise you to NEVER make changes to the CBOX Parent Theme in any way. You will lose all these changes when you update the theme and you’ll end up with a big headache maintaining the theme over time. Take some time to learn the power of Child Themes and you’ll be a happy homer. If you still decide to hack away at the CBOX Parent Theme we won’t be able to help you with support either!
Is using Child Themes with CBOX different then child theming with regular WordPress Themes?
If you are already familiar with how Child Themes work you’ll be right at home and nothing is different in terms of workflow. But because the CBOX Theme is very flexible there’s a whole bunch of additional stuff you can do with it. This is all done through special .ini files that live inside your child theme folder. These .ini files allow you to quickly customize your theme beyond templates and functions.php code. If you want to dive into this you can find in-depth documentation about this on the PressCrew site here: http://Infinity.presscrew.com/docs. You’ll also learn the basics about the ini files during this Getting Started guide.
So what stuff can I change through my Child Theme?
Here’s a short summary of some of the things you can modify/overwrite or disable through your Infinity Child Theme:
- Templates (single.php for example, or any BuddyPress template)
- Images (change the default logo by copying over logo.png to the assets/images/ folder in your child theme)
- Dashboard Pages (overwrite default Theme dashboard pages like the “Start” or “Docs” page
- Theme Options (for example to change the description texts for any theme option)
- User Documentation
- PHP Functions
Download a pre-made CBOX Child Theme
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.
Creating your own CBOX Child Theme
Creating your own CBOX Child Theme just takes a few steps. Here’s the quick rundown:
- Create a new folder in your wp-content/themes/ folder
- Create a file called style.css with the following into it<
/* Theme Name: My Custom CBOX Child Theme URI: http://myurl.com Description: Insert description here Version: 1.0 Author: Your Name Template: cbox-theme */
- Create the following folder structure
/engine/config/and create a file called
- Open up the infinity.ini file and add the following line to it:
parent_theme = "cbox-theme"
That’s it! You can now activate your CBOX Child Theme and it will inherit everything from the Parent theme.
During this tutorial we’ll take a look at how to do these things step by step, and by the end you’ll know enough to create unique looking front end and theme dashboard in a snap. We’ll start things easy, by overwriting some of the CSS in the Infinity Theme.