How to Create Your First WordPress Responsive Theme

Responsive designs have became a vital thing nowadays. Everyday new smartphone touch devices and mobile phones are being introduced. This article is very important for those who are not familiar with responsive designs. In this tutorial we’ll will cover the core basics of creating responsive theme with media queries of CSS3. Reading this tutorial will help you understand the core of responsive designs and how they work in few quick steps.

The trend is changing rapidly. All the big names have targeted mobile users as well Mashable, Engadget, SmashingHub etc. Let’s have a quick look on what are responsive themes.

smashinghub responsive theme

What are responsive themes and why they’re important?

Trend for Responsive themes are increasing tremendously and why not it should be? The increased use of smartphones and tablets make it important for websites to go responsive. What exactly responsive themes are? Responsive theme is an approach in website design that make the theme capable of reacting to different screen sizes. It automatically suits the resolution and look either it’s a desktop PC, a tablet or a smartphone. Developers are crazy about making themes responsive to improve user readability and load time.

It means to use some tricky CSS3 queries that will magic your theme to return optimized pages. Fixed widths won’t work for you everytime. It’s time to go responsive.

 

Basic Requirements

Language knowledge:  HTML, CSS 3
Project time:  20min – 1 hour
Difficulty:  Intermediate

For achieving anything, first thing is the preparation. It;s not that difficult, you just need an approach of the design and a basic know how of how responsive themes work.

To be honest, you should be good in basic knowledge of how to make wordpress themes.

 

Creating Child Theme first

It’s good that you make a child theme first, although this is not the only way to go but is recommended. For those newbie who are not known to what child themes are, should check WordPress reference.

Child themes are less known magic functionality of WordPress. This is the way to keep your theme edits save, even if the parent theme is updated. Anyone with the very basic understanding of HTML and CSS can craft clever colors in theme.

We’ll provide here a quick tutorial on how to make a child theme for your current WordPress theme.

First Step:

Create another folder naming mythemechild in your wp-content/themes directory. We’re assuming your theme name is myparenttheme. You can name child theme folder to anything you want to. It doesn’t matter but you should add some convenient name like if you have abc theme, you can name child theme to abc-child.

Second Step:

If you’ve read the child theme property, adding styles.css is compulsory for child themes. Create a styles.css file in child theme folder. You can add further functions.php and other template files into child directory.

Third Step:

In styles.css of mythemechild, header is the main thing of child theme. Below is the sample header for making child theme function referenced from WordPress codec.

1
2
3
4
5
6
7
8
9
/*
Theme Name: myParentTheme Child
Theme URI: http://abc.com/
Description: Child theme for the My parent theme
Author: Your name here
Author URI: http://abc.com/authorname/
Template: myparenttheme
Version: 0.1.0
*/

Below is the quick explanation of each line:

  • Theme Name. (required) Child theme name.
  • Theme URI. (optional) Child theme webpage.
  • Description. (optional) What this theme is. E.g.: My first child theme. Hurrah!
  • Author URI. (optional) Author webpage.
  • Author. (optional) Author name.
  • Template. (requireddirectory name of parent theme, case-sensitive.
    • NOTE. You have to switch to a different theme and back to the child theme when you modify this line.
  • Version. (optional) Child theme version. E.g.: 0.1, 1.0, etc.

Final Step:

Now you just need to import the parent theme’s stylesheet into child theme and we’ll achieve this with some property like below:
1
@import url("../myparenttheme/style.css");

The Final Code

Combining them all, it will look like below

1
2
3
4
5
6
7
8
9
10
11
12
/*

Theme Name: myParentTheme Child
Theme URI: http://abc.com/
Description: Child theme for the My parent theme
Author: Your name here
Author URI: http://abc.com/authorname/
Template: myparenttheme
Version: 0.1.0
*/

@import url("../myparenttheme/style.css");

Great creating child theme is done. Now activate the child theme by going to appearance -> Themes from WordPress admin panel. Hope you’re now able to make child themes easily.

 

CSS3 Media Queries

CSS3 brings many exciting possibilities and simple queries that ease the work of designers and developers. Although there are some frustrating issues with IE8. They can help you get the below information

  1. Get the width and height of current browser window
  2. Check for if the phone is portrait or landscape.
  3. Get the resolution and device width and height.
Lets not go in deep details of how media queries work, we’ll cover that in another article.

Screen Sizes that we’ll be considering in our tutorial

Defining different screen sizes are important before we proceed to the actual process of code.

  1. Smart Phones - less than 480px (Considering Google Nexus S and ASUS Galaxy 7 also)
  2. Tablets – 481px to 1280px (Motorola Xoom with max 1280 resolution)
  3. Desktops – 1281 px  and above
(Smashinghub Note:  Your values for SmartPhone and Tablets may varry depending on what devices and display screens you’re targeting.)

Below are the queries that we’ll use to make any WordPress theme responsive. They looks easy but are little trickier, one should consider the syntax carefully.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@media screen and (max-width:480px) {
/* Making the headings red for smartphone users */
h1 {
color: red;
}
}
@media screen and (min-width:481px) and (max-width:1280px) {
/* Making the headings Black targeting PC Users */
h1 {
color:green;
}
}
@media screen and (min-width:1281px) {
/* Making the headings red for smartphone users */
h1 {
color: black;
}
}

Testing the development

It’s very important that you keep on check the result after adding every query. For those who have the smartphone and tablets available, testing would be easy. But here’s another smart fun testing tool ScreenFly by quirktools. I love this tool for it’s accuracy and ease of use. You can test it by selecting almost all the major tablet screens and all major smartphones.

It’s worth checking ScreenFly by Quirk tools.

Screenfly by QuirkTools — Test Your Website at Different Screen Resolutions copy

Problematic Hurdles to be consider

It’s important to keep in mind the hurdles and challenges when you’re going to create a responsive design. Because of their flexibility in content, they’re way different from Static website. Below are the challenges that you should be prepared for:

1- Sidebar and Widgets

This can be first annoying hurdle for newbie. Commonly sidebars are aligned and styled using float:left or float:right property and that are seems little tricky with media queries. Something like float: left; clear: none; can help manage widgets conveniently.

2- Navigation Menus

Navigation are another big hurdle. Without managing them, they will give weird look. If you’ve set any hover effect to navigation, consider removing that first to make it look OK for touch devices.

A lot of styling will be required depending on the complexity and make of your theme but once you achieved your desired styles it will be smartphone and tablet friendly website. Below is how it will look like after all styling.

Smashinghub.com iphone4 view

Smashinghub.com iPhone4 view

 

Conclusion

Responsive designs are important because in today’s fast world, the increased use of touch devices make it important to be serve more natural, unique and optimized web to readers.

The trend of responsive design in increasing but they’re still in development stage. Above queries are our collection, developers should keep on searching the new smart ways to make it more effective and powerful. And to help the world by sharing your knowledge and experience.

Additional useful links

Below useful links can be very handy if you’re looking for further responsive design resources.

 


design

About the author

With a passion for Knowledge, Smashinghub has been created to explore things like Free Resources For Designers, Photographers, Web Developers and Inspiration.

Twitter Visit author website

Subscribe to Smashing Hub


7 Comments

  1. Raheem Khan says:

    Excellent work! really inspiring will surely try to create one for myself!

  2. now i get why i should go to blogs for learn necessary techniques of modren web development and this tricky tutorial gives a lesson toward responsive web design development. thanks

  3. evan says:

    Awesome tutorial thanks:D

  4. M.Ilyas says:

    Excellent work :)

  5. Dzinepress says:

    you did excellent work and sharing tricky way to create responsive theme as we having a trend to be good representations. thanks

  6. Umer Rock says:

    this is the 1st tutorial from where i know much about stylesheet thanx for this tutorial :)