Written by on

Moving Forward With iThemes Builder Responsive

Last week, I teased everyone with the upcoming responsive features of iThemes Builder 4.0. Today, I’m proud to announce that Builder 4.0 is available. Builder is now responsive.

This post will be another Q&A style post to help you know exactly what this release means for you and how you can make use of these new features.

If you use Builder’s Style Manager plugin, make sure to read the section about Style Manager below.

Q. In the last post, you talked about responsive-ready child themes. When will these be available?

As of now, the Foundation Series of Builder child themes is responsive-ready. This means that you can download the latest version of Builder and any of the Foundation Series child themes, install them on your site, and have a ready-to-go responsive site. In addition, the Builder Default child theme is also responsive-ready.

To make it easier to identify a responsive-ready child theme, we are giving all Builder child themes that are responsive-ready version numbers starting with the number 4. So, child themes with versions such as 1.0.0, 1.4.3, 2.1.2, etc are not responsive-ready while child themes with versions such as 4.0.0, 4.1.0, etc are responsive-ready. This means that you can quickly check the version number of a child theme in the members area to see if it is responsive-ready or not.

Over the coming weeks, we will be updating additional child themes to be responsive-ready. I’d like to note that we do not currently intend to update every child theme to be responsive-ready. The child themes were designed without the idea of being responsive, so some of them will not be able to be updated without sacrificing design elements or functionality.

Going forward, most of our new child themes will be responsive-ready upon release. As with updating existing ones, it is possible that some future designs may not be able to be responsive. That said, it is our goal to make the child theme responsive if it is able to be styled in a way that can work responsively.

Q. What is the easiest and fastest way to get started with a Builder responsive site?

The quickest way to get a responsive Builder site up and running is to get the latest version of Builder and one of the updated child themes (currently any of the Foundation Series of child themes). Since the Foundation Series child themes are specifically intended as starting points for building custom designs, using one of these will give you a solid, responsive child theme to build your site.

Q. Will updating my existing site with this new version of Builder break my child theme design?

A lot of effort has gone into ensuring that this version of Builder will not cause issues when you upgrade an existing site to Builder 4.0. There is a specific piece of code that needs to be in a child theme in order to trigger the new responsive feature, so your child theme will still function as it does now after you upgrade.

I should note that there are some Builder sites that have very extreme modifications. Since I don’t have access to these modified child themes, I can’t test with them. So, 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.

If you have a highly-customized site such as this, I recommend keeping a backup of your existing Builder theme directory just in case. If you run into any issues after upgrading, revert back to the previous version of Builder and contact our support 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.

Q. Can I update my existing child theme to be responsive?

A big goal that we had for this release was to make it very easy to update existing child themes to be responsive. As I talked about in my last post, 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 failed 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.

After discussing the options in the office, we decided that 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.

Now that I’ve given the cautionary tale, it’s time for the modification.

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.

<?php

add_theme_support( 'builder-responsive' );

Starting next week, we will post tutorials that detail what methods we used when updating our existing child themes to be responsive ready. So, if you really need to update some existing child themes, hang tight, we’ll have some tutorials coming soon. Note: These tutorials will be CSS-heavy, so if you are a CSS novice, you are probably better off starting with one of the updated child themes and updating it to have the desired changes.

Q. What if I want to use Builder 4.0 and one of the responsive-ready child themes but I don’t want my site to be responsive?

Great question.

In a responsive-ready child theme, you will find the following line of PHP in the functions.php file:

add_theme_support( 'builder-responsive' );

In order to disable the responsive feature, remove the line above and replace it with the line below:

add_theme_support( 'builder-percentage-widths' );

For example, if the child theme’s functions.php file looks like:

<?php

add_theme_support( 'builder-3.0' );
add_theme_support( 'builder-responsive' );

Modify it to look like:

<?php

add_theme_support( 'builder-3.0' );
add_theme_support( 'builder-percentage-widths' );

Q. My site uses Builder’s Style Manager plugin, can I use both Style Manager and the responsive feature?

Unfortunately, Style Manager needs some attention to make it properly handle the changes introduced by this new responsive feature. So, no, for now, you cannot use Style Manager and one of the responsive-ready child themes.

We had a choice to make: either hold off the Builder 4.0 release again or release it now with the notice that Style Manager isn’t ready. We decided that everyone has been really patient and deserved to get the update sooner rather than later. So, expect to see updates about Style Manager soon as we get it patched up for the styling changes it needs to account for.

Have Questions About Builder and Responsive Web Design? Sign up for Free Webinar Tomorrow, Oct. 19

Get an overview of responsive web design and hear our developers explain the new responsive features in Builder 4.0 tomorrow, Oct. 19 @ 11am CDT. The Theme Team will be ready to answer your questions and we’ll be giving away new Builder swag (oh, and an iPad) to celebrate.

Watch the webinar replay

Comments

    • Yes. There is an updated version that simply doesn’t do anything other that provide a message in the Dashboard if a responsive theme is active. Unless you are running that version, you should simply keep the plugin deactivated until an appropriate update is released.

  1. So, does this mean we can’t change the colors, background images, spacing, fonts, sizes, etc. in the foundation themes? This makes it much more limited. I think I’ll have to wait until style manager is back!

  2. Hi Chris. Will there be an alternative way to display the menu at the top of a site? When you have a large number of links in a menu it can look rather messy if they are just stacked on each other as shown in the demo site links. Some responsive themes have a single menu link at the top which when clicked brings up a scrollable list, which I find much cleaner. Is this possible now or will it be an option in the future? P.S. looking good there Chris on your personal site.

    • Thanks Chris.

      This release has me very excited yet also quite nervous. Builder hasn’t had such a low-level, fundamental change in how it renders since it was but a wee little proof of concept more than three years ago. To essentially throw all of that out and put in a new system while also trying to keep compatibility with existing child themes was a bit scary.

      So far, things seem relatively quite as far as issues go. I still wait with bated breath however. :)

  3. So pleased to see this, been waiting impatiently lol – I have the same question as Chris regarding how navigation looks when viewed on e.g. iPhone.

    If you don’t want the nav bar to wrap because of lots of main menu items and perhaps you don’t want dropdown either then a nav with lots of pages pushes the main content way down the screen of a mobile device.

    I like Chris’s idea the best and for example, on iThemes site, viewed on my iphone, I just get the “navigation” button which when clicked displays the iPhone Scrollable List – can we have that? OR

    Another way other responsive theme makers have done it is using the “Theme Location” area in the custom menus, where you pick from dropdown which menu to use for primary navigation and then which to pick for mobile navigation.

    When a person visits the responsive site on a mobile, they are presented with that menu, which obviously you make have fewer menu items.

    Thanks guys, Sue

    • As I posted above, we are currently evaluating a few different options going forward.

      There are a few reasons that we didn’t want to try to bundle a solution for this into this version update:

      Trying to put too many changes into one release just compounds the possible problems that can happen. Changing how Builder renders and how the child themes are styled is a big enough challenge with great potential for urgent support requests. Adding the potential issues that could crop up from such a menu change would easily multiply the number of urgent support requests, making it more difficult to quickly and satisfactorily provide solutions to the issues. Trying to fix multiple things at the same time also adds the potential to add even more issues due to trying to rush out the solutions. So, we’re focusing on the release early, iterate often approach. In other words, this release is just the first step forward. We have many ideas that we want to implement, both short-term and long-term.

      As mentioned in the comment above, there are existing plugin solutions that work well for this, which can provide a solution in the interim.

      Most solutions of this type require Javascript. In my experience, putting Javascript in a theme is a recipe for problems. Suddenly you start to have plugin conflicts and all sorts of odd behavior since it isn’t possible to test the new Javascript against all the Javascript output and generated by plugins, cut-and-paste code from various sources, and custom solutions. Any time the idea of putting Javascript into the theme comes up, I treat that as a very big development task that requires a large amount of testing. So, adding such a feature would have pushed off this release by more than a week.

      Knowing that a number of people are already asking for this feature definitely bumps it up in the list of features to tackle sooner rather than later.

      • Thanks Chris and yes that explanation is perfectly understandable.. and it was nice to get an earlier copy to play around with so we have an idea of what we can offer our clients.

        For me the issue is sorted with the “work-around” of using the above mentioned plugin, for the time being and I am happy to hear the feature request has been bumped higher up the list as obviously it would be far cleaner to have whatever builder solution you whizz kids come up with :)

        Chris (AKA Sue lol)

        • Chris,

          Couldn’t we just add another menu module using a different menu and make one or the other visible based on CSS media queries?

          • That is certainly an option. Whether or not this is the method to use would be up to the person designing the site.

Respond

×

Sale Ends Today! Save 35% OFF BackupBuddy with coupon code BACKUPWP35