This is part five of the WordPress Child Theme Generator tutorials. This tutorial series will give a full review of the generator and how to make the most of your WordPress child theme.
In Part 5, You will continue to learn about the customization of your own website using the child theme. We will continue looking at the back-end code that allows you to customize your own site.
Make sure that you have watched tutorials 1-4 prior to watching part 5.
This content below is covered in the video but is available here for those who like to read.
Now that you have your child theme installed and activated, you’re ready to begin customizing your website.
The child theme that you installed comes pre-made with some code that you can use to make customizations on your own site, and the child theme also gives you the flexibility to modify the existing code to suit your tastes and create your own customizations.
I occasionally update this code to add new features to the child theme, so this video may differ a little from what you see in your child theme, but that’s ok, because above each code snippet is a brief explanation of what that snippet does. Let this explanation guide you in understanding and implementing the child theme on your own website.
From the WordPress dashboard, hover over the appearance tab. Now click “editor.” Here you can visualize the CSS code that makes up your child theme. First, I’m gonna show you how the child theme integrates with the HTML of a web page. So let’s create a basic page and take a look.
I’ve created a page with some text and I’ve added all of the HTML tags that are utilized on the web page.
One very important side note here…. When you’re using the child theme and adding customizations to a webpage, you will need to use the HTML editor mode. Many people are accustomed to using the visual mode. Being in the HTML mode will allow you to see and modify the HTML tags on a web page.
This will be necessary as we get started. To switch to HTML editor mode, click this tab.
I encourage you to work in the HTML editor mode because this mode gives you full control over the HTML code on the page. Don’t worry if you don’t know much about HTML at this point, but I would recommend learning the basics. Knowing the basics of HTML can give you a better understanding of what is happening on a webpage and can also help you understand when you have problems with the visual appearance of a web page.
So let’s take a look at this page…I wanna point out a few HTML elements that you should be familiar with. This is a p-tag. The P tag is the mark up for identifying a paragraph on a web page.
This is an H tag. The H tag can be designated H1 through H6. This tag basically represents different headings within a web page. H1 would be considered a main heading while H3 would be considered a less important heading.
This is an image tag. In HTML, this is how images are defined so that the browser can find and present the image on a page.
This is a SPAN tag. Basically, this tag is used when you want to customize something that is already found within another element. For example, if you want to customize one word that is within a paragraph or P-tag, this will allow you do to that.
These are the main tags we will deal with directly on the web pages we create.
Now let’s take a look at our child theme and see what kind of customizations we can start with. Remember, the basic child theme is called the CSS or Cascading Style Sheet.
Here is a piece of code that that is called a “class selector.” This class selector is called “box”. I created and named this class selector. When this class selector is placed within any html element, it will add a 2 pixel wide red border with 5 pixels of padding against the element, and it will center any text that is within the element.
So here is how we add this class selector to our web page. Let’s put this class selector within a P-tag and see what it looks like.
This process is the same no matter what type of tag we are adding the class selector to. First within the P-tag, we will add this “class…equals…quote… the word box….and end quote.” Now let’s save the page.
Let’s take a look at the page and see what the result is. As you can see, we have a paragraph with a 2 pixel border around it. There is a padding of 5 pixels between the border and the text and the text is centered in the box.
The box goes from one end of the page the other. This is because the p-tag spans the width of the page. What is we only want the border around the text? This can be done with the span tag mentioned earlier.
Let’s go back over to our page editor…..Make sure that we are using the HTML editor….Now let’s copy and paste this element below. Now we’ll delete the code we added to the P-tag ….and now we’ll add a span tag within the element….. First we’ll add the opening span tag then we need to add “class….equals….quote…the word box….and end quote.”
Now well place our cursor where we want the span element to end, we’ll put the closing tag which looks like this. Now well save this page….let’s take a look at the result.
When we add this class selector to the span tag placed directly around the text, it places a 2 pixel border around the text… There is a padding of 5 pixels between the border and the text and the text is centered in the box.
This is basically how all class selectors’ work. Let’s take a look at the next customization code provided with the WordPress child theme you generated. As you can see this class selector puts a yellow background on any element. This gives the appearance of highlighted text. If you really want some text to stand out, this would be an effective way to achieve this.
So let’s add this class selector to a heading. Let’s created an H2 heading. Here is the opening tag for an h2 heading. Now we’ll add the class selector we now type….class…equals… quote…highlight…dash…background…end quote.” Now we will add out h2 heading title…and then add the closing tag. When we’re using HTML tags, you most always need an opening and closing tag. Now let’s save the page and take a look.
The back ground behind the h2 heading now is highlighted yellow. Let’s say that we wanted the background to be orange instead of yellow. This could be accomplished in two different ways. First, we could modify the existing class selector in our child theme CSS or we could create an entirely new class selector within the CSS that would make a orange highlighted background.
Here is how to do this. First we would create a new class selector in the CSS. All class selectors when created in your child theme will begin with a dot and then the class name then a an opening curly bracket. I’ll name this class “dot orange dash background. Then I’ll add the css code that styles the element.
In this case, the code is “background dash color colon then the number sign and the hexadecimal code for the color orange. You can look up the hexadecimal color codes online by simply searching the term hexadecimal color codes.
Once you have input the hexadecimal code, place a semicolon after the code and then finish off the new set of code with a closing curly bracket. Now when you add the class selector “orange dash background”, the background color of the element will be changed to orange.
In the next video, I we will finish off this series by looking at the more code found within your child theme. We will also wrap up by discussing some ideas for learning how to add your own customizations to your child theme.