close

Shelley Bassett

Menu

Close

Enqueuing Style Sheets in WordPress


July 9, 2018

Every website is designed using style sheets. But did you know there are several different ways of enqueuing style sheets in WordPress?

Enqueuing style sheets in WordPress is the beginning of any theme template. There are only 5 files required for a WordPress theme, and style.css  is one of them. But do you know how to correctly insert this file? Or that there are ways to enqueue multiple style sheets, or page specific ones? WordPress is a powerful tool, and utelised properly, can create some very quick-loading websites.Every web page has a style sheet. It’s what makes the design and layout of the page display in the browser. On static pages, it’s fine to just list the style sheets in the header.

This is fine if you plan to hard code each webpage, but for dynamic content, or WordPress hooks, it’s a little more complicated.

Enqueuing Style Sheets in WordPress

Properly enqueuing style sheets in WordPress requires using the functions.php  file, one of the required theme template files. Before any other scripts, set up a function to add your css files into the template head.

Here, we’re running our function on the wp_enqueue_scripts  hook, using the proper wp_enqueue_style()  function. The parameters that are passed through this function are the name and the url. Because this is going to be our default style.css  files, we can ask WordPress to find that file in the template for us rather than include the full URL. This is done with the get_stylesheet_uri()  function.

Adding Additional Style Sheets

It’s often easier and more manageable to break large style sheets into smaller ones. For example, you might want to include all the navigation styles in a separate document. To add this to the header, we can add a line into the existing function.

Notice how we’re using the same functions, but a different directory? This is because unlike the default style, our custom style sheets could be contained in a separate folder. This example doesn’t do that, but if you have multiple style sheets, it might be a good way to mange them.

There’s one last interesting part about this code. the get_template_directory_uri()  function. Why do we use this, instead of the direct template URL? Well, the direct URL might change over time. Or, if this is a template to be used on an outside installation of WordPress, the directory might not be known. By using this function, we allow WordPress to find the files no matter where the theme is installed.

Adding Style Sheets by Page

Perhaps more interesting than just custom style sheets, WordPress also lets us call sheets dependent on page. If there is a page with a colour chart, you might want to use a style sheet called colour.css . But to keep the other pages loading quickly, you don’t want it to be required on all pages. The way to do this is by setting conditions within our original function.

This simple if statement only queues the style when the page called colour is being displayed. The else tells us that if we’re on a different page, no extra styles will be added. There are many different variables the if statement could check for, but with style sheets, the most common are pages ( is_page() ), single posts ( is_single()),or post types ( is_singular('post-type') ).

Leave a comment

Advertisement

Leave a Message | No comments yet

Leave a Reply

Your email address will not be published. Required fields are marked *