1
00:00:00,800 --> 00:00:04,390
You saw in the last video how you can avoid editing a child theme.

2
00:00:04,460 --> 00:00:10,640
That's part of a framework like agenesis by adding CSSA to a in instead of editing the child themes

3
00:00:10,680 --> 00:00:12,070
style sheet.

4
00:00:12,110 --> 00:00:17,780
What if you need to make edits or customizations that require adding code to the functions that HP file

5
00:00:18,140 --> 00:00:22,100
but you still want to avoid altering the child theme in this video.

6
00:00:22,100 --> 00:00:27,560
We'll explore two options for adding code that would go into the function stop THP file but that let

7
00:00:27,560 --> 00:00:29,910
you add the code into a plugin instead.

8
00:00:31,490 --> 00:00:37,880
For this exercise since I'm not going to allow you to change the code or possibly break the multi-site

9
00:00:37,880 --> 00:00:42,260
installation at WP dev course dot com where your sandbox is.

10
00:00:42,260 --> 00:00:44,270
I'm going to have you open man up again.

11
00:00:44,270 --> 00:00:50,570
Start your servers up and go to your local development environment to play with these two plugins.

12
00:00:50,600 --> 00:00:56,380
I'm going to the one I called Live Dasch site and I'm going to log in page.

13
00:00:56,690 --> 00:00:58,280
Go ahead and do this yourself.

14
00:00:59,440 --> 00:01:03,220
Now that we have the dashboard open lets go to plugins add new

15
00:01:05,920 --> 00:01:11,280
and let's just search for code snippets.

16
00:01:11,980 --> 00:01:18,930
That's a common word for pieces of code that we might copy and paste and alter for our own purposes

17
00:01:19,240 --> 00:01:26,540
inside of a CSSA file functions dopy H-P file or even inside of a plugin.

18
00:01:26,590 --> 00:01:32,170
The first one that comes up in the list actually called code snippets is a good one that I've used several

19
00:01:32,170 --> 00:01:32,920
times.

20
00:01:32,920 --> 00:01:39,970
I can see that it's got more than 20000 active installs it's been updated recently and I know that it

21
00:01:39,970 --> 00:01:41,060
works.

22
00:01:41,080 --> 00:01:42,730
So click Install now.

23
00:01:43,880 --> 00:01:47,740
And go ahead and activate the plug in.

24
00:01:47,760 --> 00:01:55,050
Now that we have code snippets activated you can click manage under the plug in page itself or you can

25
00:01:55,050 --> 00:01:59,300
go over here to snippets and click manage.

26
00:01:59,310 --> 00:02:05,730
Now we don't have any snippets at this time and I can dismiss the survey if I like so you can go over

27
00:02:05,730 --> 00:02:10,860
here to the Add New button or let's take a look at the settings first.

28
00:02:11,100 --> 00:02:16,300
You can look through the general settings but I'll generally leave these at the defaults.

29
00:02:16,380 --> 00:02:23,940
You can look at because it will show you syntax highlighting inside of the code area in the editor.

30
00:02:23,940 --> 00:02:29,850
You can you know decide what size you want your tabs how much how many spaces you want each block to

31
00:02:29,850 --> 00:02:33,630
be indented and however you prefer.

32
00:02:33,650 --> 00:02:41,580
Now this code snippets plugin is designed to take code that is PIH Pico meant to go in functions Doppie

33
00:02:41,640 --> 00:02:48,980
HP of a theme but not see SS or stylesheet code that you'd put somewhere else.

34
00:02:49,010 --> 00:02:55,850
In that case we could use the simple custom CSSA plugin that we used in the last video alongside this

35
00:02:55,850 --> 00:02:57,760
one.

36
00:02:57,780 --> 00:03:04,380
Let's try to make some edits somewhere that would require an added to the functions Doppie HP file perhaps

37
00:03:04,380 --> 00:03:05,870
on the logon page.

38
00:03:06,000 --> 00:03:12,810
Let's change the Wordpress logo on the log in page to our own logo and make it click to the home page

39
00:03:12,810 --> 00:03:17,480
of the website instead of to the Wordpress dot org Web site.

40
00:03:17,540 --> 00:03:25,940
Now I'll just start by creating a new snippet cards loggin logo and I'll go down and save it for now

41
00:03:26,270 --> 00:03:28,070
with just its name.

42
00:03:28,160 --> 00:03:35,480
Great now I've got to find the code necessary and some advice perhaps on changing the log in log in

43
00:03:35,480 --> 00:03:36,650
page logo.

44
00:03:36,650 --> 00:03:42,620
I've gone over to Google and I search for Wordpress replace luggin page logo.

45
00:03:42,620 --> 00:03:49,910
The first thing that came up was a page in the Wordpress Codex called customizing the log in form that

46
00:03:49,910 --> 00:03:57,380
looks like it's exactly what I want and it's got some information about the log in form and how it works.

47
00:03:57,380 --> 00:04:03,260
Here's what it looks like and it's this w logo that I'd like to replace with a custom logo and have

48
00:04:03,260 --> 00:04:10,380
that link to the my own home page instead of to the Wordpress org home page.

49
00:04:10,460 --> 00:04:18,110
So I'm looking for a code snippet that I can use customizing the log in changing the log in Logo.

50
00:04:18,110 --> 00:04:25,430
Great and there's a little advice here and I've got a function a piece of code designed to go in the

51
00:04:25,430 --> 00:04:34,400
functions that HP file of the active Feme and you can see that the advice is to upload a new image under

52
00:04:34,400 --> 00:04:40,490
a folder called images with your active theme files.

53
00:04:40,730 --> 00:04:47,000
Yes in a directory named images so I know you have to do a few things here and follow along with me

54
00:04:47,240 --> 00:04:48,340
in your own site.

55
00:04:48,530 --> 00:04:55,240
I'm going to first select this entire block of code and hit control-C to copy it and I'm going to bring

56
00:04:55,240 --> 00:04:56,580
it in to the code.

57
00:04:56,590 --> 00:05:02,210
Code editing window inside of my snippets plugin.

58
00:05:02,310 --> 00:05:06,340
I'm under my log in logo's snippet and I placed that there.

59
00:05:06,330 --> 00:05:09,230
I'm going to go ahead and call it.

60
00:05:09,370 --> 00:05:17,880
I'm going to call it new logo new dash logo dot PMG and it's in the images file.

61
00:05:17,880 --> 00:05:24,580
So for now I'm going to go ahead and save that.

62
00:05:24,990 --> 00:05:28,770
And now I can expect that if that's working.

63
00:05:28,770 --> 00:05:31,230
It didn't break the Web site which is good.

64
00:05:31,290 --> 00:05:37,470
I think that if I would have removed the semi-colon like we did in a previous video we could have broken

65
00:05:37,470 --> 00:05:38,640
the site.

66
00:05:38,640 --> 00:05:45,990
In that case we might have to go in just via FCP or in our local environment here and disable the plugin

67
00:05:46,620 --> 00:05:52,080
and we'll go over a couple of steps on how to retrieve our code snippets if we happen to break the site

68
00:05:52,110 --> 00:05:55,900
using them using this plugin.

69
00:05:55,990 --> 00:05:57,210
For now I'm going to go with that.

70
00:05:57,220 --> 00:06:04,180
I'm going to remember that my file name needs to be new dash logo new logo dot thing and I'm going to

71
00:06:04,180 --> 00:06:10,960
go back to the Wordpress page at we're pressed org and look at some other advice that I'm given here.

72
00:06:10,960 --> 00:06:17,530
I know there was a certain size of the logo the size of the logo should be 80 by 80 although we can

73
00:06:17,530 --> 00:06:23,650
change this with custom CSSA if we want to but I'll make an 80 by 80 pixel image to use as this logo

74
00:06:23,920 --> 00:06:25,280
as a next step.

75
00:06:26,160 --> 00:06:34,170
So if I open Photoshop and now I'm going to again make a new file this time I'm going to do it 80 by

76
00:06:34,170 --> 00:06:37,590
80.

77
00:06:37,830 --> 00:06:40,670
There's the size of that little WordPress logo.

78
00:06:40,770 --> 00:06:44,530
Maybe I'll give it a black background as well.

79
00:06:46,570 --> 00:06:56,440
And again it's easy to make up some quick versions of logos using a font.

80
00:06:56,460 --> 00:06:57,060
Let's see.

81
00:06:57,060 --> 00:07:01,120
I'll just choose a random font here.

82
00:07:01,420 --> 00:07:06,370
My lettering is white and use a capital F..

83
00:07:07,480 --> 00:07:09,240
And let's make that a little bit bigger.

84
00:07:16,020 --> 00:07:18,740
It's fire weed photography right.

85
00:07:19,410 --> 00:07:20,520
I'll do an F W

86
00:07:23,150 --> 00:07:25,200
nice.

87
00:07:25,550 --> 00:07:26,040
All right.

88
00:07:26,050 --> 00:07:29,980
So remember I have to save this as a ping first.

89
00:07:30,010 --> 00:07:33,250
Again I'm going to I'll save it right here under.

90
00:07:33,280 --> 00:07:39,880
Actually this is in my live site so I'm going to go to my desktop and save this image under my live

91
00:07:39,880 --> 00:07:43,180
site folder.

92
00:07:43,180 --> 00:07:44,270
There we go.

93
00:07:44,560 --> 00:07:49,930
And I will call it new logo but this is a Photoshop document.

94
00:07:49,930 --> 00:07:52,650
Now I can go back and edit if I need to.

95
00:07:52,660 --> 00:07:56,540
Now I have to go up into file save for web and devices

96
00:08:01,480 --> 00:08:04,050
and I can save it as a ping file

97
00:08:08,110 --> 00:08:08,730
again.

98
00:08:09,720 --> 00:08:12,050
I'll save it in live site.

99
00:08:12,280 --> 00:08:12,950
New logo.

100
00:08:12,970 --> 00:08:15,500
It's going to be a Dopping.

101
00:08:15,630 --> 00:08:19,550
Great now that I've got that saved if the site were live on the internet.

102
00:08:19,560 --> 00:08:27,390
I would need to use FCP to make the file transfer into the images folder of my theme's area my theme's

103
00:08:27,390 --> 00:08:28,400
folder.

104
00:08:28,770 --> 00:08:35,720
But I'm going to use Windows Explorer to transfer that file from the desktop under live site.

105
00:08:35,960 --> 00:08:42,670
There it is the new logo Dopping over to the file structure of the site I'm working on.

106
00:08:42,900 --> 00:08:45,060
It's in the map folder in NHT docs.

107
00:08:45,060 --> 00:08:49,860
This one is called Live sites and I do need to bring this into my themes.

108
00:08:50,000 --> 00:08:51,830
My active themes folder.

109
00:08:52,020 --> 00:09:02,910
So I am still using the affinity that weepie come dash childhood to and I'm going to create a new directory

110
00:09:03,630 --> 00:09:13,590
a new folder called images as the wordpress site directed me to do and other places and a whole control

111
00:09:13,890 --> 00:09:15,900
to copy it into that folder.

112
00:09:17,700 --> 00:09:24,000
Now back at my log in Logo snippet I can verify that that's the location of the image and to test it

113
00:09:24,030 --> 00:09:31,270
I'm just going to go ahead and log out and it should appear with the new logo on the logon page.

114
00:09:31,290 --> 00:09:32,920
I know why that didn't work.

115
00:09:32,970 --> 00:09:35,270
Let me log right back in again.

116
00:09:35,640 --> 00:09:42,260
And there's kind of a failsafe if you're working with your code snippets and you're not quite finished.

117
00:09:42,330 --> 00:09:46,530
It doesn't automatically activate the snippets that you have.

118
00:09:46,530 --> 00:09:50,660
You need to actually activate each snippet when you're sure that it's done.

119
00:09:50,730 --> 00:09:59,350
And so I just need to click activate and that should give me an activation message snippet activated.

120
00:09:59,410 --> 00:10:05,870
Now I should be able to log out and check that my logo is there great.

121
00:10:05,930 --> 00:10:09,220
It's still linking to the Wordpress dot org Web site though.

122
00:10:09,560 --> 00:10:15,180
Let's go in here and we can see what we need to do to add the link.

123
00:10:15,230 --> 00:10:21,250
I just need to add this code snippet and paste it below the previous.

124
00:10:21,270 --> 00:10:26,140
Obviously it's not in functions that ph P but in our code snippets plug in.

125
00:10:26,160 --> 00:10:28,230
So if I take this whole thing

126
00:10:31,040 --> 00:10:40,280
and I'll just say Control-C to copy I lock back in and I'm going to go to code snippets and manage that

127
00:10:40,280 --> 00:10:40,990
code snippet

128
00:10:45,380 --> 00:10:46,800
and I'll make a change to it.

129
00:10:52,650 --> 00:10:53,050
Great.

130
00:10:53,090 --> 00:10:58,820
Let me just hit two actors and hit Control V.

131
00:10:58,870 --> 00:11:05,440
If I look at the code I can see that it's going to return the home you are so that I'll be the regular

132
00:11:05,530 --> 00:11:13,450
You are ill for my website here live ASH site and also the title for when you roll over the icon or

133
00:11:13,450 --> 00:11:14,450
the logo.

134
00:11:14,560 --> 00:11:23,750
I want that to actual actually say the name of the website.

135
00:11:24,150 --> 00:11:26,860
Now let me go to the bottom and I'll save changes.

136
00:11:27,790 --> 00:11:31,650
Now there's one more thing we should look at under each code snippet.

137
00:11:31,720 --> 00:11:37,240
Near the bottom where we are saving our changes there's actually a description of some tags we can use

138
00:11:37,270 --> 00:11:40,820
if we're using a lot of snippets and we want to keep them organized.

139
00:11:40,840 --> 00:11:46,990
The scope of this snippet is either to run it everywhere only run it in the administration area or only

140
00:11:46,990 --> 00:11:49,740
run it on the site for an end.

141
00:11:49,780 --> 00:11:55,000
In fact the log in page is considered to be on the front end and it's kind of part of the administration

142
00:11:55,000 --> 00:11:55,320
area.

143
00:11:55,330 --> 00:11:59,580
So I'll keep the scope to run everywhere and save changes.

144
00:12:00,010 --> 00:12:03,160
OK let's go and log out.

145
00:12:03,280 --> 00:12:08,320
And that way we'll look at the log in page and see what our snippet has done.

146
00:12:08,340 --> 00:12:09,940
There's the logo looking good.

147
00:12:09,940 --> 00:12:17,740
If I roll over it I can see that it clicks to my site home page and the little tool tip which is the

148
00:12:17,740 --> 00:12:21,050
site title or the link title is fire weed photography.

149
00:12:21,190 --> 00:12:29,230
So if I click it it will open the site nice.

150
00:12:29,240 --> 00:12:36,650
Now I mentioned kind of a failsafe that the plug in offers that we should look at as a final exploration

151
00:12:36,650 --> 00:12:39,090
of this code snippets plug in.

152
00:12:39,110 --> 00:12:45,380
I might just go to the plugins page at Wordpress org and look it up here to get all the information

153
00:12:45,380 --> 00:12:46,760
about the plug.

154
00:12:47,130 --> 00:12:54,420
I'll just log in although I don't really need to be logged in but I'll look up the code snippets plug

155
00:12:54,420 --> 00:12:55,080
in.

156
00:12:55,370 --> 00:12:57,880
There it is and let's open it up.

157
00:12:59,320 --> 00:13:03,760
And one thing that I've seen let's see I think it's under the installation

158
00:13:06,200 --> 00:13:08,080
or is it under the FH queue.

159
00:13:08,180 --> 00:13:13,860
It is help I just activated a snippet and my whole site broke.

160
00:13:13,860 --> 00:13:22,530
Well you can actually deactivate snippets by defining a line inside the W.P. dash config dot BHP file

161
00:13:22,860 --> 00:13:27,630
where it brings code snippets plug it into a safe mode where you can look at the code for the snippets

162
00:13:27,630 --> 00:13:31,330
and deactivate ones or change them if you need to.

163
00:13:31,560 --> 00:13:36,900
And that's a way that you can get out of any kind of problems without having to deactivate the plug

164
00:13:36,900 --> 00:13:43,740
in and potentially have to reinstall it later or go into the database and find the snippets that broke

165
00:13:43,740 --> 00:13:45,920
the site well.

166
00:13:45,940 --> 00:13:51,510
That about covers the code snippets plug in what if you're on Genesis.

167
00:13:51,560 --> 00:14:02,470
There's actually a Genesis W.P. clip's dot net has some free plug ins that do a similar thing to the

168
00:14:02,470 --> 00:14:06,310
code snippets but they're designed to work with Genesis.

169
00:14:06,520 --> 00:14:15,950
They hold clips including C Ss and functions that BHP edits inside of a Genesis powered Web site.

170
00:14:15,970 --> 00:14:21,960
It works very similarly to code snippets but it's designed to work with Genesis powered.

171
00:14:23,590 --> 00:14:29,080
In this video you went back to your local development environment to install a plug in called code snippets

172
00:14:29,410 --> 00:14:34,530
which gives you a place to put code outside of the active theme or child theme.

173
00:14:34,720 --> 00:14:40,900
You customize the log in page by finding a code snippet at Wordpress dot org and replace the logo with

174
00:14:40,900 --> 00:14:44,980
one of your own and linked it to the home page of your site.

175
00:14:45,020 --> 00:14:50,090
You also learned about W.P. clips available at WP clip's dot net.

176
00:14:50,090 --> 00:14:56,420
A similar plug in for the Genesis framework in the next chapter you'll learn about premium plug ins

177
00:14:56,690 --> 00:15:02,540
and how to choose free and premium plug ins from commercial developers or from the free WordPress plugin

178
00:15:02,540 --> 00:15:03,580
repository.

179
00:15:03,770 --> 00:15:04,310
See their