In this video you'll make almost the same exact changes to a development site as you did in the last
video.
But this time you'll let a plug in do the work will start from one of the migration copies of the previous
photography site and create a child theme with just a few clicks using a plugin.
You'll check out the plug in options in the Wordpress plugin repository for creating child themes.
And use one of them to create the necessary files and configuration.
Let's get started.
First to get started.
Open your local development environment like I have here and log into the Wordpress dashboard.
In the last local environment site that we worked on in my case it's called Live Dasch site.
This is the one we've got the affinity theme plugged into our original content that we edited within
2014.
And if you remember in the last video we edited the CSSA the style sheet to make these lines white in
the footer if you noticed I had the say open inside though WordPress dashboard to the ADD plug ins area
under plug ins add new and I did a search for child theme.
There's one child themed creator that I have that I've used a lot here child themed configurator and
I can see it does have quite a few installs and is compatible with this version updated very recently.
There are a couple more in here that I have used and get good reviews.
One click child theme over here with the purple logo 70000 installs.
Although it's been updated not so recently and says untested with this new version of Wordpress and
so I'm going to choose the child theme configurator and go ahead and open that up in your local environment
and click Install now.
Now it doesn't start or click activate plug in.
Now that I have that activated I can look under Tools and child themes is where the settings are configured.
Before I do any change it's to create a child theme using the child theme configurator plug in.
I want to go and make sure I look at what's happening now under appearance themes and label my original
child theme that I had created manually just so that I know which one it is.
The name of the theme is defined within the stylesheet and that's true of our child theme as well.
Whichever theme that you have active you can just click editor and wordpress will navigate right to
the stylesheet.
I can edit files within this WordPress file editor but it's best practice to bring them into your local
machine edit them and then load them back up.
However just for this simple change I can label this affinity child one just so I know that's the one
that I updated manually and created the files for.
And when that tells me the file was edited successfully I could go back to appearance themes and we'll
see that that's the name of the child thing great.
So that means that if I activate another theme say the original affinity theme.
Any changes that I made withinside that original child theme would be no longer valid.
So if I refresh the page at the website and scroll to the bottom where the footer is I should have grey
lines instead of white lines.
There we go below the title.
So now let's use the plug in to create a new child theme and we'll make sure we label it affinity child
2 or something where we can tell the difference.
Go ahead and navigate to Tools child themes once again and let's get started making a child theme I'd
like to create a new child theme so I'm going to select that radio button and my parent theme I am going
to choose affinity and I'll click analyzed first.
The plugin gives me a message looks like it appears to be OK to use as a child theme.
And it loads additional stylesheets.
So there are a couple of things that it recommends that I do.
If you look at the options here they are pretty straightforward and you can most likely leave the default
selections for the most part as I scroll down a little bit.
It did say that it loads additional stylesheets and I can choose to create a separate style sheet so
that I can edit this style sheet although I know I'm not going to edit the icons font style sheet.
And so I'm just going to leave it as the default primary style sheet and I'm going to use the word Press
style.
Hugh
and I am going to go ahead and look at it wants to name it.
Affinity child O2.
And actually if you look at the name of the folder it's going to use it already saw that I had an affinity
W.P. Come child name for a theme folder and it placed an 0 2 on there and that's fine.
We will call it affinity child.
How about just two.
Since I had a one in the last one and I can go ahead and use all these default settings that came from
the original theme and this box is usually used if it is the first time that you're configuring the
child theme so that all the settings if you have made settings to the menus and the widgets and customize
your settings that are stored in the database that will be passed over.
So create a new child theme.
Yes.
Great.
It says it's been generated successfully and it wants me to preview it before activating it.
And so I'll just click the preview button
and it opens the customize or previewing the child theme itself.
Looks normal I could add the footer.
I do have the gray line so I'll close the previewer which is a version of the custom or.
And I think it's finished so I am going to come outside of the child theme configurator settings page
and go to appearance themes.
And here it is affinity child too and with the plug in it's pretty nice that it puts the screen shot
in there for you.
But if I activate that child theme remember I previewed it which if you don't do that at first and you'd
like to preview any theme that's not active if you just click theme details we've done this once before
you can click live preview right at the bottom there.
Whoops.
I'm just going to cancel that and leave 2015 inside of my folder.
But now that I have the new theme activated I click click visit site or I do have the site open here
in another town.
So I scroll back to the top and click refresh
remember it opens a different image at random.
Each time someone opens the site so that looks great.
Remember this local site will still be the old style sheet and it also still says live there in the
title which is when we were working on our migrations and taking a site from local staging area to live.
We changed that name so I'll just go in real quick to settings at my local site
take it back to the normal name
and now that we can see that child theme activated let's go look around and make that small edit inside
of the file structure.
So I'd like to pose a challenge to you at this point.
I want you to look at your theme files inside of the Wordpress directory and I'd like you to find your
new child themes files open them in a code editor and go ahead and place the code for the footer widgets
that we had used before in our manually installed child the stop the video now and give it a go well
I hope you got that done pretty easily.
I'm going to open the code editor that I had the other files open in and here's the footer widgets piece
of CSSA code that I need.
So I'm just going to copy that at first.
And inside my code editor I do have the whole file structure here and so I should be able to open W.P.
content and themes and find the files for that child theme.
Looks like I have them here it's the one labeled child too if you remember and it made the screen shot
in and it made two other files functions stop THP and style that CSSA.
So if I open that one up all I have to do is go beyond the comment slash here and hit Control V to paste
and I'll hit Control s.
Now at that point if it were live I would have to upload this file to the server but since I can just
save it on my computer into the file structure I should be able to go back right to the site and refresh
the page and see those footer title borders go to white instead of gray grade I've made a change.
The child theme I can also go in and look at the files under themes Ed. And I can see that that affinity
child to stylesheet file has my new code in there and I did that without using the word press code editor
but instead in my code editor on my local machine in this video you used a plugin to create the files
necessary to make a child theme from a theme you have.
You also edited the style dot CSSA file on your own to change a color in the footer.
Nice job.
Next you'll edit the functions that BHP file inside your child theme to change something not on the
front end user facing part of the site but in the actual WordPress dashboard.
Let's go