Add Javascript and CSS Files to Specific Post or Pages in WordPress

Hi…

Today we’re going to discuss about how to add javascript or css files to specific post or pages in wordpress, as well as jquery or another file. Sometimes while using wordpress, we want to include some javascript or css files only for a certain page or post, it’s normally hard to do because we usually load these files using wp_enqueue_scripts function (for javascript) and wp_enqueue_style (for css) that written in the functions.php file, so in this tutorial I’ll show you the way to to.

The workaround is we’ll use a shortcode to tell wordpress that we want to load some files, then using some function we parse that shortcode and load the files. For example, we’ll create a shortcode named wdc_load_files and load main.js file from the js folder and default.css file from css folder, then out complete shortcode would be like this: [wdc_load_files files="js/main.js, css/default.css"], that’s simple, right?

Step 1: Write Shortcode Function

Firstly we need to determine where we’ll put the javascript or css files, in this example, we’ll put them in wp-content/user_files (create user_files folder in the wp-content folder). Next, add some script to read the shortcode and load the files, to do so, open the functions.php file in the theme folder, then add php script as follow:

// Shortcode
add_shortcode( 'wdc_load_files', function() {});

// Load Files From Shortcode Attribute
function load_user_files()
{
	if (!is_single())
		return false;
	
	global $post;
	$folder_name = 'user_files';
	preg_match('/\[wdc_load_files files="(.*?)".*\]/i',$post->post_content, $atts); 
	if ($atts)
	{
		$url = content_url();
		$file_arr = explode(',', $atts[1]);
		foreach ($file_arr as $key => $file)
		{
			if (substr($file, -4) == '.css')
			{
				wp_enqueue_style('wdc-user-style-' . $key, $url . '/' . $folder_name . '/' . trim($file));
			} else if (substr($file, -3) == '.js') {
				wp_enqueue_script('wdc-user-script-' . $key, $url . '/' . $folder_name . '/' . trim($file));
			}
		}
	}
}
add_action('wp_enqueue_scripts', 'load_user_files');

Explanation:

  • Line 2 is used to determine the shortcode.
  • Line 7 and 8 are used to detect the current page: if(!is_single()) mean that we’ll check whether the current page is not post or page (such as: front page, search, etc.), if so, just ignore the shortcode. You can experiment with other functions such as is_singular()
  • On line 11, we define the name of the folder where we save the files, in this case: user_files.
  • On line 15, we define variable named $url and give content_url() as value to retrieve the url of the content area which is usually located in wp-content folder, for example: http://www.example.com/wp-content/
  • Line 21 is used to load (if any) the css file, in this example the file is located in http://www.example.com/wp-content/user_files/css/default.css, and lines 23 to a javascript file, in this example http: //www.example.com/wp-content/user_files/js/main.js

Step 2: Upload and Manage Files

Next, we need to upload the files that used in the shortcode to user_files directory, the upload can be done using a text editor such as notepad ++ (by creating a new file), FTP clients such as FileZilla, or wordpress plugins.

in order to organizing, we name the file with a specific pattern such as filetype_idpost, eg: css_759.css, which means that the css file is used by the article with ID 759. There are various ways to find the ID number of the post or page, some of them appear in the browser address bar of admin area, eg http://example.com/wp-admin/post.php?post=759&action=edit, also you can use a plugin to easily display the ID, for more details, please refer to this tutorial:

Step 3: Try It

Lastly, check whether out shortcode is working properly, by making some simple post, run it in a browser and view the source.

load_javascript_css_for_particular_post_in_wordpress

View source:

load_javascript_css_in_wordpress_source

If you have any question or another idea, please leave your comment bellow.

Related Post

Leave a comment

Like Us

Social