Now with time and memory benchmarks!', 'child-theme-configurator' ); ?>
There are two ways to identify and override baseline (parent) styles. The Child Theme Configurator lets you search styles by selector and by property. 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 "Property/Value" tab.
The Query/Selector tab lets you find specific selectors and edit them. First, find the query 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. Selectors are in the base query by default.
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.
This will load all of the properties for that selector with the Original values on the left and the New values inputs on the right. Any existing new 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.
If you wish to add additional properties to an existing selector, first load the selector using the Query/Selector tab. Then find the property you wish to override by typing in the New Property 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.
The "Order" field contains the original sequence of the selector in the parent theme stylesheet. You can change the selector order sequence by entering a lower or higher number in the "Order" field. You can also force style overrides (so called "!important" flag) by checking the "!" box next to each input. Please use judiciously.
Click "Save" to update the child stylesheet and save your changes to the WordPress admin.
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.
If you prefer to use shorthand syntax for properties 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.
If you wish to add additional properties to an existing selector, first load the selector using the Query/Selector tab. Then find the property you wish to override by typing in the New Property 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.
There are two ways to identify and override baseline (parent) styles. The Child Theme Configurator lets you search styles by selector and by property. 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 "Property/Value" tab.
The Property/Value tab lets you find specific values for a given property and then edit that value for individual selectors that use that property/value combination. First, find the property you wish to override by typing in the Property autoselect box. Select by clicking with the mouse or by pressing the "Enter" or "Tab" keys.
This will load all of the unique values that exist for that property 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.
For each unique value, click the "Selectors" link to view a list of selectors that use that property/value combination, grouped by query with a Sample preview of the value and inputs for the new value. Any existing new values will be automatically populated.
Click "Save" to update the child stylesheet and save your changes to the WordPress admin.
You can link additional stylesheets and web fonts by typing @import rules into the textarea on the Web Fonts tab.
Note: Child Theme Configurator no longer writes @import rules to the stylesheet. Instead, it uses the @import keyword to identify and enqueue them in the script queue. WordPress then converts them to <link> tags in the rendered HTML.
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 (you would have to add the "fonts" directory and stylesheet) as well as the web font "Open Sans" from Google Web Fonts:
@import url(fonts/stylesheet.css); @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic);
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.
Templates copied from the parent and any stylesheet backups are listed here. Templates can be edited using the Theme Editor in the Appearance Menu.
Remove child theme files by checking the boxes and clicking "Delete Selected".
Theme images reside under the images directory in your child theme and are meant for stylesheet use only. Use the media gallery for content images.
You can upload new images using the image upload form. Remove child theme images by checking the boxes and clicking "Delete Selected".
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.
You can download your child theme for use on another WordPress site by clicking "Export".
IMPORTANT: Preview 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 cases they will break your website when you activate the child theme.
MULTISITE USERS: You must Network Enable your child theme before you can use Live Preview. Go to 'Themes' in the Network Admin.
WordPress was designed to work on a number of server configurations. Child Theme Configurator uses the WordPress Filesystem API to allow changes to sites that require user permission to edit files.
However, because most of the functionality occurs via AJAX (background) requests, the child theme stylesheet must be writable by the web server.
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, including:
This is a misconfiguration created by the Bluehost auto-installer. How to fix.
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 can't find it. WordPress will then throw an error and revert back to the default theme (currently twenty-fourteen).
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.
Arbitrary comments are not supported. Providing a high level of flexibility for previewing and modifying styles requires sophisticated parsing and data structures. Maintaining comments that bound to any particular element in the stylesheet is prohibitively expensive compared to the value it would add. Although we are working to include this as an option in the future, currently all comments are stripped from the child theme stylesheet code.
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.
The easiest method is to paste the @import code provided by Google, Font Squirrel or any other Web Font site into the Web Fonts tab. The fonts will then be available to use as a value of the font-family property. 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 Web Fonts tab.
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
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.
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.
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.
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.)
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.
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.
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.
You can override a specific value globally using the Property/Value tab. See Property/Value, above.
You can add queries and selectors using the "Raw CSS" textarea on the Query/Selector tab. See Query/Selector, above.
You shouldn't really "remove" a style from the Parent. You can, however, set the property to "inherit," "none," or zero (depending on the property). This will negate the Original value. Some experimentation may be necessary.
Delete the value from the input for the property you wish to remove. The Child Theme Configurator only adds overrides for properties that contain values.
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. You can set properties as important by checking the "!" box next to each input. Please use judiciously.
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.
The short answer is to use a responsive Parent Theme. Some common methods for responsive design are:
If you would like to support the production of useful tutorials and continued improvement of our software, please consider making a donation.
Designed by WordPress developers who use it every day, CTC Pro adds plugin stylesheets and other features to make design work quicker and easier. This is a free upgrade for users that purchased the Plugins Extension. Learn more