Hey guys, how's it going?
My name is Jason Merrell and I'm the lead developer here at WebTegrity.
In this weeks video I'm going to show you guys how to do a child theme from scratch.
Now, if you watched last week's video, you know how to do it with a plugin and
plugins are great, I'm not gonna be one to diss them.
Plugins allow you to do things that you couldn't otherwise couldn't because
you don't have the time or the know-how to do it from scratch.
There are a lot of plugins out there and, in fact, I'd never seen the plugin that allows you to do
a child theme and it does give you a lot of really robust capabilities that could be
a time saver, if you didn't know how to do this.
The thing is, this is really simple and something that you could do and save your website the
workload of having another plugin and that's what we're gonna cover in this
video.
To do this, all you need is FTP access.
Here we're using GoDaddy's FTP access that they allow through a browser.
Which is really nice and I've already navigated to the themes folder within our website.
You're also going to need a text editor of some sort.
Now, I'd love using Sublime as an example.
Sublime is free, it's beautiful.
It's very easy to use and did I mention it was free.
It's great for really simple jobs like this; but, it doesn't offer the FTP access that you
might see in more robust text editors;but, it's what we're going to use here and it's what
I recommend for somebody that hasn't had one up until this point.
You can download that.
Just go to Google and type in "Sublime Text Editor".
We're gonna be using that to edit the singular file that we need to start our
child sheet.
So, to do this, just to demonstrate how simple it is, we're just gonna get into it.
You need a folder and you need to name that folder whatever you want.
Let me shrink my face down, so we can really focus on the folder over here.
I've named this "Sparkling Child"; because, if you look at the theme that Kori is
using for WordPress Wednesday it is titled "Sparkling".
Now, we don't HAVE to do that.
We can name this folder whatever we want.
We can name it "YOLO Child" if we wanted to.
We could still make WordPress recognize that this is the child of the "Sparkling" theme.
In order to save yourself the trouble, and more importantly, save anybody behind you
the trouble of finding what child belongs to what parent, it's best practice just to
name it the name of the parent theme.
In this case it's "Sparkling" and then "Child".
Inside of here we need to put one file.
Style.CSS
That's where this text editor is going to come in handy.
I've already named it "Style.CSS"
In Sublime, you can choose over here on the far right what the context of your file is going
to be.
In this case we've chosen CSS and we're gonna put an open comment.
Just like that.
Then, we're going to close it just so we don't forget.
We don't want to forget to close that comment out.
We're going to put a series of designations within this comment block that
WordPress actually reads.
Some of them are more important than others.
First, we're going to start with the theme name.
Again, we can name this whatever we want.
I could call this theme name "Yolo Bob" and it wouldn't be
a big deal.
But, again, help yourself.
Help people that come behind you.
it's just best practice.
So, we're going to name it "Sparkling Child".
We can put the theme URI, which is going to be the
URL of the location of the where the theme is.
Not necessarily where it's implemented; but, let's say you were a
developer and you host this theme somewhere you can put this URL
in here somewhere.
Again, this isn't terribly necessary.
It's just great information to have at the beginning of the style.css.
Then, we're going to put the description.
This is all located inside of the area when you're choosing your themes.
So, we could be incredibly descriptive and say "This is the child theme of Sparkling parent theme"
Or it could be silly.
"My child is going to grow up big and strong."
Then, we can put the author.
I think it's putting the semicolon because it's contextually CSS and it wants to
help me out; but, it's not necessary within a comment.
We could put the author URI.
Again, not necessary.
Here is the most important part of this entire process within this comment block.
This is what WordPress is looking for as far as the parent theme.
You need a type template and then type the exact folder name of the parent theme.
Not just the parent name, itself.
For example, if "twentyfourteen" were our parent theme
yes, that's the name of our parent them; but, that's not what you're going to put
here because you want it to be the exact folder name.
When it comes to themes like "twentyfourteen", their exact folder name is all lower case
and all one word.
It would be "twentyfourteen".
Now, this isn't our parent theme.
I'm just using this as an example.
Mostly because most people work with these themes and they come across
that problem where they type in that exact theme name and they're
having issues.
It's the name of the folder itself.
In our case, it is "Sparkling".
Then, we can put a version number if we want to.
So, we can put "1.1" if we really needed to.
This is all you need, guys, for your child theme.
If I were to save this...
Let's go ahead and do that.
"File"
"Save As"
Let's navigate to that folder that we just created for our child theme,
which was "Sparkling Child".
And if we saved it inside of here.
We're good to go here.
Let's go ahead and close that out.
Also, another good practice; when you're naming your folders, it's good to go ahead
and put that dash in there.
Don't leave any space. It's just good practice.
So, we've got Sparkling Child.
This is our folder that we're going to upload into our themes folder on our website.
To do that, let's open up that GoDaddy browser FTP access that we have.
To kind of show you guys how we arrived at this point, you go to "wp-content".
You go to your themes folder and this is what is going to be located inside of your
themes folder.
All of your themes.
You're going to take that folder that you just created and you're gonna just
drag it right in there.
If you're using GoDaddy or if you're using FileZilla.
One of those robust text editors, you just copy and paste it in there.
Now, when we go to manage themes; which is under appearance,
and then themes and we reload this.
Now, we have "Sparkling Child".
We're going to activate this child and we're going to see a problem right away.
Let's go ahead to the front of the website.
I'm going to walk you guys through this process to explain to you guys what everything
is doing.
If we look at it, right now, it's completely without style.
That's because that "style.css" that we uploaded into our child theme folder
is completely replacing the style.css sheet of our parent theme.
Now, there's a couple different way you could remedy this.
You could go to your style.css in your parent theme.
Copy and paste the whole thing into your new style sheet.
That's not really best practice.
If, for some reason, you update your theme and the developers of that theme change
style name or added new styles in there, that's not going to be present in your new
style sheet; because, it's only going to have what you copied and pasted to
begin with.
It just so happens there's a piece of code that you can put that pulls the
entire style sheet dynamically and that's what we're going to add in here.
So, we're going to go to "Appearance" and we're going to go to "Editor" and this is
going to give us the same access that we're going to have inside of our text editor
and we're going to put that code that we were just talking about.
We're going to his the "@" symbol.
"Import URL"
Open parenthesis, single quotation.
We're going to go back one folder.
(dot dot)
We're going to name the folder of our parent them,
which is "Sparkling"
so, we're coming out of our child theme folder and
going into the parent theme folder and saying
"Pull that styel.css"
Pull the whole thing.
Then, we're going to hit update file.
Now, I'm going to have all these snippets for you guys in the
description.
So, I'm going to be these snippets for you guys in the description box.
So, that'll save you guys some time; but, now we're pulling the textile sheet
that we're working with before.
As we can see here, don't mess with me.
If it didn't work, that means we didn't call it correctly.
So, we went back one folder.
Went to "Sparkling"
Style.css
Maybe we just need to give a second.
(Or maybe we need to hug that closer to that)
We're going to update that again.
Maybe there doesn't need to be a space between "URL".
I'm going to reload that.
Now, we're pulling it appropriately.
So now, anything that we pull or put after this...
So, if we were to want to change the background color of our little header area,
let's go ahead and grab whatever that container is.
It looks like it's "nav bar".
Since we're pulling all of the styles, all of the styles from our parent theme are like
they're loading dynamically all the way down the page of our
new one.
But, anything we add after that is going to override it.
So, if we were to go here and do ".navbar" and say "background"
"Color"
"Background"
Let's use the right property.
"Background color"
Make it white and update that.
That's gonna override our old style sheet.
That should, anyway.
You gotta make sure you're pulling the right class and everything.
It wants me to put an "Important' tag on it.
But, it's probably I'm not pulling that correctly to begin with.
That is the correct syntax I was using before and do that again.
We're going to hit "Update" and this should work.
You gotta make sure you're using it in the same way they're using it in
the previous style sheet.
And it's working appropriately, now.
It was "navbar.navbar-default"
Just an example, you don't need to use important tags.
You just need to make sure you're using the same names in the same way
that you are in this original style sheet.
And everything works dandy.
Updates that she does now to this Sparkling theme will pull in appropriately
and any custom updates that she's done for the purpose of branding this website
for WordPress Wednesday will work great.
I really hope this helps you guys out.
I really hope it helps you understand just how simple this is and if you have any
questions, guys, please put them down in the comment section and
we'll be happy to address it.
Thanks for letting me host this first WordPress Wednesday.
It was a pleasure; but, I'll see you guys later.