Need help? Chat now!

Hostwinds Blog

Search results for:

Hostwinds How-To’s: How to Make a WordPress Child Theme Featured Image

Hostwinds How-To’s: How to Make a WordPress Child Theme

by: Hostwinds Team  /  July 12, 2019

Maya Angelou once said, "It is time for parents to teach young people that in diversity there is beauty and there is strength." Now, you may be asking yourself, "How does this relate to a WordPress blog post?"

Great question. The answer is a bit of a stretch, but here it goes: WordPress parent themes encourage WordPress child themes to be as diverse as the mind can imagine. In fact, every child theme needs a parent theme, and the latter enables the former to provide your site with more diversity, beauty, and strength. Thus, parent themes follow the advice of the great Maya Angelou. What's that? That was more than just "a bit" of a stretch, and it would be best to start this blog post over, pretending like these paragraphs never existed? That sounds like a good idea. In that case…

Hello, folks! Welcome back to the WordPress Child Theme blog series! In Part 1, we went over some WordPress facts and details, defined WordPress child themes, and unabashedly plugged Hostwinds WordPress Hosting. What's that? You'd like copious amounts of information about this so-called "Hostwinds WordPress Hosting" because it sounds like a wonderful and beneficial service?

My response is twofold:

1. You are absolutely correct – Hostwinds WordPress Hosting is a wonderful and beneficial service!

2. I'll be glad to provide you with that.

WordPress Hosting is web hosting that is perfectly compatible with websites built using WordPress. It makes building and maintaining your WordPress site easier for various reasons, all of which we discussed in Part 1 of this blog series. What's that? You would like to know where to go to order Hostwinds WordPress Hosting right this second?

Anything for you, thoughtful audience! This link will take you to the right spot:

What's that? You would also like to know where to go to find Part 1 of this WordPress child theme blog series?

My response is twofold:

1. You are quite talkative today, audience, and I enjoy it!

2. Click the link below to check out Part 1.

WordPress Child Themes & Why to Use Them

The epic saga progresses in Part 2, where we will learn how to use a child theme. Want to make changes to your WordPress theme? Want to make sure those edits don't get erased when you inevitably install an update for security and functionality purposes? Child themes are here to rescue you! We will be creating and activating one of these magical child themes within this blog piece.

Just to brief you on what we'll do in our hypothetical example, the following changes will be made to our WordPress site's CSS styling:

1. A shake effect when visitors hover over certain headings on our web pages.

2. Inversion of one image's colors when visitors hover over it.

Boom, simple as that. Let's start creating a team.

Steps Prior to Creating a Child Theme

Before we get ahead of ourselves and dive into the world of child themes, let's install WordPress.

Here is how to install WordPress using Softaculous App Installer (Softaculous comes free with Hostwinds Shared and Business Web Hosting plans, and it makes installing WordPress a piece of cake):

Step #1: Log in to your Client Area:

Step #2: Click on your Hostwinds service

Step #3. Click "Login to cPanel" in the "Actions" menu to the left

Step #4. Login to cPanel >> Click the "Softaculous App Installer" in the "SOFTWARE" menu

Step #5. Once in Softaculous, click "Blogs" on the menu on the left-hand side of the page >> Click "WordPress"

First, Click Blogs

Second, Click WordPress

Step #6. Click "Install"

Step #7. Fill in information such as your domain name, admin username, and admin password

You did it! All done!

Once You Have WordPress All Set Up

Now it is time to activate your parent theme, and here is how you do that:

Step #1. Login to WordPress using the credentials you just created in Softaculous while installing WordPress >> Click "Appearance" on the menu to the left of the page >> Click "Themes"

Step #2. Select your preferred theme and click "Activate"

First, Click Appearances

Second, Click Themes

Click the Activate Button

Parent theme effectively activated! Onto the next!

And Now, Steps to Creating a Child Theme

Yay, we are finally ready to create our child theme. Here is how to do it:

Step #1. Cruise back over to your cPanel account >> Click "File Manager" within the "FILES" menu >> Go into your "public_html" folder >> Go to your "wp" folder >> Go to your "wp-content" folder >> Go to your "themes" folder

First, Click public_html

Second, Click wp / Third, Click wp-content

Step #2. Make a new folder within your wp-content/themes folder entitled "[YOUR PARENT THEME NAME GOES HERE]-child." You can also name it something like "[YOUR PARENT THEME NAME GOES HERE]_child." In order to achieve this, click "+Folder" on the top-left corner of the page.

Step #3. Go into your new folder and make a new file. Click on your new folder >> Click "+File" on the top left-hand corner of the page >> Name the new file "style.css."

We are creating a style.css file first because it is the most basic thing one can do to make a child theme. Wait, that sounds familiar. Oh yes, it is very reminiscent of a quote from Part 1 of this WordPress Child Theme blog series: "The simplest child themes include one style.css file."

Moving on to step 4!

Step #4. Open your style.css file by right-clicking on it and selecting "Edit" >> Copy and paste the following code into your style.css document and click "Save Changes"

12345678910 /*Theme Name:Theme URI:Description:Author:Author URI:Template:Version:License:*/

Now, before we fill in the rest of this code, allow me to explain what exactly each of these fields mean.

Theme Name is the name of that parent theme you just activated.

Theme URI would generally be where you would put the URL of your theme's homepage, as it is the URL of a web page where data regarding your theme can be found.

Description is a short sentence summarizing your child theme.

Author is you, so your name or WordPress username goes here.

Author URI is the URL for your homepage.

Template is the name of the parent theme's folder.

Version is the version number of your child theme. We will be using 1.0.0.

License is your license statement for your child theme.

You can also add fields such as "Text Domain" and "Tags," however, those are not required.

Here is the code that I filled in to achieve my desired results:

12345678910 /*Theme Name: twentyseventeen-childTheme URI: Child Theme for Twenty Seventeen ThemeAuthor: ErinCAuthor URI: http://mydomain.comTemplate: twentyseventeenVersion: 1.0.0License: GNU General Public License v2 or later*/

If you need more clarification as to what to insert for your specific theme/child theme information, review the following:

12345678910 /*Theme Name: [YOUR PARENT THEME NAME GOES HERE]-childTheme URI: http://[YOUR HOMEPAGE'S NAME GOES HERE].com/[YOUR PARENT THEME NAME GOES HERE]-childDescription: Child theme for [YOUR PARENT THEME NAME GOES HERE] themeAuthor: [YOUR NAME GOES HERE]Author URI: http://[YOUR HOMEPAGE'S NAME GOES HERE].comTemplate:  [YOUR PARENT THEME NAME GOES HERE]Version: 1.0.0License: GNU General Public License v2 or later*/

After you type this chunk of code, you can fill out the rest of the document as you would generally fill out a CSS document. By the way, if you haven't had any experience with CSS or need to brush up on your CSS knowledge, we happen to have published a blog post explaining CSS basics.

The following link will direct you to our "Hostwinds CSS Chat" blog piece:

Hostwinds CSS Chat

Time to activate our child theme! Follow these steps to do so:

  1. Navigate to your WordPress dashboard, then click "Appearances" on the menu all the way to the left of the page
  2. Click "Themes" >> Click "Activate" under your child theme name

Now, you will notice your WordPress site looks a little different, but DON'T PANIC. Once you complete the next few steps, it will be right back to normal.

Step #1. Go back into your child theme folder in cPanel's File Manager (the same folder that contains your style.css file)

Step # 2. Create a new file and name it "functions.php"

Step # 3. Right-click on the file >> Click "Edit"

Step # 4. Copy and paste this exact code into the document and click the blue "Save Changes" button on the top-right corner of the page:

PHP 1234567

If you refresh the page on your WordPress website, it should magically revert right back to normal and look much prettier.

Allow me to explain why the previous steps are necessary. The code that you just copied and pasted enables all WordPress parent themes to read the standard CSS that comes with WordPress.

And Now, Steps to Adding Our CSS Code

In order to effectively make changes to your CSS code, you have to identify the proper class names in your WordPress parent theme. Here's how you do that: Right-click on your site's homepage >> Click "Inspect"

If you are not familiar with the Google Chrome Inspect tool (also referred to as "Google Chrome Developer Tools"), it is a phenomenal resource because it allows anyone to pinpoint what each line of code creates on a website. For instance, if you right-click on any web page, click "Inspect," then click the little cursor icon on the very left-hand corner of the Developer Tools, you can click on any element on your page to see what chunk of code created it.

On top of that, you can double click on any line of code, edit it, push enter, and test how the web page would look if you made that alteration. What's that? The Inspect tool is awesome! Wow, you read my mind. We are going to use the Google Chrome Developer Tools to identify the CSS selectors we need to reference in our style.css document in order to make changes.

P.S. Although we are using Google Chrome's Developer tools, both Firefox and Internet Explorer have very similar tools.

P.P.S. For the purposes of this tutorial, we will keep our WordPress site in the same conditions it was in when we first activated it, and we will only make the two changes mentioned in the introduction of this blog post.

P.P.P.S. One more thing we'd like to address regarding CSS documents: Did you know that browsers read CSS documents from top to bottom? Similarly, browsers read the CSS contained in the style.css documents of child themes as if the code was lower than the CSS code contained within the parent theme's style.css document. In other words, the code you have in your child theme's style.css document always overrides that of the parent theme's style.css document.

Whoa, what a long P.P.P.S. Oh well! As stated previously, we are going to change two things for our site. Here is #1:

1. Let's say, for example, you find it necessary to have all your headings shake when your website users hover over them.

Paste the following code into your style.css document to achieve this:

123456789101112131415161718192021222324 h2:hover {    perspective: 900px;    backface-visibility: hidden;    transform: translate3d(0, 0, 0);    animation: shake 0.70s cubic-bezier(.25,.10,.17,.88) both;} @keyframes shake {    12%, 88% {    transform: translate3d(-2px, 0, 0);  }      19%, 82% {    transform: translate3d(3px, 0, 0);  }     32%, 53%, 68% {    transform: translate3d(-3px, 0, 0);  }     42%, 58% {    transform: translate3d(3px, 0, 0);  }}

First off, notice the "h2" selector. We used the Google Chrome Developer Tools to figure out what selector to reference in this code. Secondly, you can adjust the numbers in the code above to make the headings shake faster or slower. Lastly, make sure to click the "Save Changes" button after pasting the code in the document.

2. The second thing we are going to do is this: We will invert the colors of our homepage image when users hover over it by adding the following lines of code to our newly-created style.css document. Push "Save Changes" when you are all done copying and pasting.

123 img:hover {    filter: invert(100%);}

And that is how you make a glorious and effective child theme! You are all set, and your site has some custom touches that will not be erased when you install any WordPress update moving forward. Refresh your page once you have taken these steps and notice how incredibly cool it looks when you hover over a heading, and it shakes. Notice how incredibly magical it looks when you hover over the image on your homepage and its colors invert. This updated site is now, as the kids say these days, "lit."

(Word)Pressing On

Don't you just love a great pun in a blog heading? What's that? Puns are incredibly cheesy, yet amazing? As the kids say these days, "True dat…bro."

On a profoundly different note, here is a quote from the WordPress Hosting page on our website:

"WordPress Web Hosting is tailored to those wanting to get a WordPress site up and running quickly so they can begin building, designing, or updating it. Using the Softaculous Apps Installer from your cPanel account, you can install WordPress on your hosting account and begin using this free software on a server that is optimized for uptime and monitored by Hostwinds 24/7/365."

The Hostwinds Team specifically formulated our WordPress Hosting to make it convenient for people to build a WordPress website without worrying about configuring their servers to be compatible with WordPress. For that matter, everything Hostwinds creates is specifically formulated to make hosting procedures a breeze for our clients.

Maya Angelou summed up the way our team feels about helping our valued clients when she said, "If you find it in your heart to care for somebody else, you will have succeeded."

It really does matter to our staff that you have a sterling experience while using our services. We consider our company successful when we have improved the lives of our clients in some way. With that in mind, please know that as you create a WordPress child theme, you are always more than welcome to reach out to our team of experts anytime, 24/7 via Live Chat, phone, or support ticket if you need help. We are always here for you.

Written by Hostwinds Team  /  July 12, 2019