1
00:00:01,030 --> 00:00:06,700
In this video you'll make almost the same exact changes to a development site as you did in the last

2
00:00:06,700 --> 00:00:07,210
video.

3
00:00:07,300 --> 00:00:13,120
But this time you'll let a plug in do the work will start from one of the migration copies of the previous

4
00:00:13,120 --> 00:00:18,230
photography site and create a child theme with just a few clicks using a plugin.

5
00:00:18,370 --> 00:00:23,370
You'll check out the plug in options in the Wordpress plugin repository for creating child themes.

6
00:00:23,440 --> 00:00:27,430
And use one of them to create the necessary files and configuration.

7
00:00:27,430 --> 00:00:28,240
Let's get started.

8
00:00:29,670 --> 00:00:30,840
First to get started.

9
00:00:31,020 --> 00:00:36,790
Open your local development environment like I have here and log into the Wordpress dashboard.

10
00:00:36,870 --> 00:00:44,210
In the last local environment site that we worked on in my case it's called Live Dasch site.

11
00:00:44,240 --> 00:00:50,780
This is the one we've got the affinity theme plugged into our original content that we edited within

12
00:00:51,050 --> 00:00:52,210
2014.

13
00:00:52,460 --> 00:00:58,730
And if you remember in the last video we edited the CSSA the style sheet to make these lines white in

14
00:00:58,730 --> 00:01:08,170
the footer if you noticed I had the say open inside though WordPress dashboard to the ADD plug ins area

15
00:01:08,350 --> 00:01:13,750
under plug ins add new and I did a search for child theme.

16
00:01:13,750 --> 00:01:19,030
There's one child themed creator that I have that I've used a lot here child themed configurator and

17
00:01:19,030 --> 00:01:25,170
I can see it does have quite a few installs and is compatible with this version updated very recently.

18
00:01:25,180 --> 00:01:29,260
There are a couple more in here that I have used and get good reviews.

19
00:01:29,260 --> 00:01:33,910
One click child theme over here with the purple logo 70000 installs.

20
00:01:34,120 --> 00:01:41,380
Although it's been updated not so recently and says untested with this new version of Wordpress and

21
00:01:41,380 --> 00:01:47,320
so I'm going to choose the child theme configurator and go ahead and open that up in your local environment

22
00:01:47,350 --> 00:01:48,970
and click Install now.

23
00:01:50,220 --> 00:01:54,520
Now it doesn't start or click activate plug in.

24
00:01:54,560 --> 00:02:01,280
Now that I have that activated I can look under Tools and child themes is where the settings are configured.

25
00:02:02,560 --> 00:02:08,870
Before I do any change it's to create a child theme using the child theme configurator plug in.

26
00:02:09,130 --> 00:02:16,030
I want to go and make sure I look at what's happening now under appearance themes and label my original

27
00:02:16,090 --> 00:02:21,680
child theme that I had created manually just so that I know which one it is.

28
00:02:23,680 --> 00:02:30,710
The name of the theme is defined within the stylesheet and that's true of our child theme as well.

29
00:02:30,700 --> 00:02:36,220
Whichever theme that you have active you can just click editor and wordpress will navigate right to

30
00:02:36,220 --> 00:02:38,440
the stylesheet.

31
00:02:38,610 --> 00:02:45,750
I can edit files within this WordPress file editor but it's best practice to bring them into your local

32
00:02:45,750 --> 00:02:48,980
machine edit them and then load them back up.

33
00:02:49,020 --> 00:02:58,080
However just for this simple change I can label this affinity child one just so I know that's the one

34
00:02:58,410 --> 00:03:02,590
that I updated manually and created the files for.

35
00:03:02,610 --> 00:03:08,790
And when that tells me the file was edited successfully I could go back to appearance themes and we'll

36
00:03:08,790 --> 00:03:13,550
see that that's the name of the child thing great.

37
00:03:13,560 --> 00:03:19,530
So that means that if I activate another theme say the original affinity theme.

38
00:03:19,850 --> 00:03:27,760
Any changes that I made withinside that original child theme would be no longer valid.

39
00:03:27,760 --> 00:03:34,150
So if I refresh the page at the website and scroll to the bottom where the footer is I should have grey

40
00:03:34,150 --> 00:03:36,430
lines instead of white lines.

41
00:03:36,430 --> 00:03:40,120
There we go below the title.

42
00:03:40,140 --> 00:03:46,530
So now let's use the plug in to create a new child theme and we'll make sure we label it affinity child

43
00:03:46,610 --> 00:03:49,170
2 or something where we can tell the difference.

44
00:03:50,810 --> 00:03:59,140
Go ahead and navigate to Tools child themes once again and let's get started making a child theme I'd

45
00:03:59,140 --> 00:04:05,650
like to create a new child theme so I'm going to select that radio button and my parent theme I am going

46
00:04:05,650 --> 00:04:10,370
to choose affinity and I'll click analyzed first.

47
00:04:13,770 --> 00:04:21,180
The plugin gives me a message looks like it appears to be OK to use as a child theme.

48
00:04:22,350 --> 00:04:24,540
And it loads additional stylesheets.

49
00:04:24,570 --> 00:04:30,840
So there are a couple of things that it recommends that I do.

50
00:04:31,050 --> 00:04:36,510
If you look at the options here they are pretty straightforward and you can most likely leave the default

51
00:04:36,510 --> 00:04:42,050
selections for the most part as I scroll down a little bit.

52
00:04:42,120 --> 00:04:48,420
It did say that it loads additional stylesheets and I can choose to create a separate style sheet so

53
00:04:48,420 --> 00:04:55,640
that I can edit this style sheet although I know I'm not going to edit the icons font style sheet.

54
00:04:55,650 --> 00:05:01,350
And so I'm just going to leave it as the default primary style sheet and I'm going to use the word Press

55
00:05:01,410 --> 00:05:02,100
style.

56
00:05:02,140 --> 00:05:02,590
Hugh

57
00:05:05,180 --> 00:05:08,960
and I am going to go ahead and look at it wants to name it.

58
00:05:08,960 --> 00:05:10,730
Affinity child O2.

59
00:05:10,790 --> 00:05:15,920
And actually if you look at the name of the folder it's going to use it already saw that I had an affinity

60
00:05:15,920 --> 00:05:22,750
W.P. Come child name for a theme folder and it placed an 0 2 on there and that's fine.

61
00:05:23,060 --> 00:05:25,100
We will call it affinity child.

62
00:05:25,100 --> 00:05:26,160
How about just two.

63
00:05:26,240 --> 00:05:32,300
Since I had a one in the last one and I can go ahead and use all these default settings that came from

64
00:05:32,300 --> 00:05:38,180
the original theme and this box is usually used if it is the first time that you're configuring the

65
00:05:38,180 --> 00:05:43,820
child theme so that all the settings if you have made settings to the menus and the widgets and customize

66
00:05:43,820 --> 00:05:47,390
your settings that are stored in the database that will be passed over.

67
00:05:47,780 --> 00:05:49,810
So create a new child theme.

68
00:05:49,850 --> 00:05:50,610
Yes.

69
00:05:52,120 --> 00:05:52,400
Great.

70
00:05:52,440 --> 00:05:57,670
It says it's been generated successfully and it wants me to preview it before activating it.

71
00:05:57,670 --> 00:05:59,320
And so I'll just click the preview button

72
00:06:02,480 --> 00:06:08,230
and it opens the customize or previewing the child theme itself.

73
00:06:10,920 --> 00:06:13,560
Looks normal I could add the footer.

74
00:06:13,560 --> 00:06:23,820
I do have the gray line so I'll close the previewer which is a version of the custom or.

75
00:06:24,130 --> 00:06:30,310
And I think it's finished so I am going to come outside of the child theme configurator settings page

76
00:06:30,310 --> 00:06:32,340
and go to appearance themes.

77
00:06:37,040 --> 00:06:43,680
And here it is affinity child too and with the plug in it's pretty nice that it puts the screen shot

78
00:06:43,700 --> 00:06:44,850
in there for you.

79
00:06:44,930 --> 00:06:51,430
But if I activate that child theme remember I previewed it which if you don't do that at first and you'd

80
00:06:51,430 --> 00:06:58,510
like to preview any theme that's not active if you just click theme details we've done this once before

81
00:06:58,510 --> 00:07:01,480
you can click live preview right at the bottom there.

82
00:07:01,860 --> 00:07:03,150
Whoops.

83
00:07:03,220 --> 00:07:07,830
I'm just going to cancel that and leave 2015 inside of my folder.

84
00:07:07,990 --> 00:07:13,120
But now that I have the new theme activated I click click visit site or I do have the site open here

85
00:07:13,120 --> 00:07:14,560
in another town.

86
00:07:14,560 --> 00:07:17,120
So I scroll back to the top and click refresh

87
00:07:21,080 --> 00:07:24,230
remember it opens a different image at random.

88
00:07:24,230 --> 00:07:27,770
Each time someone opens the site so that looks great.

89
00:07:29,040 --> 00:07:36,210
Remember this local site will still be the old style sheet and it also still says live there in the

90
00:07:36,210 --> 00:07:43,080
title which is when we were working on our migrations and taking a site from local staging area to live.

91
00:07:43,080 --> 00:07:48,240
We changed that name so I'll just go in real quick to settings at my local site

92
00:07:51,930 --> 00:07:53,870
take it back to the normal name

93
00:07:59,220 --> 00:08:05,910
and now that we can see that child theme activated let's go look around and make that small edit inside

94
00:08:05,910 --> 00:08:08,110
of the file structure.

95
00:08:08,170 --> 00:08:11,480
So I'd like to pose a challenge to you at this point.

96
00:08:13,310 --> 00:08:21,080
I want you to look at your theme files inside of the Wordpress directory and I'd like you to find your

97
00:08:21,080 --> 00:08:29,510
new child themes files open them in a code editor and go ahead and place the code for the footer widgets

98
00:08:29,510 --> 00:08:38,320
that we had used before in our manually installed child the stop the video now and give it a go well

99
00:08:38,320 --> 00:08:40,600
I hope you got that done pretty easily.

100
00:08:40,600 --> 00:08:47,890
I'm going to open the code editor that I had the other files open in and here's the footer widgets piece

101
00:08:47,890 --> 00:08:49,810
of CSSA code that I need.

102
00:08:49,810 --> 00:08:51,850
So I'm just going to copy that at first.

103
00:08:52,000 --> 00:08:57,550
And inside my code editor I do have the whole file structure here and so I should be able to open W.P.

104
00:08:57,550 --> 00:09:02,550
content and themes and find the files for that child theme.

105
00:09:02,860 --> 00:09:09,490
Looks like I have them here it's the one labeled child too if you remember and it made the screen shot

106
00:09:09,490 --> 00:09:13,980
in and it made two other files functions stop THP and style that CSSA.

107
00:09:14,260 --> 00:09:22,180
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

108
00:09:23,080 --> 00:09:24,670
and I'll hit Control s.

109
00:09:24,820 --> 00:09:29,470
Now at that point if it were live I would have to upload this file to the server but since I can just

110
00:09:29,470 --> 00:09:34,630
save it on my computer into the file structure I should be able to go back right to the site and refresh

111
00:09:34,630 --> 00:09:43,680
the page and see those footer title borders go to white instead of gray grade I've made a change.

112
00:09:43,680 --> 00:09:52,830
The child theme I can also go in and look at the files under themes Ed. And I can see that that affinity

113
00:09:52,830 --> 00:10:00,450
child to stylesheet file has my new code in there and I did that without using the word press code editor

114
00:10:00,660 --> 00:10:08,670
but instead in my code editor on my local machine in this video you used a plugin to create the files

115
00:10:08,670 --> 00:10:12,370
necessary to make a child theme from a theme you have.

116
00:10:12,490 --> 00:10:19,650
You also edited the style dot CSSA file on your own to change a color in the footer.

117
00:10:19,670 --> 00:10:20,780
Nice job.

118
00:10:20,810 --> 00:10:26,630
Next you'll edit the functions that BHP file inside your child theme to change something not on the

119
00:10:26,630 --> 00:10:31,100
front end user facing part of the site but in the actual WordPress dashboard.

120
00:10:31,400 --> 00:10:31,840
Let's go