How to make WordPress Themes Responsive

Respon­sive Web­sites become a must in 2012. This tuto­r­ial demon­strates how to make your Word­Press Theme Responsive.

In very sim­ple terms: Respon­sive Web Design aims to dis­play con­tent adapted to the vis­i­tors screen size. This means namely that the lay­out width must be fluid, i.e. expressed as a per­cent­age of the width of the screen, type­faces expressed in em and images must be scalable.

Respon­sive Word­Press Theme XO by Semiomantics

Prac­ti­cally speak­ing: a respon­sive designs can be viewed on a smart-phone or on a large PC screen, the dis­play will always be the same and adapted to the size of the screen or browser win­dow. n stead of using mul­ti­ple style-sheets for dif­fer­ent screen sizes, design­ers use Media Queries which allow to cre­ate mul­ti­ple lay­outs using the same con­tent. To achieve scal­a­bil­ity, CSS media queries, such as min-width or orientation are used.

A quick and easy way con­sists in cre­at­ing a child theme; this allows you to upgrade your theme as the case may be with­out alter­ing your customizations.

1. Cre­ate a new folder in your wp-content/themes folder and name it any­thing you like; for the pur­pose of this exer­cise I call it “responsive”

2. Cre­ate a style sheet in your new Child Theme folder (call it styles.css).

3. Sup­pose your main theme is called “wptheme”; paste the fol­low­ing into style.css

 /*
 Theme Name: wptheme Child
 Theme URI: http://www.yourdomain.com/
 Description: Child theme for wptheme
 Author: Your Name
 Author URI: http://www.yourdomain.com
 Template: wptheme
 Version:1.0
 */

The only line you really need to respect is Template:wptheme; this line refers to the par­ent theme folder.

4. Import the par­ent themes style-sheet by adding now the fol­low­ing line to your new style.css:

@import url(“../wptheme/style.css”);

5. Define the screen sizes you design for. (Smart-phones, tablets, PC) To test the result we just cre­ate dif­fer­ent h1 color val­ues for the dif­fer­ent screen sizes:

@media screen and (max-width:320px)
{
h1 {
color: #ff0000;
}
}
@media screen and (min-width:321px) and (max-width:768px)
{
h1 {
color:#00FF00;
}
}
@media screen and (min-width:769px)
{
h1 {
color: #0000FF;
}
}

Hav­ing set these basic para­me­ters, you can now apply styles and lay­out val­ues to taste, such as ver­ti­cal nav­i­ga­tion dis­play on small screens.

To make images respon­sive we will need to take some Word­Press specifics into account and there fore we will inter­vene with CSS3 and Media Queries and mod­ify styles.css and functions.php of our theme.

Add the fol­low­ing to your style-sheet to make images scalable:

img{max-width: 100%;}
img{ -ms-interpolation-mode: bicubic; }

Now the images will be re-sized to fit hor­i­zon­tally, while the ver­ti­cal scal­ing is still defined by Word­Press. We need to remove Word­Press image height and width val­ues to scale our images proportionally.

In WP, image classes come with a with and height prop­er­ties; we delete these prop­er­ties like so:

change in your WP editor:

<img class=”imgclass” src=”../images/imagethumb.jpg” alt=”” width=”100″ height=”100″ />

to this:

< img class=”imgclass” src=”../images/imagethumb.jpg” alt=”” />

This will work for your post and page images, how­ever not for the images cre­ated by WP dynam­i­cally, such as post thumb­nails. We need to delete with and height prop­er­ties dynam­i­cally with a function.

Add to functions.php:

function remove_wp_width_height($string){
return preg_replace(‘/\/i’, ”,$string);
}

Now you need to make a final mod­i­fi­ca­tion in your tem­plate and replace:

the_post_thumbnail();

with the following:

echo remove_wp_width_height(get_the_post_thumbnail(get_the_ID(),’large’));

That’s all!

Hope­fully the above will help you to do addi­tional cus­tomiza­tion wok and as the case may be, to adapt your great themes to the require­ments of 2012 Web Design.

• how to make a word­press theme responsive
• respon­sive word­press tutorial
• how to make word­press themes
• how to make word­press theme responsive
• how to make word­press theme
• word­press respon­sive theme tutorial
• make word­press responsive
• červený kříž
• is there a wau to make a wp theme respon­sive after creation
• how to cre­ate a word­press theme

Related posts:

1. Word­Press Christ­mas Themes
2. Word­Press Themes and Development
3. Best Word­Press Busi­ness Themes
4. How to Style the Word­Press Menu
5. New XO53 Theme for WordPress

Tags: How to make WordPress Themes Responsive, Responsive Web Design, Responsive WP Themes

This entry was posted on January 25, 2012 at 4:29 pm and is filed under Tutorials, WordPress. You can follow any responses to this entry through the RSS 2.0 feed.