Sajid Javed

How to add custom CSS code in WordPress Site

Written by sjaved
22
Jun

Some times you need to add the custom CSS code to tweak the layout, change font size or links colors. You found the custom code from internet but your theme does not have option to add custom CSS then don’t worry. You can add the code easily with one of following listed options.

Using Simple Custom CSS plugin

First and very easy way to add custom CSS code in your site using Simple Custom CSS plugin. One of my favourite plugin that I suggest most of the time while providing some CSS code in support forums.

Once you install and activate this plugin you will see a new sub menu called Custom CSS under Appearance menu where you can paste or write your CSS code.

Screenshot at Jun 22 16-25-52

Make sure you click on Update Custom CSS button to save the changes.

Using JetPack’s Custom CSS module

JetPack is a WordPress plugin that have lots of very useful feature under one roof. Custom CSS is one of those features that you can use to add your CSS code here (this is best if you have already installed and using this plugin on your site).

To enable/disable it go to Admin -> JetPack -> Settings and mouse over on Custom CSS module and click on the activate/deactivate link. Once enabled click on configure link to add/edit custom CSS code. You can also directly access the edit CSS area from Admin -> Appearance -> Edit CSS.

Screenshot at Jun 23 02-38-55

Copy paste the code here and don’t forget to click on “Save Stylesheet” button. This plugin have an additional feature that lets you preview the changes before actually saving the changes.

 

Using PHP snippet to add in header/footer

If you are not a fan of plugins then you can also add the custom CSS code directly in website using wp_head or wp_footer action hooks.

What you need to do is add the following code in functions.php file of your child theme or use it as mu-plugin. Add your CSS code right after the comment line that says “Your Custom CSS code will go here”.

This option is also very useful when you want to apply CSS code on all sites on your network in WordPress Multisite Setup. You don’t need to add the code each time for each of your website on network.

Another benefit of using this option is that, you can add CSS code conditionally. For example you want to add the CSS code on selected pages only or when there is a specific query string in the URL (for developers).

Using child theme

If you want to completely change the look and feel of existing theme then I would strongly recommend using the child theme instead of the plugin or code snippet. Never-ever edit the parent theme style.css or any other parent theme file. Because those changes will be lost/overridden when you will update your theme.

 

Hope you enjoyed reading this article. If you have any thing to add then feel free to post your comment below (this is very beginning of my blogging so please go easy on me :)).

  1. Danish Ali

    It is the best ever tutorial i have seen that how can we add custom css code in our theme to make it awesome.
    Thanks!

Leave a Reply

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

Subscribe for FREE resources directly to your inbox (once or twice a month – promise).