How to add custom CSS in wordpress – without using any plugin

There are quite a few custom css plugins , however majority of them apply the custom css site wide. If you want to apply the css to a specific page, then one approach is to make edits to the theme functions.php file. However this approach is not recommended , as the changes will be lost if you change the theme.

In this tutorial I will share a simple technique to add custom css to a specific Page or Post in WordPress. The best part is that we don’t need to make any edits to the templates files or the functions.php file. We will achieve this without using any custom css plugin.

The Concept

The Concept behind this tutorial is quite simple.  We will write a basic code snippet which will output our custom CSS rules on a particular post .

Lets start.

Install Code Snippets Plugin

For the purpose of this tutorial we will use Code Snippet plugin. My readers now how much I love the code snippets plugin. It allows you to write and run code snippets without making any modifications to the template or theme files.

Use the following Snippet.

Simply copy and paste the following snippet and activate it.  We make use of wp_enqueue_script function in this snippet.

function load_custom_css() {
// Hold the css rule in $mycssrule variable
  $mycssrule = '.entry-title{color:red;}'; 
  
	global $post; 
	$postid = $post->ID;
	
	if ($postid == '88') 
	{
		// wrap the css rules in the style tags  
	  $output = "<style type=\"text/css\">\n" . $mycssrule . "\n</style>\n";
		echo $output; 
	}
}


add_action( 'wp_enqueue_scripts', 'load_custom_css' );

In this particular snippet we are outputting our custom css rule on the post with id 88.  The custom CSS rule changes the color of the title. This is just and example and you can modify the post id and the css rules for your particular use case.

The post How to add custom CSS in wordpress – without using any plugin appeared first on SpiceWP.