wpthemedetector-logo
WordPress Theme Detector Blog
child-theme-configurator-post

Style your theme easily with Child Theme Configurator

28 comments

Those who follow regularly this blog know that I´m an advocate for child themes, the main reason being that they allow you to customize the theme you chose for your site and to update that theme when needed, without the fear of losing all the changes you made to the original theme.

I´ve already published some posts about plugins intended to make child theme creation easy. But a couple of days ago I stumbled across a new plugin that I found interesting, not only because it makes easy to create a child theme but also because it helps a lot when customizing it. This plugin is Child Theme Configurator and is not actually new, it has been in the WordPress Plugin Directory since the end of last year.

First steps with the plugin

After installing and activating the plugin, we will find a new menu element under “Tools” in our admin area. Go to Tools > Child Themes and you will get the following screen:

child-theme-configurator

I intentionally opened the “Help” tab before I took that screenshot, so I could show you that some helpful documentation for this plugin is available right there from your admin area.

Besides that, the Child Theme Configurator screen shows several tabs or pages, the first of them being “Parent/Child”. Over there we can choose:

  • The parent theme we´re going to use (logically the available options are all the themes we have installed in our site which are not child themes themselves).
  • The name we want for the child theme to be created.
  • The slug for the child theme (that is, the name of its folder under our “/themes/” folder).
  • The author name we want to show for the child theme.
  • The version number of the child theme.

After selecting the parent theme and entering the above information, we are ready to click the “Generate Child theme” button. The plugin will then create the appropriate folder and files.

You can see the stylesheet of your new child theme by opening the “View Child CSS” tab. Notice that the information header was created with the information you supplied and that the @import rule calling for the parent theme CSS is already present:

child-theme-configurator-child-css

Child Theme Configurator also creates an empty functions.php for you, so you don´t have to care about that if you want to add your own functions. This functions.php file is not really completely empty because it includes an ABSPATH check which terminates the script if accessed outside of WordPress, which is a nice security feature. This  is how this file looks like:

Let´s start having fun

Once our child theme has been created, we can start customizing it, and here is where  Child Theme Configurator proves to be really helpful.

This plugin parses and indexes the parent theme’s stylesheet so that every media query, selector, rule and value are at your fingertips, then it shows you how each change you make will look before you commit it to the child Theme and, finally, it saves your work so that you can fine-tune your child theme.

For example, let´s say we wanted to increase the font size and the line height of the h4 headings of Twenty Fourteen. After creating the child theme, we can choose the h4 selector in the Query/Selector tab of the plugin. As soon as we start typing, the selector entry box populates with matches like this:

child-theme-configurator-styling-1

After h4 is selected, we can fill the new desired values, and the plugin will show us a preview of the changes:

child-theme-configurator-styling-2

As soon as the “Save” button is clicked, the plugin will automatically update the child theme´s stylesheet with the appropriate rules for our changes to work.

You can see the result of your changes even if a different theme is active in your site. All you have to do is go to “Themes”, once in the Theme Manager hover over your child theme (the plugin doesn´t create a screenshot yet) and click on its “Live Preview” button. I recommend you to open a new tab in your browser, so that you can work on your customization changes and have a look at their results at the same time.

I´ve found this plugin very handy, and there are more things you can do with it. They are all explained in the following video by LilaeaMedia, the creators of Child Theme Configurator. The video is a bit long, but it covers every aspect about how to use the plugin:

 

 

Do you find this plugin useful too? Please let us know through the comments.

Luis Alejandre

Luis is the creator of the WPThemeDetector tool and the chief editor of this blog. You can read more about Luis in our About page.
Liked this post? Please share it!

28 Comments

  1. I have almost customized the style.css file of my site (www.hrden.com). Can I still create a child theme.

    • Hi Ejaz

      Of course, you can create a child theme at any moment. But, since you already customized your current theme, all the changes you made to it won´t appear automatically in your new child theme (obviously), so they would be overwritten if you update your theme to a newer version.

      You should create a child theme, then try to identify your changes (boring task, I know), add those changes to your child theme, make a backup copy of your current theme folder just in case, and then update your parent theme. If you activate your child theme then, everything should look or work as you have it right now, but all your customizations would be in your child theme.

      It´s never too late to create a child theme, and that way you´ll avoid having to go through the same hassle again in the future when newer versions of the parent theme are released.

  2. Hi Luis.

    I’m still looking around for Child Theme plugin after Child Themify don’t work anymore. Scares me to see the details I have to fill in compared to Child Themify.

    How does this compare to Orbisius Child Theme Creator? Appreciate your advice very much…

    • Child Themify works ok. Maybe you tried to use it after the release of WordPress 3.8 and before the plugin was last updated.

      And you should not be scared about the details to fill in for the Child Theme Configurator plugin. Why should you?

  3. This plugin sounds seriously great and I will be trying it as soon as I start my next project. Thanks Luis

  4. How does this plugin work if you’re using something like Genesis Framework and StudioPress theme? I keep getting errors messages when attempting to create new child theme. It only give me an option of choosing Genesis as the child theme, when in fact Lifestyle is my child theme.

    Thank You

    • I guess what happens is that you´re already using a child theme. I haven´t tested this plugin for grandchild themes.

  5. What a great idea! Will this work with Headway Themes?

  6. Excellent and detailed guide! Well, this plugin seems to be great, this will be very useful to create child theme. Thanks for sharing 🙂

  7. Hi Luis … before I quit trying to create a child theme manually and embrace the plugin, I wonder if you can spot why my child is recognized as existing by WP, but when the child is activated my site layout is generic as if no css was loaded. It is as if the parent theme is not being accessed. Here is my child style.css…

    ****************************************************************
    /*
    Theme Name: Twenty Fourteen Child
    Template: twentyfourteen

    Theme customization starts here
    ————————————————————– */
    @import url(“../twentyfourteen/style.css”);

    *****************************************************************

    File paths seem OK…

    wp-content>themes>twentyfourteen>style.css

    wp-content>themes>twentyfourteen>twentyfourteen-child>style.css

    Site is http://www.propertyshoot.com/dev

    • Hi Jonathan,

      Your problem is that those asterisk lines are not commented, so they are considered as html and the @import rule won´t work.

      Make it something like this:

      /*
      Theme Name: Twenty Fourteen Child
      Template: twentyfourteen
      */

      /* Theme customization starts here
      *******************************************/

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

      • Hi Luis – I’ve caused misunderstanding with those 2 lines of asterisks. They are not part of my CSS, I should have added that my code is what is between the 2 lines of asterisks.

        But even when I replace my CSS with yours, I have the same result, a generic layout 🙁

        • Hi again, Jonathan

          I see that what you have in your site is this:

          /*
          Theme Name: Twenty Fourteen Child
          Template: twentyfourteen

          Theme customization starts here */
          -------------------------------------------------------------- */
          @import url("../twentyfourteen/style.css");

          That line with the dashes is messing your @import rule. You should either start it with “/*” or else remove “*/” at the end of the “Theme customization starts here” line.

          • I’ve simplified it right down to

            /*
            Theme Name: Twenty Fourteen Child
            Template: twentyfourteen
            */

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

            refreshed the website but still not inheriting the parent theme.
            It’s going to be something something really obvious. I’ll laugh about it one day 😀

          • It´s just the double quotes you´re using.
            See the way it looks what you have right now in your site:
            @import url(“../twentyfourteen/style.css”);
            You´re using opening and closing double quote characters. They should be just plain double quotes, like this:
            @import url("../twentyfourteen/style.css");
            It looks like you pasted that from a text processor and they became formatted by Windows, or something like that.

          • I´ve just noticed that for some reason those double quotes where already formatted on my first reply, so if you copied and pasted it directly, that´s where the error comes from. Sorry about that. Make sure you replace them with regular double quotes and let me know if it then works.

  8. ooooo… I thought we’d nailed it there, but alas though I retype the quotes in DW text editor the result is the same. I’ve been shift-refreshing on 2 different computers in case it was a cache issue, but no.
    I’m going to sleep on it for a while (here in Australia). I appreciate you adding an extra brain and pair of eyes to this 🙂

  9. hi
    i tryed a child theme,bt i wanna include my index page,other pages as a child theme.pls explain

  10. I’m back Luis. It did come down to the quotes in the end. I was correcting a local copy in Dream Weaver and expecting the remote copy to update on saving. Apparently not 😀
    All good now. Moving forward!

    • Hi Jon,

      I´m glad you managed to make it work. Your site is looking good now!

    • Thank you, Jason.

      The video link has been updated on the post.

  11. Elementary question: instead of modifying I need to comment out a selector. How do I do in the child value? Just write /* */ ?

  12. Started using this, works great, but stuck. I’ve added CSS to the child using query/selector. I now need to remove something, and can’t. I did so manually to the file, and it came back. Did I miss instructions on how to do this?

    • And I just realized, you need to manually clear each style box, and re-save to remove it. For most, it may only be a line or two, this one had 12. So, a suggestive thought, a “remove all” option, or just a simply “delete” checkbox to wipe the entry?

  13. Hi Luis, how this plugin compares with your Divi Child Theme? Thank you!

    • Hi, Facu.

      Sorry I overlooked your comment and didn´t reply earlier. Divi Children has nothing to do with this plugin, because is intended for making child themes of Divi only (and adding customization features to it as well).

Trackbacks/Pingbacks

  1. WP Tips #howto #wp #plug-ins | A Listly List - […] Style your theme easily with Child Theme Configurator […]

Submit a Comment

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