How to Use Custom CSS in WordPress Site

What is Custom CSS?

Custom CSS is a CSS code which added externally in the WordPress and it’s not the built in part of WordPress, plugins or theme.

There are various ways to use custom CSS in WordPress site. We are going to learn in this tutorial all these ways of using custom CSS.

All the ways discussed in this tutorial are update proof, it means if you update the WordPress, parent theme or plugins on your site then it won’t overwrite the custom CSS code that you have used on your site using any of the following ways so it will save your time as you don’t have to make these changes again after updation.

You can use any of the following discussed methods based on which method will be easier for you to use custom CSS on your site.

I have listed these methods below from easier to complex.

Using WordPress Theme Option to Use Custom CSS in WordPress Site

Some themes like Avada theme provides theme option to use custom CSS as displayed in the following screenshot so please refer the theme documentation or contact the theme author that you are using to know whether your theme provides the custom CSS theme option to use custom CSS on your site.

Screenshot (25)

Using WordPress Plugins to Use custom CSS in WordPress Site

You can use any of the following WordPress plugins to use custom CSS in front end of your WordPress site.

Simple Custom CSS Plugin

Screenshot

My Custom CSS Plugin

Screenshot

WP Add Custom CSS Plugin

Screenshot (22)

Jetpack Custom CSS Plugin

Screenshot (23)

Screenshot (24)

Using WordPress Child Theme to Use Custom CSS in WordPress Site

You can use the custom CSS on your WordPress site by adding it in the style.css file of your child theme.

If you are not using child theme then you can develop one quickly by referring the information provided on the following pages.

https://codex.wordpress.org/Child_Themes
http://premium.wpmudev.org/blog/how-to-create-wordpress-child-theme/
http://www.elegantthemes.com/blog/resources/wordpress-child-theme-tutorial
http://www.wpbeginner.com/wp-themes/how-to-create-a-wordpress-child-theme-video/

You can also use any of the following plugins to create child theme.

https://wordpress.org/plugins/one-click-child-theme/
https://wordpress.org/plugins/orbisius-child-theme-creator/

Developing Custom Code to Use Custom CSS in WordPress Site

You can use the following code in the functions.php file of your child theme or developing small WordPress plugin or Must Use plugin and adding the following code in it.

The following code will load the custom CSS code in the header of the WordPress site.

function add_custom_style(){ ?>
	<style type="text/css">
         /* Add your custom CSS code below */
		.entry-header .entry-title a{
			font-size: 30px;
		}
	</style>
<?php }
add_action('wp_head', 'add_custom_style');

The following code will load the custom CSS code in the footer of the WordPress site.

function add_custom_style(){ ?>
	<style type="text/css">
        /* Add your custom CSS code below */
		.entry-header .entry-title a{
			font-size: 30px;
		}
	</style>
<?php }
add_action('wp_footer', 'add_custom_style');

Use Custom CSS in WordPress Site by Loading it in the CSS file Using Small Custom Plugin

We can improve the page load speed by adding the custom CSS code in the CSS file and loading that file in the webpage as the CSS file can be cached at client side.

To do this just download and install the following Small CSS Plugin.

Download Small Custom CSS Plugin

Then add your custom CSS code in the file custom-css.css which your will find in the following Small CSS Plugin directory.

/wp-content/plugins/small-css-plugin/

Leave a Reply

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