Defining a Custom Post Type with a Plug-In

Creating a custom post type with code really isn’t that bad. As long as you have
the right code in hand, it’s a simple case of copy, paste, and edit. However, even
WordPress gurus get tired of writing code—and exasperated by the way minor typos
can cause big-time headaches.
The problem gets worse if you get more ambitious and decide to add custom taxonomies
to your site. custom taxonomies let
you attach extra bits of information to your custom post types. For example, Distinct
Furnishings might use custom taxonomies to add color, style, and price information
to its products. The problem is that every custom taxonomy needs to be registered
in code, much like every post type, and that adds up to a tedious afternoon.

For all these reasons, most WordPress developers use some sort of plug-in to create
custom post types. Two of the best and most popular are Custom Post Type
UI
(http://tinyurl.com/cust-pt-ui) and Types (http://wordpress.org/plugins/types).
Both work the same way: They add tools to the dashboard that let you define new
posts types and new taxonomies, no coding required.
For example, if you install and activate the Custom Post Type UI, you can follow
these steps to create a custom post type:

1. Choose CPT UI→Add New in the dashboard menu.
This brings you to a management page where you can create a new custom post
type (using the boxes on the left) or a new taxonomy (on the right).

2. Fill in three key details: the name of your custom type, the plural and singular
labels, and an optional description (Figure 14-6).

3. Click Advanced Options.
You’ll see a whack of extra settings (all of which are explained, somewhat tersely,
in the function reference at http://tinyurl.com/reg-cpt).

4. In the Supports section, select the features you want with your custom
post type.
To duplicate the code-only example you saw earlier, you need to tick the Title,
Editor, Featured Image, and Excerpt checkboxes.

5. In the Built-in Taxonomies section, add a checkmark next to Categories if
you want your custom post type to use categories.
You can also switch on the Tags checkbox to use tags with your custom post type.

6. Click Create Custom Post Type.

The Custom Post Type UI plug-in creates the code that builds your custom post
type. You’ll see it in the dashboard menu, exactly as if you added the necessary
code to the functions.php file.

To modify your new custom post type, you need to use the plug-in. Choose
CPT UI→Manage Post Types to see all the post types you created, and to edit
or delete any of them.

Advertisements
Defining a Custom Post Type with a Plug-In

How to Use Child Theme Configurator

How to Use Child Theme Configurator

FAQs

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 can also go to “Network Admin > Themes > Child Themes”).

FAQs

How to Create a Child Theme

Open the Child theme Configurator

Open the Child theme Configurator

First Time using Parent/Child Tab

First Time using Parent/Child Tab

Additional Child Theme Properties

Additional Child Theme Properties

Parent/Child Tab with existing Child Theme

Parent/Child Tab with existing Child Theme

NOTE: Only users with “install_themes” capability will have access to the Child Theme Configurator. In the WordPress admin, select “Tools > Child Themes.” Multisite users can also go to “Network Admin > Themes > Child Themes.”

  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 Theme Name, Theme Website, Author, Author Website, Description, Tags and Version (optional)

    for the child theme. If using an existing child theme, they will be entered automatically based on the child theme selected.

  4. Choose how WordPress should handle the parent theme stylesheet.

    For most themes, just leave the default “Enqueue parent theme.” If your child theme is not applying styles correctly, see Determining Which Stylesheet Handling Option to Use.

  5. Copy 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.

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

  7. Restore from backup (optional):

    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 WordPress 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” to create your child theme.

    Please Note: This plugin makes significant modifications to your child theme, to include changing CSS, removing comments and adding php functions. If you are using an existing Child Theme please consider using the Duplicate Child Theme option before proceeding.

  10. IMPORTANT: Always test your child theme with Live Preview before activating!

FAQs

Determining Which Stylesheet Handling Option to Use

Unstyled Child Theme

Example of an unstyled child theme

For most current themes, using the default “Enqueue parent stylesheet” option works fine.

However, some themes were not written to apply child theme styles correctly. Often this will not be apparent until the theme is used as a child theme.

Child Theme Configurator provides workarounds for many scenarios by controlling the way it handles stylesheets when loading the page. A simple test can determine how the stylesheets load and which option is best for your theme.

Note: The stylesheet handling option cannot fix every issue. Some themes simply cannot be used as child themes without modifying the header.php template. SeeHow Child Themes Work and When They Don’t for more information.

Tutorial: Stylesheet Handling

Determining Which Stylesheet Handling Option to UseThis video tutorial shows how to determine the appropriate stylesheet handling option to use and troubleshoot common theme stylesheet issues View Video

Stylesheet Handling Chart

To test, set “Stylesheet handling” to “None,” click “Generate/Rebuild Child Theme Files,” then view child theme in a browser. Note the appearance and then view the page source. More details are listed below.

“Styles may not be applied correctly” warning?
Theme Appearance
Position of Child Stylesheet
Option to Use

No
Looks like parent
After other stylesheets
None

Yes or No
Looks like parent
Not Present
Enqueue Child Stylesheet

No
Unstyled
After other stylesheets
Enqueue Parent Stylesheet (default)

Yes
Unstyled
Anywhere
Enqueue both Parent and Child Stylesheets*

*Child Theme Configurator usually displays a warning next to the “Stylesheet handling” option. Use the “Enqueue both child and parent stylesheets” option. If the child theme continues to apply styles incorrectly, you may need to copy the header.php template using the Files tab and manually edit the stylesheet links.

Inspecting the page source to determine how the theme handles stylesheets:
  1. Go to the Parent/Child tab and open the “Stylesheet handling” options panel.
  2. Select “None” and click “Generate/Rebuild Child Theme Files.” This will allow you to see how the theme functions as a child theme without any modifications.
  3. When the page has refreshed, open the Child Theme menu. Click the “Live Preview” link for the child theme you are using. You can also go to Appearance > Themes and do the same thing.
  4. If your child theme looks like the “unstyled theme” image above, this means theparent stylesheet is not being loaded. This is perfectly normal.
  5. If the child theme is completely styled and looks like the parent theme, this indicates the theme is loading the parent styles even when used as a child theme.Make a mental note and continue to the next steps.
  6. Example of Child Theme page source

    Example of Child Theme page source showing active theme stylesheet appearing before other stylesheets.

    Right click inside a blank area the preview. Select This Frame > View Frame Source. A panel should open that looks like the image on the right.

  7. Verify that the active (child) theme stylesheet is being loaded. Using the browser’s find feature, type the child theme directory name followed by “style.css.” In other words, if your child theme is “Twenty Fifteen Child,” type “twentyfifteen-child/style.css” and press return.
  8. If a “styles may not be applied correctly” warning appears on the Parent/Child tab then this theme is either using a hard-coded stylesheet link or it is enqueuing it in the wrong order. This usually indicates you should use “Enqueue both Parent and Child Stylesheets” as the handling option, but may indicate other issues with the theme.
  9. If the child theme is completely styled and looks like the parent theme, but the child theme stylesheet cannot be found, then this theme is not loading the active theme’s stylesheet. either because it is using the wrong path (get_template_directory_uri()), or the author did not anticipate the use of child themes. This usually indicates you should use “Enqueue Child Stylesheet” as the handling option.
  10. Ideal stylesheet handling

    Page source showing parent and child stylesheets loading in correct order. Note that in this example, the parent style.css is not loaded but the all the necessary stylesheets are loaded by the parent theme. (Responsive Theme by Cyberchimps)

    If the page looks normal (like the parent theme) and the child stylesheet appears after any other stylesheets, then you can continue to use“None” as the handling option. This means the theme is using the best possible method for handling stylesheets and your work here is done.

  11. Typical stylesheet handling

    Page source showing typical stylesheet handling with the active stylesheet loading after the other stylesheets.

    If the page appears unstyled like the example above, and the child stylesheet is present and it appears after the other stylesheets, then the theme is using the standard method for handling stylesheets. You can use the default, “Enqueue parent stylesheet,” as the handling option.

  12. Once you determine the appropriate stylesheet handling option to use, go to the Parent/Child tab, select the new option, and click “Generate/Rebuild Child Theme Files.”

Premium and Custom Built Child Themes

Working with an existing child theme presents a number of potential challenges.

First, if the child theme was purchased from a theme vendor that subsequently publishes updates, there is no way to protect it from being overwritten when the update is installed. This effectively defeats one of the main reasons to use a child theme in the first place.

Second, modifications will be applied directly to the original child theme stylesheet, creating the risk of permanently changing the author’s design.

Both of these scenarios can be managed by creating a duplicate of the existing child theme and using Child Theme Configurator to apply changes to the new version.

Duplicating Existing Child Themes

duplicate-themeChild Theme Configurator gives you the option to duplicate an existing child theme when you “Generate/Rebuild Child Theme Files” from the Parent/Child Tab. It is only visible when you open the “Additional Fields” toggle next to the “Child Theme” option.

To duplicate the child theme, check the box and enter a “slug” for the new version. Child Theme Configurator will copy all child theme files and apply any settings you enter to new version.

Any theme updates will be applied to the original version so you may need to manually synch the two themes from time to time.

Genesis Framework Child Themes

Child Theme Configurator Pro provides specialized options for working with Genesis.


Copy Theme Options – Don’t Lose Your Hard Work!

If you have already set up widgets, menus and other custom settings, Child Theme Configurator lets you copy them to the new child theme. This is a feature that sets it apart from other child theme plugins.

Simply check “Copy Parent Theme Menus, Widgets and other Customizer Options” when you create 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.

Normally, when you create child themes, WordPress generates fresh new set of theme options, including Nav Menus and other customizations like Custom header, Background and font colors, and you would have to set them up all over again.

Be aware that 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. See Working With Multisite WordPress for additional details about network site options.


FAQs

How to Use the CSS Editors to Customize Styles

There are several ways to identify and override 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.


Select a Query from the menu.

Select a Query from the menu.

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

Choose a Selector from the menu.

Choose a Selector 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.

This will load all of the properties 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.

Selector Inputs

Selector Inputs

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.

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.

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


New CSS properties can be added using the Child Theme Configurator New Property menu.

New CSS properties can be added using the Child Theme Configurator New Property menu.

Add New Properties

If you wish to add additional properties to a given 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. Properties are written to the stylesheet in alphabetial order.

Add Fallback Values

Child Theme Configurator allows you to save multiple values for the same property. This enables “fallback” behavior for older browsers. Use the “New Property” menu to select an existing property and a new input row will be added to the page. Multiple property values are written to the stylesheet in the order they are added to the selector. To reorder, swap the values.


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

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

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.

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.


Select a Property from the menu.

Select a Property from the menu.

Property/Value CSS Editor Tab

The Property/Value CSS Editor 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 theProperty autoselect box. Select by clicking with the mouse or by pressing the “Enter” or “Tab” keys.


Click Selectors to view all selectors that use the corresponding property/value.

Click Selectors to view all selectors that use the corresponding property/value.

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 child value. Any existing child values will be automatically populated.


Edit an individual value for each Selector.

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 properties for the selector you can click the “Edit Selector” link and the selector will automatically load in the Query/Selector Tab.


Spectrum Color Picker

Spectrum Color Picker

Spectrum Color Picker

Child Theme Configurator now uses Spectrum for color inputs. In addition to showing a preview swatch, Spectrum allows you to use red-green-blue-alpha ( RGBA ) colors with transparency. Drag the bar below the color selector to adjust the transparency. Spectrum also supports named colors as well as hue-saturation-luminosity ( HSL and HSLA ) syntax. The new color syntax is applied to the style automatically.


FAQs

Using Web Fonts

Web fonts example

Web fonts example

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.

Example:

@import url(http://fonts.googleapis.com/css?family=Oswald);

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.

The example shown loads a local custom stylesheet as well as font stylesheets from Google Web Fonts.


FAQs

Files Tab

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 WordPress 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”.


FAQs

Preview and Activate

IMPORTANT: Test your child theme before activating! Some WordPress themes (particularly commercial WordPress 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: Themes must be Network Enabled before you can use Live Preview with a specific Site. Go to “Themes” in the Network Admin to verify your child theme is Network Enabled.


Working With Multisite WordPress

Using Child Theme Configurator with Network Sites (Multisite WordPress) adds a level of complexity to the process because you can set up child themes from either the Network Admin or from individual sites.

WordPress Themes are shared globally by all network sites; however, each individual site has its own database tables, including customizer options, or “theme mods.” In addition, only themes that are “network enabled” are visible to the individual sites. When you create a new child theme, Child Theme Configurator automatically enables the child theme for all sites on the network so that it is visible under the Appearance > Themes admin page.

There is a difference between customizing themes (using Child Theme Configurator) and changing customizer options, or “theme mods.” Because all sites share the same network-enabled themes, any modifications you make to the child theme are applied to all the sites at the same time, whether or not you are using the Network Admin or an individual site admin.

However, when you use the customizer, widgets or menus admins, you are applying changes to a specific theme for a specific site. These changes are not applied to other sites, even if they are using the same theme.

If you check the box, “Copy Parent Theme Menus, Widgets and other Customizer Options” when creating or rebuilding a child theme, Child Theme Configurator copies only the customizer options, widgets and menus that exist in the parent theme for the current site being administered.

This can be even more confusing when using Child Theme Configurator from the Network Admin, because the “current site” is the primary site, or the site that existed before enabling Multisite WordPress.

In order for the parent theme’s options to be copied, the parent theme must be visible to the current site, and must already have options set that can be copied.Otherwise, the child theme will be created with the default options.


FAQs

Never Create A Child Theme and Activate It At The Same Time

Creating and activating a child theme with a “single click” feature or plugin can break WordPress in spectacular fashion and even disable the WordPress Admin. Learn how to fix a broken theme caused by editing a php file or using a “single click” child theme plugin.

If you do not test a child theme before activating it, you expose your website to the following risks:

  1. If a WordPress theme is not written to be used as a child theme, uses invalid include paths or contains syntax errors, WordPress will throw a fatal error (crash).
  2. If the “stylesheet” directory is used for include paths, then PHP will throw a fatal error because the file probably does not exist.
  3. If the active theme crashes, users will not be able to view your site and you will be unable to get back into the admin.

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.


FAQs

How to Create Child Themes 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.

FAQs

WordPress Script Queue and Script Dependencies

WordPress has a system to make sure that scripts are loaded in the correct order and that plugins are all using the same version of common libraries. This allows plugins to utilize the vast array of software available without interfering with the execution of other plugins.

In order for this system to work correctly, all plugins have to play by the same rules or conflicts will occur that can cause the plugin, and even WordPress itself, to malfunction. In many cases these bugs are very hard to find, resulting in hours of lost time by WordPress plugin and theme authors trying to help their users.

If Child Theme Configurator detects a conflict that prevents it from executing, it will display an error message that identifies the scripts so you can deactivate the offending plugin and replace it with one that uses script dependencies correctly.


Why plugins should not use their own jQuery and jQuery UI libraries

The main reason is it will break WordPress, particularly the admin. It is not a question of performance.

In his post, Don’t Dequeue WordPress jQuery, Eric Mann (StackExchange moderator) explains many of the arguments for and against replacing the WordPress local versions. Pippin Williamson (EasyDigitalDownloads founder) provides reasons why using your own jQuery is irresponsible Sarah Gooding (WPMUDEV.org) calls it a “deadly sin.”

The bottom line is that WordPress guidelines advise against it, period.

Many WordPress core features and plugins depend on the local versions that ship with WordPress to function. These are registered as “script dependencies” when the features are loaded. When a page is delivered to the browser, WordPress puts all of these dependencies in order and loads the libraries at once (load-scripts.php), before any other scripts in the queue. Any plugin that has registered a dependency will then have access to the library and will execute as expected.

When a plugin enqueues its own version of these libraries, including “content delivery network” (CDN) versions, it destroys the version that was loaded by WordPress and any objects that were created using the core version. It is essentially saying “I am more important than any other plugin and I don’t care what breaks.”

Plugins can “deregister” scripts and then “register” their own versions, but they must first ensure the entire dependency chain is unaffected and also ensure that the version they are loading is compatible with the other libraries in the WordPress core. It is a much better practice to build the plugin around the most current WordPress version and only enqueue libraries that are not available in the WordPress core. Read more about how to enqueue scripts correctly.


FAQs

Memory Considerations

Although it usually takes just a few seconds, parsing stylesheets so that they can be queried and modified using Child Theme Configurator is a memory-intensive process. Some web hosting packages do not allocate enough RAM to PHP for CTC to parse a large number of styles. We generally recommend at least 64MB for WordPress to run smoothly, however many budget hosts limit PHP to 32MB for shared accounts.

Child Theme Configurator estimates the number of styles it can process based on the available memory allocated and will stop parsing when it reaches this limit. If you are getting a notice that some stylesheets could not be parsed try deselecting them under “Parse Additional Stylesheets.”

Only select additional stylesheets that you intend to customize. Many WordPress themes include stylesheets for the admin that are never used for the public-facing site. In addition, Bootstrap stylesheets add a large number of styles (with very long selectors) that add unnecessary overhead to the configuration data.

Most of the time you can customize your WordPress theme by parsing one or two main stylesheets. Some experimentation may be required.


FAQs

File Permissions

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

FAQs

Caveats
  1. IMPORTANT: Test your child theme before activating! Some WordPress themes (particularly commercial WordPress 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. 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.
  3. Legacy gradient syntax is not supported. The Child Theme Configurator plugin does not support the MS filter gradient or legacy webkit gradient. These will continue to work if they are used in the parent theme, but will not be written to the child theme stylesheet. If there is a demand, we may add it in a future release, but most users should have upgraded by now.
  4. 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.
  5. 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.
  6. Not all CSS properties are customizable. The Child Theme Configurator plugin works with the vast majority of vendor-specific properties, however we’ve left out some of the more obscure options. As with legacy gradients, they will work, but will not be automatically enhanced by the Configurator.
  7. CSS properties are auto-discovered. The Child Theme Configurator plugin loads the properties that exist in the Parent stylesheet. You can always add new properties using the “Raw CSS” text area.

FAQs

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

  • Property

    One of many standardized terms 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 property 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 styles. Often using the important flag can create more problems than it solves by changing the behavior of higher priority rules.

How to Use Child Theme Configurator

WordPress Site Statistics

Once you have some solid promotion tactics in place, you need to evaluate how well
they perform. There’s no point in pursuing a failed strategy for months, when you
should be investing more effort in a technique that actually works. The best way
to assess your site’s performance, and see how it changes over time, is to collect
website statistics.
There are a number of popular statistics packages that work with WordPress, and
a range of plug-ins that automatically add tracking code to your site. In this section,
you’ll focus on WordPress’s own statistics-collection service, which it offers
to all WordPress.com sites and which is available to self-hosted sites through the
Jetpack plug-in.

Viewing Your Statistics

The best place to view your site statistics is on the WordPress.com home page. Go
to http://wordpress.com, log in, and click the Stats tab. If you have more than one
site, you need to pick from the drop-down list in the top-right corner (Figure 12-22).

NOTE Jetpack users can see the same statistics by choosing Jetpack→Site Stats in the dashboard. However,
WordPress encourages everyone to view statistics on the WordPress.com home page, and it may remove the
statistics link from the dashboard in the future.

The obvious question is now that you have all this raw data, what can you do with
it? Ideally, you’ll use site statistics to focus on your strengths, improve your site, and
keep your visitors happy. You should resist the temptation to use it as a source of
endlessly fascinating trivia. If you spend the afternoon counting how many visitors
hit your site from Bulgaria, you’re wasting time that could be better spent writing
brilliant content.

WordPress Site Statistics

Boosting SEO with a Plug-In

If you run a self-hosted site, you can make it even more attractive to Google and
other search engines by using an SEO plug-in. But be warned, most SEO plug-ins
are an extreme case of overkill for the casual WordPress site-builder. Prepare to be
swamped by pages of options and search settings.
If you search WordPress’s plug-in repository for “SEO,” you discover quite a few
popular plug-ins. One of the best is WordPress SEO by Yoast (http://tinyurl.com/
seo-yoast). Its creator is WordPress über-guru Joost de Valk, who also blogs some
useful (but somewhat technical) SEO articles at http://yoast.com/cat/seo.
Once you install and activate WordPress SEO, you see a new SEO menu in your
dashboard, packed with a dizzying array of options. You can ignore most of them,
unless you want to change the way the plug-in works. The following sections explain
two useful features you can tap into right away.

CREATING AN XML SITEMAP

After installing the SEO plug-in, your site gets one immediate benefit: an XML
sitemap. This is a document that tells Google where your content resides on your
site. It ensures that all your posts get indexed, even if your home page doesn’t link
to them. Although you don’t need to give your XML sitemap another thought, you
can take a look at it by choosing SEO→XML Sitemaps and then clicking the XML
Sitemap button. Needless to say, WordPress SEO updates your sitemap every time
you publish a new post or page.

NOTE
The XML sitemap feature works only if you use descriptive permalinks that include post names (as
explained on page 116). If you use the stock ID-based permalinks, the plug-in won’t create an XML sitemap.

TWEAKING TITLES AND DESCRIPTIONS

The WordPress SEO plug-in also gives you control over two important details: the
title and description (known to web nerds as the meta description) of each post or
page. These details are useful—even to SEO newbies—because Google displays them
when it lists a page from your site in its search results. Figure 12-19 shows an example.

The title and description are also important because Google gives more weight to
keywords in those places than keywords in your content. In other words, if someone
searches for “dog breeding” and you have those words in your title, you can beat
an equally ranked page that doesn’t.
Ordinarily, the WordPress SEO plug-in creates a good title for a post, based on a
title-generating formula in the SEO→Titles & Metas section. This formula puts your
post name first, followed by your site name, like this for the “crystal jasmine” post:
Crystal Jasmine Named Tea of the Year – Magic Tea House
However, you can customize the title before you publish the post using the Word-
Press SEO by Yoast box, which appears on the Add New Post page (Figure 12-20).
For example, it’s a good idea to shorten overly long post titles, and to replace cutesy
titles with ones that clearly describe your content. You can also use the WordPress
SEO box to type in a meta description.

The WordPress SEO by Yoast box also lets you run a pretend Google search so you
can see how your newly chosen title and description work. To do that, type the search
keyword you want to test in the Focus Keyword box. Figure 12-21 shows an example.
TIP For even more ways to optimize your site for search engines using the WordPress SEO by Yoast plug-in,
check out the detailed tutorial at http://tinyurl.com/seo-yoast2.

Boosting SEO with a Plug-In

Keeping Readers in the Loop

The best sites are sticky—they don’t just attract new visitors; they encourage repeat
visits.
To make a site sticky, you need to build a relationship between your site and your
readers. You want to make sure that even when your readers leave, they can’t forget
about your site, because they’re still linked to its ongoing conversation. One way to
do that is to notify readers about posts that might interest them. Another strategy
is to tell readers when someone replies to one of their comments. Both techniques
use email messages to lure visitors back to your site.
If your site is on WordPress.com or you installed Jetpack on a self-hosted site, you
automatically get a convenient opt-in system for email notifications. It starts with
two checkboxes that appear in the “Leave a Reply” section.

You can hide the post notification and comment options. Go to Settings→Discussion
and then uncheck “Show a ‘follow comments’ option in the comment form” and
“Show a ‘follow blog’ option in the comment form.” But there’s really no reason to do
that, unless you use a plug-in that adds similar options somewhere else on your site.

Taking Care of Your Peeps
Even on sites with thousands of comments, most readers keep
quiet. Whether that’s due to laziness, indifference, or the fear
of being ignored, the average reader won’t leave a comment.
So when someone does speak up, you need to do your best to
keep him in the discussion.
One way to do that is with the comment-tracking option you
just read about (see Figure 12-8). You can also reward commenters
and stoke the conversation several more ways:
• Comment on your commenter’s sites. You already know
that, every once in a while, you need to step into a
discussion with your own comment. Visitors like to see you
involved because it shows you read their opinions just as
they read yours. However, if you see a particularly good
comment, you can take this interaction a little further.
Follow the commenter’s website link. If the commenter
has a blog, stick around, read a bit, and add a comment
to one of his posts. Comments are a two-way street, and
the more you participate with others, the more likely it
is that a reader will keep coming back.
• Thank commenters. Not every time—maybe just once. If
you notice a new commenter with some useful feedback,
add a follow-up comment that thanks her for her input. If
you want to get fancier, you can use a plug-in like Thank
Me Later (http://tinyurl.com/wp-thank) to send an email
message to first-time commenters, telling them you
appreciate the feedback. (But be warned, you need to
tweak this plug-in carefully to make sure you don’t send
out too many emails and annoy both your commenters
and your web hosting company.)
• Ask for comments. Sometimes, non-commenters just
need a little push. To encourage them to step up, end your
post with a leading question, like “What do you think?
Was this decision fair?” or an invitation, like “Let us know
your best dating disaster story.”

Signing Up Subscribers

Although it makes sense to put the comment notification checkbox in the comments
area of your posts, that spot isn’t a good place for the checkbox that lets readers
subscribe to your posts. Ideally, you’ll put a prominent subscription option after
every one of your posts and on your home page.
There’s another problem with the standard post notification checkbox. To sign up
for notifications, a reader needs to leave a comment. Not only is this requirement a
bit confusing (readers might not realize they need to write a comment, tick the sitesubscription
checkbox, and then click Post Comment), it’s also unnecessarily limiting.
Fortunately, WordPress offers a better option, with a subscription widget that can
sign up new followers any time. If you use WordPress.com, the widget is called Follow
Blog. If you use Jetpack, it’s called Blog Subscriptions. They’re virtually identical,
the only difference being that the WordPress.com version recognizes WordPress.
com users and lets you address them with a customized message.

NOTE
WordPress.com site owners get one other feature: They can adjust the frequency of their outgoing
emails so readers get notified only once a day at most, or just once a week.

TIP It’s a good idea to include the subscription widget in two places: your home page sidebar and the footer
area of each post, with a message like “Liked this article? Subscribe to get lots more.”

Emailing Subscribers

Occasionally, you might want to reach out to your followers and send them an email
that doesn’t correspond to a post. For example, you might offer a special promotion
or solicit feedback on a website change. If you decide to take this step, tread
carefully—if you harass readers with frequent or unwanted emails, they’ll feel like
they’re being spammed.
If you decide to go ahead and email your followers, you first need to get their email
addresses. Here’s how:

• If you use WordPress.com, visit the WordPress.com home page (http://word
press.com), log in, and choose the Stats tab. Scroll down to the “Totals, Followers
& Shares” box. Under the heading “Followers,” WordPress counts up the
total number of people subscribing to posts and comments. Click the Blog link
to get their email addresses.

• If you use Jetpack on a self-hosted site, choose JetpackÆSite Stats and scroll
down to the Subscription box. You see the total number of people subscribed
to your blog (and those who are registered to receive replies to a particular
comment). Click the Blog link next to the number to see the full list of email
addresses.

PLUG-IN POWER

Even Better Email Subscription Services

Jetpack gives self-hosters a solid, straightforward subscription
package. The WordPress.com servers handle all the user tracking
and emailing, making your life easy. But Jetpack doesn’t
include any settings that let you customize the way it handles
subscriptions. More advanced email and newsletter plug-ins
(some of which will cost you a bit of cash) offer more features.
One example is the popular Subscribe2 plug-in (http://tinyurl.
com/wp-sub2). It adds the following useful features:
• Digests. Instead of sending readers an email after you
publish every new post, Subscribe2 lets you send a single
email, periodically, that announces several new posts at
once. Subscribe2 calls this message a digest. For example,
you might choose to send subscribers a weekly digest
summarizing the past seven days’ posts.
• Excluded categories and post types. Perhaps you don’t
want to send notifications for every new post. Subscribe2
lets you exclude certain categories or post types (like
asides and quotes) from notification emails.
• User-managed subscriptions. If you’re willing to let
readers sign up as subscribers on your site (page 370),
they can manage their own subscriptions. For example,
they can subscribe to just the post categories that interest
them, and pick the most convenient digest option.

Keeping Readers in the Loop

Adding Themes and Plug-Ins

In an ordinary WordPress website, the site administrator controls the themes and
plug-ins the site uses. But in a multisite network, this approach would be too risky,
because a single malicious plug-in could steal sensitive data from any site in the
network, or wipe out the database of your entire network.
Instead, multisite networks use a more disciplined system. You, the network administrator,
can pick the themes and plug-ins you want to allow. Site administrators can
then choose from the options you set.
A typical multisite installation begins with a few standard themes (such as Twenty
Twelve, Twenty Thirteen, and Twenty Fourteen), but only one of them is network
enabled (Twenty Fourteen). That means Twenty Fourteen is the only theme the sites
in your network can use. In fact, site administrators can’t see the other themes at all.

You can also enable a theme for some sites but not others, although it’s awkward.
First, make sure your theme isn’t network-activated. Then choose Sites→All Sites
and click the Edit link under the site where you want to apply the theme. When the
Edit Site page appears, click the Themes tab. In the list of disabled themes, click
Enable next to the ones you want to add.
The process for installing plug-ins is similar but subtly different. First, choose
Plugins→Add New and then search for the plug-in you want. When you find it, click
Install Now. Now you have a choice•

• Make the plug-in optional (don’t do anything).
• Activate the plug-in for every site.

GEM IN THE ROUGH

Setting a Storage Limit

Themes and plug-ins aren’t the only restrictions that come into
play on a multisite network. You can also set storage limits to
restrict how many pictures, documents, and other files people
can upload to their sites. These settings prevent space hoggers
from swallowing gigabytes of hosting room, leaving your web
server starved for space.
Ordinarily, your network has no site restrictions. To put
one into effect, choose Settings→Network Settings on the
network administration dashboard. Scroll down to the “Site
upload space” heading and switch on “Limit total size of files
uploaded.” That caps the amount of space for posts, pages,
pictures, and uploaded files on a site to 100 MB. However,
you can type in whatever maximum you want. You can also
change the “Max upload file size” to set the maximum size of
an individual file (usually 1.5 MB).
Site administrators can use a dashboard to keep an eye on the
size of their sites. Choose Dashboard→Home, and look at the
“At a Glance” box. At the bottom, you find the key details: the
maximum size allotment, the current size of the site, and the
percentage of space used so far.

Adding Themes and Plug-Ins

Understanding How Users Work in a Multisite Network

You can create as many sites as you want in a multisite network. In each site, you
can add as many users as you need.
Sometimes, the same person needs to work on more than one site. For example,
one person might need to contribute to different blogs maintained by different
people. Or an administrator who manages one site in a network might also want to
contribute to another.
To understand how to deal with this, you need to realize that a multisite network
maintains a master list of all the users who belong to any site in the network. Each of
those people has subscriber privileges on every site. (As you learned on page 370,
subscribers are the lowest class of WordPress user—they can’t do anything more
than read posts and write comments.)

In addition, you can give people special privileges for specific sites. For example,
you might make someone an administrator on one blog and an author on another.
In this case, there’s still just one record for that user, but now it’s registered with
two different sets of capabilities on two different sites.
NOTE Happily, WordPress makes people log in only once. When visitors move from one site to another in
the same network, WordPress remembers who they are and determines what privileges they should have on
each site.

If you choose Users→Add New on the network administration dashboard, you can
add people to the master list (Figure 11-28, top). But WordPress won’t give new users
any special privileges for any site.
Life is different for ordinary site administrators. Consider what happens if an administrator
named Suzy logs into her dashboard. When she chooses Users→Add New, she’s
not given the option to create an account for someone else. Instead, she can invite
an existing user to take on a more powerful role on her site.

One potential problem with the user registration system is that it can create a lot of
extra work. For example, if a site administrator needs to add someone new, he needs
to ask you, the network administrator, to create the account first. To circumvent this
restriction, go to Settings→Network Settings, choose “Allow site administrators to
add new users to their site,” and then click Save Changes. Now site administrators
can add new people to the master list.
Another problem occurs if one person contributes to several sites. In that case,
someone needs to visit each dashboard and invite the user separately to each site.
If you’re not the sort of person who likes to spend all weekend tweaking WordPress
settings, you may want to enlist the help of a plug-in like Multisite User Management
(http://tinyurl.com/multisite-um). It lets you set a default role for each site in a multisite
network. Then, when you create a new user, she’s automatically registered on
each site with the default role you chose.

Understanding How Users Work in a Multisite Network