A responsive design means a layout that responds well to different screen sizes. Such as iPad, tablets, Smart Phones and Desktop. This tutorial explains what it takes to make your existing Wordpress theme responsive in a few simple steps.
What you should already know:
1. How to build a wordpress theme
2. CSS knowledge
In this tutorial we are going to make a child theme and use CSS media queries to make it work properly in multiple screen sizes.
1. In the wordpress ‘themes’ folder, Create a new folder and name it ‘multiplescreen’.
2. Create a CSS file and save it as ‘style.css’ in the ‘multiplescreen’ folder.
A ‘style.css’ is the only required file for a child theme. Add the following code to the newy created ‘style.css’ file.
Importent: Let’s assume your existing theme is called ‘mynormalWPtheme’. Replace the ‘mynormalWPtheme‘ with your themes name.
Theme Name: mynormalWPtheme Child
Theme URI: http://www.yourdomain.com/
Description: Child theme for the mynormalWPtheme
Author: Your Name
Author URI: http://www.yourdomain.com
As with any WordPress theme, the information header must be at the top of the CSS file. The only difference is that, in a child theme the Template: line is required, so that WordPress knows which theme is the parent of this child theme.
Now we have to call our parent WordPress stylesheet styles in to the child theme. Add the following code to do so. @import url.. calls the parent theme’s CSS to the child theme’s CSS.
To see if the child theme is working, lets change the H1 titles of the child theme to orange. replace the above code with following:
Importent: Make sure no styles appear above @import url.. That prevent your child stylesheet from importing the parent styles.
Log in to the WordpPress admin, Activate mynormalWPtheme Child in the Appearence –> Themes. Now check your wordpress site in a browser. You should see a exact copy of your parent theme with orange h1 titles.
Now we need to define what are the media screen sizes we will be designing for. I have categorized them to 3.
1. SmartPhones- less than 320px
2. Tablets – 321px to 768px
3. Descktop – 769px and above
@media screen and (min-width:321px) and (max-width:768px)
@media screen and (min-width:769px)
Save the CSS file. To test these media queries, simply open your site in a browser and drag and resize the window. You will see the h1 color change when browser window size change.
You can also test it through Dreamweaver CS5 multiscreen option (Multiscreen Preview button in the Document toolbar).
Next, you can add media specific styles to override specific parent templates styles. As an example, the top navigation which is horizontal in desktop, could be made to be vertical in the smartphones. Remember to remove the h1 styles we added for testing purposes.
This is how this web site looks on multiple media screens.