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.

Answer 1

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.

Answer 2

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