How to Set Up a WordPress Child Theme

How to Set Up a WordPress Child Theme
  • 1
    Dec

How to Set Up a WordPress Child Theme

Guide to Setting Up WordPress Child Theme

However, in this article we are going to show you how to set up a WordPress Child Theme in case your chosen WordPress theme does not come with one.

What do you need?

There are only 2 tools you need in order to create a Child Theme:

  1. Access to your Hosting Control Panel with File Manager, or alternatively FTP access to your hosting server
  2. Text Editor such as MS Notepad (Please note, you MUST NOT use MS Word or any other Word Processing software)

How to start?

Step 1 – Create New Folder

You need to first create a new theme under your WordPress Theme folder.

WordPress Child Theme

  1. Log in your Hosting Control Panel or connect via FTP
  2. Open your File Manager page in your browser if using Control Panel
  3. Go to Public Folder > WordPress Content > Themes
  4. Create a new Folder called “Child-Theme”
  5. This is how your folders should look like – Click on the image (Note in this case “Cognisant” is the main theme and “Cognisant Child” is the Child Theme)

Step 2 – Style.CSS

Now that you have created a folder for your Child Theme to be stored in. We now need to tell WordPress to use this folder and present it as your Theme.

So you now need to create a few essential files to make the Child Theme works. You need to create this so that:

  • WordPress knows where the Master Theme is kept
  • You can make your CSS changes here so it will not be overwritten when you update your main theme
  • Remember not to ever edit the CSS or any Files in the main theme

Just use your Notepad or TXT editor to create a new file with the statement in the snippet below.

MAKE SURE you replace the references to MYDOMAIN to your actual domain name and MyTheme to your main theme name, and Save the file in your Child Theme folder as style.css

/*
Theme URL: http://MyDomain.com
Description: MyDomain Child Theme
Author: Cognisant
Author URL: http://MyDomain.com
Template: MyTheme
Version: 1.0.0
Text Domain: MyTheme-child
*/
/*Custom CSS goes after this line */

Step 3 – functions.php

You need to do this so that the Child Theme knows what to do. Once again use your Notepad or TXT editor to create a blank php file and then insert the following snippet below and Save in your Child Theme Folder as functions.php

<?php add_action( ‘wp_enqueue_scripts’, ‘enqueue_parent_styles’ ); function enqueue_parent_styles() { wp_enqueue_style( ‘parent-style’, get_template_directory_uri().’/style.css’ ); }>

Step 4 – Custom PHP Files

If you intend to edit or customise any files such as footer.php or header.php, or templates e.g. pages.php or posts.php, etc.; then you must to copy them from the main theme (DO NOT REMOVE THEM), and upload them into the Child Theme folder. You can then edit the files in the Child Theme leaving the main theme files intact. If you edit them in the main theme, they will be overwritten when you upgrade your WordPress theme to the latest version and you will lose all your customisation and edits.

Step 5 – Thumbnail

This is purely cosmetic and will not make or break your site! If you want a nice looking theme image in your Themes section of your WordPress, simply copy the image from the theme folder to the child-theme folder (usually it is something .png).

Step 6 – Activate Child Theme

Now you need to activate your Child Theme

  • Go to WordPress Admin > Appearances > Themes > and you should see your Child-Theme there.
  • Click “Activate”
  • Shazam you have a child-theme on your website!!

NOTE – Editing your WordPress Website

Now remember you have an active Child Theme which means your website is running from this theme.

Any changes you make to styling of the website should be done on this theme’s CSS and not the main CSS.

Go to Appearances > Editor > Select “Child-Theme” from the drop-down > Select style.css > Edit > Save

If you want to make changes to other parts of the website that calls on templates such as Footer, Header, Page, Post, etc. you should first copy these files from the Main Theme (DO NOT REMOVE THEM), and paste them into your Child-Theme directory.

To edit these, do the same as above but this time choose the PHP file you want to edit. For example to edit the footer:

Go to Appearances > Editor > Select “Child-Theme” from the drop-down > Select “footer.php” > Edit > Save

How do I get help?

Comments are closed.