How to make WordPress Themes Responsive

Responsive Themes for WordPress

Responsive Websites become a must in 2012. This tutorial demonstrates how to make your WordPress Theme Responsive.

What is Responsive Web Design?

In very simple terms: Responsive Web Design aims to display content adapted to the visitors screen size. This means namely that the layout width must be fluid, i.e. expressed as a percentage of the width of the screen, typefaces expressed in em and images must be scalable.

Responsive WordPress Theme XO by Semiomantics

Responsive WordPress Theme XO by Semiomantics

Practically speaking: a responsive designs can be viewed on a smart-phone or on a large PC screen, the display will always be the same and adapted to the size of the screen or browser window. n stead of using multiple style-sheets for different screen sizes, designers use Media Queries which allow to create multiple layouts using the same content. To achieve scalability, CSS media queries, such as min-width or orientation are used.

Make your WordPress Theme responsive using a Child Theme

A quick and easy way consists in creating a child theme; this allows you to upgrade your theme as the case may be without altering your customizations.

How to create a responsive child theme?

1. Create a new folder in your wp-content/themes folder and name it anything you like; for the purpose of this exercise I call it “responsive”

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

3. Suppose your main theme is called “wptheme”; paste the following into style.css

 Theme Name: wptheme Child
 Theme URI:
 Description: Child theme for wptheme
 Author: Your Name
 Author URI:
 Template: wptheme

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

4. Import the parent themes style-sheet by adding now the following 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 create different h1 color values for the different screen sizes:

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

Having set these basic parameters, you can now apply styles and layout values to taste, such as vertical navigation display on small screens.

How to make Images responsive

To make images responsive we will need to take some WordPress specifics into account and there fore we will intervene with CSS3 and Media Queries and modify styles.css and functions.php of our theme.

Add the following 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 horizontally, while the vertical scaling is still defined by WordPress. We need to remove WordPress image height and width values to scale our images proportionally.

In WP, image classes come with a with and height properties; we delete these properties 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, however not for the images created by WP dynamically, such as post thumbnails. We need to delete with and height properties dynamically 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 modification in your template and replace:


with the following:

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

That’s all!

Hopefully the above will help you to do additional customization wok and as the case may be, to adapt your great themes to the requirements of 2012 Web Design.

  10 comments for “How to make WordPress Themes Responsive

  1. Daniel Brewerton
    March 10, 2015 at 6:11 am

    I’m trying to figure out a way to make this slider responsive friendly. Here is the code that I am trying to make responsive.

    • Daniel Brewerton
      March 10, 2015 at 6:13 am

      div style=”text-align: start; float: none; position: relative; top: auto; right: auto; bottom: auto; left: auto; width: 3000px; height: 430px; margin: 0px; overflow: hidden;” class=”caroufredsel_wrapper”

      div style=”background: #000; opacity: 0.4; position: relative; z-index: 0; margin: -1px auto 0; height: 461px; width: 1005px;”>

      ul id=”foo5″ style=”text-align: left; float: none; position: absolute; top: 0px; left: 0px; margin: 0px; height: 430px;” class=”caroufredsel caroufredsel-id-1 caroufredsel-processed”

  2. April 18, 2012 at 12:26 am

    Thanks for sharing, I’m learning how to create my theme. It’s useful.

  3. March 25, 2012 at 1:21 pm

    Instead of the function, I found this helpful tip on the WP Support Forum (and it worked for me):

    The answer probably lies in the CSS for the TwentyEleven theme, which is responsive:

    /* Images */
    .entry-content img,
    .comment-content img,
    .widget img {
    max-width: 97.5%; /* Fluid images for posts, comments, and widgets */
    img[class*=”wp-image-“] {
    height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
    img.size-full {
    max-width: 97.5%;
    width: auto; /* Prevent stretching of full-size images with height and width attributes in IE8 */

    Looks to me like images with an explicit width and height declared on them require a resetting of the width and/or height to ‘auto’ in order to take advantage of responsive resizing.

    Good luck!

  4. March 13, 2012 at 7:50 pm

    Hi. Thanks for the tutorial. You may want to cleanup the function code.

  5. February 27, 2012 at 2:22 pm

    Its nice tutorial.. :) It really help me . I will start making my own responsive theme.. By the way I wanted to know that – Can we convert existing theme into responsive theme .

  6. February 9, 2012 at 8:37 pm

    Looking forward to the implementation stage :)

  7. January 26, 2012 at 2:48 am

    Lots of work to come – but amazing evolution!

  8. January 25, 2012 at 5:10 pm

    Very informative post, thank you!

    • January 26, 2012 at 1:15 am

      Thanks; wait till we implement it on some sites :-).

Leave a Reply

Your email address will not be published. Required fields are marked *