Hello and thanks for watching WPBeginner. Today
you'll learn how to create
a WordPress child theme for your site.
Learning how to create a child theme puts you more in control of your WordPress website.
So when would you need to create a child theme?
If you want to make changes to your site,
the best way to do that is to make a child
theme that inherits all the code from the
original or theme.
But it also keeps all your changes in a safe place
that won't get overwritten when you update that theme.
So for requirements,
you want to have some understanding of HTML/CSS.
You also want to know how to copy and paste some code for php.
You also want to practice on a test site before
doing this on your live site.
You'll need to be able to access files on
your site by using an FTP client like Filezilla
to connect and upload files to your site.
So getting started,
I'm on a test site here and I am working with the
2013 theme that comes with WordPress.
First, I'll go to the wp-content/themes folder
on my wordpress installation and create a
new folder for the child theme. I'm going name
it wpbdemo.
Next, I'll open notepad and paste this code
inside.
I'm going to save it as style.css in the wpbdemo folder.
And basically, this file tells WordPress that
I'm using the 2013 theme as a template and
that this is a child theme here.
Remember that parent folder name is case sensitive
so we want to get that right. twentythirteen
is the name of the parent theme, it's also
the name of the folder that this file is looking for.
This last line and it shows how we import the parent's
stylesheet into the child theme.
Now that's all we need to do to officially
create a child theme. I can save this file,
go to my site appearance-->theme in the back end and I see my child theme here. I can activate it and
start using it immediately.
Even though I created child theme here, I
haven't added any custom code so my site is
pulling in all the parent theme's code right now. Let's
look at how we can change that.
Say I want to change some items on the
nav bar here. I want to change the color of
it. How do I find out what i'm using so I
can change that?
Chrome and Firefox have an inspect element
built in to show you the code behind a site.
Right now I'm using chrome so I'll right click on the
nav bar on my site and click inspect.
Now I have a split screen with code at the
bottom and my site at the top.
As I hover over different lines of code, the
site area is highlighted to tell me where I'm at.
I also have these triangles that are showing
how the site is nested. If I click on one,
it can expands to show more code inside that code.
With the navbar I see this is highlighted and I can look over here to see the background color and what it is
this is what I want to change.
With this inspect area, I can click on the
color here, test out the different colors for
my site. When I type something in, I see it
change over here immediately, which is cool, but it's
not changing the live site, it's just showing
me a preview of what it will look like. Its a pretty
nice feature for testing things out.
What I want to do to make it permanent is,
I want to go in, copy this code right here and
paste it in my styles.css file to make it
live on my site.
I can click and highlight the code and either
click ctrl+c or command+c to copy and go over
here and put it and paste it.
I need to save my file and go to my site, once I click refresh to see it live.
You can do the same thing for all the other
areas you want to change on your site. This
can be used to change things like font sizes, fonts, background
color, link color and so much more.
Next, we're going to look at how a page is setup. You
see this as one page but the back end,
there are several different template files
that are being used and that make up this whole page.
We have a header template, content, widget
area, footer area and more.
If I want to change the footer area and remove
the powered by WordPress, then I'll need to
deal with the footer template.
Go to the
parent folder for 2013, find the footer.php
file, I want to copy it and go back to my child theme
folder and paste it in there.
Now I can open up this file and edit it. I want
to replace the powered by WordPress area with
a copyright notice. I'll find the code I'm
working with and replace it like this.
Once I click save I can go to my site to
refresh and see that I removed that part in the footer.
In this next section, we'll go over how to
add some new functionality to your site.
When making changes to your site, you often
see tutorials telling you to add php code
to your functions.php page. This is where
a lot of your site's functionality is kept.
To make changes, we want to create a new file
called functions.php in our child theme.
I'm going to add some code that will change
the default header image for my site.
I'll add this code to my functions.php file and
it tells my site that this will be the new
default header and where to look for the images.
I've already created the new header image
along with a header thumbnail and I've uploaded
them to my child theme area here.
This mimics the 2013 parent theme folder structure.
And now I can go to my appearance-->header and
see my new function in action.
There are a ton of function snippets that you can
add to your site to change it up how you want.
Over here's a list of over 25 of the most useful
functions you can add to your site to play
with them and customize your site even further.
Now let's look at our site and see some of the
changes we've made overall.
You see we've changed the header image here, the nav
color and down here we updated the footer
to show copyright information.
On the back end, we've copied all the files
and folder structure over to create a working
child theme that if there is an update to
the parent, I can update the parrent and I won't
lose all the work I just did.
I hope you liked this video and found it helpful.
If you did, click on the like button below and leave us a comment.
And if you want to receive more helpful videos don't forget to subscribe to our channel
and check out WPBeginner for more useful information on WordPress
