How To Make a More Advanced Responsive Child Theme

in WordPress Tutorials

The increasing use of mobile devices ensures the creation of a responsive, mobile WordPress design a necessity few can afford to ignore. That is the driving force behind this tutorial, to aid those looking for just a little guidance. The subject for this particular tutorial is a child theme, but any theme will work just as well. Ultimately, the goal is to create a responsive website easily view on any mobile device, an ambition shared by countless bloggers today.


There are some requirements to cover before beginning. As this is an advanced child theme development tutorial, some areas of knowledge are needed. Although expertise is not necessary, a solid understanding of HTML and PHP basics along with CSS are required. A little knowledge of JavaScript wouldn’t hurt, either. Finally, one should be familiar with WordPress theme development and WordPress blogging basics.

Child Theme Groundwork

The first step to laying the child theme groundwork is creating a folder in the themes directory, the latter in the wp-content folder. Then select an appropriate name for the new folder, keeping in mind some directory names are restricted in WordPress. Once a name is selected, save the file in the folder along with any themes for WordPress installation.

Selecting the Styles

This is where CSS knowledge comes in handy. To get started, open a text editor and save a CSS file with an appropriate name. Once this is completed, add the child theme header, ensuring WordPress recognizes the child theme CSS files. Feel free to begin adding the necessary header coding as the example below shows, filling in the appropriate name where the example states “ChildThemeName.” Do not forget to add the “template” line.

Theme Name: ChildThemeName Child
Theme URI:
Description: Child theme for ChildThemeName
Author: Creator’s Name
Author URI:
Template: ChildThemeName

Once the header coding is completed, the next step is to call the styles of the main theme into the child theme. The following code will complete this task once placed after the header’s end comment tag. Feel free to add any style codes to the child theme. However, remember that for any added styles to take precedence over the main theme styles this code line must come before any the added style coding.

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

Child Theme Activation

The next step is to activate the child theme. This is done from WordPress admin by following the steps below. Once the theme is activated, be sure to check everything out on a mobile browser and ensure the child theme has the desired appearance.

  • First, login to the WordPress admin dashboard
  • Then load the completed style css file to the same directory as the child theme folder created in the beginning.
  • Finally, go to “Appearance” followed by “Themes to activate the added child theme.

Media Queries

The child theme successfully created, the focus turns to adding the coding necessary for a responsive design. In this way, people can load the site from any device without losing quality. If there is a specific screen size, simply add the proper coding and plug-in the desired screen size pixel range, any screen size acceptable. Following are the suggested screen sizes and corresponding codes.

1. 769px and above desktop screens

@media screen and (min-width:769px) {
/*put all your desktop specific styles here*/

2. 321 to 768px tablet screens

@media screen and (min-width:321px) and (max-width:768px){
/*put all your tablet styles here*/

3. 320px and below Smartphone screens

@media screen and (max-width:320px){
/*put the smartphone styles here*/

In Closing

Hopefully, this tutorial will lead to the creation of a beautiful WordPress child theme and will inspire the creation of more. Of course, adding a personal touch through style coding and ensuring the theme is viewable on any screen will certainly add to the site’s appeal. Nevertheless, because this is an advance tutorial some may feel a little confused and uncertain of the advised steps. Feel free to take the time to study up on WordPress theme development, a great source for any information needed. In the mean time, have fun letting that creativity flow while developing the ideal child theme WordPress site!

Here is a great video resource on creating a child theme:

Comments (2)

  • Comment by Ralph


    I followed you steps but when I have the child activated, it showes the right sidebar on my mobile (menu is responsive version). Not changed anything yet!
    Setting back to main theme resolves it.
    Any idea why?
    Like I said, not a character of added CSS yet.

    Thnx in advanced


  • Comment by Nile

    This is a nice taste into responsive theme design and development. Media queries are fun… but you also have to be very away of your theme’s structure, as well as css IDs and classes to make your site work.

    Thank you so much for sharing this.