74 | Linking or Enqueuing Stylesheet in WordPress Themes

g+

There are several ways of adding a stylesheet to a WordPress theme;
examples:

A: linking the stylesheet (in the head section of header.php)

– linking the main stylesheet style.css:

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

or

<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_stylesheet_directory(); ?>" />

– linking another stylesheet custom.css:

<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_stylesheet_directory_uri(); ?>/custom.css" />

B: enqueuing the stylesheet (in functions.php)

– enqueuing the main stylesheet style.css of a theme:

function theme_styles() {
	wp_enqueue_style( 'theme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'theme_styles' );

– enqueuing another stylesheet custom.css of a child theme:

function child_theme_styles() {
	wp_enqueue_style( 'custom-style', get_stylesheet_directory_uri() . '/custom.css' );
}
add_action( 'wp_enqueue_scripts', 'child_theme_styles', 20 );

C: using @import in an existing stylesheet

– example linking the parent theme’s style.css in a child theme’s style.css

@import url('../parentheme/style.css');

Resources:

WordPress Theme Development – style.css

link html
enqueue stylesheet
@import

This entry was posted in Easy Coding for Wordpress, Tips & Tricks, WordPress and tagged , , , , , , , . Bookmark the permalink.

3 Responses to Linking or Enqueuing Stylesheet in WordPress Themes

  1. John O'Brien comments:

    I cannot get my parent’s stylesheet to work properly when linked to from the child’s stylesheet. I believe the code is correct however none of the parent’s styling is being carried over.

  2. Josh Kirby comments:

    Simple! Thank you!

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*