1
00:00:00,700 --> 00:00:06,060
In this lesson you'll create your own child theme using the standalone theme we used from automatic

2
00:00:06,300 --> 00:00:12,660
as the parent theme by using your code editor and a few snippets of code you'll manually create your

3
00:00:12,660 --> 00:00:15,060
own theme based on another.

4
00:00:15,060 --> 00:00:20,640
Here's where you make any code edits to customize the site using best practices by editing the child

5
00:00:20,640 --> 00:00:24,520
theme instead of the original.

6
00:00:24,540 --> 00:00:31,440
Let's start by just reviewing what a child theme is here from WordPress dot org a child theme is a theme

7
00:00:31,440 --> 00:00:36,720
that inherits the functionality and styling of another theme called the Parent theme child themes or

8
00:00:36,720 --> 00:00:40,690
the recommended way of modifying an existing theme.

9
00:00:40,690 --> 00:00:42,430
Now we went over that in the last video.

10
00:00:42,510 --> 00:00:47,190
But if you scroll down on the same page there's a little bit of instruction about how to create a child

11
00:00:47,190 --> 00:00:48,270
theme.

12
00:00:48,360 --> 00:00:54,390
You can also find a lot more detail if you Google something like how to create a child theme in wordpress.

13
00:00:54,540 --> 00:00:58,080
You'll come up with a lot of different tutorials to do it.

14
00:00:58,080 --> 00:00:59,730
It's not actually that hard.

15
00:00:59,730 --> 00:01:04,300
You do need a code editor like Adam that we've used in the past.

16
00:01:04,320 --> 00:01:11,310
First you need a child themed directory which is basically a folder called Something child and then

17
00:01:11,310 --> 00:01:19,740
you need to files inside of it style that CSSA and functions dot THP each one needs to be populated

18
00:01:19,740 --> 00:01:23,280
with a little bit of code but that's all you need.

19
00:01:23,280 --> 00:01:29,730
And then you can add your CSSA styles or your functions dot ph peacoat code snippets that you might

20
00:01:29,730 --> 00:01:35,330
be using to change the site and add them to your child theme only.

21
00:01:35,390 --> 00:01:37,730
Here's a challenge for you.

22
00:01:37,730 --> 00:01:39,280
Go ahead and open up.

23
00:01:39,290 --> 00:01:45,520
Start map or whatever you're using for your local development environment and open up your fire weed

24
00:01:45,530 --> 00:01:47,900
photography site locally.

25
00:01:47,900 --> 00:01:55,800
Open up the Wordpress dashboard and look at the themes and then go ahead and look at the Wordpress Codex

26
00:01:55,820 --> 00:02:04,160
at Kodak's dot WordPress dot org slash child underscore themes or Google one of the tutorials maybe

27
00:02:04,160 --> 00:02:11,720
even use this one from WBM you dev dot org if you like but your challenge is to create a child theme

28
00:02:12,020 --> 00:02:20,120
of this one called affinity and activated puzzles video now and see if you can do it.

29
00:02:22,530 --> 00:02:28,310
I hope you did well with that whether you're using map or local by flywheel for your local development

30
00:02:28,310 --> 00:02:32,220
environment or even creating a child theme on your live server.

31
00:02:32,240 --> 00:02:38,480
You'll just need to find your file structure and go into WP content and the themes folder to take a

32
00:02:38,480 --> 00:02:41,670
look at the names of the themes you can use as parent themes.

33
00:02:43,380 --> 00:02:48,560
First I'm going to find the location on my computer that has the files for this site.

34
00:02:48,870 --> 00:02:55,080
If you're using map it would be under the map folder and reached the docs and your site name the using

35
00:02:55,080 --> 00:02:56,670
local by flywheel.

36
00:02:56,790 --> 00:03:04,240
It's under your username and the local sites folder then the name of the site under app and public.

37
00:03:04,350 --> 00:03:12,450
If I open WP content and then the themes folder that's where all my themes are located you can see in

38
00:03:12,450 --> 00:03:19,950
this example I've already created a child theme for the affinity theme and in this case affinity is

39
00:03:19,950 --> 00:03:26,600
the name of the parent theme and so I named the child theme affinity Dasch child.

40
00:03:26,670 --> 00:03:34,350
If I open that up you'll see two required files inside the child theme folder and I've also included

41
00:03:34,350 --> 00:03:41,790
a file called screenshot here and will have a screenshot so that in our appearance theme's area in wordpress

42
00:03:42,090 --> 00:03:46,150
our child theme will show the same screen shot as our parent theme.

43
00:03:48,020 --> 00:03:51,190
You know you can name your child themes anything you want.

44
00:03:51,320 --> 00:04:00,140
I'm going to go in here and just to show you I'm going to create a new folder and make another child

45
00:04:00,170 --> 00:04:03,030
theme in the same way that I did before this one.

46
00:04:03,030 --> 00:04:06,140
Just call it affinity child too.

47
00:04:06,200 --> 00:04:12,170
So if I open that folder there's nothing in here I need to create the two files and then find the screenshot

48
00:04:12,470 --> 00:04:14,310
and copy it into here.

49
00:04:14,330 --> 00:04:18,540
That way I can go in and activate affinity child to in my wordpress site.

50
00:04:20,090 --> 00:04:25,660
Now inside WordPress dot org on the child themes page of the codex.

51
00:04:25,700 --> 00:04:32,640
Further down is a block of code we can copy and paste into a style dot CSSA file.

52
00:04:32,960 --> 00:04:39,800
So I'm just going to select that entire code and press control-C to copy and if I open my code editor

53
00:04:40,110 --> 00:04:43,700
Adam you can see that I have it in a lighter color.

54
00:04:43,700 --> 00:04:46,690
Now I'm doing some video lesson updates.

55
00:04:46,760 --> 00:04:49,980
And so my item is in a letter color easier to see on the videos.

56
00:04:50,030 --> 00:04:56,980
You can see I have the style that says under finity child selected and open right here.

57
00:04:57,110 --> 00:05:02,450
Now if I open affinity child to can see there's no folders there but in ADOM I can just right click

58
00:05:02,870 --> 00:05:08,660
and I can click new file and it will place it inside of the folder that I right clicked.

59
00:05:08,660 --> 00:05:12,010
And so I'm going to call that style that see SS.

60
00:05:12,080 --> 00:05:14,820
It has to be named that for every child.

61
00:05:15,320 --> 00:05:22,140
And I'll just press enter and I have a blank file that I can place that code in to control V to paste.

62
00:05:22,340 --> 00:05:26,940
And there's my working CSSA style that CSSA file.

63
00:05:27,080 --> 00:05:34,650
Now for me the only two things that you need to have are the theme name and the template.

64
00:05:34,970 --> 00:05:37,710
And so just to make it easy to understand.

65
00:05:38,000 --> 00:05:44,690
Let's go ahead and just take away everything else except for the theme name and the template.

66
00:05:44,900 --> 00:05:48,570
And these two comment tags at the top and bottom.

67
00:05:48,590 --> 00:05:51,940
So this is going to be an affinity.

68
00:05:52,160 --> 00:05:55,440
Affinity child 2 is what I want to name it.

69
00:05:55,640 --> 00:05:59,420
And the template is going to be the folder name of the parent theme.

70
00:05:59,420 --> 00:06:03,900
In my case it's just affinity just like that.

71
00:06:03,980 --> 00:06:12,570
So I can click control apps or or press control s or file save to save my file.

72
00:06:12,830 --> 00:06:14,790
And now that's done.

73
00:06:14,960 --> 00:06:18,490
The next one I need is called functions dot ph.

74
00:06:18,590 --> 00:06:25,590
So again I'm right clicking in the folder I want clicking new file inside of Adam and again in the file

75
00:06:25,590 --> 00:06:31,330
name for your child theme for this file needs to be functions dot HP WordPress.

76
00:06:31,340 --> 00:06:33,910
We'll be looking for that file name.

77
00:06:34,100 --> 00:06:36,600
So I created a blank file called functions.

78
00:06:36,810 --> 00:06:44,460
We now go back into the child themes page in the Wordpress codex and a little bit lower down there's

79
00:06:44,480 --> 00:06:49,500
actually two blocks of code that you could use in the functions duppy.

80
00:06:49,970 --> 00:06:55,240
The first one it isn't really useful as much as the second one.

81
00:06:55,520 --> 00:07:03,110
If you're stop child theme style that CSSA contains actual CSSA code as it says here in the document

82
00:07:03,650 --> 00:07:06,170
you'll need to enqueue it as well.

83
00:07:06,260 --> 00:07:13,400
And so on we're going to use the second larger block here in order to place that into our functions.

84
00:07:13,400 --> 00:07:14,770
Dot ph P.

85
00:07:15,020 --> 00:07:21,510
Now when I grab this code you can see that it has an opening and closing P-H P-TECH.

86
00:07:22,040 --> 00:07:29,400
I just hit Control C so that I'm going to place that in atom in my functions dot ph P file for my child.

87
00:07:29,870 --> 00:07:36,980
I am going to get rid of the second ph P closing tag However because the way WordPress works it stacks

88
00:07:36,980 --> 00:07:43,610
these files together and we want to open with the HP Dagh but we don't need to close it because the

89
00:07:43,610 --> 00:07:50,740
final file usually footer that pupae closes that ph for us inside of the Wordpress files.

90
00:07:52,370 --> 00:07:55,300
Now we're not quite finished with this file yet.

91
00:07:55,300 --> 00:08:02,350
This is just an example set of code where parents style needs to reflect what the parent theme calls

92
00:08:02,440 --> 00:08:04,350
its stylesheet.

93
00:08:04,360 --> 00:08:06,040
So this is just a comment in here.

94
00:08:06,040 --> 00:08:10,840
This is the 2015 style actually for the 2015 theme.

95
00:08:10,840 --> 00:08:18,010
You would take this title right here and place it inside of the single quotation marks thereby defining

96
00:08:18,010 --> 00:08:24,760
the name of the variable parent style in your functions that the HP file since we're not using the 2015

97
00:08:25,030 --> 00:08:29,060
for a parent theme we're using affinity for our parent theme.

98
00:08:29,080 --> 00:08:39,590
Let's take a look at the functions that ph P inside our parent theme and try to find that parent style.

99
00:08:39,630 --> 00:08:42,380
It's usually called something dash style.

100
00:08:42,510 --> 00:08:47,860
And I might just assume that it's called affinity dash style that I need to find it and make sure so

101
00:08:47,970 --> 00:08:52,010
that my functions that huge file for my child theme works correctly.

102
00:08:52,410 --> 00:09:01,310
So inside of Adam if I like if I press control f for find it will open up a window where I can find

103
00:09:01,310 --> 00:09:04,440
something if I just type dash style.

104
00:09:04,670 --> 00:09:10,790
It's telling me it's found one item and I can click find and it scrolls down inside the file to where

105
00:09:10,790 --> 00:09:11,590
that is.

106
00:09:11,690 --> 00:09:19,550
So I could see that the W in Q style has defined affinity style as the name of that style sheet.

107
00:09:19,550 --> 00:09:21,390
So I'm just going to copy that.

108
00:09:21,430 --> 00:09:27,890
Control-C go back into my functions that Peachi for my child theme and that's what I'm going to place

109
00:09:27,890 --> 00:09:34,580
between the single quotes and close this find window to get rid of that styling.

110
00:09:34,580 --> 00:09:35,920
So it's not so confusing.

111
00:09:35,960 --> 00:09:45,380
Now I'm going to paste affinity style and of course I don't need this comment line right here so I can

112
00:09:45,380 --> 00:09:47,350
be a little confusing so I'll get rid of that.

113
00:09:47,540 --> 00:09:53,760
And that is all the change that we need the parents style is defined as affinity style.

114
00:09:53,840 --> 00:09:58,310
So if I just hit phials save or control S for save.

115
00:09:58,610 --> 00:10:01,500
Now there's only one more item.

116
00:10:01,520 --> 00:10:02,520
Let's go back

117
00:10:05,270 --> 00:10:10,080
inside of the infinity child's you know we can see two out of the three files.

118
00:10:10,100 --> 00:10:12,810
Now where are we going to find our screenshot.

119
00:10:13,070 --> 00:10:21,320
Well we can just go back into our themes folder and in the parent theme there is usually a screenshot

120
00:10:21,350 --> 00:10:24,660
file right in the main folder of the theme.

121
00:10:24,740 --> 00:10:26,350
There it is it's called screen.

122
00:10:26,360 --> 00:10:28,820
And again it has to be called that.

123
00:10:28,880 --> 00:10:34,360
So that WordPress knows what to look for to display it on the appearance beam's page in the Wordpress

124
00:10:34,370 --> 00:10:35,360
dashboard.

125
00:10:35,390 --> 00:10:43,550
I'm just going to right click and click copy and then go back into my child themed folder right click

126
00:10:43,550 --> 00:10:45,890
anywhere there and click paste.

127
00:10:45,890 --> 00:10:48,350
Now I have a copy of that screenshot.

128
00:10:48,430 --> 00:10:55,510
It's going to look the same as our parents screen shot this is all explained among the two blocks of

129
00:10:55,510 --> 00:11:02,310
code here especially in this paragraph on whoops on WordPress dot org.

130
00:11:02,650 --> 00:11:09,880
Now all that's left is to log into the Wordpress dashboard and go to appearance themes and take a look.

131
00:11:09,880 --> 00:11:16,240
Now I have the affinity child to theme it's using the same screenshot as the parent theme.

132
00:11:16,510 --> 00:11:23,260
And if I roll over the child theme thumbnail right here and click activate I just activated that child

133
00:11:23,290 --> 00:11:25,230
theme looks like there's no errors.

134
00:11:25,510 --> 00:11:29,890
And let's just check out what it looks like by opening it in the new tab.

135
00:11:30,270 --> 00:11:35,900
It looks like it's working all the way down to the footer.

136
00:11:35,930 --> 00:11:43,130
Let's finish up by making one more change within the style does CSSA file of our child theme and we'll

137
00:11:43,130 --> 00:11:47,760
see that that makes some changes to the site without affecting the parent theme at all.

138
00:11:49,340 --> 00:11:51,800
Maybe we could choose something down here on the footer.

139
00:11:51,800 --> 00:11:58,760
For instance these lines at the bottom of the widget titles on the footer aren't very bright.

140
00:11:58,760 --> 00:12:07,050
Maybe I can make those a bright white instead of this low gray the way I'd find out what the CSSA styles

141
00:12:07,050 --> 00:12:13,890
that I need to change are this by in Firefox at least going under Tools web developer and opening the

142
00:12:13,890 --> 00:12:21,270
inspector the inspector inspectors something when this is activated inside of this Firefox utility that

143
00:12:21,270 --> 00:12:26,600
when I choose an element on the Web site it'll tell me about it on the right hand side.

144
00:12:26,850 --> 00:12:34,210
Here's the actual markup code on the right and down here at the bottom are the CSSA styles.

145
00:12:34,500 --> 00:12:42,570
So I can see that there the let's see this is defined as a border that's one pixel that's solid and

146
00:12:42,570 --> 00:12:44,750
it's this color.

147
00:12:44,810 --> 00:12:53,090
So if I take this whole style element called Dot widget title that's a class along with the first bracket

148
00:12:53,090 --> 00:13:02,900
of this hit copy that's come into Adam and just below my style that's the SS of my child theme.

149
00:13:02,900 --> 00:13:08,670
I'm going to start out the code block by doing that then I'll hit enter to the next line.

150
00:13:11,180 --> 00:13:14,070
I'll go back over here and inside of the brackets.

151
00:13:14,070 --> 00:13:16,030
I want to change this border.

152
00:13:16,050 --> 00:13:22,920
Bottom so I'll just Control-C copy that and place that in my code here.

153
00:13:22,960 --> 00:13:26,860
I'll let enter one more time and I just need a closing bracket.

154
00:13:28,850 --> 00:13:29,360
And great.

155
00:13:29,360 --> 00:13:41,180
So instead of having this dark gray color I'd like that to be white great if you don't know your color

156
00:13:41,180 --> 00:13:43,010
hexadecimal codes.

157
00:13:43,010 --> 00:13:48,680
You can go to Photoshop or Pichler one of those image editors and pick a color and find out what its

158
00:13:48,680 --> 00:13:49,940
number is.

159
00:13:49,940 --> 00:13:55,200
So I hit control as to save and just a check.

160
00:13:55,220 --> 00:13:59,660
Nothing has changed within the style sheet of the parent theme.

161
00:13:59,660 --> 00:14:08,840
In fact the parent theme is using this huge amount of styling and the child theme pulls that in automatically

162
00:14:09,050 --> 00:14:17,680
because we were able to cue the styles in the functions dot ph P Well let's go back to our Web site

163
00:14:17,680 --> 00:14:19,350
and take a look.

164
00:14:19,450 --> 00:14:27,100
If I just close the inspector and refresh the page since I saved that style data the file.

165
00:14:27,580 --> 00:14:32,260
Well sometimes you might have to do a little bit of experimentation because I can see that didn't change

166
00:14:32,260 --> 00:14:35,460
that border bottom to white.

167
00:14:35,470 --> 00:14:44,590
So I did go back into the web developer toolbar and open the inspector actually.

168
00:14:44,600 --> 00:14:50,120
And when I look at this area I also see that there's a dot footer widgets there's a footer widgets class

169
00:14:50,120 --> 00:14:54,750
in front of the widget title as it is defining its border and its color as well.

170
00:14:54,770 --> 00:15:02,450
So if I take that footer widgets class and paste it right in front with a space for widgets and widget

171
00:15:02,450 --> 00:15:06,650
title and then the border bottom can be defined as white.

172
00:15:06,650 --> 00:15:10,570
So I get control S and save it.

173
00:15:10,790 --> 00:15:14,700
Turn off the web developer and let's see if I refresh.

174
00:15:14,740 --> 00:15:18,900
What that does to the border of the footer titles.

175
00:15:18,910 --> 00:15:21,170
Nice nice and white.

176
00:15:21,170 --> 00:15:21,550
Great.

177
00:15:21,550 --> 00:15:28,870
And we can see that that's only been done to the child theme not the parent theme.

178
00:15:28,870 --> 00:15:36,940
So when they release affinity 1.1 or 1.5 or 2.0 I'll be able to update infinity still get all the newest

179
00:15:36,940 --> 00:15:39,430
stuff when they update the theme.

180
00:15:39,610 --> 00:15:41,970
But my changes will still be preserved.

181
00:15:41,980 --> 00:15:43,470
Because they're within this affinity.

182
00:15:43,470 --> 00:15:51,240
Champeen in this video you created your own child theme using the affinity theme as a parent.

183
00:15:51,560 --> 00:15:57,860
Then you activated it and made a change to the style that CSSA file to change the website without touching

184
00:15:57,860 --> 00:15:59,290
the parent theme.

185
00:15:59,300 --> 00:16:06,800
Nice job in the next video you'll create a child theme using a plugin which can make it slightly easier.

186
00:16:06,980 --> 00:16:12,700
Then you'll add some code to the functions dot ph profile to make a fundamental change to the Web site

187
00:16:12,950 --> 00:16:15,290
again without touching the parent theme.

188
00:16:15,290 --> 00:16:15,770
See there.