How to Link Multiple CSS Files with WordPress

Question

I know that to link the main WordPress 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 to do this because <?php bloginfo('stylesheet_url');?> Only works for a stylesheet called styles.css , and my other stylesheets have different names.

Does anyone know how I can draw them all?

Answer 1

Just put all your style sheets in the wp-content\themes\twentyeleven\css . Then you can connect all this with a simple provision below the 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" /> 

use coding.

Answer 2

The source code does not include the file name ... bloginfo ('stylesheet_url') returns a link to your stylesheet URL ..., usually in the theme folder. You also need to add the folder (if any) and filename.css

Remember to always code WordPress standards. Linking to a stylesheet is not best practice. This ensures proper caching and efficiency and is simplified over the long term.

From the free 300-page book I read last weekend - WordPress AJAX, page 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 file or your header.php. It correctly conditionally loads the stylesheet for IE ...

Answer 3

Is the CSS file in the current folder a topic? If yes, try this code:

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

This works for me.

Answer 4

Probably the easiest way to add style to your theme page, if you are going to make hardcode, it will be: 1) Add a stylesheet to the styles directory. 2) Paste this code into your head (replacing style2.css with what you pointed to the name of the stylesheet).

 <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 add this folder to your path (e.g. / styles / style2.css)

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

Answer 5

you can use the wp_enqueue_style() function in wordpress here . Example.

 wp_enqueue_style('my_style', plugin_dir_url(__FILE__) .'/path/to/your/stylesheet'); 

and you can use the wp_enqueue_styles action