1

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.

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?

3 Answers 3

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');
 }
4
  • Will the wp_enque_scripts add these styles to '/wp-login.php'? Sep 2, 2013 at 10:35
  • I was confused with wp_enqueue_script and wp_enqueue_scripts (note the last 's'). Read again my answer, I've edited it.
    – cybmeta
    Sep 2, 2013 at 13:28
  • Crystal clear, gave you the answer for this one since this is much more elaborate. Thanks! Sep 2, 2013 at 18:21
  • 2
    my_front-end_scripts will fail as functions can't use hyphens
    – shea
    Sep 2, 2013 at 21:21
5

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.

1
  • Thanks, this makes so much more sense than the last answer. I have since discovered a theme that uses bootstrap dependencies, which does this the same way. Thanks for your help! This make things much clearer to me. Sep 1, 2013 at 11:09
0

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>';
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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