Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I am trying to add a CSS style to a WordPress theme that I am developing as is shown in this tutorial: http://www.wpbeginner.com/wp-tutorials/how-to-properly-add-javascripts-and-styles-in-wordpress/ but seems don't work and I cant' understand why.

So this is the head.php file of my personal theme:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->

<!--
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
-->
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<!-- <?php bloginfo('stylesheet_directory'); ?>/ -->
<script language="javascript" type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js.js"></script>
<!--
<script language="javascript" type="text/javascript">    
    if(f)
    {
        write_css('<?php bloginfo('stylesheet_directory'); ?>');
    }
</script>
-->

<?php wp_head(); ?>
</head>
<body>
<center>
<div id="page">
<div id="header">

<h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
<hr />

And in my functions.php file I have put the following code:

<?php
function wpb_adding_styles() {
    wp_register_script('my_stylesheet', plugins_url('style.css', __FILE__));
    wp_enqueue_script('my_stylesheet');
}

add_action('wp_enqueue_scripts', 'wpb_adding_styles');
?>

But the file style.css is not loaded. Why? What am I missing?

In particular the thing that I can't understand in the previous tutorial is how and hwere the wpb_adding_styles() is called because in the header.php file it is never called.

Someone can help me?

Tnx

Andrea

share|improve this question
1  
You'll probably want to take a look at wp_enqueue_script() as well. You've got <script...> tags in your header.php code, which should really be replaced -- as in the tutorial -- with wp_enqueue_script() calls. –  Pat J Jan 18 at 18:45
add comment

2 Answers

up vote 5 down vote accepted

You are using plugins_url - therefore pointing to completly different directory than your current theme. If you are just trying to enqueue a theme style do it like this:

function load_theme_styles() { 
    wp_enqueue_style('main-css', get_template_directory_uri() . '/style.css', array(), '1.0', 'all');
}
add_action('wp_enqueue_scripts', 'load_theme_styles');

the wp_enqueue_style takes some parameters. In the example above I am using:

  • A unique ID (handle) - I can then use it for dependencies
  • Path to the style itself - this should be obvious
  • An array() of dependencies (in this case empty) - for example if we had two styles enqueued we could set in the second one array('main-css') and WP would then WAITED until the the style with the ID of main-css style is loaded before loading it.
  • Version - Now this can be whatever you want. I always set this as for example when I update themes and a client has issues I can quickly determine the version just by looking at the code. Another good thing about it is that updating files with higher (or lower) version number will ensure the styles are actually loaded instead of being pulled from cache.
  • The last one is just media for which this stylesheet has been defined.

PS. No need to register it first. It is just as safe as registering and then calling it via enqueue. If you want to register your scripts, but not directly load them in your pages, you can register the files once, and then load them when you need them just by calling wp_enqueue_script( $handle ) (just pass the $handle and the rest will be taken from the wp_register_script()). So if you want to just load it (which is 99% of times) you can just omit it.

Refference:

As for your header.php file this part:

<script language="javascript" type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js.js"></script>
<!--
<script language="javascript" type="text/javascript">    
    if(f)
    {
        write_css('<?php bloginfo('stylesheet_directory'); ?>');
    }
</script>
-->

should be deleted and any script should be added to the WP just the same way you are adding styles. For example:

function load_java_scripts() {
    wp_enqueue_script('custom-js', get_template_directory_uri() . '/js/main.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'load_java_scripts');

Same thing goes for other elements like for example google fonts etc. Use wp_enqueue_scripts to add them as well:

function load_google_fonts() {
    $protocol = is_ssl() ? 'https' : 'http';
    wp_enqueue_style( 'theme-default-fonts', "$protocol://fonts.googleapis.com/css?family=ADD_YOUR_DESIRED_FONT_FAMILIES_HERE' rel='stylesheet' type='text/css" );}
add_action( 'wp_enqueue_scripts', 'load_google_fonts' );

Where I have ADD_YOUR_DESIRED_FONT_FAMILIES_HERE you should add font families from Google font. If you want multiple just divide them with |. For example if I want Roboto font and PT Serif font I would write it like this Roboto:400,700,300|PT+Serif:400,700,400italic

share|improve this answer
    
Perfect answer, I have only 2 litle doubts related to what you say to me: 1) in function.php I add the load_theme_styles() method and I can use it because the functions.php file is read at when the user load the website and because is executed the add_action() method? Is it correct? 2) The other doubts is related about the registration. I often found that before the wp_enqueue_style() is often call the wp_register_style(), why? what do this method? and why you don't use it? –  AndreaNobili Jan 18 at 21:01
1  
@AndreaNobili 1. Yes. Functions.php is automatically loaded during WordPress initialization (both for admin pages and external pages). 2. If you want to register your scripts, but not directly load them in your pages, you can register the files once, and then load them when you need them just by calling wp_enqueue_script() (the handles will be taken from the wp_register). So if you want to just load it (which is 99% of times) you can just omit it. –  Borek Jan 18 at 21:14
add comment
  1. When registering and enqueueing CSS files you need to use wp_register_style() and wp_enqueue_style().

  2. If this code is in your theme's functions.php file you want to use get_template_directory_uri() when referencing the path of your custom CSS files.

Your code is very close, but should be corrected to the following:

function wpb_adding_styles() {
        wp_register_style('my_stylesheet', get_template_directory_uri() . '/style.css');
        wp_enqueue_style('my_stylesheet');
}

add_action('wp_enqueue_scripts', 'wpb_adding_styles');
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.