You saw in the last video how you can avoid editing a child theme.
That's part of a framework like agenesis by adding CSSA to a in instead of editing the child themes
style sheet.
What if you need to make edits or customizations that require adding code to the functions that HP file
but you still want to avoid altering the child theme in this video.
We'll explore two options for adding code that would go into the function stop THP file but that let
you add the code into a plugin instead.
For this exercise since I'm not going to allow you to change the code or possibly break the multi-site
installation at WP dev course dot com where your sandbox is.
I'm going to have you open man up again.
Start your servers up and go to your local development environment to play with these two plugins.
I'm going to the one I called Live Dasch site and I'm going to log in page.
Go ahead and do this yourself.
Now that we have the dashboard open lets go to plugins add new
and let's just search for code snippets.
That's a common word for pieces of code that we might copy and paste and alter for our own purposes
inside of a CSSA file functions dopy H-P file or even inside of a plugin.
The first one that comes up in the list actually called code snippets is a good one that I've used several
times.
I can see that it's got more than 20000 active installs it's been updated recently and I know that it
works.
So click Install now.
And go ahead and activate the plug in.
Now that we have code snippets activated you can click manage under the plug in page itself or you can
go over here to snippets and click manage.
Now we don't have any snippets at this time and I can dismiss the survey if I like so you can go over
here to the Add New button or let's take a look at the settings first.
You can look through the general settings but I'll generally leave these at the defaults.
You can look at because it will show you syntax highlighting inside of the code area in the editor.
You can you know decide what size you want your tabs how much how many spaces you want each block to
be indented and however you prefer.
Now this code snippets plugin is designed to take code that is PIH Pico meant to go in functions Doppie
HP of a theme but not see SS or stylesheet code that you'd put somewhere else.
In that case we could use the simple custom CSSA plugin that we used in the last video alongside this
one.
Let's try to make some edits somewhere that would require an added to the functions Doppie HP file perhaps
on the logon page.
Let's change the Wordpress logo on the log in page to our own logo and make it click to the home page
of the website instead of to the Wordpress dot org Web site.
Now I'll just start by creating a new snippet cards loggin logo and I'll go down and save it for now
with just its name.
Great now I've got to find the code necessary and some advice perhaps on changing the log in log in
page logo.
I've gone over to Google and I search for Wordpress replace luggin page logo.
The first thing that came up was a page in the Wordpress Codex called customizing the log in form that
looks like it's exactly what I want and it's got some information about the log in form and how it works.
Here's what it looks like and it's this w logo that I'd like to replace with a custom logo and have
that link to the my own home page instead of to the Wordpress org home page.
So I'm looking for a code snippet that I can use customizing the log in changing the log in Logo.
Great and there's a little advice here and I've got a function a piece of code designed to go in the
functions that HP file of the active Feme and you can see that the advice is to upload a new image under
a folder called images with your active theme files.
Yes in a directory named images so I know you have to do a few things here and follow along with me
in your own site.
I'm going to first select this entire block of code and hit control-C to copy it and I'm going to bring
it in to the code.
Code editing window inside of my snippets plugin.
I'm under my log in logo's snippet and I placed that there.
I'm going to go ahead and call it.
I'm going to call it new logo new dash logo dot PMG and it's in the images file.
So for now I'm going to go ahead and save that.
And now I can expect that if that's working.
It didn't break the Web site which is good.
I think that if I would have removed the semi-colon like we did in a previous video we could have broken
the site.
In that case we might have to go in just via FCP or in our local environment here and disable the plugin
and we'll go over a couple of steps on how to retrieve our code snippets if we happen to break the site
using them using this plugin.
For now I'm going to go with that.
I'm going to remember that my file name needs to be new dash logo new logo dot thing and I'm going to
go back to the Wordpress page at we're pressed org and look at some other advice that I'm given here.
I know there was a certain size of the logo the size of the logo should be 80 by 80 although we can
change this with custom CSSA if we want to but I'll make an 80 by 80 pixel image to use as this logo
as a next step.
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
80.
There's the size of that little WordPress logo.
Maybe I'll give it a black background as well.
And again it's easy to make up some quick versions of logos using a font.
Let's see.
I'll just choose a random font here.
My lettering is white and use a capital F..
And let's make that a little bit bigger.
It's fire weed photography right.
I'll do an F W
nice.
All right.
So remember I have to save this as a ping first.
Again I'm going to I'll save it right here under.
Actually this is in my live site so I'm going to go to my desktop and save this image under my live
site folder.
There we go.
And I will call it new logo but this is a Photoshop document.
Now I can go back and edit if I need to.
Now I have to go up into file save for web and devices
and I can save it as a ping file
again.
I'll save it in live site.
New logo.
It's going to be a Dopping.
Great now that I've got that saved if the site were live on the internet.
I would need to use FCP to make the file transfer into the images folder of my theme's area my theme's
folder.
But I'm going to use Windows Explorer to transfer that file from the desktop under live site.
There it is the new logo Dopping over to the file structure of the site I'm working on.
It's in the map folder in NHT docs.
This one is called Live sites and I do need to bring this into my themes.
My active themes folder.
So I am still using the affinity that weepie come dash childhood to and I'm going to create a new directory
a new folder called images as the wordpress site directed me to do and other places and a whole control
to copy it into that folder.
Now back at my log in Logo snippet I can verify that that's the location of the image and to test it
I'm just going to go ahead and log out and it should appear with the new logo on the logon page.
I know why that didn't work.
Let me log right back in again.
And there's kind of a failsafe if you're working with your code snippets and you're not quite finished.
It doesn't automatically activate the snippets that you have.
You need to actually activate each snippet when you're sure that it's done.
And so I just need to click activate and that should give me an activation message snippet activated.
Now I should be able to log out and check that my logo is there great.
It's still linking to the Wordpress dot org Web site though.
Let's go in here and we can see what we need to do to add the link.
I just need to add this code snippet and paste it below the previous.
Obviously it's not in functions that ph P but in our code snippets plug in.
So if I take this whole thing
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
code snippet
and I'll make a change to it.
Great.
Let me just hit two actors and hit Control V.
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
You are ill for my website here live ASH site and also the title for when you roll over the icon or
the logo.
I want that to actual actually say the name of the website.
Now let me go to the bottom and I'll save changes.
Now there's one more thing we should look at under each code snippet.
Near the bottom where we are saving our changes there's actually a description of some tags we can use
if we're using a lot of snippets and we want to keep them organized.
The scope of this snippet is either to run it everywhere only run it in the administration area or only
run it on the site for an end.
In fact the log in page is considered to be on the front end and it's kind of part of the administration
area.
So I'll keep the scope to run everywhere and save changes.
OK let's go and log out.
And that way we'll look at the log in page and see what our snippet has done.
There's the logo looking good.
If I roll over it I can see that it clicks to my site home page and the little tool tip which is the
site title or the link title is fire weed photography.
So if I click it it will open the site nice.
Now I mentioned kind of a failsafe that the plug in offers that we should look at as a final exploration
of this code snippets plug in.
I might just go to the plugins page at Wordpress org and look it up here to get all the information
about the plug.
I'll just log in although I don't really need to be logged in but I'll look up the code snippets plug
in.
There it is and let's open it up.
And one thing that I've seen let's see I think it's under the installation
or is it under the FH queue.
It is help I just activated a snippet and my whole site broke.
Well you can actually deactivate snippets by defining a line inside the W.P. dash config dot BHP file
where it brings code snippets plug it into a safe mode where you can look at the code for the snippets
and deactivate ones or change them if you need to.
And that's a way that you can get out of any kind of problems without having to deactivate the plug
in and potentially have to reinstall it later or go into the database and find the snippets that broke
the site well.
That about covers the code snippets plug in what if you're on Genesis.
There's actually a Genesis W.P. clip's dot net has some free plug ins that do a similar thing to the
code snippets but they're designed to work with Genesis.
They hold clips including C Ss and functions that BHP edits inside of a Genesis powered Web site.
It works very similarly to code snippets but it's designed to work with Genesis powered.
In this video you went back to your local development environment to install a plug in called code snippets
which gives you a place to put code outside of the active theme or child theme.
You customize the log in page by finding a code snippet at Wordpress dot org and replace the logo with
one of your own and linked it to the home page of your site.
You also learned about W.P. clips available at WP clip's dot net.
A similar plug in for the Genesis framework in the next chapter you'll learn about premium plug ins
and how to choose free and premium plug ins from commercial developers or from the free WordPress plugin
repository.
See their