Get More Content Driven Navigation Power with IntelliWidget PRO

Post and Taxonomy Conditions

IntelliWidget PRO applies the power of IntelliWidget to WordPress pages such as blog pages, date archives, categories, tags, search results, 404 pages and many more that cannot be customized with the basic version. Read More

Customize WordPress Themes Fast with Child Theme Configurator PRO

Thousands of users have already seen the benefits of customizing WordPress themes with Child Theme Configurator. If you spend any amount of time editing CSS or building custom WordPress themes, Child Theme Configurator PRO will help maximize your productivity and can save hours of development time. CTC is one of the top 1% most popular and top 2% highest rated plugins on WordPress.org. Read More

Responsive Menu for WordPress: Control the Mobile User Experience

The IntelliWidget Responsive Menu lets you break free from your theme’s built-in responsive menu options and gives you complete control over the mobile user experience. Read More

Customize WordPress Themes Fast with Child Theme Configurator CSS Editor

Overview

Child Theme Configurator is a fast and easy to use CSS editor that allows you to create Child Themes and customize them beyond the options of the theme Customizer. It helps you easily identify and override the exact CSS attributes you want to change and gives you unlimited control over your WordPress look and feel while leaving your Parent Theme untouched. CTC is one of the top 1% most popular and top 2% highest rated plugins on WordPress.org.* Read the reviews

Child Theme Configurator PROIntroducing
Child Theme Configurator PRO

Apply the CSS editing power of Child Theme Configurator to any WordPress Plugin installed on your website. We’ve added more features to make design work quicker and easier with Child Theme Configurator PRO. For a limited time save over 15% Learn more

The Child Theme Configurator for WordPress parses and indexes a Theme’s stylesheet so that every media query, selector, rule and value are at your fingertips. Second, it shows you how each change you make will look before you commit it to the Child Theme. Finally, it saves your work so that you can fine-tune your Child Theme without the risk of losing your edits.

You can create any number of Child Themes from any existing Parent Theme. The Child Theme Configurator for WordPress lets you choose from your installed themes (even existing Child Themes) and save the results in your Themes directory.

When you are ready, just activate the Child Theme and your WordPress site takes on the new look and feel automatically.

Tutorial Videos

View all videosWe’ve collected all of the Child Theme Configurator Video Tutorials into a single page for easy viewing. View all videos

Features

Child Theme Configurator
Community Edition
Child Theme Configurator
PRO
  FREE-Download Now Buy Now – $12.95 USD
Online Documentation
Video Tutorials
Update themes without losing customizations
Easily copy widgets, menus and other options to a child theme
Make modifications above and beyond the theme Customizer
Multisite compatible — great for WordPress Networks
Export Child Theme as Zip Archive
Import web fonts and use them in place of theme fonts
Identify and override exact selectors from the parent theme
Change specific colors, backgrounds, font styles, etc., without changing other elements
Automatically generate cross-browser and vendor-prefixed rules
Automatically create and preview CSS3 gradients
Preview style changes before committing to them
Add and modify individual @media queries
Uses WP Filesystem API – will not create files you cannot remove
Customizations remain even if plugin is deactivated or removed, unlike other CSS plugins
Plugin Mode – Style Plugins to match the look and feel of your website  
Keeps Plugin customizations in easy reach for updating  
Recent edits panel with links to most recently edited selectors  
All Styles Panel with links to all selectors in a single view  
Free Upgrades to new PRO features as soon as they are released  
Top-rated Online Support  
  FREE-Download Now Buy Now – $12.95 USD

*Based on the position in WordPress.org “highest rated” and “most popular” plugin searches.

Installation and Setup

  1. To install from the Plugins Admin:
    • In the WordPress Admin, go to “Plugins > Add New.”
    • Type “child theme” in the “Search” box and click “Search Plugins.”
    • Locate “Child Theme Configurator” in the list and click “Install Now.”
  2. To install manually:
    • Download the Child Theme Configurator plugin archive.
    • In the WordPress Admin, go to “Plugins > Add New.”
    • Click the “Upload” link at the top of the page.
    • Browse your computer for the Child Theme Configurator zip archive and click “Install.”
  3. In the WordPress Admin, go to “Plugins > Installed Plugins.” Locate “Child Theme Configurator” in the list and click “Activate” (“Network Activate” first for multisite).
  4. Navigate to “Tools > Child Themes” (multisite users go to “Network Admin > Themes > Child Themes”).

10 Easy Steps to Create a Child Theme

Click "Child Themes" under the "Tools" Menu

Open the Child theme Configurator

Parent/Child Tab with existing Child Theme

Steps when using Child Theme Configurator with existing Child Themes

First Time using Parent/Child Tab

Steps when using Child Theme Configurator for the first time

NOTE: Only users with “install_themes” capability will have access to the Child Theme Configurator. In the WordPress admin, select “Tools > Child Themes” for single site WordPress or “Network Admin > Themes > Child Themes” for multisite WordPress.
  1. Select the theme you want to configure from the "Parent Theme" menu.
  2. Select "new" or "existing".
    • If there are currently no child themes available, the "Child Theme" and "Child Theme Names" will be entered for you automatically based on the parent theme selected. You may edit these if you like, but they cannot be the same as an existing theme.
    • If there are existing child themes available, there will be an additional menu labeled "Use Existing Child Theme" from which you can select, or enter a new value in the input box to create a new one.
  3. Enter a Name, Author and Version for the child theme. They each must contain a value, but what you enter is up to you. If using an existing child theme, they will be entered automatically based on the child theme selected.
  4. Use Parent Options (optional) If you want to maintain the same theme options as the parent theme, check “Copy Parent Theme Menus, Widgets and other Options”. Depending on the theme, some options may need to be applied using separate theme option controls. NOTE: This will overwrite any child theme options you may have already set.
  5. Save Backup (optional) If using an existing child theme, you can check “Backup Stylesheet”, to create a backup of the child theme stylesheet in the child theme directory.
  6. Choose how WordPress should handle the parent theme stylesheet (new in version 1.6.0):
    • Select <link> if the parent theme uses the main ‘style.css’ stylesheet and correctly enqueues it for child themes (default).
    • Select @import for older themes that do not enqueue the stylesheet. If the parent styles do not appear when you activate the child theme, you probably need to use this option. NOTE: this was the only method used in previous versions of Child Theme Configurator.
    • Select "None" if the parent theme does not use the main ‘style.css’ for its core styles but enqueues it for child themes. This is a common practice with more recent themes.

    If you do not know which option to use, select <link>.

  7. Restore from backup (optional – new in version 1.6.0): If using an existing child theme, you can choose whether to reload the current child theme stylesheet (leave unchanged), reset all values, or restore it from a backup. If there are backup files available, they will appear as radio button options.
  8. Choose additional stylesheets If your theme uses additional stylesheets, you can open the "Parse Additional Stylesheets" toggle and they will appear as checkbox options. Stylesheets that are being used by the parent theme should be automatically selected for you. Only select additional stylesheets you wish to customize to reduce overhead. NOTE: If the parent theme uses Bootstrap stylesheets, they will not be automatically selected. You can select Bootstrap stylesheets manually if you need to customize them, but in most cases they add unecessary overhead to the configuration data.
  9. Click “Generate/Rebuild Child Theme Files.”
  10. IMPORTANT: Always test your child theme with Live Preview before activating!

Theme Options

Some options are specific to each theme, and some are specific to the parent theme only (meaning the child theme CANNOT override them). You will have to find out from the theme author which are which.

The Child theme creates a fresh new set of theme options, including Nav Menus and other customizations. If your theme supports a Custom header, Background, custom Meta Tags (such as site verification codes) or custom Javascripts (such as Google Analytics or Adwords), these must be applied to the child theme.

Many of these options can be copied over to the child theme by checking “Copy Parent Theme Menus, Widgets and other Options” when you generate the child theme files on the Parent/Child tab. If you want to set different options you can either apply them after you activate the child theme, or by using the “Live Preview” under Appearance > Themes.

CSS Editors for Overriding Parent Styles

There are several ways to identify and override parent styles. The Child Theme Configurator lets you search styles by selector and by rule. If you wish to change a specific selector (e.g., h1), use the “Query/Selector” tab. If you have a specific value you wish to change site-wide (e.g., the color of the type), use the “Rule/Value” tab.

Query/Selector CSS Editor Tab

The Query/Selector CSS Editor tab lets you find specific selectors and edit them. First, select the media query group that contains the selector you wish to edit by typing in the Query autoselect box. Select by clicking with the mouse or by pressing the “Enter” or “Tab” keys. The base media query group is selected by default.

Select a Query from the menu.

Next, find the selector by typing in the Selector autoselect box. Select by clicking with the mouse or by pressing the “Enter” or “Tab” keys.

Choose a Selector

This will load all of the rules for that selector with the Parent values on the left and the Child theme values inputs on the right. Any existing child values will be automatically populated. There is also a Sample preview that displays the combination of Parent and Child overrides. Note that the border and background-image get special treatment.

You can force style overrides (so called “!important” flag) by checking the “!” box next to each input. Please use judiciously.

If you need to rename the selector, click “rename” and an input will appear to edit it. Note: This option is intended for new custom selectors that have no parent theme equivalent. It only renames the child theme version of the selector. If you are editing an override of an existing parent theme selector, the child selector will no longer match and will not correctly override the parent selector.

Selector Options

The “Order” field contains the original sequence of the selector in the parent theme stylesheet. You can change the selector cascade order by entering a lower or higher number in the “Order” field.

Enter a new number to change the cascade order.

Click “Save” to update the child stylesheet and save your changes to the WordPress admin.

Add New Rules

If you wish to add additional rules to a given selector, first load the selector using the Query/Selector tab. Then find the rule you wish to override by typing in the New Rule autoselect box. Select by clicking with the mouse or by pressing the “Enter” or “Tab” keys. This will add a new input row to the selector inputs.

New CSS rules can be added using the Child Theme Configurator New Rule menu.

Raw CSS Editor

If you wish to add completely new selectors, or even new @media queries, you can enter free-form CSS in the “Raw CSS” textarea. Be aware that your syntax must be correct (i.e., balanced curly braces, etc.) for the parser to load the new styles. You will know it is invalid because a red “X” will appear next to the save button.

Enter free-form css code in the Raw CSS box.

If you prefer to use shorthand syntax for rules and values instead of the inputs provided by the Child Theme Configurator, you can enter them here as well. The parser will convert your input into normalized CSS code automatically.

Rule/Value CSS Editor Tab

The Rule/Value CSS Editor tab lets you find specific values for a given rule and then edit that value for individual selectors that use that rule/value combination. First, find the rule you wish to override by typing in the Rule autoselect box. Select by clicking with the mouse or by pressing the “Enter” or “Tab” keys.

Select a Rule from the menu.

This will load all of the unique values that exist for that rule in the parent stylesheet with a Sample preview for that value. If there are values that exist in the child stylesheet that do not exist in the parent stylesheet, they will be displayed as well.

Click Selectors to view all rules that use a specific value.

For each unique value, click the “Selectors” link to view a list of selectors that use that rule/value combination, grouped by query with a Sample preview of the value and inputs for the child value. Any existing child values will be automatically populated.

Edit an individual value for each Selector.

Click “Save” to update the child stylesheet and save your changes to the WordPress admin.

If you want to edit all of the rules instead for the selector you can click the “Edit” link and the selector will automatically load in the Query/Selector Tab.

@import Tab and Using Web Fonts

You can add additional stylesheets and web fonts by typing @import rules into the textarea on the @import tab. Important: do not import the parent theme stylesheet here. Use the "Parent stylesheet handling" option from the Parent/Child tab.

If you selected any stylesheets under “Parse additional stylesheets” when you created your child theme, those styles will be available to create overrides in the Child Theme stylesheet.

WordPress will automatically load the additional stylesheets when it loads the parent theme, so you do not need to add @import rules for them here.

Below is an example that loads a local custom stylesheet as well as the web font “Open Sans” from Google Web Fonts:

Child Theme Configurator @import rule editor

Files Tab

Files Tab

Parent Templates

Copy PHP template files from the parent theme by checking the boxes and clicking “Copy Selected to Child Theme” and the templates will be added to the child theme directory.

CAUTION: If your child theme is active, the child theme version of the file will be used instead of the parent immediately after it is copied.

The functions.php file is generated separately and cannot be copied here.

Child Theme Files

Templates copied from the parent are listed here. These can be edited using the Theme Editor in the Appearance Menu. If you have saved any backups they will appear here as well.

Remove child theme files by checking the boxes and clicking “Delete Selected”.

Child Theme Images

You can upload new images using the image upload form. These images reside under the images directory in your child theme and are meant for stylesheet use only. Use the media gallery for content images.

Remove child theme images by checking the boxes and clicking “Delete Selected”.

Child Theme Screenshot

You can upload a custom screenshot for the child theme here.

The theme screenshot should be a 4:3 ratio (eg., 880px x 660px) JPG, PNG or GIF. It will be renamed screenshot.

Export Child Theme as Zip Archive

You can download your child theme for use on another WordPress site by clicking “Export”.

Preview and Activate

IMPORTANT: Test your child theme before activating! Some themes (particularly commercial themes) do not correctly load parent template files or automatically load child theme stylesheets or php files. In the worst case they will break your website when you activate the child theme.

  1. Navigate to “Appearance > Themes” in the WordPress Admin. You will now see the new Child Theme as one of the installed Themes.
  2. Click “Live Preview” below the new Child Theme to see it in action.
  3. When you are ready to take the Child Theme live, click “Activate.”

MULTISITE USERS: You must Network Enable your child theme before you can use Live Preview. Go to “Themes” in the Network Admin.

File Permissions

As of version 1.5, Child Theme Configurator uses the WordPress Filesystem API to allow changes to sites that require user permission to edit files. For the majority of users on typical Web Hosts, this feature will be completely transparent.

However, because most of the functionality occurs via AJAX (background) requests, systems that require write permissions will need a way to automatically write to these files.

The plugin will automatically detect your configuration and provide a number of options to resolve this requirement. Use the links provided to find out more about the options available.

  1. Temporarily make the stylesheet writable by clicking the “Make Writable” button that changes the file permissions. You should change this back when you are finished editing for security by clicking “Make read-only” under the “Files” tab.
  2. Add your FTP/SSH credentials to the WordPress config file.
  3. With Windows IIS, you can assign WordPress to an application pool that has write permissions (Windows IIS systems).
  4. Set the stylesheet write permissions on the server manually (not recommended).
  5. Run PHP under Apache with suEXEC (contact your web host).

Why Creating and Activating a Child Theme with a Single Click Is A Bad Idea

Activating a child theme without testing it can cause WordPress to break in spectacular fashion, sometimes making it impossible to log into the Admin without changing file names on the web server.

First, you are putting absolute faith that the Parent theme can be used as a child theme with no invalid includes or syntax errors.

Second, if the “stylesheet” directory is referenced for requires or includes, then PHP will throw a fatal error because the file probably does not exist.

Third, if the “template” URI is used to load the main stylesheet, then the child theme stylesheet is never loaded.

For these reasons, among others, we strongly recommend that you test child themes (or any themes, for that matter) with Live Preview before activating them.

WordPress uses several functions to reference theme files so that it can use the Child Theme when necessary or fall back to the Parent Theme for its default functionality.

get_template_directory() and get_template_directory_uri() return the file path and web address of the active theme, respectively, or the Parent (or “template”) theme if a Child Theme is being used.

get_stylesheet_directory() and get_stylesheet_directory_uri() return the file path and web address of the active theme, respectively, or the Child theme if a Child Theme is being used.

As of version 1.6.0, Child Theme Configurator gives you the option to select how to handle loading the parent stylesheet. The preferred method is to “link” the stylesheet before any other theme stylesheets so that it creates a baseline for the other stylesheets to inherit.

However some themes are written in such a way that linking the stylesheet this way will cause the other styles to load in the wrong order. For this reason, you have the option to use the older “@import” method, which forces the browser to load the parent stylesheet immediately before the child theme stylesheet.

This method results in more consistent behavior, but at the expense of load time because the browser has to wait for the parent stylesheet to load before proceeding.

When you are evaluating a commercial theme for your WordPress site, make sure you ask the developer 1) if it supports child themes; and 2) if it passes the WordPress.org Theme Unit tests. If the answer to both of these questions is yes, then the theme will probably work fine with CTC.

A Child Theme is NOT a copy of the Parent theme. Any plugin that simply copies a theme verbatim with a new name is missing the point of Child Themes.

A Child Theme is a specific set of “overrides” that take priority over the Parent theme. In other words, when a child theme is loaded, it has a setting that tells WordPress which theme to use as its Parent. It then loads the Parent and runs like it normally would.

When deciding how to display (or execute) something, WordPress asks the question, “Are there instructions from the Child theme I should follow instead of the Parent Theme?” If the answer is “Yes,” WordPress follows them, if it is “No,” WordPress executes the Parent Theme’s instructions normally.

Creating a Child Theme After You Have Made Changes to an Existing Parent Theme

Things get a lot more complicated when you have already made significant changes to your Parent theme. You will need to move all your modifications into a child theme so that updating the parent does not wipe them out. Read through all of the steps below until you understand the process before starting.

  1. IMPORTANT: Make a backup of your customized parent theme using FTP, SSH or your Web Hosts file manager. You’ll need this if things don’t work out and you need to revert.
  2. Create a child theme from the Parent/Child Tab, but do not activate it yet. Make sure you check the “Copy Parent Theme Menus, Widgets and other Options” box.
  3. Go the the Files tab and select any parent templates you have changed from the list of “Parent Templates” and click “Copy Selected to Child Theme.” WordPress will automatically pull the the templates from the new directory when it is activated (but don’t activate it just yet).
  4. Now the tricky part — moving your modified styles to the child theme. The best way to do this is to download your modified “style.css” file from the parent and run a comparison (DIFF) against the original parent “style.css” file. Copy the differences over to a separate file. You can use Notepad++, TextWrangler or any advanced text editor to find differences between two files.

    If you do not have an advanced text editor, you will have to compare them manually. Open the modified stylesheet and manually copy/paste any selector blocks you have changed to a separate text file. A typical selector block looks like this:

    .header-image {
        margin: 0; 
    } 
    

    If any of the selector blocks are within @media query blocks, make sure you add those as well. A typical @media query block looks like this:

    @media screen and (max-width: 980px) { 
        body { 
            color: #333;
        }
    }
    

  5. Once you have all of your changed selectors in a file, copy the entire thing into the “Raw CSS” textarea box at the bottom of the Query/Selector tab. Click the “Save” button to the left of the textarea box (not the one at the top).
  6. Test the new child theme using the Live Preview. Go to Appearance > Themes and click “Live Preview” on the child themes icon. It should display all of your modifications correctly. If not, repeat step 3-5 until everything is working.
  7. Re-install the parent theme to a fresh, clean version and repeat step 6. If you notice anything wrong, you may need to investigate where you missed copying something. If necessary, revert to the backup parent theme and start over.
  8. Once everything looks good, go to Appearance > Themes and activate your new child theme. You can then make changes to the child theme without touching the parent.

Frequently Asked Questions

Where is it in the Admin?

For most users the Child Theme Configurator can be found under “Tools > Child Themes.”

WordPress Multisite (Network) users go to “Network Admin > Themes > Child Themes.”

NOTE: Only users with “install_themes” capability will have access to the Child Theme Configurator.
FAQs

Does it work with Multisite?

Yes. Go to “Network Admin > Themes > Child Themes.” Child themes must be “Network enabled” to preview and activate for Network sites.
NOTE: Only users with “install_themes” capability will have access to the Child Theme Configurator.
FAQs

HELP! I changed a file and now I am unable to access my website or login to wp-admin to fix it!

To back out of a broken theme you have to manually rename the offending theme directory name (via FTP, SSH or your web host control panel file manager) so that WordPress cannot find it. WordPress will then throw an error and revert back to the default theme (for WP 4.1 this is “Twenty Fifteen”).

The child theme is in your themes folder, usually

[path/to/wordpress]/wp-content/themes/[child-theme]

To prevent this in the future, always test your child themes with Live Preview before activating them.FAQs

…or…

Why is my custom header missing when I activate the new child theme?

…or…

Why does my custom background go back to the default when I activate the new child theme?

…or…

Why do my theme options disappear when I activate the new child theme?

These options are specific to each theme and are saved separately in the database. When you create a new child theme, its options are blank.

Many of these options can be copied over to the child theme by checking “Copy Parent Theme Menus, Widgets and other Options” when you generate the child theme files on the Parent/Child tab.

If you want to set different options you can either apply them after you activate the child theme, or by using the “Live Preview” under Appearance > Themes.

  • Menus: Go to Appearance > Menus and click the “Locations” tab. By default, the primary menu will generate the links automatically from the existing pages. Select your customized Menu from the dropdown and click “Use New Menu.” This will replace the default menu and you will see the correct links.
  • Header: Go to Appearance > Header. Some themes will show the “Title” and “Tagline” from your “General Settings” by default. Click “Choose Image” and find the header from the Media Library or upload a new image. This will replace default with your custom image.
  • Background: Go to Appearance > Background and choose a new background color or image.
  • Options: Every theme handles options in its own way. Most often, they will create a set of options and store them in the WordPress database. Some options are specific to the active theme (or child theme), and some are specific to the parent theme only (meaning the child theme CANNOT override them). You will have to find out from the theme author which are which.

FAQs

How do I move changes I have already made to a Child Theme?

Things get a lot more complicated when you have already made significant changes to your Parent theme. You will need to move all your modifications into a child theme so that updating the parent does not wipe them out. Follow these steps. FAQs

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. FAQs

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 FAQs

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

Some themes (particularly commercial themes) do not correctly load parent template files or automatically load child theme stylesheets or php files.

This is unfortunate, because in the best case they effectively prohibit the webmaster from adding any customizations (other than those made through the admin theme options) that will survive past an upgrade. In the worst case they will break your website when you activate the child theme.

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. FAQs

Why doesn’t the Parent Theme have any styles when I “View Parent CSS”?

Your Parent theme is probably using a separate location for the stylesheets. Select individual stylesheets from the “Parse Additional Stylesheets” section of the Parent/Child tab and click “Generate Child Theme Files” again. FAQs

Will this slow down my site?

Web site performance depends on a number of factors unrelated to the use of a single plugin. That said, Child theme Configurator is designed to add the minimum amount of additional overhead possible. For example:

  1. Child Theme Configurator is a “code generator.” This means it creates or updates files that are read by the system. On the front-end, there are no database calls so WordPress can run independent of the plugin. In fact, you can remove Child Theme Configurator when you are finished setting up your theme.
  2. The code that drives the admin interface only loads when the tool is being used from the WordPress Admin, including Javascript and CSS. This means that it will not get in the way of other admin pages.
  3. The biggest performance hit occurs when you generate the Child Theme files from the Parent/Child tab, but this is a one-time event and only occurs from the WordPress Admin.
  4. Customizations are applied to a stylesheet file and are cached by the browser. Because this stylesheet contains mostly “overrides” to existing styles, it is typically small in comparison to other stylesheets.

FAQs

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. FAQs

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.) FAQs

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. FAQs

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. FAQs

Where are the .php files?

The configurator automatically adds a blank functions.php file to the child theme directory. You can copy parent theme template files using the Files tab. If you want to create new templates and directories you will have to create/upload them manually via FTP or SSH. Remember that a child theme will automatically inherit the parent theme’s templates unless they also exist in the child theme directory. Only copy templates that you intend to customize.FAQs

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. FAQs

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. FAQs

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. FAQs

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. FAQs

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. FAQs

How do I make my Theme responsive?

The short answer is to use a responsive Parent Theme. Some common methods for 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.

We’ve put together a video tutorial that shows how to use Child Theme Configurator to make a fixed-width theme responsive. View Video

FAQs

Caveats

  1. IMPORTANT: Test your child theme before activating! Some themes (particularly commercial themes) do not correctly load parent template files or automatically load child theme stylesheets or php files. In the worst case they will break your website when you activate the child theme.
  2. No legacy webkit-gradient. The Child Theme Configurator plugin does not support the legacy webkit gradient. If there is a demand, we will add it in a future release, but most Chrome and Safari users should have upgraded by now.
  3. Only two-color gradients. The Child Theme Configurator plugin is powerful, but we have simplified the gradient interface. You can use any gradient you want as long as it has two colors and no intermediate stops.
  4. No @font-face rules. The Child Theme Configurator plugin only supports @media and @import. If you need other @rules, put them in a separate stylesheet and import them into the Child Theme stylesheet.
  5. Not all CSS rules are supported. The Child Theme Configurator plugin works with the vast majority of CSS rules, however we’ve left out some of the more obscure options.
  6. Multiple versions of the same rule in a single selector are not supported, with a few exceptions. The Child Theme Configurator plugin will automatically generate vendor-prefix variations for background-image, border-radius, transform, transition, and others.
  7. The Child Theme Configurator plugin loads the rules that exist in the Parent stylesheet. You can always add new rules using the “Raw CSS” text area.

Glossary

  • Parent Theme The WordPress Theme you wish to edit. WordPress first loads the Child Theme, then loads the Parent Theme. If a style exists in the Child Theme, it overrides the Parent Theme.
  • Child Theme New Theme based on Parent Theme. You can create any number of Child Themes from a single Parent Theme.
  • Class A term used to organize objects. For example, a <div> might be assigned the “blue-text” class. The stylesheet might then assign the “color: blue;” rule to members of the “blue-text” class. Thus, the <div> would display text as blue in the browser.
  • Selector One or more html elements, classes, ids or other terms used to identify groups of objects.
  • Rule One of many standardized attributes used to tell the browser how to display objects matching a given selector. Examples are color, background-image and font-size.
  • At-rule CSS browser instruction to extend default functionality. The Child Theme Configurator supports two At-rules:
    • @import Instructs the browser to load additional CSS information from an external source.
    • @media (Media Query) Identifies blocks of styles that are used only when certain browser characteristics are true. Examples are max-width, screen and print.
  • Override When a selector exists in both the Child Theme and the Parent Theme, the Child Theme takes priority over the Parent theme. This is where the Child Theme Configurator stands out: it helps you create exact overrides of selectors from the Parent Theme, eliminating hours of trial and error.
  • Important Flag CSS allows you to mark rules as “important,” meaning that the rule will take priority over any other selectors with the same rule on the page, even higher priority rules. There may be times when this is necessary for a specific purpose, however most of the time the same result can be achieved by carefully naming selectors and adjusting their cascade order to modify inherited style rules. Often using the important flag can create more problems than it solves by changing the behavior of higher priority rules.

Responsive Design for a Mobile World.

We specialize in Responsive Design, Web Applications and Web Service APIs using WordPress, jQuery and PHP.

With nearly two decades helping businesses with services ranging from page rank to payment processing, our experience can help you navigate the changing web landscape.

Responsive Design

Responsive Design

Modernize your existing site with an up-to-date fluid user interface. Streamline content for search and use on multiple devices. Convert more customers by focusing your message and making your site easy to use.

WordPress Customized

Custom WordPress Themes

Take advantage of all the features WordPress has to offer by converting your website to a completely unique WordPress theme. Migrate your existing site or create a new one.

Web Portals

Web Portals

Connect your website to the vast array of content providers and web services. Use your website as a business tool for process and communication. Add Project Management, Payment Processing, Social Media, Email and SMS messaging and many others.

Find Out More

Customize WordPress Themes Fast with Child Theme Configurator PRO

Thousands of users have already seen the benefits of customizing WordPress themes with Child Theme Configurator. If you spend any amount of time editing CSS or building custom WordPress themes, Child Theme Configurator PRO will help maximize your productivity and can save hours of development time. CTC is one of the top 1% most popular and top 2% highest rated plugins on WordPress.org. Read More

Getting Started

With the PageCells Responsive Framework you have the ability to completely customize your WordPress site. It allows you to set the position, width and behavior of every element on the page: header, content, sidebars, menus, widgets, footer and each individual part of The Loop. For now, however, we'll just cover the basics to get you started. Header You can upload your header image by going to Appearance > Header. PageCells automatically positions this image at the top left at one-third of the page width. It also displays the Site Title and Tagline at the top right at two-thirds the page ... Read More

Customize WordPress Themes Fast with Child Theme Configurator CSS Editor

Child Theme Configurator is a fast and easy to use CSS editor that allows you to create Child Themes and customize them beyond the options of the theme Customizer. It helps you easily identify and override the exact CSS attributes you want to change and gives you unlimited control over your WordPress look and feel while leaving your Parent Theme untouched. Read More

Responsive Menu for WordPress: Control the Mobile User Experience

Buy Now $14.99The IntelliWidget Responsive Menu lets you break free from your theme's built-in responsive menu options and gives you complete control over the mobile user experience. Read More

Get More Content Driven Navigation Power with IntelliWidget PRO

IntelliWidget PRO applies the power of IntelliWidget to WordPress pages such as blog pages, date archives, categories, tags, search results, 404 pages and many more that cannot be customized with the basic version. Read More