First, I'm excited to share that we got back some great front-end styling from Gil

that we're going to implement before creating our short code.

Go ahead and copy the new CSS, as well as JS files,

and then paste them into your project folder

and confirm to have the new CSS file replace the old ones.

Now we're going to come back into our main plugin file

and scroll down to where we added our CSS for the admin area earlier.

We can see here, our function named wptreehouse styles,

where we pulled in our Treehouse style sheet

to use in the admin area.

Now what we're going to do is create a function that lets us add CSS,

as well as JavaScript, to the front end of the site.

Before we do that, we're going to do some renaming here,

so that it's clear that this function is just loading back-end styles.

Let's start with the name of the function

and we'll add in the word "backend" in between badges and styles.

We'll also change the end of this unique identifier

to backend_css,

which will fit in with the convention that we're going to use for the front-end styles.

And then finally, copy our new function name

down in to the admin head add action hook.

Now, we can copy this code,

paste it below, and change backend

to frontend.

Also, since this is going to be displaying not just styles,

but also scripts,

we're going to add in scripts and styles to our function name.

This is a really long function name

and in your plugin development, you probably won't name stuff this long;

however, for our example purpose,

it makes sense to drive home that we're displaying more than one

type of file type here—in this case, CSS, as well as JavaScript.

We can now copy the function name,

paste it to our add action,

and instead of admin head,

we'll use wp_enqueue_scripts.

Now, we'll add the JavaScript—

since the JavaScript is similar to how we import the CSS,

we can start by copying all of our wp_enqueue style,

pasting it below,

changing it from instead of enqueue_style

to enqueue_script, and then instead of frontend_css,

change it to js—same for the css at the end.

Then, we need to add a few new parameters.

The first one we have to add is an array

declaring any dependencies.

In this case, we're going to have a dependency of jQuery.

Next, we'll ignore the version number

and then set true for it to display in the footer instead of the header.

If you haven't worked with enqueue_scripts or enqueue_styles before,

I suggest you go ahead and check out our How to Build a Theme project for WordPress.

Now that we've done that, we have one more step,

which is to copy over a new logo that we got from Gil.

To do that, we'll go into our project downloads,

grab our new logo, and then paste it into our images folder.

We can see that we go from having a logo named "logo-demo" to just "logo."

To update this change, we'll come into our front end file,

scroll down till we find the image,

and change it from treehouse-logo-demo to just logo.

Now, let's come over to the front end of our site

and see how the styling looks.

It looks like when we do that, we're getting an error here on the page.

If we come back and look at our main plugin page,

we can see that down here where we have wp_enqueue_style,

we should also have wp_enqueue_script, but singular.

This is something that you might get a little confused here and there

because you'll notice that the hook for add action is wp_enqueue_scripts, plural,

while when it's used here, it's singular because it's enqueueing a single script.

If we come back and refresh our page now,

we can see when we come over and test our tool tips,

we do have some tool tips displaying,

but the styling isn't quite right.

The reason for this is that we still have our earlier testing demo CSS embedded at the top of our front end file.

If we come back into our front end file,

and delete our temporary CSS,

the code on the front end will look a lot cleaner.

The one thing left to do with our styling

is to find a missing little arrow that should appear right between the badge and the tool tip.

If we come back to our project files,

we can find the tool tip arrow file,

and paste it into our images folder.

Now, when we refresh the page, we can see

that the proper tool tips are displaying,

and they look a lot nicer than what we had before we passed this off to Gil.

So, thanks to GIl for this great new styling.