How Do 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.

How Do I Prepare My style.css file?

Prerequisites:

  • Download a FTP client.
  • Get the login data to your FTP account:
    • name of the FTP server
    • username
    • password

Prepare your style.css this way:

  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 style.css.
  3. Open the style.css file
  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 file:

    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 file is prepared.

After having prepared the style.css, prepare the functions.php.

How Do I Prepare my funtions.php File?

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 functions.php file.
  4. Paste the following code into the functions.php file:

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

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?

Prerequisites:

Create your 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:

  1. Go to your WordPress admin panel.
  2. Click Appearance on the menu.
  3. Click 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 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 file.
  3. Note:

    Replace the color that 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 file.

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 file of your parent theme.
  6. Open the directory of your child theme.
  7. Open the style.css file of your child theme.
  8. Paste the class that you want to edit.
  9. Edit the class.
  10. Save the style.css file of your child theme.
  11. Close the style.css file 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?

Prerequisites:

  • Google Analytics account.
  • Download the Google Analytics snippet.

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:

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

How Do 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 *