<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>soderlind.no &#187; general</title>
	<atom:link href="http://soderlind.no/archives/tag/admin_print_scripts/feed/" rel="self" type="application/rss+xml" />
	<link>http://soderlind.no</link>
	<description>I code for fun</description>
	<lastBuildDate>Wed, 01 Feb 2012 07:06:29 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
<xhtml:meta xmlns:xhtml="http://www.w3.org/1999/xhtml" name="robots" content="noindex" />
		<item>
		<title>WordPress plugin template</title>
		<link>http://soderlind.no/archives/2010/03/04/wordpress-plugin-template/</link>
		<comments>http://soderlind.no/archives/2010/03/04/wordpress-plugin-template/#comments</comments>
		<pubDate>Thu, 04 Mar 2010 10:21:45 +0000</pubDate>
		<dc:creator>PerS</dc:creator>
				<category><![CDATA[general]]></category>
		<category><![CDATA[wp-plugins]]></category>
		<category><![CDATA[admin_print_scripts]]></category>
		<category><![CDATA[author]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[plugins_url]]></category>
		<category><![CDATA[wp_enqueue_script]]></category>
		<category><![CDATA[wp_localize_script]]></category>
		<category><![CDATA[wp_print_scripts]]></category>

		<guid isPermaLink="false">http://soderlind.no/?p=873</guid>
		<description><![CDATA[UPDATE: As of WordPress 3.3, you shouldn&#8217;t use the wp_print_styles hook, I&#8217;ve updated the Adding JavaScript section below to reflect this change. You can create a personalized plugin template by using my WordPress Plugin Template Creator When I  rewrote my &#8230; <a href="http://soderlind.no/archives/2010/03/04/wordpress-plugin-template/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p><strong>UPDATE</strong>: As of WordPress 3.3, <a href="http://wpdevel.wordpress.com/2011/12/12/use-wp_enqueue_scripts-not-wp_print_styles-to-enqueue-scripts-and-styles-for-the-frontend/">you shouldn&#8217;t use the wp_print_styles hook</a>, I&#8217;ve updated the <a href="#adding_javascript">Adding JavaScript</a> section below to reflect this change.</p>
<blockquote><p>You can create a personalized plugin template by using my <a href="http://soderlind.no/wordpress-plugin-template-creator/">WordPress Plugin Template Creator</a></p></blockquote>
<p>When I  rewrote my <a href="http://soderlind.no/archives/2008/04/18/wp-denyhost/">WP-DenyHost</a> plugin, I wanted to do it as fast as possible. Instead of reinventing the wheel (again), I googled after a plugin template and found a very good one at <a href="http://pressography.com/plugins/wordpress-plugin-template/">Pressography</a>. It had most of what I needed in a plugin template.</p>
<p><span id="more-873"></span></p>
<h3>Modifications to the Pressography plugin template</h3>
<p>I&#8217;ve made some changes to the Pressography plugin template and I have explained them below. Before you continue to read this article, you should view the video at <a href="http://pressography.com/plugins/wordpress-plugin-template/">Pressography</a>, it presents the idea behind the plugin template and how it works. You get the full source of my modified plugin template by using my <a href="http://soderlind.no/wordpress-plugin-template-creator/">WordPress Plugin Template Creator</a></p>
<p>Being able to use new functionality in WordPress, I&#8217;ve decided that my plugins will only support WordPress one <a href="http://en.wikipedia.org/wiki/Software_versioning#Incrementing_sequences">minor version</a> lower than the current i.e. the current is 2.9 and hence my plugins and this plugin template will only supports WordPress 2.8 and later.</p>
<h3>plugins_url()</h3>
<p>WordPress 2.8 extended the <a href="http://codex.wordpress.org/Function_Reference/plugins_url">plugins_url</a>() function which makes it easy to find the plugin location. In the plugin template constructor, I use plugins_url() to find the languages files and the plugin itself:</p>
<pre class="brush: php; gutter: false; title: ; notranslate">
function __construct(){
	//Language Setup
	$locale = get_locale();
	$mo = plugins_url(&quot;/languages/&quot; . $this-&gt;localizationDomain . &quot;-&quot;.$locale.&quot;.mo&quot;, __FILE__);
	load_textdomain($this-&gt;localizationDomain, $mo);

	//&quot;Constants&quot; setup
	$this-&gt;url = plugins_url(basename(__FILE__), __FILE__);
	$this-&gt;urlpath = plugins_url('', __FILE__);

	//Initialize the options
	$this-&gt;getOptions();

	//Actions
	add_action(&quot;admin_menu&quot;, array(&amp;$this,&quot;admin_menu_link&quot;));
	add_action('admin_enqueue_scripts', array(&amp;$this,'{plugin_slug}_script')); // or wp_enqueue_scripts or login_enqueue_scripts
	add_action(&quot;init&quot;, array(&amp;$this,&quot;{plugin_slug}_init&quot;));
}
</pre>
<p><a name="adding_javascript"></a></p>
<h3>Adding JavaScript</h3>
<p>I&#8217;ve done it and I still see plugin authors adding scripts using the wp_head function. There&#8217;s only one correct way of adding scripts, and that&#8217;s using <a href="http://codex.wordpress.org/Function_Reference/wp_enqueue_script">wp_enqueue_script</a> via one of the script hooks (<del datetime="2012-01-10T19:23:36+00:00">admin_print_scripts, wp_print_scripts</del> <a href="http://wpdevel.wordpress.com/2011/12/12/use-wp_enqueue_scripts-not-wp_print_styles-to-enqueue-scripts-and-styles-for-the-frontend/">wp_enqueue_scripts, login_enqueue_scripts and admin_enqueue_scripts</a>). wp_enqueue_script makes sure that the script loads in the correct order and that a script is only loaded once (e.g. If another plugin has already loaded jQuery, my plugin will not load jQuery, but use the script already loaded).</p>
<p>I&#8217;ve added the <del datetime="2012-01-10T19:23:36+00:00">wp_print_scripts</del> admin_enqueue_scripts hook to the plugin template (see the constructor above). Use the wp_enqueue_scripts or login_enqueue_scripts if you want to load the script on the front-end or login page. The <del datetime="2012-01-10T19:23:36+00:00">wp_print_scripts</del> admin_enqueue_scripts hook adds the  {plugin_slug}_script function in which  I enqueue the scripts:</p>
<pre class="brush: php; gutter: false; title: ; notranslate">
function {plugin_slug}_script() {
	wp_enqueue_script('jquery'); // other scripts included with WordPress: http://tinyurl.com/y875age
	wp_enqueue_script('jquery-validate', 'http://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.min.js', array('jquery'));
	wp_enqueue_script('{plugin_slug}_script', $this-&gt;url.'?{plugin_slug}_javascript', array('jquery-validate')); // load embedded javascript
	wp_localize_script( '{plugin_slug}_script', '{plugin_slug}_lang', array(
		'required' =&gt; __('Please enter a number.', $this-&gt;localizationDomain),
		'number'   =&gt; __('Please enter a number.', $this-&gt;localizationDomain),
		'min'	   =&gt; __('Please enter a value greater than or equal to 1.', $this-&gt;localizationDomain),
	));
}
</pre>
<p>wp_localize_script, in the code above, creates a JavaScript object that passes the language strings to the embedded JavaScript:</p>
<pre class="brush: jscript; gutter: false; title: ; notranslate">
&lt;script type='text/javascript'&gt;
/* CDATA[ */
var {plugin_slug}_lang = {
	required: &quot;Please enter a number.&quot;,
	number: &quot;Please enter a number.&quot;,
	min: &quot;Please enter a value greater than or equal to 1.&quot;
};
/* ]]&gt; */
&lt;/script&gt;
</pre>
<h3>Embedding JavaScript</h3>
<p>When I write my plugins I like to keep the code in one file, that&#8217;s why I also embed the JavaScript code:</p>
<pre class="brush: php; gutter: false; title: ; notranslate">
if (isset($_GET['{plugin_slug}_javascript'])) {

	Header(&quot;content-type: application/x-javascript&quot;);
	echo&lt;&lt;&lt;ENDJS
/**
* @desc {Full Plugin Name}
* @author {Author} - {URL}
*/

jQuery(document).ready(function(){
	jQuery(&quot;#{plugin_slug}_options&quot;).validate({
		rules: {
			{plugin_slug}_option1: {
				required: true,
				number: true,
				min: 1
			}
		},
		messages: {
			{plugin_slug}_option1: {
				// the {plugin_slug}_lang object is define using wp_localize_script() in function {plugin_slug}_script()
				required: {plugin_slug}_lang.required,
				number: {plugin_slug}_lang.number,
				min: {plugin_slug}_lang.min
			}
		}
	});
});

ENDJS;
}
</pre>
<p>Note: If you prefer to keep your JavaScript code in a separate file, you can add it by adding the following to {plugin_slug}_script:</p>
<pre class="brush: php; gutter: false; highlight: [5]; title: ; notranslate">
function {plugin_slug}_script() {
	if (is_admin()){ // Only run when in wp-admin. Other conditional tags at http://codex.wordpress.org/Conditional_Tags
		wp_enqueue_script('jquery'); // other scripts included with WordPress: http://tinyurl.com/y875age
		wp_enqueue_script('jquery-validate', 'http://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.min.js', array('jquery'));
		wp_enqueue_script('{plugin_slug}_script', $this-&gt;urlpath.'/myscript.js', array('jquery)); //load your script
		wp_localize_script( '{plugin_slug}_script', '{plugin_slug}_lang', array(
			'required' =&gt; __('Please enter a number.', $this-&gt;localizationDomain),
			'number'   =&gt; __('Please enter a number.', $this-&gt;localizationDomain),
			'min'	   =&gt; __('Please enter a value greater than or equal to 1.', $this-&gt;localizationDomain),
		));
	}
}
</pre>
<h3>WordPress Plugin Template Creator</h3>
<p>While writing this article, I decided to create a tool that will create a personalized plugin template. The <a href="http://soderlind.no/wordpress-plugin-template-creator/">WordPress Plugin Template Creator</a> takes your input, creates the necessary slugs and returns a personalized plugin template you can build your own plugin with.</p>
]]></content:encoded>
			<wfw:commentRss>http://soderlind.no/archives/2010/03/04/wordpress-plugin-template/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

