The best way to add stylesheets to WordPress

2 Views

I am in the process of converting a mobile responsive page, currently built in Bootstrap into WordPress.

Using wp_register_style() and wp_enqueue_style() will add the stylesheets to all pages, including the wp-admin. I know I could get around that by using an if ( ! is_admin() ) conditional statement.

Read More

Is it better to use the conditional statement, or to just to use: 

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/bootstrap.css" media="screen" />

in the theme’s header.php?

Post Views: 2

Related posts

3 comments

  1. To load scrpits only in front-end pages use:

     add_action( 'wp_enqueue_scripts', 'my_front_end_scripts' );
 function my_front_end_scripts(){
     wp_enqueue_script('script_handle');
     wp_enqueue_style('style_handle');
 }

    To load scripts only in login use:

     add_action( 'login_enqueue_scripts', 'my_login_scripts');
 function my_login_scripts(){
     wp_enqueue_script('script_handle');
     wp_enqueue_style('style_handle');
 }

    To load scripts only in admin use: 

     add_action('admin_enqueue_scripts','my_admin_scripts');
 function my_admin_scripts(){
     wp_enqueue_script('script_handle');
     wp_enqueue_style('style_handle');
 }

  2. You should always use wp_enqueue_style() and wp_enqueue_script() where possible, unless it it a special case such as the HTML5 Shiv script which requires IE conditional comments.

    If you use the proper hooks to enqueue your style, it should only be loaded on the front-end. The correct hook to use in your instance would be wp_enqueue_scripts, which works for both scripts and styles on the front-end only.

    function theme_name_styles() {

    /* Enqueue the stylesheet. See the Codex for more options */
    wp_enqueue_style( 'theme-name-bootstrap', get_template_directory_uri() . '/boostrap.css' );
}

add_action( 'wp_enqueue_scripts', 'theme_name_styles' );

    If you want to load styles or scripts on the login page or the admin area, use login_enqueue_scripts or admin_enqueue_scripts, respectively.

    I recommend that you read the Codex pages for the functions wp_enqueue_style() and wp_enqueue_script(), as well as the pages for the action hooks wp_enqueue_scripts, login_enqueue_scripts, and admin_enqueue_scripts.

  3. Just a note on login_enqueue_scripts: the scripts and styles enqueued on this hook will render in the source of your page just before </body> (as of WordPress 3.6.1). See a disscution about style links in body here – https://stackoverflow.com/questions/4957446/load-external-css-file-in-body-tag

    If you need to put your scripts and styles for the login page on the <head> you’d be better off using login_head hook and echo-ing your links:

    add_action( 'login_head', 'wp240913_login_head' );
function wp240913_login_head() {
    echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/some.css" />';
    echo '<script type="text/javascript" src="' . get_bloginfo('stylesheet_directory') . '/some.js"></script>';
}

Comments are closed.