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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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.
Love you.
LikeLike
Awesome, using is_home prevents the stylesheet from enqueue on unnecessary places.
LikeLike
@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!!!
LikeLike
Even better, use a child theme for any CSS customizations and get_stylesheet_directory_uri() rather than get_template_directory_uri() in the code above.
LikeLiked by 1 person
Can you please tell me how can i add just a simple inline chunk of css to a php function?
LikeLike
This is Great Tips, Thanks Sir
LikeLike
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.
LikeLike
<?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');
?>
LikeLike
Thanks a lot. Very helpful for me today.
LikeLike
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' );
}
LikeLiked by 1 person
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’ );
}
LikeLiked by 1 person
Thank you for this tip.
LikeLike
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.
LikeLike
Hi if i creat a theme option bg_image how can use the image that uploded as abackground of the body .
LikeLike
How to call inline css code in functions.php
LikeLike
Very good! Simple and efficient. The best tutorial I found about it and it worked perfectly. Thank you!
LikeLike
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.
LikeLike
Make sure that you also have wp_head() in your header file https://codex.wordpress.org/Function_Reference/wp_head
LikeLike
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.
LikeLike
Does any link come out at all in your source code?
LikeLike
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.
LikeLike
One think to mention, I develop this one at my localhost in WAMP so the declaration I put in the top of the style sheet is just like this, is that ok , please take a look :-
/*
Theme Name: business
Theme URI: https://wordpress.org/themes/business/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: This is a test theme.
Version: 4.5.3
*/
Really could not find how to make it work.
LikeLike
That shouldn’t matter. Is anything showing up in the source code for a style.css file?
LikeLike
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.
LikeLike
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.
LikeLike
Hello Zac please consider to use Custom functions plugins as well, thanks:
https://wordpress.org/plugins/custom-functions-littlebizzy/
LikeLike