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

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