Builder Responsive: Introduction

From iThemes Codex
Revision as of 21:25, 12 November 2013 by Ronald (talk | contribs)
Jump to: navigation, search


Starting with version 4.0, Builder 4.0 uses responsive design, so your site will respond to different screen sizes like phones and tablets. Our newly-updated Foundation Series themes are now fully-responsive, and pave the way for future mobile responsive theme designs.

Responsive-ready Child Themes

Responsive filter.jpg

As of Builder 5, Builder Core (previously referred to as Builder Parent theme) is now integrated in each theme. The Builder Portfolio shows which themes are responsive, and this applies to the Builder 4 child themes, as well as the Builder 5 themes.

Issues with IE

Unfortunately, responsive sites don't work very well on Internet Explorer < 9. That being the case, our themes have rules for IE 6, 7, and 8 that keep the site full width. This may not be ideal, but it is certainly much better than having a terrible-looking site in IE < 9.

Updating to Builder 4.0

A lot of effort has gone into ensuring that this Builder 4.0 will not cause issues when you upgrade an existing site that is running an earlier version of Builder. The easiest way to upgrade to Builder 4.0 is to download the latest version of Builder Theme - Core and your corresponding child theme from the iThemes Member Panel. Follow the normal Updating Builder instructions.

If you have made customizations to your child theme's CSS, please visit the Note for Custom Child Themes section below.

Add Theme Support

There is a specific piece of code that needs to be in a child theme's functions.php in order to trigger the new responsive feature, so your child theme will still function as it does now after you upgrade.

Here is that code:

add_theme_support( 'builder-responsive' );

Note for Custom Child Themes

If you have a large amount of customizations through filters that affect widths, positioning, and other aspects integral to rendering a Layout, it is possible that the changes in this release can cause you some issues.

So, if you have a highly-customized site, we recommend keeping a backup of your existing Builder theme directory just in case. If you run into any issues after upgrading, revert to the previous version of Builder and contact us in the forum about the issue. If possible, please provide a copy of your child theme that is having the issue so that we can find a way to work around the issue.

Can I update my existing child theme to be responsive?

The easiest way to update your child theme to a responsive-ready version is to download the latest version from the iThemes Member Panel and install it.

For Advanced Users

A big goal that we had for this release was to make it very easy to update existing child themes to be responsive. As Chris Jean mentioned here, the idea was to make it as simple as adding a line of PHP to your child theme's functions.php file.

In a way, this has been achieved. By adding a single line of PHP to your child theme’s functions.php file, you can enable Builder 4.0's responsive feature. However, what we overlooked to account for is that the old method of styling child themes create some inconsistencies as the design breaks down responsively.

Will adding this line of PHP make your existing child theme responsive? Yes; however, the styling may not take to it too well.

The best advice we can give to people is to try making the change on a test version of your site. Set up a test installation of WordPress (if you have BackupBuddy, you can use the magic migration feature to set up a mirror of your site for testing), install the latest version of Builder, add your child theme, make the modification (listed below) to the functions.php file, and test things out to see if your design is coping well with the new responsive feature.

Note that the functions.php modification can be removed to switch the child theme back to its non-responsive functionality, so trying out the feature will not do anything to prevent you from going back. If you don’t want to go to the trouble of making the test site and are comfortable with your site possibly having some style issues while you test out the new feature, you can easily remove the modification and put things back the way that they were.

If your child theme already has a functions.php file, simply add this line after the <?php line:

add_theme_support( 'builder-responsive' );

If your child theme doesn't have a functions.php, create a new file, add the following code to it, save it as functions.php, and add it to your child theme.

add_theme_support( 'builder-responsive' );

See also

Additional Links

See also

← Back to Builder Codex Home