WordPress Child Theme Generator

Let our free child theme creator do the work for you

Easily create a child theme for many WordPress themes using our custom child theme generator. Either automatically detect or manually enter your WordPress theme below to get started.

Enter Your Site URL to Automatically Detect Current Theme

OR

Enter WordPress Theme Name to Manually Generate Child Theme

Click to read how to get the correct theme name

WordPress Child Theme Generator FAQ

Below is some helpful information for using the generator and troubleshooting child theme issues.

What is the difference between automatic detection and manual creation?

If you have your parent theme activated on your site and the site is accessible via the browser (not in maintenance mode), you can use the automatic detection method.

The automatic detection feature attempts to load the URL you supply and detect the stylesheet link within the page source code. If it finds this link, it will parse the file and extract the theme information from it. If the generator cannot find your theme’s header information, you will need to use the manual creation method instead.

On the second page of the generator, it will display the current theme information if it is found. Verify that the information is correct before proceeding with child theme creation.

The manual creation method can be used if you know your theme’s template name (name of the parent theme folder in wp-content/themes/). How to get the correct theme name

When inputing a theme name manually, you need to make sure you supply the correct name or the child theme will not link to the parent theme properly. After inputting the theme name, you will then be able to choose optional child theme files and code to include the theme.

Does the generator work with any WordPress theme?

Theme developers use a variety of different methods to load stylesheets and child themes. Some themes have a bare-bones style.css file that identifies the theme to WordPress, but the actual CSS code may be loaded in multiple files from different directories within the theme. Some themes will also detect a child theme and load the child theme stylesheet automatically.

Since there is no standardized method for how themes handle child themes and CSS, we cannot guarantee that the generated child theme will work with all themes. If your parent theme uses a single style.css file and does not automatically load child theme styles, the generated child theme should work well.

The generator will create the necessary files that are required as the basis of any child theme. Even if the child theme does not work 100% with your current theme, you will have the files in place that you can edit to work with your theme. The developer of your parent theme may have specific instructions for creating child themes, so be sure to check with them if you find the child theme is not working properly.

How do I install the child theme?

After completing Step Two, you will be able to download the child theme zip file. Save the zip to your computer.

Go into your WordPress site and choose Appearance > Themes and click the ‘Add New’ button at the top of the page. Then on the next page click the ‘Upload Theme’ button at the top of the page.

Then click the ‘Choose File’ button from the upload box and browse to the zip file you just saved to your computer. Choose the file and then click the ‘Install Now’ button.

WordPress will upload the child theme and it you should see something similar to this:

Child Theme Uploaded

Click the ‘Activate’ link and the child theme will then be active.

What if the parent theme style.css is loading twice?

If your parent theme automatically loads child theme styles, you may end up with duplicate stylesheet loads within your site’s head section. This can be rectified by altering the stylesheet enqueue code that is found in the child theme’s functions.php file. You can replace the first block of code in the child theme functions.php file with the code below to see if it fixes the duplicate load.

This code will only load the child theme style.css file and allow the parent theme to load it’s own style.css file. It’s important that the child theme’s style.css file loads after the parent theme’s stylesheets. This ensures that any custom code you add to the child theme’s style.css file will take precedent over the parent styles.

If you find that the child theme’s style.css file is loading first, you can either use more specific CSS selectors to override the parent styles, or change the priority of the child theme stylesheet load. See the code examples below to learn how to set the load priority.

What if the child theme style.css is loading twice?

Some themes automatically detect child themes and load their stylesheet. The code that is included in the generated child theme could cause duplicate loading of the child theme’s style.css file in the head of your site. 

To remedy this issue, there is a good chance that removing the entire block of enqueue code will prevent the duplicate stylesheet loads. Open the child theme functions.php file and scroll past the opening comments to the first code that looks like this (the $parent-style variable and child style handle will be different for your theme):

Highlight and copy the entire block and then delete it and save the file.  Reload your site and see if the site appears as it should in the browser and view the source code to see if the duplicate stylesheet loads are gone.

If the site doesn’t appear correctly (i.e. there is no parent stylesheet loading), go back into the editor and paste the code back in and save.

In this case, your theme may just require the parent stylesheet to be loaded but not the child theme stylesheet. So to only load the parent stylesheet, only use this code (removed the child theme stylesheet load from the first example):

Change the $parent_style variable to match your theme name. The ‘virtue’ term in these examples was the name of the theme we had activated at the time.

This code will only load the parent stylesheet. Once you save the functions.php file, go back and preview your site and verify the duplicate stylesheet loads are fixed in the source code.

What if the stylesheets are not loading in the correct order?

You may find that the child theme changes the order that stylesheets are loaded. Parent themes may require CSS files to load in a specific order, and this can be controlled by using dependencies in the child theme’s wp_enqueue_style function along with altering the priority of the add_action function in the child theme functions.php file.

Here is an example using both dependency and priority in the stylesheet load script:

Dependency is set in the last array() parameter and you use the handle name specified in the parent wp_enqueue_style function. When you specify a dependency, this forces the parent file to load first, then the child file is loaded subsequently.

Load priority is set in the add_action function. In the example above, the priority is set to 15. The default priority is 10, so any value higher than that will load later. In this example, the parent and child stylesheets will load after other styles that use default priority. This might include things like bootstrap styles, icon fonts, or web fonts.

And another example where different priorities are set for the parent and child stylesheets:

In this example, splitting the parent and child stylesheet loads into two separate functions allows you to load them at different priorities in the head. Your parent theme may require certain styles to be loaded first, with others to follow after the parent style.css. Then the child styles can be loaded last. 

It’s advisable to keep the child style load as close to the parent styles as possible so that other stylesheet loads do not delay the rendering of any custom code you use in the child theme’s style.css file.

What if Bootstrap or other styles need to load first?

You can set a dependency on the parent style sheet to force both the parent and child styles to load after a particular stylesheet. For example, many themes use the bootstrap framework, and the boostrap styles are generally loaded first, then the parent styles, then the child styles.

To make the parent stylesheet follow the bootstrap (or any other stylesheet), you need to look at the source code of your site and get the ‘id’ value from the bootstrap stylesheet. It might look something like this:

<link rel=’stylesheet’ id=’munding-lite-bootstrap-css’ href=’http://www.yourdomain.com…

The id for this example is ‘munding-lite-bootstrap-css’.  You need to omit the ‘-css’ suffix when specifying the ‘id’ value in the dependency, however.

In your child theme functions.php file, the code to add the dependency would look like this:

The array value in the wp_enqueue_style function is where you specify the ‘id’ (it’s actually called a handle) for the stylesheet that needs to load first.

This will force the parent styles to load AFTER the bootstrap styles, and the child theme styles will load AFTER the parent styles because that dependency exists as well.

What if there are extra stylesheets that are not loading?

If your parent theme uses multiple CSS files, you may find that some stylesheets are not being loaded. This can be fixed by loading or ‘enqueuing’ missing stylesheets within the child theme functions.php file.

Here is an example of loading multiple stylesheets from the parent and loading the child theme stylehsheet as a dependent of the parent style.css:

This is a generic example and is not applicable to any specific theme. If your parent theme just doesn’t look right when you activate the child theme, revert back to the parent theme as the active theme and look in the source code head section and see which CSS files are loaded. Switch back to the child theme and do the same.

If you find that the child theme is not loading specific stylesheets, those are the ones you will need to add to the code block above in order to get them to load with the child theme.

Notice the use of get_template_directory_uri() for any styles loaded from the parent theme, and get_stylesheet_directory_uri() for loading from the child theme. If you get these mixed up, your styles will not load properly!

What content is included in the child theme files?

The style.css file simply includes the header information that WordPress requires in order to identify it as a child theme and link it to the parent theme.

When you identify your theme automatically, the child theme will include the same header information as your parent theme if it is supplied in the parent theme style.css file. For manual child theme creation, the header will be simplified somewhat and provide more generic information.

Any optional included files you choose to include on Step Two (single.php, home.php, 404.php, etc.) are blank, so you will need to copy/paste the code from your parent theme into them once your child theme has been installed and activated.

The functions.php file will have a bit of code that loads or ‘enqueues’ the parent theme’s style.css file so all the original styling will be included when you activate the child theme. If you include optional files like custom javascript or any of the custom feature.php code inclusions that you can select from (in Step Two), there will be additional code added to the functions.php file. All code is fully commented, so it’s easy to tell which code does what.

The optional custom javascript (/js/custom.js) file is blank and ready for editing as soon as you activate the child theme.

Do I need to edit the files after I activate the child theme?

Yes. The whole purpose of creating a child theme is to customize the parent theme and maintain those customizations if you update the parent theme. 

As stated above, if you include any optional PHP files, those files will need to have the original parent code copied and pasted into them before they will work properly. You can then customize them as needed and they will override the parent files.

If you include the optional custom javascript file, then you will have a new /js/ folder included with a custom.js file that you can add any new javascript to. This is loaded automatically in the functions.php file that is generated, so all you need to do is add your code.

If your parent theme does not have an optional file included (not all themes include all possible PHP files), you will need to copy the code from a similar page and customize it. For example, if your theme doesn’t include a 404.php file (for displaying custom 404 errors), you can include the 404.php file in your child theme and on activation, copy the page.php code from your parent theme into it. You can then customize the file to display whatever information you want visitors to see by removing the WordPress post loop and entering normal HTML code.

The style.css and functions.php files operate differently from the optional included files. They are loaded in addition to the parent theme’s style.css and functions.php files, so any code you add to them will extend or modify the parent theme’s original files rather than replace them.

How do I edit the custom javascript file?

If you include the optional custom javascript file in Step Two, your child theme will include a /js/ folder and inside you will find an empty file named custom.js.  The child theme’s functions.php file will also include a block of code that loads the custom.js file in the footer of your theme. It’s all ready to go, you just need to edit the custom.js file.

The WordPress editor will only allow you to edit PHP and CSS files. So you cannot edit the custom.js file there.  You can either use FTP to edit the file, edit the file directly within your hosting account file manager, or install a plugin like WPide or Advanced Code Editor. Those plugins allow you to view and edit javascript files within the WordPress backend.

A word of caution, however. Editing javascript files will not create problems if you have a code error. You simply correct it and move on. Editing theme PHP files can easily cause errors that will prevent you from accessing anything in the backend. So it’s advisable that you edit PHP files using FTP rather than within the WordPress environment.

Is there a charge for generating child themes?

Nope. None. Nada. We couldn’t find anything similar (didn’t look very hard though) and there were a lot of tutorials available and even some plugins, but nothing that made it really easy to create a child theme. Some people just don’t want to code, so this saves the hassle of having to create the files and do the coding.

We do ask that if you like the service that you share the heck out of it on your favorite social media hangout though! Just click one of the icons below!

How to Get the Correct Theme Name for Your Child Theme

The theme name to use in a child theme is NOT usually the name that you see in the theme description. The correct theme name value is the name of the folder that the theme creates in the wp-content/themes folder when it is installed into WordPress.

You can either view the file structure of your site and get the folder name there:

Find WordPress Theme Name

Or you can view the source code from any page on your site and get the name from the stylesheet link:

<link rel=’stylesheet’ href=’http://www.yourdomain.com/wp-content/themes/twentysixteen/style.css’…

In this example, the correct theme name is ‘twentysixteen’, not ‘Twenty Sixteen’ as you will see in the theme description.