Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

How do I add a css file, from a Jquery plugin, into a wordpress site above the primary style.css file?

I am trying to implement the slicker Jquary plugin with my wordpress theme, however I am quite lost.

This plugin is shown in Dave McFarland's "Using Jquery Plugins" course, There is a link to the slicker plugin: http://kenwheeler.github.io/slick/ https://github.com/kenwheeler/slick/

Essentially, this Jquary plugin comes with a css file that needs to be added to the <head> tags above the main.css file. While this is easily done with a regular html website, in Wordpress it is more tricky.

If I use the wp_enqueue_script method in function.php, the plugin's css file will be added below the main style.css.

I hope I am being clear enough with what I am trying to accomplish. I am using a Genesis child-theme if that helps.

Any help would be appreciated from some of the experts in the Treehouse community

Christopher Hubbard
Christopher Hubbard
392 Points

Hi Ron,

Since you're dealing with a plugin and not a stylesheet of your own creation, I am not sure if this will work, but it's worth a try.

Check out the docs page for the wp_enqueue_style function (https://codex.wordpress.org/Function_Reference/wp_enqueue_style).

You'll notice that the function takes a number of arguments - the one that you'll want to pay particular attention to is the $deps (short for dependencies).

What you'll need to do is find the file in the plugin directory that handles loading the stylesheets. Once there, find the handle for the stylesheet you need loaded first.

Then go to the functions.php file of your genesis theme and find the wp_enqueue_style function that loads the theme's main stylesheet.

Once you've found it, you'll need to add the plugins handle as a dependency.