Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
WordPress provides us with hooks that allow us to add CSS to the front-end code of our plugin. This works very similarly to how adding CSS to a theme via the functions.php file works.
-
0:00
First, I'm excited to share that we got back some great front-end styling from Gil
-
0:06
that we're going to implement before creating our short code.
-
0:10
Go ahead and copy the new CSS, as well as JS files,
-
0:15
and then paste them into your project folder
-
0:19
and confirm to have the new CSS file replace the old ones.
-
0:24
Now we're going to come back into our main plugin file
-
0:28
and scroll down to where we added our CSS for the admin area earlier.
-
0:36
We can see here, our function named wptreehouse styles,
-
0:40
where we pulled in our Treehouse style sheet
-
0:43
to use in the admin area.
-
0:46
Now what we're going to do is create a function that lets us add CSS,
-
0:51
as well as JavaScript, to the front end of the site.
-
0:55
Before we do that, we're going to do some renaming here,
-
0:59
so that it's clear that this function is just loading back-end styles.
-
1:05
Let's start with the name of the function
-
1:08
and we'll add in the word "backend" in between badges and styles.
-
1:13
We'll also change the end of this unique identifier
-
1:17
to backend_css,
-
1:20
which will fit in with the convention that we're going to use for the front-end styles.
-
1:25
And then finally, copy our new function name
-
1:28
down in to the admin head add action hook.
-
1:32
Now, we can copy this code,
-
1:36
paste it below, and change backend
-
1:40
to frontend.
-
1:44
Also, since this is going to be displaying not just styles,
-
1:48
but also scripts,
-
1:51
we're going to add in scripts and styles to our function name.
-
1:57
This is a really long function name
-
2:00
and in your plugin development, you probably won't name stuff this long;
-
2:04
however, for our example purpose,
-
2:07
it makes sense to drive home that we're displaying more than one
-
2:10
type of file type here—in this case, CSS, as well as JavaScript.
-
2:15
We can now copy the function name,
-
2:19
paste it to our add action,
-
2:21
and instead of admin head,
-
2:23
we'll use wp_enqueue_scripts.
-
2:31
Now, we'll add the JavaScript—
-
2:34
since the JavaScript is similar to how we import the CSS,
-
2:39
we can start by copying all of our wp_enqueue style,
-
2:45
pasting it below,
-
2:47
changing it from instead of enqueue_style
-
2:51
to enqueue_script, and then instead of frontend_css,
-
2:56
change it to js—same for the css at the end.
-
3:03
Then, we need to add a few new parameters.
-
3:07
The first one we have to add is an array
-
3:10
declaring any dependencies.
-
3:13
In this case, we're going to have a dependency of jQuery.
-
3:18
Next, we'll ignore the version number
-
3:20
and then set true for it to display in the footer instead of the header.
-
3:25
If you haven't worked with enqueue_scripts or enqueue_styles before,
-
3:30
I suggest you go ahead and check out our How to Build a Theme project for WordPress.
-
3:35
Now that we've done that, we have one more step,
-
3:38
which is to copy over a new logo that we got from Gil.
-
3:43
To do that, we'll go into our project downloads,
-
3:47
grab our new logo, and then paste it into our images folder.
-
3:52
We can see that we go from having a logo named "logo-demo" to just "logo."
-
3:58
To update this change, we'll come into our front end file,
-
4:03
scroll down till we find the image,
-
4:06
and change it from treehouse-logo-demo to just logo.
-
4:12
Now, let's come over to the front end of our site
-
4:15
and see how the styling looks.
-
4:18
It looks like when we do that, we're getting an error here on the page.
-
4:23
If we come back and look at our main plugin page,
-
4:28
we can see that down here where we have wp_enqueue_style,
-
4:33
we should also have wp_enqueue_script, but singular.
-
4:38
This is something that you might get a little confused here and there
-
4:42
because you'll notice that the hook for add action is wp_enqueue_scripts, plural,
-
4:48
while when it's used here, it's singular because it's enqueueing a single script.
-
4:54
If we come back and refresh our page now,
-
4:58
we can see when we come over and test our tool tips,
-
5:02
we do have some tool tips displaying,
-
5:04
but the styling isn't quite right.
-
5:07
The reason for this is that we still have our earlier testing demo CSS embedded at the top of our front end file.
-
5:16
If we come back into our front end file,
-
5:18
and delete our temporary CSS,
-
5:22
the code on the front end will look a lot cleaner.
-
5:26
The one thing left to do with our styling
-
5:28
is to find a missing little arrow that should appear right between the badge and the tool tip.
-
5:36
If we come back to our project files,
-
5:39
we can find the tool tip arrow file,
-
5:42
and paste it into our images folder.
-
5:45
Now, when we refresh the page, we can see
-
5:48
that the proper tool tips are displaying,
-
5:51
and they look a lot nicer than what we had before we passed this off to Gil.
-
5:57
So, thanks to GIl for this great new styling.
You need to sign up for Treehouse in order to download course files.
Sign up