Creating a Child Theme is Simple and Smart

Do you need to modify part of your favorite theme? Save yourself some headache by making your changes in a child theme.

Most beginners cringe when they hear that they should create a child theme. First, because it sounds complicated; and second, because they don’t know what a child theme is or why their church website needs one. Allow us to get you started towards your first child theme by first explaining one of the pitfalls of theme modification and how you can save yourself the trouble. Its not as hard as you think.

The Problem with Theme Customization

No theme is perfect; and every WordPress user reaches the point where they decide to roll up their sleeves and make a few CSS adjustments to their favorite theme. This is good for your church website and a good experience for you too.

Unfortunately, all changes are overwritten whenever the theme is updated; often without your knowledge and quite a while after you made the edits. The budding developer suddenly discovers their hard work has vanished. This can be discouraging to the beginner and pain to redo since the details have long been forgotten. If only there was a way to keep modifications separate from the theme itself…

The Solution: Create a Child Theme for All Your Customizations

First, let me explain that a child theme is not a complete theme but rather a small collection of settings files that overrides the respective settings in another theme (which is called the “parent” theme). All the design elements of the “parent” theme are in effect except those dictated by the child theme. Think of a child theme as a small hand of “trump” cards that tell the parent theme what to do in specific areas. When a child theme is activated, WordPress displays your website according the rules of the “parent” theme unless code in your child theme dictates otherwise. Your child theme can be as small as a single line of CSS code or contain many page and post templates.

Creating a Child Theme is Easy!

The traditional method of designing a child theme involves creating files on your local machine and then uploading them to your website via FTP. That’s inconvenient if you do not have an FTP client or FTP access. An alternative and popular method is to use a free plugin that creates the child theme for you, but that doesn’t help you understand how a child theme works.

This article will explore a method that uses a free plugin called wp-FileManager to create the child theme files directly on your WordPress site and then you edit the files from within WordPress. Here is the overview of the process.

  1. Install and configure the wp-FileManager plugin
  2. Create the child theme folder and files
  3. Edit the child theme files with the built-in WordPress theme editor
  4. Activate the new child theme
  5. Make an example modification to the child theme

Lets get started!

1. Install and Configure wp-FileManager

Begin by installing the free WordPress plugin wp-FileManager from the WordPress repository. I recommend installing it from the plugins panel of your WordPress dashboard. If you have never installed a plugin before you can reference these basic installation instructions.

After wp-FileManager is installed and activated, you must configure the plugin. Find the FileManager menu item on your dashboard and then click the “Configuration” link.

menu

The configuration page has many options but we only want to change the top two settings. Using this screenshot as a guide, set the default home location and check all the boxes. Be sure to type the path correctly including the two periods and a forward slash on both ends.

settings

To test that FileManager is configured correctly, see if it will take you to the wp-content folder in your website when you click FileManager on the dashboard menu. Here is what mine looks like below. Notice that you can see a “themes” folder…this is very important.

showthemes

2. Create the Child Theme Folders and Files

To create your child theme you only need to create one folder for the theme and two files in that folder. For our scenario we will make a child theme of the Anchor theme from WPforChurch.com. To start, I create an empty folder called “anchor-theme-child” right next to the original “anchor-theme” folder.

folderview

foldercreate

folderdone

Note: the child theme folder and parent theme folder are side-by-side. Some make the mistake of thinking the child theme folder is inside the parent folder which is not the case.

Now we create two empty files, one named style.css and another named functions.php. This screenshot sequence demonstrates creating the style.css file. Do the same for the functions.php file.

childthemefolder

filecreate

filedone

3. Edit the child theme files with the built-in WordPress theme editor

WordPress will now recognize that we have a new theme in your website but it is non-functional because the CSS file and PHP file must be configured. Lets start by editing the CSS file. From the Dashboard menu click on Appearance > Editor

editorlink

Now we select theme we want to modify. Use the drop-down to select the theme and then load the theme files by clicking “select.” We want to start by getting some information from the parent theme, Anchor, first.

themeselect

Copy all of the header information from the parent theme’s style.css file. Notice in the screenshot here that I selected only the code in the header part of the document.

stylecopyfrom

Now we navigate to our new Anchor child theme folder and find the blank style.css file. Note: WordPress will say something like “this theme is broken” which you can ignore for now. Paste the code you copied from the parent theme into this blank style.css document. Now we need to edit some of the information. Reference the highlighted text in the screenshot with the bullet list below.

csschanges

Changes made to the child style.css file include

  • Change the theme name to reflect that it is a child theme
  • Change the theme description to indicate the same
  • Add a new line of text after the description that identifies the parent theme.
    • Note: this the most important line of text. Notice in the screenshot example that I said “anchor-theme.” because this is the folder name of the parent theme. Pay close attention to the exact text and case of the parent folder name.
  • Click the “Update File” button at the bottom of the editor to save your changes.

The most technical work is now over and we are almost done!

4. Modify the functions.php File of the Child Theme

Open the functions.php file in the same theme editor window. It should be right above the style.css file you previously edited. Paste this code into it as-is and then click the “Update File” button at the bottom of the editor to save your changes.

The theme editor view of your functions.php page should look like this now.

5. Activate Your New Child Theme

Find the new child theme in your list of themes. There is no screenshot graphic associated with it so it will be easy to find (can we say ugly?).

Note: If you want a screenshot graphic you can copy the screenshot.png image file from the parent folder to the child theme folder or create a new image file and name it “screenshot.png” and upload it to the child theme folder using FileManager.

activatetheme

Click the “Activate” button and take your theme for a test drive. If you did everything correctly there should be absolutely no difference between the parent and child theme.

6. Make an Example Modification to the Child Theme

Suppose the reason we created a child theme was to modify the 404 error page because we found the original unhelpful and we never wanted our site visitors to see the default again (I know that there are other ways to do this but this is just an example).

bad_404

To start we copy the original file that we want to modify from the parent theme folder to the child theme folder. A simple way to do that is to us wp-FileManager to download the 404 file from the parent theme folder and then upload it to the child theme folder. Here is the process in sequence.

download_404
Download from parent theme folder
child_nav
Navigate to child theme folder
Click the upload button
upload_404
Choose the previously downloaded file from your local machine and upload
upload_404_done
Notice the upload confirmation and the file’s presence in the folder

Now all we have to do is open the 404.php file in the theme text editor and change the text. I highlighted the text that I changed in the screenshot below.

changed_404

Now the 404 page looks like this!

new_404

That is only the beginning of possible modifications you can make on your themes, and the best part is you wont have to worry about losing anything if something changes. Enjoy using your new child theme!

Video Tutorial of This Process is Now Available

Thanks to our friends at Webucator, a provider of WordPress training classes, a visual walk-through of this procedure is now available.

3 comments

  1. Jeff Voegtlin

    I am using Vibrant Church theme, which is already a child theme. It seems like I can’t make a child theme of Vibrant Church. Is that correct? If so, do you have any suggestions or workarounds I could use to do this?

    Thanks for all the work you put into helping folks create and run quality websites.

  2. Jeff Voegtlin

    It seems like option “1” is simpler, but I don’t understand exactly what you mean.

    I have a folder called “vibrant-church.”
    I copy that folder and give it a name “my-new-vibrant-theme”
    In that new theme, change the name in the header part of the style.css?
    Then make a child theme: “my-new-vibrant-theme-child” ??? following the guide in this post ???

    Thanks,