Adding multiple css to Wordpress header.php

Question

I have a few css files that need to be linked to the main PHP file for the slider, owl carousel plugin, etc.

After searcing, I found out how to add multiple css to my theme:

1) using wp_register_style 2)using wp_enqueue_style

I can't figure out the different between them. I also want to know how to use them.

this is my style links before I convert my HTML theme to Wordpress:

<link rel="stylesheet" type="text/css" 
href="stylecss/bootstrap.min.rtl.css.css">
<link rel="stylesheet" type="text/css" href="stylecss/bootstrap-3.2.rtl.css">
<link rel="stylesheet" href="fa/css/font-awesome.min.css">
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
<link rel="stylesheet" type="text/css" href="stylecss/style.css">
<link rel="stylesheet" type="text/css" href="font/stylesheet.css">

This is the way I try to link my css file:

<!-- adding bootstrap style sheet -->

<?php wp_register_style('bootstrap-style1',get_template_directory_uri() . '/stylecss/bootstrap.min.rtl.css.css',array(),'null', 'all', );?>

<?php wp_register_style('bootstrap-style2',get_template_directory_uri() . '/stylecss/bootstrap-3.2.rtl.css',array(),'null', 'all', );
?>

<!-- End of bootstrap style links -->
<!-- adding fonts style sheet -->

<?php wp_register_style('font-awesome',get_template_directory_uri() . 'fa/css/font-awesome.min.css',array(),'null', 'all', );
?>
<?php wp_register_style('fonts',get_template_directory_uri() . 'font/stylesheet.css',array(),'null', 'all', );
?>

<!-- End of fonts style links -->

What's the difference between adding this code to function.php and header.php? I read here that we can add both in header.php and function.php.

Community · Accepted Answer · 2017-04-13 12:37:28Z

3

You can add css in 2 ways, first you have to upload all the files in your active theme css directory, then you can either wp_enqueue_style or copy paste the below code to your active theme header.php file.

<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/bootstrap.min.rtl.css.css">
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/bootstrap-3.2.rtl.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/fa/css/font-awesome.min.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/owl-carousel/owl.theme.css">
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/style.css">
<link rel="stylesheet" type="text/css" href="font/stylesheet.css">

And for your 2nd question you can reffer to this url.

edited Apr 13, 2017 at 12:37

CommunityBot

11 silver badge

answered Aug 11, 2016 at 7:16

Raunak Gupta

10.8k4 gold badges62 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mkafiyan Over a year ago

thank you for your helpful link. the standard way to adding css and js file as wordpress documentary (developer.wordpress.org/themes/basics/including-css-javascript) said is using wp_enqueue_style or script so I trying to write standard cods.

Raunak Gupta Over a year ago

Yes, the use of wp_enqueue_script and wp_enqueue_style is always recommended.

Jaroslaw Jankowiak · Accepted Answer · 2016-08-11 06:13:13Z

1

Main difference between wp_enqueue_* and respective wp_register_* functions, is that the first adds scripts/styles to the queue, the second prepares scripts/styles to be added. More: https://wordpress.stackexchange.com/questions/124354/why-wp-register-style-is-important-while-im-using-a-complete-wp-enqueue-style

answered Aug 11, 2016 at 6:13

Jaroslaw Jankowiak

404 bronze badges

Comments

Community · Accepted Answer · 2017-04-13 12:37:28Z

0

here is one of standard form to including css file in wordpress.

I put theme in function.php although I can't find what is the different between adding theme to function.php or header.php, not much different, just when you add theme in header.php is 't more flexible and you can cache more speed.

I use both of way one and two

wp_register_style('bootstrap-style1',get_template_directory_uri() . '/stylecss/bootstrap.min.rtl.css.css',array(),'null', 'all' );

wp_enqueue_style('bootstrap-style1');

and if you want to know more about differences between this two way as I asked you can use this link as Raunak Gupta told on his answer.

edited Apr 13, 2017 at 12:37

CommunityBot

11 silver badge

answered Aug 16, 2016 at 4:00

mkafiyan

9542 gold badges9 silver badges31 bronze badges

Collectives™ on Stack Overflow

Adding multiple css to Wordpress header.php

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related