Creating Alternate Module Styles in iThemes Builder

Posted by on December 1, 2010 with 3 Comments

Recently, iThemes Builder received an update that included support for alternate module styles. Basically, this means that any of Builder’s modules can be styled multiple ways, and you can choose which style you want on a module-to-module basis. If you want to see this in action, check out our latest child theme, Americana. It features four alternate module styles.

Here are the basics to adding alternate module styles to your own Builder child theme. The following code block would go in your child theme’s functions.php file.

if ( ! function_exists( 'it_builder_loaded' ) ) {
  function it_builder_loaded() {
    builder_register_module_style( $module, $alternate_name, $css_class );
add_action( 'it_libraries_loaded', 'it_builder_loaded' );

$module – This is the slug of the module you want to change. It is the default module name, all lowercase with spaces replaced by dashes. ex: A Widget Bar module would be represented as widget-bar. A Footer module would be represented as footer. Rinse and repeat.

$alternate_name – Here, you set the name that you want for your alternate module style. This is what will appear in the dropdown when choosing an alternate module style.

$css_class – Here you can assign a new CSS class to your alternate module style. Any style applied to this class in your stylesheet will be applied to the alternate module style.

It’s just that simple. Here is an example of a working alternate style:

if ( ! function_exists( 'it_builder_loaded' ) ) {
  function it_builder_loaded() {
    builder_register_module_style( 'html', 'Green HTML', 'builder-green-html' );
add_action( 'it_libraries_loaded', 'it_builder_loaded' );


Be Sociable, Share!
Filed Under: WordPress

Get Updates via Email:

Don't miss a single post. Enter your email below to receive my latest blog post via email.

And... Follow me on Twitter.


  1. elaine lucia says:

    Hi there
    I love this idea! I’m intermediate in coding so I have a question:

    I assume that would I add this snippet of code for EACH module I would like to create a modification for? If yes, is there code I need to put in-between each snippet (php code? I NEVER mess with the functions.php area and don’t want to mess it up.

    Second question: To MODIFY my new module, I would go…where? CSS file?

    thank you for your time….I love Builder and am using it exclusively to build sites. If I could have more control over modules, especially the Widget Bar and other widget modules, that would save me literally hours of time.

    thanks so much!
    Elaine aka Girl Friday

    • Matt says:

      Hey Elaine -

      Your assumption is correct. You need to add a line for each additional module you would like to add. All you need to do is copy the line that starts with builder_register_module_style in its entirety and paste it right below itself, changing the appropriate parts for your additional module style. No additional dividers are needed, regardless of how many styles you add. I will update the post to show what it would look like.

      To address your second question: You can now modify the new module style in the style.css file. Simply go to the bottom of your stylesheet and add style to the class that you created for your new module style.

      I am really glad you enjoy Builder. We love it too, and we are always working to make it easier to use, while providing more control and options.

      Thanks Elaine.

  2. elaine lucia says:

    Thanks, Matt for the great answer and info!! Elaine

Leave a Reply