The Right Way Of Adding Custom CSS On WordPress

By Faruque Ahamed Mollick

Many time it may be needed to change the CSS coding of a WordPress theme. Suppose, you have installed a WordPress theme and you want to modify the CSS a little bit by adding extra CSS code by your own. Then what will you do?

You can do it by adding the CSS directly into your theme’s CSS file or inside the head tag of your theme’s header.php file. It will definitely work, but there is a problem if you do this in this way.

You may be wonder, all of your purposes has done but what may be the problem! You have added your CSS inside the theme successfully and its working fine.

First image of WordPress post as featured if not set



Suppose you already have added your custom CSS file in your theme’s file. One day you found the updated version of the theme is available and you have updated it. then what will be happened?

After you update your theme, all the custom CSS code that you wrote in your theme will be removed. Then you have to write that CSS codes again which you really don’t like.

So what is the solution? Well, there is a solution which can prevent your custom CSS code even after you have updated your theme. I am going to tell you the right way of adding custom CSS on your WordPress site’s front end.

Adding CSS code on WordPress site – The right way

WordPress is awesome. It would let you add anything in any places. You can add anything inside the <head> tag of your WP site using the action hook.

Add Custom CSS Style In WordPress Admin Dashboard Area

You have to create your own separate plugin where all the necessary custom CSS code will be located. It will contain a single PHP file and below is the demo example CSS code:

<?php
/*
Plugin Name: WP Custom CSS
*/
add_action('wp_head','wp_custom_css');
function wp_custom_css() { ?>
  <style>
     header {
     background: #000;
     }
  </style>
<?php } ?>

In the above code snippets, I have written custom CSS that will appear inside the <head> tag and it will still exist even after you updated your theme.

Register WordPress navigation menu and insert in theme

You don’t have to worry even after you update your WP theme to a new version. It will never disappear¬†and always there even you change your theme completely.

I hope you have understood what I have says. Well, to understand it you need some basic knowledge in WordPress and PHP.

Leave a Reply

Your email address will not be published. Required fields are marked *