Adding other css files to wp_head

Question

I am editing the standard twentythirteen theme that comes with the latest wordpress.

I need to add a few of my own .css files into the wp_head but I'm not sure how to do this. I'm currently calling my files outside of wp_head but this is messy and would like to do it properly.

<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo("template_url"); ?>/bootstrap.css" />
<script type="text/javascript"   src="<?php bloginfo("template_url"); ?>/js/bootstrap.min.js"></script>

<?php wp_head(); ?>

Where is it being defined what goes into wp_head and how do I add my own to it?

Answer 1

To add your own css in the wp_head(), you need to use a collection of WordPress functions:

First, you'll put this in your theme's functions.php file:

add_action('wp_enqueue_scripts', 'your_function_name');

(This uses the add action hook, hooking into the wp_enqueue_scripts action.)

Then, you'll need to add the function to your functions.php file that will utilize the WordPress function wp_enqueue_style:

function your_function_name() {
    wp_enqueue_style('my-script-slug',  get_stylesheet_directory_uri() . '/your_style.css');
}

Note the use of get_stylesheet_directory_uri() - this gets the proper stylesheet directory for your theme.

This is also the proper way to enqueue scripts into your header. Example:

function your_function_name() {
    // Enqueue the style
    wp_enqueue_style('my-script-slug',  get_stylesheet_directory_uri() . '/your_style.css');
    // Enqueue the script
    wp_enqueue_script('my-script-slug',  get_stylesheet_directory_uri() . '/your_script.js');
}

Which uses the WordPress wp_enqueue_script function.

Finally, it is worth mentioning that altering the twenty thirteen (or any other core theme) theme directly is usually discouraged. The recommendation is to create a child theme (overkill in my opinion, but worth mentioning).

Answer 2

Stylesheets can be loaded almost anywhere, but the default wordpress installation uses the wp_head() hook to output the main stylesheet (style.css);

For ex.: In Twentyfourteen it is loaded at line 232 of functions.php

    // Load our main stylesheet.
    wp_enqueue_style( 'twentyfourteen-style', get_stylesheet_uri(), array( 'genericons' ) );

One of the reason why it's preferred to use this hook is that if you have two plugins that use the same stylesheet and both using the same wp_enqueue_style handle then WordPress will only add the stylesheet on the page once, another reason is that this handle has a dependency parameter, but that's another story...

Answer 3

Hmm yes to the above but it's also possible to link to your sheets after wp_head is called so

<?php wp_head(); ?>
<link href="/wp-content/themes/YourTheme/cssFolder/YourOtherStyleSheet.css">

This is usually what i do as it's clearer to read.

In addition I'd also recommend using something like http://html5blank.com for a nice clean blank wp theme instead of trying to alter the default theme (so no child theme just a different theme altogether)

Answer 4

@cale_b My plugins are based on jQuery library and calling the jQuery from the wp_head() function was not successful on this way

wp_enqueue_script('jquery', 'get_stylesheet_uri(); . 'js/jquery.min.js');

the proper way is adding this to the header.php before everything...

<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>

It's very important that you call jquery first before the wp_head(); hook of the other imports... The WordPress comes with the jQuery library because he is using it for the wp-admin pages and some other $post and $get requests on the page... Using their script is much more secure and easier way then adding your own jquery.min.js file inside the themes directory...

wp_head(); function is just the best way calling the stylesheets but when it gets to the Javascripts and Javascript libraries it can get buggy.

Also note that sometimes the WordPress wont render your ' $ ' as a jQuery variable and you will get errors for TypeError, which of course is correct. In that case you should change all of the ' $ ' with ' jQuery ' which is also a defined variable inside the WordPress jQuery library...

Also note that sometimes you will need an inline javascript, etc

<script>
addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); }
</script>

All of these inline scripts should not be inside your index.php nor your header.php nor footer.php... You can list all of them inside another your-inline-scripts.js and call them like this just where they should have been listed before like this:

    <script type="text/javascript"  
src="<?php bloginfo("template_url"); ?>/js/your-inline-scripts.js"></script>

or

<script type="text/javascript"
   src="<?php echo get_stylesheet_directory_uri(); ?>/js/yourScript.js"></script>

I prefer this second option...

Answer 5

use wp_enqueue_style for stylesheets and wp_enqueue_scripts for javascript

http://codex.wordpress.org/Function_Reference/wp_enqueue_style

http://codex.wordpress.org/Function_Reference/wp_enqueue_script