WordPress.org

Ready to get started?Download WordPress

Plugin Directory

Child Theme Configurator

Create a Child Theme from any installed Theme. Each CSS selector, rule and value can then be searched, previewed and modified.

Does it work with plugins?

We offer a premium extension to let you easily modify styles for any WordPress Plugin installed on your website. The Child Theme Configurator Plugin Extension scans your plugins and allows you to create custom stylesheets in your Child Theme. Learn more at http://www.lilaeamedia.com/plugins/child-theme-plugin-styles

Is there a tutorial?

Why doesn't this work with my (insert theme vendor here) theme?

Some themes (particularly commercial themes) do not adhere to the Theme Development guidelines set forth by WordPress.org, and do not automatically load child theme stylesheets or php files. This is unfortunate, because it effectively prohibits the webmaster from adding any customizations (other than those made through the admin theme options) that will survive past an upgrade.

Contact the vendor directly to ask for this core functionality. It is our opinion that ALL themes (especially commercial ones) must pass the Theme Unit Tests outlined by WordPress.org.

Why doesn't the Parent Theme have any styles when I "View Parent CSS"?

Your Parent theme is probably using a non-standard location for the stylesheets. Check "Scan Parent Theme for additional stylesheets" on the Parent/Child tab and load the Child Theme again.

Where is it in the Admin?

The Child Theme Configurator can be found under the "Tools" menu in the WordPress Admin. Click "Child Themes" to get started. Click the "Help" tab at the top right for a quick reference.

Where are the styles? The configurator doesn't show anything!

All of the styles are loaded dynamically. You must start typing in the text boxes to select styles to edit. "Base" is the query group that contains styles that are not associated with any particular "At-rule."

Start by clicking the "Query/Selector" tab and typing "base" in the first box. You can then start typing in the second box to retrieve the style selectors to edit.

Why do the preview tabs return "Stylesheet could not be displayed"?

You have to load a child theme from the Parent/Child tab for the preview to display. This can also happen when your WP_CONTENT_URL is different than $bloginfo('site_url'). Ajax cannot make cross-domain requests by default. Check that your Settings > General > "WordPress Address (URL)" value is correct. (Often caused by missing "www" in the domain.)

Can I edit the Child Theme stylesheet manually offline or by using the Editor or do I have to use the Configurator?

You can make any manual changes you wish to the stylesheet. Just make sure you import the revised stylesheet using the Parent/Child panel or the Configurator will overwrite your changes the next time you use it. Just follow the steps as usual but select the "Use Existing Child Theme" radio button as the "Child Theme" option. The Configurator will automatically update its internal data from the new stylesheet.

Why are my menus displaying incorrectly when I activate the new child theme?

The child theme creates a new instance in the WordPress options data and the menus have to be assigned. Go to Appearance > Menus and assign locations to each of the menus for the new Child Theme.

If the parent theme changes (e.g., upgrade), do I have to update the child theme?

No. This is the point of using child themes. Changes to the parent theme are automatically inherited by the child theme.

A child theme is not a "copy" of the parent theme. It is a special feature of WordPress that let's you override specific styles and functions leaving the rest of the theme intact. The only time you need to make changes after an upgrade is if the parent removes or changes style or function names. Quality themes should identify any deprecated functions or styles in the upgrade notes so that child theme users can make adjustments accordingly.

Where are the .php files?

The configurator automatically adds a blank functions.php file to the child theme directory. Other parent theme files can be copied using the "Files" tab. Theme images and a custom screenshot can be uploaded there as well.

How do I change a specific color/font style/background?

You can override a specific value globally using the Rule/Value tab. See Rule/Value, above.

How do I add styles that aren't in the Parent Theme?

You can add queries and selectors using the "Raw CSS" textarea on the Query/Selector tab. See Query/Selector, above.

How do I remove a style from the Parent Theme?

You shouldn't really "remove" a style from the Parent. You can, however, set the rule to "inherit," "none," or zero (depending on the rule). This will negate the Parent value. Some experimentation may be necessary.

How do I remove a style from the Child Theme?

Delete the value from the input for the rule you wish to remove. The Child Theme Configurator only adds overrides for rules that contain values.

How do I set the !important flag?

We always recommend relying on good cascading design over global overrides. To that end, you have ability to change the load order of child theme styles by entering a value in the "Order" field. And yes, you can now set rules as important by checking the "!" box next to each input. Please use judiciously.

How do I create cross-browser gradients?

The Child Theme Configurator uses a standardized syntax for gradients and only supports two-color gradients without intermediate stops. The inputs consist of origin (e.g., top, left, 135deg, etc.), start color and end color. The browser-specific syntax is generated automatically when you save these values. See Caveats, below, for more information.

How do I make my Theme responsive?

The short answer is to use a responsive Parent Theme. Some common characteristics of responsive design are:

  • Avoiding fixed width and height values. Using max- and min-height values and percentages are ways to make your designs respond to the viewer's browser size.
  • Combining floats and clears with inline and relative positions allow the elements to adjust gracefully to their container's width.
  • Showing and hiding content with Javascript.

For more information view "Make a Theme Responsive":

How do I add Web Fonts?

The easiest method is to paste the @import code provided by Google, Font Squirrel or any other Web Font site into the @import tab. The fonts will then be available to use as a value of the font-family rule. Be sure you understand the license for any embedded fonts.

You can also create a secondary stylesheet that contains @font-face rules and import it using the @import tab.

Requires: 3.7 or higher
Compatible up to: 3.9.1
Last Updated: 2014-7-16
Downloads: 40,352

Ratings

5 stars
5 out of 5 stars

Support

5 of 5 support threads in the last two months have been resolved.

Got something to say? Need help?

Compatibility

+
=
Not enough data

0 people say it works.
0 people say it's broken.

100,1,1
100,1,1