What is the difference between the different ways of linking stylesheets

Question

I'm only just learning WP theme development so this may be a very stupid question, but I have noticed there are different ways to link to the main stylesheet from the index.php:

<?php bloginfo('stylesheet_url');?>

<?php echo get_stylesheet_uri(); ?>

Register and enqueue styles via a function and add_action hook in functions.php.

These are the ones I have come across so far.

What is the difference between them? They seem to do the same thing to me but I have read that registering and enqueueing styles via functions.php is the preferred way. Why?

Answer 1

Enqueueing via your functions.php is by far preferable, because it allows WordPress to keep track of which styles are loaded and in which order. This matters, because when css statement are equivalent, the one that is loaded last will be applied to the page.

This may not matter too much when you are developing a simple theme all by yourself (as you're likely to do as a beginner), but once you want something more complex you'll see the benefits. For instance when you want to reuse your theme for a second site, you'll want to build a child theme to store the changes in. At that point you need the enqueuing system to control the order in which the style sheets from parent and child theme are loaded.

Also, when you want to load style sheets you got elsewhere (like font icons), the enqueuing system makes sure you don't run into conflicts with a plugin that might be loading the same stylesheet.

Answer 2

Rather then loading the stylesheet in your header.php file, you should load it in using wp_enqueue_style. In order to load your main stylesheet, you can enqueue it in functions.php

To enqueue style.css

wp_enqueue_style( 'style', get_stylesheet_uri() );
This will look for a stylesheet named “style” and load it.

The basic function for enqueuing a style is:

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

You can include these parameters:

$handle is simply the name of the stylesheet.

$src is where it is located. The rest of the parameters are optional.

$deps refers to whether or not this stylesheet is dependent on another stylesheet. If this is set, this stylesheet will not be loaded unless its dependent stylesheet is loaded first.

$ver sets the version number.

$media can specify which type of media to load this stylesheet in, such as ‘all’, ‘screen’, ‘print’ or ‘handheld.’

So if you wanted to load a stylesheet named “slider.css” in a folder named “CSS” in you theme’s root directory, you would use:

wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css',false,'1.1','all');

Answer 3

I think some functions just different level in chain. Typically the deeper function is more flexible. Like as <?php bloginfo('stylesheet_url');?> , not use echo for display. You cant use it in

<?php 
$text_html = '<a href="'.bloginfo('stylesheet_url').'">Style Url</a>';
return $text_html;
?>

But you can use

<?php 
    $text_html = '<a href="'.get_stylesheet_uri().'">Style Url</a>';
    return $text_html;
    ?>

another case you can use to show multiple options using

function get_info_my_web($option){
 bloginfo($options);
}

depending on the user input value, but you cant do that using get_stylesheet_uri()

and for enqueue, you make another plugin can prelude your script/style, without change html tag.