Creating a child theme using Child Theme Configurator

If you are ready to create a child theme and start working on your theme, Child Theme Configurator might be a good way to start. Unless you want to manually create a child theme and have complete control over all files, this free plugin will help you create a child theme in just a few clicks.

This plugin allows you to create any number of child themes from your parent theme. It will give you the power to modify the style sheet and even preview changes before you choose to save them to a new file.

Child Theme Configurator

PRICE: Free

Child Theme Configurator

  1. Go to Plugins -> Add new
  2. Search for “Child Theme Configurator”
  3. Install the plugin and activate it
  4. Navigate to Tools -> Setting->Child Themes

Here you can find a few options which will give you the ability to create a child theme. Simply select the parent theme, write down a child theme name if you don’t want to use a standard one.

You can choose how to handle a style sheet file. If you’re not sure what each option represents, leave the default one on. You may choose to copy parent theme’s menus, widgets and other customizer options and backup current style sheet.

After you have created a new child theme, it is recommended that you test your child theme before you start making any changes. To do this, simply choose the child theme you have created and click on “live preview” link to make sure everything works fine and the theme does actually load.

If everything was ok, you are ready to modify the styling.

Style the child theme:

Now the fun part starts. If you’re like most of the people, the first thing you will want to do is change some colors and font sizes. For this example, let’s change the color for our links when on hover.

  1. Navigate to Rule/Value tab
  2. In the textbox, write “color”
  3. Choose “color” from the drop down menu
  4. On the list which appeared in front of you, search for the color of your current hover link
  5. Click on the “selectors” link
  6. Find a group with a:hover selector
  7. Choose a new color and save the changes

Now you can preview your changes by going to Appearance-> Themes and clicking on “Live Preview” under your child theme. If you have already activated your child theme, you can simply open your homepage or any page to see the changes.

Using Query/Selector tab:

Child Theme Configurator Query/Selector
This might be a good technique if you can find the color you want to change. But if you already know the selector you want to change, you can do that with the second tab Query/Selector. Most of the time, you will work with the “base” query unless you are changing options for specific @media options.

  1. Choose “base” for query
  2. In the Selector textbox, write down a selector you are trying to change
  3. For example, let’s change a comments title color:

  4. In selector, write “comments” and choose a “.comments-title” selector
  5. Here you have the number of rules from your parent theme which you can change or add a new rule. If your parent theme had a color selected, simply find the rule and change a color for the child theme. If not, under “new rule” type “color”. A new rule will be created and a color picker box will be shown.

  6. Select a color and save changes

How do you like creating child themes with Child Theme Configurator?

START YOUR OWN BLOG

This guide is an introduction to mastering the art of blogging. It provides easy to follow steps to start, maintain, and grow your blog.

Read the guide

Leave a Reply

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