Build A WordPress Plugin To Add CSS Code Inside Head Tag

By Faruque Ahamed Mollick

In this tutorial I am going to show you how you can add CSS code inside the head tag or head section of your WordPress site with a plugin and how to build that plugin. I am going to build a really simple plugin which is consist of only one PHP file with few line of codes.

Why this plugin needed?

Before I show you the code for this plugin you may want to know why and where this code needed. Well, this plugin built with only few lines of codes is very useful and you may need. You may know that <head> tag for web pages is an important part where it contains several meta tags, JavaScript code, title tag, CSS code or many other types of code when needed. <head> tag has a very important role as a HTML code. Suppose you want to add custom CSS code on a HTML page. You may add the custom CSS code inside <style> tag which is also exists inside <head> tag. For a WordPress site you can create a plugin and with that plugin it is possible to add anything inside head tag.

WordPress plugin code to add something inside head tag using wp_head action hook

Now here is the code which will add anything inside the head tag of your WordPress site:



function place_code_inside_head() {

//Add custom code here that will appear inside head tag

}
add_action('wp_head', 'place_code_inside_head');

Suppose you want to add your custom CSS code for some purpose and you want to add it via a plugin instead of adding it directly in theme. Then your code will be:

<?php
function place_code_inside_head() {
?>
<style>
  /** Place your custom CSS code here **/
</style>
<?php
}
add_action('wp_head', 'place_code_inside_head');
?>

Here wp_head is an action hook and you have added custom css within head section using wp_head action.

You can add this code inside your theme’s functions.php file. But it is better to create a plugin and do this job using that plugin. This way your code will not remove while updating your theme or in future install a new theme on your WordPress site.

Every plugin contains plugin name , plugin author, plugin URI etc. So lets create one for our plugin and name it “Custom CSS Code Using Plugin”:

<?php
/*
Plugin Name: Custom CSS Code With Plugin
Plugin URI: https://www.codespeedy.com/
Version: Current Version Number
Author: Your Name
Description: Say something about this plugin in brief....
*/
?>

 Complete final code for the plugin to add CSS code inside head tag

Here is the complete plugin code which will add the CSS code inside the head tag of your WordPress site using wp_head action.:

<?php
/*
Plugin Name: Custom CSS Code With Plugin
Plugin URI: https://www.codespeedy.com/
Version: Current Version Number
Author: Your Name
Description: Say something about this plugin in brief....
*/
?>
<?php
function place_code_inside_head() {
?>
<style>
  /** Place your custom CSS code here **/
</style>
<?php
}
add_action('wp_head', 'place_code_inside_head');
?>

Now add CSS code that you would like or add any other code like JavaScript, JSON code or meta tag. There are a huge number of plugins available to download on wordpress.org are also using the same process whenever they need to add custom code inside the <head> section of WordPress site.

Congratulation…! We have now built a simple WordPress plugin which can help a lots.  Was it not really easy and interesting? WordPress hooks are great. You can play and fun with these hooks. If you have any question then ask me. Below is the comment box.

Leave a Reply

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