Adding CSS to WordPress Theme Via functions.php File

WordPress Tips

One of the incorrect way theme developers add their CSS to their theme is via the bloginfo(‘stylesheet_url’); tag in the header.php. This is a bad idea.  A better way to do this is via the functions.php file, much in the same way you properly link to JavaScript files a WordPress theme.

Here is the code for how to do this:


// Load the theme stylesheets
function theme_styles()
{
// Example of loading a jQuery slideshow plugin just on the homepage
wp_register_style( 'flexslider', get_template_directory_uri() . '/css/flexslider.css' );
// Load all of the styles that need to appear on all pages
wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'custom', get_template_directory_uri() . '/css/custom.css' );
// Conditionally load the FlexSlider CSS on the homepage
if(is_page('home')) {
wp_enqueue_style('flexslider');
}
}
add_action('wp_enqueue_scripts', 'theme_styles');

view raw

adding-css-to-wordpress-theme.php

hosted with ❤ by GitHub

I’m a fan of the Flexslider Slideshow Plugin from WooThemes, so that’s what I’m setting up to link to just on the homepage.

The required stye.css and a custom CSS stylesheet inside of a css directory in the themes folder are being queued up inside the theme_styles() function and then loaded to execute and output into the header via the wp_head() function that should be included in the header.php file before the closing of the <head> tag.

For another read on this, check out this TutsPlus post on the topic.

Published by Zac

Educator

Published

26 thoughts on “Adding CSS to WordPress Theme Via functions.php File”

  7. Hello, do you have to call wp_enqueue_scripts outside of functions.php or not?
    NOTHING happens! Not a single line is added to my html.
    get_template_directory_url() + “/css/resets.css” is the correct URI to my resets stylesheet but this still doesn’t work. Here’s my functions.php. Please provide some hint, this get’s me crazy.

    Like

    Reply

    1. <?php


      // Load the theme stylesheets
      function theme_styles()
      {
      wp_enqueue_style( 'resets', get_template_directory_uri() . '/css/resets.css' );
      }
      add_action('wp_enqueue_scripts', 'theme_styles');

      ?>

      Like

      Reply

  8. Thanks for sharing this.

    Anyway, if you want to load a custom css stylesheet via functions.php in your child theme you should use get_stylesheet_directory_uri(). This will retrieve the stylesheet directory URI for the current theme/child theme.

    This is the reference for the function:

    Function Reference/get stylesheet directory uri

    Here is what I have used to load a custom font css stylesheet:


    add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' );
    function my_child_theme_scripts() {
    wp_enqueue_style( 'fonts', get_stylesheet_directory_uri() . '/fonts.css' );
    }

    Liked by 1 person

    Reply

  9. Thanks for sharing this.

    Anyway, if you want to load a custom css stylesheet via functions.php in your child theme you should use get_stylesheet_directory_uri(). This will retrieve the stylesheet directory URI for the current theme/child theme.

    This is the reference for the function:

    Function Reference/get stylesheet directory uri

    Here is what I have used to load a custom font css stylesheet:

    add_action( ‘wp_enqueue_scripts’, ‘my_child_theme_scripts’ );
    function my_child_theme_scripts() {
    wp_enqueue_style( ‘fonts’, get_stylesheet_directory_uri() . ‘/fonts.css’ );
    }

    Liked by 1 person

    Reply

  11. I want a develop a theme of my own. So i created a folder name “MY THEME” in wordpress folder then i created index.php,header.php,footer.php,style.css and functions.php. the header and footer are reflecting in my web page but the style is not reftection through the functions.php file, but i make an error in the functions,php file the error is displayed in web page. Please help with the issue i got stuck up there for five days.

    Like

    Reply

  15. Hello Sir, I am newbie in wordpress , however I am trying to load the style sheet but unable to do this one.

    Here is my header.php

    Ubusina – Responsive HTML5 Template

    and in the function.php file I just copy and paste the code

    // Load the theme stylesheets
    function theme_styles()
    {

    // Example of loading a jQuery slideshow plugin just on the homepage
    wp_register_style( ‘flexslider’, get_template_directory_uri() . ‘/css/flexslider.css’ );

    // Load all of the styles that need to appear on all pages
    wp_enqueue_style( ‘main’, get_template_directory_uri() . ‘/style.css’ );
    wp_enqueue_style( ‘custom’, get_template_directory_uri() . ‘/css/custom.css’ );

    // Conditionally load the FlexSlider CSS on the homepage
    if(is_page(‘home’)) {
    wp_enqueue_style(‘flexslider’);
    }

    }
    add_action(‘wp_enqueue_scripts’, ‘theme_styles’);

    However my main css file “style.css” is in the theme folder ( name of the theme is :- business), there is also one index.php file contain just two lines

    but he style.css file is not loaded. what is wrong with this one. Please advise me.

    Like

    Reply

  16. In my header.php file I include this wp_head(); as well like this,

    Ubusina – Responsive HTML5 Template

    Till the style sheet is not loading. The name of my theme folder is “business” , is anything wrong I am doing with the enque style sheet function. Kindly take a look.

    Like

    Reply

    1. When I try to attach the css via the bloginfo(‘stylesheet_url’); it loaded perfectly, but when I want to load it through function.php it is not loaded. Being a newbie I tried to solve it for last seven days but unable to load the style sheet. Certainly there are something what I did wrong but unable to trace it. No no sign of loading css when I did inspect element in chrome.

      Like

      Reply

      2. In my style.css which reside inside the theme “business” folder I just put this code to see whether it is working or not.

        body{
        margin: 0;
        padding: 0;
        font-family: ‘BenchNine’, sans-serif;
        background:#CC0000;
        }

        li{
        list-style: none; float:left; margin-left:20px;
        }

        li a { text-decoration:none;}

        but the body color is not changed and when I inspect element the page I could not find the style.css file in the head section.

        Like

      3. It works after I changed the name of “function.php” file to “functions.php” just adding “s” to the file name. Is that is only mistake I have done so far !!!! It takes nearly ten days to fixed it.

        Like

Leave a comment