How May I Develop a Child Theme in WordPress?

Categories WordPress
Create Child Themes in WordPress

Child themes help you to manage your WordPress site. Do you want to know how you may create a child theme in WordPress? Then this article is perfect for you. I explain you step by step how you may create your own child theme. Therefore, I guide you through this:

Why Do I Need a Child Theme?

Child themes are necessary to customize WordPress themes. Imagine wanting to change the background color or the font size of your website. Even when you want to paste the Google Analytics snippet to your website, then you need a child theme. When you make changes in your WordPress theme, then all changes are gone with the next update of the theme. Child themes are the solution for this issue.

What is a Child Theme?

A Child theme is a copy of its parent theme. Let´s say you use the theme Twentyfifteen. A child theme of Twentyfifteen looks the same as the parent theme Twentyfifteen. The difference between the child theme and its parent theme is this:

parent theme child theme
May I make changes? yes yes
Do the changes stay after updates? no yes

With child themes you may make lasting changes on themes. Since changes on parent themes disappear with updates, child themes are necessary to make lasting changes. I am talking about changes like this:

  • colors
  • fonts
  • call to actions

When you want to track your website with Google Analytics, then you have to add the Google Analytics snippet to the header of your website. And guess what? If you do not use a child theme for this, then you have to add the snippet again and again after each theme update.

Therefore, I explain you how you can create your own child theme.

How Do I Create My Child Theme?

You need two files to create a child theme. A style.css and a functions.php. The first step to create a child theme is to prepare the style.css. After that you prepare the functions.php. Let´s beginn with the style.css. Prepare your style.css this way:

Prerequisites:

  • Download a FTP client.
  • Get the login data to your FTP account:
    • name of the FTP server
    • user name
    • password
  1. Open your FTP client.
  2. Connect to your account.
  3. Open the root directory of your website.
  4. Open the directory wp-content.
  5. Open the directory themes.
  6. Note:

    Replace name-of-the-parent-theme with the actual name of the theme that you want to make a child theme of.

    Create a new directory and name it like this:

  • name-of-the-parent-theme-child.
  1. Open the new directory.
  2. Create a new CSS-file and name it css.
  3. Open the style.css.
  4. Note:

    • Replace “Name of the parent theme with the actual name of the theme that you want to make a child theme of.
    • Replace /twentyfifteen/ with the path to the parent theme.

    Place the following lines in the style.css:

    How to prepare the style.css for your child theme
    How to prepare the style.css for your child theme
  1. Save the file.

The style.css is prepared.

After having prepared the style.css, prepare the functions.php. Prepare the functions.php this way:

  1. Open the directory of your child theme.
  2. Create a new file and name it functions.php.
  3. Open the php.
  4. Paste the following code into the functions.php:

    How to prepare the functions.php for your Child Theme
    How to prepare the functions.php for your child theme
  5. Save the functions.php.

The functions.php is prepared. Thus, your child theme is created.

When you want to modify the design of your website, then you may  write new CSS-classes in the style.css of your child theme. You may also edit existing classes of the parent theme.

How Do I Activate My Child Theme?

When you have created your child theme successfully, then activate the child theme the same way that you activate themes. Activate your child theme this way:

Prerequisites:

Create your child theme.

  1. Go to your WordPress admin panel.
  2. Click Appearance on the menu.
  3. Click on Themes.
  4. Select your child theme and click Activate.

Your child theme is activated.

How Do I Make Changes with My Child Theme?

With your child theme you may change whatever you want. I will explain you some basic changes.

How Do I Make Design Changes?

Let´s say you want to change the background color of your website. Change the background color of your website this way:

  1. Open the directory of your child theme.
  2. Open the style.css.
  3. Note:

    Replace the color you want with the actual color.

    • You may use full names like red or blue.
    • You may use Hex Color Codes like #FFFFFF for white.
    • You may use RGB Color Codes like 255, 255, 255 for white.

After the line with @import… write the following:

  • .body{ background-color: the color you want}
  1. Save the style.css.

The background color of your website is changed.

How Do I Edit Existing CSS-classes of the Parent Theme?

Edit existing classes of the parent theme this way:

  1. Open the directory of your parent theme.
  2. Open the style.css of your parent theme.
  3. Select the class that you want to edit.
  4. Copy the class.
  5. Close the style.css of your parent theme.
  6. Open the directory of your child theme.
  7. Open the style.css of your child theme.
  8. Paste the class that you want to edit.
  9. Edit the class.
  10. Save the style.css of your child theme.
  11. Close the style.css of your child theme.

An existing class of your parent theme is edited.

How Do I Add the Google Analytics Snippet to My Child Theme?

When you want to track your website with Google Analytics, then add the Google Analytics snippet to the header of your website. Add the Google Analytics snippet to your website this way:

Prerequisites:

  • Google Analytics account.
  • Download the Google Analytics snippet.
  1. Open the directory of your parent theme.
  2. Search the file header.php.
  3. Copy the header.php.
  4. Open the directory of your child theme.
  5. Paste the header.php.
  6. Open your Google Analytics snippet.
  7. Copy the snippet.
  8. Paste the snippet between the <head> tags of the header.php.
  9. Save the header.php.

The Google Analytics snippet is added to your child theme.

Definition:

Connect to your web server with FileZilla

FileZilla is a FTP client. Connect to your webserver with FileZilla this way:

Prerequisites:

  • Download FileZilla.
  • Install FileZilla.
  • Get the login data for your FTP account:
    • name of the FTP server
    • user name
    • password
  1. Run the FileZilla Desktop App.
  2. Enter the name of your web server in the field Host.
  3. Enter your username in the field Username.
  4. Enter your password in the filed Password.
  5. Click Quickconnect.

You are connected to your web server.
back to How Do I Create My Child Theme?

How May I Develop a Child Theme in WordPress?
5 (100%) 2 votes

Leave a Reply

Your email address will not be published. Required fields are marked *