Custom Theme

Why use a child theme ?

There are a few reasons why you should use a child theme

  • If you modify a theme directly and it is updated, then your modifications may be lost. By using a child theme you will ensure that your modifications are preserved.
  • Using a child theme can speed up development time.
  • Using a child theme is a great way to learn about WordPress theme development.

How to create a child theme

Part 1 : Creating a Child Theme from an Unmodified Parent Theme

You need to prepare one directory (the child theme directory) and two files (style.css and functions.php),

Step 1 : Create the child theme directory

You may name it anything you’d like.

You locate  the child theme directory in “wp-content/themes”.The name of your child theme directory is appended with ‘-child’.

For example, it is called child theme ‘twentyfifteen-child’, indicating that the parent theme is the Twenty Fifteen theme.

Step 2 : Create your child theme’s stylesheet (style.css).

The two necessary items in the code above are the lines starting with “Theme Name” and “Template

You may view template


Here is what each line means:

  • Theme name

This is the name that will show up for your theme in the WordPress back end.

  • Theme URI

This points to the website or demonstration page of the theme at hand. This or the author’s URI must be present in order for the theme to be accepted into the WordPress directory.

  • Description

This description of your theme will show up in the theme menu when you click on “Theme Details.”

  • Author

This is the author’s name — that’s you, in this case.

  • Author URI

You can put your website’s address here if you want.

  • Template

This part is crucial. Here goes the name of the parent theme, meaning its folder name. Be aware that it is case-sensitive, and if you don’t put in the right information, you will receive an error message, so double-check!

  • Version

This displays the version of your child theme. Usually, you would start with 1.0.

  • License

This is the license of your child theme. WordPress themes in the directory are usually released under a GPL license; you should stick with the same license as your parent theme.

  • License URI

This is the address where your theme’s license is explained. Again, stick with what your parent theme says.

  • Tags

The tags help others find your theme in the WordPress directory. Thus, if you include some, make sure they are relevant.

  • Text domain

This part is used for internationalization and to make themes translatable. This should fit the “slug” of your theme.

 

Step 3 : Create a file titled functions.php and paste below code to import the parent themes style.

The “functions.php” file allows you to change and add functionality and features to a WordPress website. It may contain both PHP and native WordPress functions.

Step 4 : Now Zip the folder and upload it via Appearance -> Themes -> Add New

Step 5 : Activate the theme.

Part 2 : Creating a Child Theme from a Modified Existing Theme

If you have already edited the theme files directly without creating a child theme, it’s important to get all your modifications into a child theme so that updating the parent does not wipe out your changes.

In case, you should use the Child Theme Configurator plugin.

The steps to do that

Step 1 : Make a backup of your customized parent theme using FTP or your Web Hosts file manager.

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

Step 3 : Go to 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 templates from the new directory when it is activated (but don’t activate it just yet).

Step 4 : To move your modified styles to the child theme. download your modified “style.css” file from the parent and run a DIFF against the original parent “style.css” file and move any selector blocks 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, open the modified stylesheet and manually copy/paste any selector blocks you have changed to a separate text file.

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

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

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

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

Other Useful Information

Template Files

If you want to change more than just the stylesheet, your child theme can override any file in the parent theme: simply include a file of the same name in the child theme directory, and it will override the equivalent file in the parent theme directory when your site loads. For instance, if you want to change the PHP code for the site header, you can include a header.php in your child theme’s directory, and that file will be used instead of the parent theme’s header.php.

You can also include files in the child theme that are not included in the parent theme. For instance, you might want to create a more specific template than is found in your parent theme, such as a template for a specific page or category archive.

Using functions.php

Unlike style.css, the functions.php of a child theme does not override its counterpart from the parent. Instead, it is loaded in addition to the parent’s functions.php. (Specifically, it is loaded right before the parent’s file.)

In that way, the functions.php of a child theme provides a smart, trouble-free method of modifying the functionality of a parent theme. Say that you want to add a PHP function to your theme. The fastest way would be to open its functions.php file and put the function there. But that’s not smart: The next time your theme is updated, your function will disappear. But there is an alternative way which is the smart way: you can create a child theme, add a functions.php file in it, and add your function to that file. The function will do the exact same job from there too, with the advantage that it will not be affected by future updates of the parent theme. Do not copy the full content of functions.php of the parent theme into functions.php in the child theme.

The structure of functions.php is simple: An opening PHP tag at the top, and below it, your bits of PHP. In it you can put as many or as few functions as you wish. The example below shows an elementary functions.php file that does one simple thing: Adds a favicon link to the head element of HTML pages.

Referencing / Including Files in Your Child Theme

When you need to include files that reside within your child theme’s directory structure, you will use get_stylesheet_directory(). Because the parent template’s style.css is replaced by your child theme’s style.css, and your style.css resides in the root of your child theme’s subdirectory, get_stylesheet_directory() points to your child theme’s directory (not the parent theme’s directory).

 

 

 

Was this article helpful?

Can't find what you want? Submit a ticket

Related Articles