Adding CSS to WordPress Theme Via functions.php File

From what I have seen, the most common way theme developers add their css is via the bloginfo(‘stylesheet_url’); tag in the header.php. While this is not necessarily that bad, 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');

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.

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

  1. Zac Gordon Post author

    @Rudd, thanks for that tip! I thought that is_home() actually called is_page() internally, but I think you’re making the right call with that one! Thanks!!!

    Like

    Reply
  2. Imre

    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. Imre

      <?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
  3. Sabin

    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
  4. Sabin

    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’ );
    }

    Like

    Reply
  5. vittal

    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
  6. TARUN GHOSH

    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
  7. TARUN GHOSH

    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. TARUN GHOSH

      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
      1. TARUN GHOSH

        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

      2. TARUN GHOSH

        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 Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s