{"id":784,"date":"2008-04-11T10:35:44","date_gmt":"2008-04-11T08:35:44","guid":{"rendered":"http:\/\/planetozh.com\/blog\/?p=784"},"modified":"2008-06-16T09:07:10","modified_gmt":"2008-06-16T07:07:10","slug":"how-to-load-javascript-with-your-wordpress-plugin","status":"publish","type":"post","link":"https:\/\/planetozh.com\/blog\/2008\/04\/how-to-load-javascript-with-your-wordpress-plugin\/","title":{"rendered":"How To: Load Javascript With Your WordPress Plugin"},"content":{"rendered":"<p>Adding javascript into an admin page is a critical part of plugin coding. Critical, because it is both trivial and probably reason #1 why it will conflict with other plugins if not done properly. When their plugin needs javascript, Good Plugin Coders&trade; have to make sure of the following points:<\/p>\n<ul>\n<li>add javascript <strong>only once<\/strong>: if you need prototype.js, don&#39;t add it if it&#39;s already included<\/li>\n<li>add javascript <strong>only on your plugin page<\/strong>: don&#39;t load yourscript.js in every admin page (with hook &#39;admin_head&#39;) including on other&#39;s plugin pages.<\/li>\n<\/ul>\n<p>Doing so is hopefully very easy :<!--more--><\/p>\n<h2>Add javascript only once<\/h2>\n<p>Need to include a javascript library or an external script? Don&#39;t ever use some straight <em>echo &#39;&lt;script src=&quot;prototype.js&quot;>&lt;\/script>&#39;;<\/em>. The script might have been already loaded already, so there&#39;s no point in adding it again. Moreover, it can break everything: just add prototype <em>after<\/em> jQuery and you&#39;re ready for some trouble.<\/p>\n<p>Instead, use wp_enqueue_script() :<\/p>\n<div id=\"ig-sh-1\" class=\"syntax_hilite\">\n\n\t\t<div class=\"toolbar\">\n\n\t\t<div class=\"view-different-container\">\n\t\t\t\t\t\t<a href=\"#\" class=\"view-different\">&lt; View <span>plain text<\/span> &gt;<\/a>\n\t\t\t\t\t<\/div>\n\n\t\t<div class=\"language-name\">php<\/div>\n\n\t\t\n\t\t<br clear=\"both\">\n\n\t<\/div>\n\t\n\t<div class=\"code\">\n\t\t<ol class=\"php\" style=\"font-family:monospace\"><li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\">wp_enqueue_script<span style=\"color: #009900\">&#040;<\/span><span style=\"color: #0000ff\">'prototype'<\/span><span style=\"color: #009900\">&#041;<\/span><span style=\"color: #339933\">;<\/span><\/div><\/li>\n<li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\">wp_enqueue_script<span style=\"color: #009900\">&#040;<\/span><span style=\"color: #0000ff\">'myscript'<\/span><span style=\"color: #339933\">,<\/span> <span style=\"color: #0000ff\">'\/wp-content\/plugins\/myplugin\/myscript.js'<\/span><span style=\"color: #009900\">&#041;<\/span><span style=\"color: #339933\">;<\/span><\/div><\/li>\n<li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\">wp_enqueue_script<span style=\"color: #009900\">&#040;<\/span><span style=\"color: #0000ff\">'theirscript'<\/span><span style=\"color: #339933\">,<\/span> <span style=\"color: #0000ff\">'http:\/\/theirsite.com\/script.js'<\/span><span style=\"color: #009900\">&#041;<\/span><span style=\"color: #339933\">;<\/span><\/div><\/li>\n<\/ol>\t<\/div>\n\n<\/div>\n\n<p>Even simpler, if your script needs, say, Scriptaculous to work, just use:<\/p>\n<div id=\"ig-sh-2\" class=\"syntax_hilite\">\n\n\t\t<div class=\"toolbar\">\n\n\t\t<div class=\"view-different-container\">\n\t\t\t\t\t\t<a href=\"#\" class=\"view-different\">&lt; View <span>plain text<\/span> &gt;<\/a>\n\t\t\t\t\t<\/div>\n\n\t\t<div class=\"language-name\">php<\/div>\n\n\t\t\n\t\t<br clear=\"both\">\n\n\t<\/div>\n\t\n\t<div class=\"code\">\n\t\t<ol class=\"php\" style=\"font-family:monospace\"><li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\">wp_enqueue_script<span style=\"color: #009900\">&#040;<\/span><span style=\"color: #0000ff\">'myscript'<\/span><span style=\"color: #339933\">,<\/span> <span style=\"color: #0000ff\">'\/wp-content\/plugins\/myplugin\/myscript.js'<\/span><span style=\"color: #339933\">,<\/span> <span style=\"color: #990000\">array<\/span><span style=\"color: #009900\">&#040;<\/span><span style=\"color: #0000ff\">'scriptaculous'<\/span><span style=\"color: #009900\">&#041;<\/span> <span style=\"color: #009900\">&#041;<\/span><span style=\"color: #339933\">;<\/span><\/div><\/li>\n<\/ol>\t<\/div>\n\n<\/div>\n\n<p><strong>Usage:<\/strong><br \/>\nwp_enqueue_script( [<b><\/b>string: handle], [<b><\/b>optional string: src], [<b><\/b>optional array: dependencies], [<b><\/b>optional string: version number])<\/p>\n<p>There are a number of predefined script handles: &#39;jquery&#39;, &#39;prototype&#39;, &#39;scriptaculous&#39; and a bunch of others. Please refer to <a href=\"http:\/\/codex.wordpress.org\/Function_Reference\/wp_enqueue_script\">wp_enqueue_script() on the Codex<\/a> for more details.<\/p>\n<h2>Add javascript only to your page<\/h2>\n<p>Never ever simply hook into &#39;admin_head&#39; to add your script: not only you will be adding it to every admin pages (the Dashboard, Comments, etc&#8230;) but also to every other plugin pages. Seriously, half of the support question I&#39;ve had with <a href=\"http:\/\/planetozh.com\/blog\/my-projects\/wordpress-plugin-who-sees-ads-control-adsense-display\/\">Who Sees Ads<\/a> were because of WP-ContactForm adding its crappy javascript everywhere it could, including my plugin page.<\/p>\n<p>Instead of testing current page URL in order to determine if it&#39;s your plugin page with a smart strpos() over $pagenow or $_SERVER[&#39;REQUEST_URI&#39;], you should use hook &#39;admin_print_scripts-(page_hook)&#39;<\/p>\n<p>Example with a plugin that would create an admin page under &quot;Manage&quot;:<\/p>\n<div id=\"ig-sh-3\" class=\"syntax_hilite\">\n\n\t\t<div class=\"toolbar\">\n\n\t\t<div class=\"view-different-container\">\n\t\t\t\t\t\t<a href=\"#\" class=\"view-different\">&lt; View <span>plain text<\/span> &gt;<\/a>\n\t\t\t\t\t<\/div>\n\n\t\t<div class=\"language-name\">php<\/div>\n\n\t\t\n\t\t<br clear=\"both\">\n\n\t<\/div>\n\t\n\t<div class=\"code\">\n\t\t<ol class=\"php\" style=\"font-family:monospace\"><li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\"><span style=\"color: #000088\">$mypage<\/span> <span style=\"color: #339933\">=<\/span> add_management_page<span style=\"color: #009900\">&#040;<\/span> <span style=\"color: #0000ff\">'myplugin'<\/span><span style=\"color: #339933\">,<\/span> <span style=\"color: #0000ff\">'myplugin'<\/span><span style=\"color: #339933\">,<\/span> <span style=\"color: #cc66cc\">9<\/span><span style=\"color: #339933\">,<\/span> <span style=\"color: #009900;font-weight: bold\">__FILE__<\/span><span style=\"color: #339933\">,<\/span> <span style=\"color: #0000ff\">'myplugin_admin_page'<\/span> <span style=\"color: #009900\">&#041;<\/span><span style=\"color: #339933\">;<\/span><\/div><\/li>\n<li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\">add_action<span style=\"color: #009900\">&#040;<\/span> <span style=\"color: #0000ff\">&quot;admin_print_scripts-<span style=\"color: #006699;font-weight: bold\">$mypage<\/span>&quot;<\/span><span style=\"color: #339933\">,<\/span> <span style=\"color: #0000ff\">'myplugin_admin_head'<\/span> <span style=\"color: #009900\">&#041;<\/span><span style=\"color: #339933\">;<\/span><\/div><\/li>\n<li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\">&nbsp;<\/div><\/li>\n<li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\"><span style=\"color: #000000;font-weight: bold\">function<\/span> myplugin_admin_head<span style=\"color: #009900\">&#040;<\/span><span style=\"color: #009900\">&#041;<\/span> <span style=\"color: #009900\">&#123;<\/span><\/div><\/li>\n<li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\">&nbsp; &nbsp; <span style=\"color: #666666;font-style: italic\">\/\/ what your plugin needs in its &lt;head&gt;<\/span><\/div><\/li>\n<li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\"><span style=\"color: #009900\">&#125;<\/span><\/div><\/li>\n<\/ol>\t<\/div>\n\n<\/div>\n\n<p>This snippet from <a href=\"http:\/\/www.laptoptips.ca\/\">Andrew Ozz<\/a> on the wp-hackers mailing list.<\/p>\n<h2>Complete Example<\/h2>\n<p>This simple plugin will create an admin page under &quot;Settings&quot; in which a CSS and a JS file will be loaded. Check other pages of the admin area: they won&#39;t be affected.<\/p>\n<p>Download <a href=\"http:\/\/planetozh.com\/blog\/wp-content\/uploads\/2008\/06\/load-js-example.zip\">load-js-example<\/a>.<\/p>\n<h2>Summary<\/h2>\n<p>Be nice to other plugin coders. Add your javascript properly and only where needed. Thanks :)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Adding javascript into an admin page is a critical part of plugin coding. Critical, because it is both trivial and probably reason #1 why it will conflict with other plugins if not done properly. When their plugin needs javascript, Good Plugin Coders&trade; have to make sure of the following points: add javascript only once: if [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[7,85,245,277,278,294],"class_list":["post-784","post","type-post","status-publish","format-standard","hentry","category-published","tag-javascript","tag-plugins","tag-wordpress","tag-wordpress-snippet","tag-wp-hackers","tag-wp_enqueue_script"],"_links":{"self":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/posts\/784","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/comments?post=784"}],"version-history":[{"count":0,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/posts\/784\/revisions"}],"wp:attachment":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/media?parent=784"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/categories?post=784"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/tags?post=784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}