How to add css link in wordpress header ? – Solved with example code

To add a CSS link in the header of your WordPress site, you can use the wp_head action hook. Here’s an example of how you can use this hook to add a CSS link to your header:

  1. First, create a new function that will be used to add the CSS link. You can do this by adding the following code to your theme’s functions.php file:

function my_custom_css() { 
echo  '<link rel="stylesheet" type="text/css" href="' . get_template_directory_uri() . '/css/custom.css">'; 
}
  1. Next, add the my_custom_css function to the wp_head action hook by adding the following code to your theme’s functions.php file:

add_action( 'wp_head', 'my_custom_css' );
  1. Create a new CSS file called “custom.css” and save it in the “css” folder of your theme. You can then add your custom CSS styles to this file.
  2. Save the functions.php file and refresh your website to see the changes. The CSS link should now be added to the header of your site, and your custom CSS styles should be applied.

If you are using a child theme, you should save the custom.css file in the “css” folder of your child theme, and update the get_template_directory_uri function to use get_stylesheet_directory_uri instead. This will ensure that your custom CSS file is loaded from the correct location.

Leave a Comment