With the drastic increase in Mobile technology of late, WordPress mobile design and responsive design techniques are a must. In this Advanced WordPress tutorial, I will cover ways to make a responsive child WP theme that can be added to your current theme in order to make it respond better when users are on a mobile device such as an iPhone, iPad or Android. I will discuss how to determine what style sheets are displayed according to the user’s screen size rather than using device detection.
Before you create a child theme on WordPress
Since you are reading an advanced tutorial on child theme development, you should already know the basics of WordPress blogging and WordPress theme development. Knowledge of CSS is necessary as well as a basic understanding of HTML and PHP. JavaScript can be useful, but is not absolutely necessary for this tutorial.
Preparing Your Child theme
The first thing you need to do is create a new folder in your themes directory named mobile_child. You will find the themes folder in your wp-content folder. Place your new mobile_child child theme in the same folder that has all of the themes for your installation of WordPress. You don’t have to name your child theme mobile_child. You can name it anything you want with the exception of a few restricted directory names in WordPress.
Getting Started with Styles
Next, you need to open your text editor and save a CSS file named style.css. This file will get uploaded to the mobile_child directory when you are done with it. First, you need to put the child theme header in it so that WordPress recognizes it as a child theme. The only difference in this header from a regular theme’s header is that it should also contain the “template” line as in the following example:
All the places where it says yourThemeNameHere should be filled in with the name of your current active WordPress theme.
The next think you need to do, after you have your header in the CSS file, is to call your main theme’s styles into your child theme by adding the following code after the end comment tag in your header:
@import url(“../yourThemeNameHere/style.css”);
The above line of code has to be above all other styles that you add to your child theme’s style.css file. That way, any styles you add below that line will override what is in the main theme’s style.css file and anything that is not overridden will still be as it was in the main theme. Therefore you can change styles for your child theme one at a time. You can alter as many or as few as you like. For example if all you wanted to change was the p tag, the h1, h2 and h3 tags styles, all you would have to do is enter the following code in your style.css file for your child theme:
That is just an example, you can use whatever styles you like in your own child theme of course.
How To Activate A Child Theme On WordPress?
In order for WordPress to make use of the child theme you created, you have to activate it from the WordPress admin. Here are the simple steps for activating a child theme:
- Login to your WordPress admin dashboard.
- Upload the style.css file after it is finished. Upload it to the directory you created which we called mobile_child, but which you may have called something else.
- Navigate to “Appearance” then “Themes” and activate the child theme name you added.
That is all there is to it. Now open your WordPress site in a mobile browser to test it and see how your changes look.
Going further with Media Queries
So far, we covered basic child theme creation. Now I want to show you some tricks to make it a responsive theme that will look good in just about any size screen. The three sizes that are probably most important are these:
- Desktop screens which are 769px and above
- Tablet screens which are from 321 to 768px
- smart Phone screens which are under 320px
Here are the media query styles for each of the above respectively:
That is all you have to do to make a responsive child theme that looks good in almost any size window. You may have a specific screen size you want your WordPress blog or website to look good in. If that is the case, just adjust the pixel range in the max-width and min-width media queries above. You can use any size you see fit in your own media queries.
Summary
If you followed the instructions in this tutorial, you should now be able to make a responsive WordPress child theme that looks great no matter what type of screen size someone is viewing your WordPress blog or website on. This was an advanced tutorial, so if you don’t understand everything, you should study theme development for WordPress. WordPress.org has a wealth of information on the subject, so that would be a great place to start. The WordPress codex has just about everything you need to know, but you can also do a quick search engine query to find a lot of other sites that publish information as well as reading right here on WPHub.com which I have personally posted theme development tutorials on in the past. Have a great time developing your WordPress site!
