Bummer! This is just a preview. You need to be signed in with a Treehouse account to view the entire video.
Adding CSS to WordPress Plugin Settings Pages2:29 with Zac Gordon
Once we have have gotten our basic settings page done, we can start adding our own custom styles. In this video we will look at how to add CSS to the settings page as well as add in some custom styles of our own to better brand the plugin.
[Zac Gordon] We talked about the admin head hook recently.
Now, let's go ahead and add it into our main plugins folder in order to link in some styles for our plugin page.
We'll come back in to our main plugin file,
scroll down and underneath of our other functions, we are going to create a function called wptreehouse_badges styles.
Noticed that, as always, we're name spacing the name of our functions.
Then, we could use the WP enqueue style function.
Give it the hook that is going to be the same name as our function name and then use a function called plugins URL
And then inside of that, type in the name of our folder for our plugin followed by the name of the CSS file we want link to.
Once we have that done, we could come underneath of our function and use add action with the admin head hook
and then the name of the function that we want to call.
Once we've that done, we'll copy over the stylesheet file into our plugin folder.
Once we have that end, we can come back to our site, look at our settings page and find that we now have the badges floating,
the links are bit better style as well as the badges and points styled underneath the profile.
From here, we could go on and look at how to use forms
and how to start pulling in our actual JSON feed that we're going use to populate this data.
You need to sign up for Treehouse in order to download course files.Sign up