Using Javascript and CSS in WordPress Plugin

Most of blogs out there are suggesting that to use following line to reference javascript files like jquery in your wordpress plugin.

<?php wp_enqueue_script("jquery"); ?>


But this is far from the whole story of how to use javascript in your plugin page, and it loads jquery library on EVERY page even it is not needed.

The understanding of action or filter hooks is very important for plugin development, you need to find the right place to attach your functions. You do not want your function to be over exposed to somewhere that it is not wanted, neither you want your function missed the target. I am not going into the details of it, but as a common sense it is safe to use the hooks by the looks of name.

A plugin can have two sides, one side is called admin or options side where it is seen by logged in users only for tasks like entering data or setting up, the other one is the public side like in a page,post etc. They have different hooks, but again you can just trust them by their names

Coming back to the topic of script use:

It is right to use wp_enqueue_script to ensure that library is loaded, but where should we put wp_enqueue_script ? and what name should we use for example if we want to use jquery form plugin?

In order to know these questions well, I need to show you how exactly those hooks are doing the magic, as an example I am going to show you how the admin side of your plugin is being processed by wordpress.

Here is a list of actions that will be run to render your admin page

  • admin_init
  • admin-header.admin_enqueue_scripts
  • admin-header.admin_print_styles
  • admin-header.admin_print_scripts
  • admin-header.admin_head
  • yourplginadmin.php
  • admin-footer

So you can see here the best hook to attach your script is admin_enqueue_scripts, anywhere later than that will be too late. I do not think admin_init is the right place from either maintenance or writing clean code program point of view. I am sure that you also know from above where to add your css files.

Then the second question, why jquey is called “jquery” not “jquery.1.4.2”? where is this name from?

In wp-includes/script-loader function wp_default_scripts, you will see all the wordpress defaults scripts and their names which are mapped to the real files:

Here are a few examples :
‘jquery’ mapped to /wp-includes/js/jquery/jquery.js
‘query-ui-core’ mapped to /wp-includes/js/jquery/ui.core.js
etc

This also is a good place for us to know which javascript libraries have already existed in wordpress, in that case we do not need to provide in our little plugin. Of course you can have a look of files in wp-includes, you will find out as well, but you wont be able to know the reference name of it, would you?

If you have some javascript you need to attach at the end of your content then I would recommend you place your script at place of admin_print_footer_scripts

So to sum up:

Loading scripts and css for plugin admin or option, using:
admin_print_scripts, admin_print_styles,admin_print_footer_scripts(not in their official doc)

Loading scripts and css for plugin public viewing, using:
wp_print_scripts,wp_print_styles,wp_print_footer_scripts

An example of using jquery tabs:

// add wp ascripts as this needs jquery and tabs
add_action('wp_print_scripts', 'yourplugin_headscripts');

function yourplugin_headscripts(){
  if ( is_page('nameofpagewhichisusingthisplugin') )
 {
    wp_enqueue_script('jquery');
    wp_enqueue_script('jquery-ui-core');
    wp_enqueue_script('jquery-ui-tabs');
 }
}

Be careful that jquery shortcut ‘$’ is not supported in wordpress, instead you will have to use ‘JQuery(‘#id’)’.

You would think there must be some default css in wordpress like they did for javascript libraries, actually not, what if we need css for jquery tabs? the answer is you will have to put the jquery tab css in your plugin folder then load them using wp_enqueue_style, here is an example:

add_action('wp_print_styles', 'yourtabbed_headstyles');

function yourtabbed_headstyles(){
 if ( is_page('nameofpagewhichisusingthisplugin') )
 {
  $myStyleFile =  plugins_url( 'yourstylesheetname.css', __FILE__ ) ;
  wp_enqueue_style( 'yourpluginname_StyleSheets',$myStyleFile,false,'1.0');
 }
}

A note about the ‘if’ statement before styles and scripts being printed out, if the is_page check does not exist, enqueued styles and scripts of this particular plugin will be emitted to ALL pages even those having nothing to do with this plugin, there are some articles talking about deregister, but I think the best practice is to load them conditionally.

This raises an issue about plugins slowing down system, as a plugin developer, we had better just export pure data rather than pre styled html and functional javascript, if we do need them, then using conditional loading.

As a wordpress user, you might need to be careful about those plugins that come with css and js files, have a look of their loading conditions, otherwise you are loading those scripts and styles on EVERY page.

Happy coding.

Tags:

This entry was posted on Thursday, November 4th, 2010 at 1:29 am and is filed under Javascript, PHP. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

3 Responses to “Using Javascript and CSS in WordPress Plugin”

  1. Exoclyps says:

    Hello there.

    I add this:

    Top the top of my featured.php file. Later I include this php file to load a featured content slider.

    But the info I add just won’t load on the header. What am I doing wrong? I’ve spent so much time trying to get this to work.

    Here is the site:
    http://www.heartofphoto.com/slidetest/

  2. Exoclyps says:

    As I wasn’t really looking to make a plugin, but rather just adding to my website I managed to finally add it to the header by some weird workaround.

    So I suppose my quest for help on that part is not as active. But still, perhaps there was some details that I missed and should have kept in mind?

    • CleanCodeNZ says:

      If you are not making a plugin then you are doing something in your theme, there is a header.php for your theme, so you can put your slider php in that file. Theme development is different from plugin, plugin should work with all themes. Your site is nice.

Leave a Reply

*