In this post you will learn to how to easily create your first nodepress js plugin. The goal of this plugin will be to change all href tags color to red.

Let’s get started.

Step 1 > Create Plugin Folder And Files

Create folder on your desktop called: “my-first-nodepress-js-plugin”. In that folder, create 2 files: “package.json” and "href-tags.js"

Step 2 > Setting Up Package File

In your package.json add the below text:

{
  "name": "Change Href Tags Text Color To Red",

  "description": "This will change all href tags text to red for the posts.",

  "plugin_file_name":"href-tags.js",

  "version": "1.0",

  "author_name": "The NodePress Team",    
  
  "author_url": "https://nodepressjs.com"  
}

Let's walk through all the options you have available to you.  

Name: This will be the name of your plugin

Description: A short description about your plugin as to what it does.

Plugin File Name: This is the javascript file that Nodepress JS CMS look for to perform action. You can name this file to whatever you like. For this example, it's named "href-tags.js"

Version: Add a version for your plugin. This can you be any text you want. For example, "1.1.4", "v1", or "my first plugin v1".

Author Name: This will be your name to ensure that people know that you create the nodepress plugin.

Author URL: A URL where people can find out more about your plugin or about your services that you offer.

Step 3 > Plugin File

Open up "href-tags.js" and the add the following code:

$(document).ready(function()
{ 
	if($(document).find('.np_post_content').length)
	{
		$(document).find('.np_post_content').find('a').each(function(index, val) 
		{
			$(this).css('color','red');
		});
	}	
		 
}); 
 

This plugin uses jQuery to manipulate the href tag color.  First, the plugin check to see if class "np_post_content" container exist. After that, it uses jQuery each loop cycle through all the "a" tags. Lastly, when it finds an "a" tag, the plugin changes the text color to red.

Step 4 > Zip Folder

Just zip the folder with 2 files and upload it to your Nodepress JS CMS under the plugin section and activate the plugin.

Download This Plugin