Builder Responsive: Introduction

(Difference between revisions)
Jump to: navigation, search
(Responsive-ready Child Themes)
(Responsive-ready Child Themes)
(13 intermediate revisions by one user not shown)
Line 12: Line 12:
  
 
* Visit [http://ithemes.com/find/builder/ the Builder child theme library] and sort by the "responsive" icon.
 
* Visit [http://ithemes.com/find/builder/ the Builder child theme library] and sort by the "responsive" icon.
 +
 +
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 ==
 
== Issues with IE ==
Line 19: Line 21:
 
*For more information, visit: http://ithemes.com/forum/topic/37756-builder-and-avail-theme-not-responsive/#entry172777
 
*For more information, visit: http://ithemes.com/forum/topic/37756-builder-and-avail-theme-not-responsive/#entry172777
  
 +
==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 [[Builder_Responsive:_Introduction#Note_for_Custom_Child_Themes|Note for Custom Child Themes]] section below.
 +
 +
<br/>
 +
 +
===Add Theme Support===
 +
There is a specific piece of code that needs to be in a child theme's <code>functions.php</code> 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:
 +
 +
<pre class="brush:php;">
 +
add_theme_support( 'builder-responsive' );
 +
</pre>
 +
 +
<br />
 +
 +
====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 [http://ithemes.com/forum/forum/64-builder/ 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.
 +
 +
<br />
 +
 +
=== 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.
 +
 +
<br />
 +
 +
====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 [http://ithemes.com/2012/10/10/responsive-is-coming-to-ithemes-builder/ here], the idea was to make it as simple as adding a line of PHP to your child theme's <code>functions.php</code> file.
 +
 +
In a way, this has been achieved. By adding a single line of PHP to your child theme’s <code>functions.php</code> 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 [http://ithemes.com/purchase/backupbuddy/ 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 <code>functions.php</code> 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 <code>functions.php</code> file, simply add this line after the <?php line:
 +
 +
<pre class="brush:php;">
 +
add_theme_support( 'builder-responsive' );
 +
</pre>
 +
 +
If your child theme doesn't have a <code>functions.php</code>, create a new file, add the following code to it, save it as <code>functions.php</code>, and add it to your child theme.
 +
 +
<pre class="brush:php;">
 +
<?php
 +
 +
add_theme_support( 'builder-responsive' );
 +
</pre>
 +
 +
== See also ==
 +
* [[Builder_Responsive:_Introduction|Introduction]]
 +
* [[Builder_Responsive:_Videos|Videos]]
 +
* [[Builder_Responsive:_Updates|Updates]]
 +
* [[Builder_Responsive:_Stylesheets| Stylesheets]]
 +
* [[Builder_Responsive:_Responsive_Support_Function_Parameters| Responsive Support Function Paramaters]]
 +
* [[Builder_Responsive:_Responsive_vs._Adaptive|Responsive vs. Adaptive]]
 +
* [[Builder_Responsive:_FAQ| FAQ]]
  
 
==Additional Links==
 
==Additional Links==
Line 34: Line 101:
 
*[http://ithemes.com/2012/10/24/responsive-web-design/ A Primer on Responsive Web Design]
 
*[http://ithemes.com/2012/10/24/responsive-web-design/ A Primer on Responsive Web Design]
  
==See also==
+
== See also ==
 
* [[Builder_Responsive:_Introduction|Introduction]]
 
* [[Builder_Responsive:_Introduction|Introduction]]
 
* [[Builder_Responsive:_Videos|Videos]]
 
* [[Builder_Responsive:_Videos|Videos]]
* [[Builder_Responsive:_Updates|Updates]]
 
 
* [[Builder_Responsive:_Stylesheets| Stylesheets]]
 
* [[Builder_Responsive:_Stylesheets| Stylesheets]]
 +
* [[Builder_Responsive:_Responsive_Support_Function_Parameters| Responsive Support Function Paramaters]]
 
* [[Builder_Responsive:_Responsive_vs._Adaptive|Responsive vs. Adaptive]]
 
* [[Builder_Responsive:_Responsive_vs._Adaptive|Responsive vs. Adaptive]]
 
* [[Builder_Responsive:_FAQ| FAQ]]
 
* [[Builder_Responsive:_FAQ| FAQ]]

Revision as of 11:18, October 9, 2013


Builder-responsive-540x337.png


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.


Contents

Responsive-ready Child Themes

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.

<?php
 
add_theme_support( 'builder-responsive' );

See also

Additional Links

See also


← Back to Builder Codex Home

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox