How to link multiple CSS files with WordPress

Question

I know that to link your WordPress main style.css file you use:

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

However I have quite a few CSS files that need to be linked to the main PHP file for things like sliders, picture boxes etc...

I'm not quite sure how I would do that because the <?php bloginfo('stylesheet_url');?> only works for the stylesheet that is named styles.css and my other stylesheets all have different names.

Does anyone know how I can ink them all in?

Solution 1

Just put all of your stylesheets in a directory wp-content\themes\twentyeleven\css.Then you can link all these by simply put below code-

<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/style1.css" />
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/style2.css" />
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/style3.css" />
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/style4.css" />

enjoy coding.

Solution 2

Your source code doesn't include a filename... bloginfo('stylesheet_url') only returns the link to your stylesheet...folder URL, usually the theme folder. You need to also append the folder (if one) and the filename.css

Remember to always code with WordPress standards in mind. Linking to a stylesheet is not a best practice. This enables proper caching and efficiency and is easier in the long run.

From the free 300 page book I read last weekend - WordPress AJAX, pg 53:

// load styles + conditionally load an IE 7 stylesheet
add_action('init', 'my_theme_register_styles');
function my_theme_register_styles() { 
//Register styles for later use 
    wp_register_style('my_theme_style1', get_stylesheet_directory_uri() . '/style1.css', array(), '1.0', 'all'); 
    wp_register_style('my_theme_style2', get_stylesheet_directory_uri() . '/style2.css', array('my_theme_style1'), '1.0', 'all'); 
    wp_register_style('my_theme_style3', get_stylesheet_directory_uri() . '/style3.css', array('my_theme_style1', 'my_theme_style2'), '1.0', 'all'); 
    global $wp_styles; 
    $wp_styles->add_data( 'my_theme_style3', 'conditional', 'lte IE 7' );
}

Put this in your functions.php or your header.php. It properly conditionally loads a stylesheet for the IE's...

Solution 3

Are the CSS file in the current theme's folder? If so, then try this code:

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/what-ever.css" />

It works for me.

Solution 4

Probably the easiest way to add a style to your theme page if you are going to hardcode it would be: 1) Add your stylesheet to your stylsheet directory. 2) Paste in this code into your head (replacing style2.css with whatever you stylesheet name is).

<link href="<?php echo get_stylesheet_directory_uri().'/style2.css'; ?>" rel="stylesheet" />

or

<link href="<?php blog_info('template_url').'/style2.css'; ?>" rel="stylesheet" />

If your styles are in a separate folder, just make sure to append that folder to your path (ie. /styles/style2.css)

Edit: Made answer more specific to add style links to the head and fixed my dumb mistake of src= when it should be href=

View more solutions