<?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>Christian Schenk&#187; scripts</title>
	<atom:link href="http://www.christianschenk.org/blog/tag/scripts/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.christianschenk.org</link>
	<description>Writing about my experiences with technology and all different kinds of projects and experiments</description>
	<lastBuildDate>Sun, 29 Aug 2010 09:08:16 +0000</lastBuildDate>
	
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>WordPress: Using custom fields to load scripts and styles</title>
		<link>http://www.christianschenk.org/blog/wordpress-custom-fields-load-scripts-styles/</link>
		<comments>http://www.christianschenk.org/blog/wordpress-custom-fields-load-scripts-styles/#comments</comments>
		<pubDate>Sat, 12 Dec 2009 06:12:44 +0000</pubDate>
		<dc:creator>Christian Schenk</dc:creator>
				<category><![CDATA[Tech]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[custom fields]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[scripts]]></category>
		<category><![CDATA[styles]]></category>
		<category><![CDATA[tuning]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://www.christianschenk.org/?p=716</guid>
		<description><![CDATA[If you&#8217;re developing a WordPress plugin that depends on JavaScript or CSS you may advice WordPress to include these things for you. It&#8217;s as easy as using two functions &#8211; wp_enqueue_script and wp_enqueue_style &#8211; and your script or style will be embedded into each and every page generated by WordPress.
Most of the time this is [...]]]></description>
			<content:encoded><![CDATA[<p>If you&#8217;re developing a WordPress plugin that depends on JavaScript or CSS you may advice WordPress to include these things for you. It&#8217;s as easy as using two functions &#8211; <code>wp_enqueue_script</code> and <code>wp_enqueue_style</code> &#8211; and your script or style will be embedded into each and every page generated by WordPress.</p>
<p>Most of the time this is a good thing because it&#8217;ll be easier for your users to implement the plugin on their sites. It gets really ugly if the theme loads certain scripts by default which are incompatible with the scripts needed by your plugin. And users concerned about performance &#8211; e.g. using Yahoo! YSlow or Google&#8217;s PageSpeed &#8211; may want to include only things that are really needed on a particular page.</p>
<p>This post presents a solution using custom fields that allows the user to tell the plugin when to include scripts and styles. Doing it this way helps the user to manage your plugin because of it&#8217;s added flexibility without hacking the code. Newbies trying to circumvent a certain incompatibility and power users tuning their sites to maximum performance both will love this feature of your plugin.</p>
<p><span id="more-716"></span></p>
<h2>Prerequisites</h2>
<p>In my experience custom fields aren&#8217;t very popular and not everybody using WordPress knows what one could do with them. Regarding this lack of knowledge you should make it as easy as possible to use your plugin even if somebody doesn&#8217;t know what custom fields are. By default your plugin shouldn&#8217;t use custom fields altogether but just load scripts and styles on each and every page.</p>
<p>Your plugin should work out of the box without any further modification. Just loading necessary JavaScript and CSS on every page seems to be a good default. So, just testing whether a certain custom field is set to a predefined value isn&#8217;t the way to go. In case your plugin hasn&#8217;t got a configuration page in the admin area yet it&#8217;s time to add one now. Allow the user to enable the usage of custom fields there.</p>
<p>Once a user tells your plugin to use custom fields you shouldn&#8217;t load the scripts and styles like you did before but only on posts/pages with a certain custom field. In case your plugin needs some configuration options allow the user to use the value of the custom field to set these options.</p>
<h2>Bringing it all together</h2>
<p>Above, I outlined some of my ideas on how things should work. You can do it different here and there but in the end I guess it would be great if all plugin/theme developers would use more or less the same strategy when it comes to using custom fields; this would help the users using your plugin if they&#8217;re familiar with custom fields from another plugin.</p>
<p>The code needed is pretty simple: just check whether the user wants to use the custom fields and then evaluate whether the current post/page has got one. It may look like this:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">// right at the beginning of an action like:</span>
<span style="color: #666666; font-style: italic;">// wp_print_scripts, wp_head or wp_footer </span>
<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>get_option<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'my_plugin_use_cf'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">global</span> <span style="color: #000088;">$post</span><span style="color: #339933;">;</span>
  <span style="color: #000088;">$meta</span> <span style="color: #339933;">=</span> get_post_meta<span style="color: #009900;">&#40;</span><span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ID</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'my_custom_field'</span><span style="color: #339933;">,</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #990000;">empty</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$meta</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #b1b100;">return</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// use wp_enqueue_script and wp_enqueue_style here...</span></pre></div></div>

<p>In case the user wants to use the custom fields but the current post/page hasn&#8217;t got one the scripts and styles won&#8217;t be loaded. If the user may add options to the custom field you should parse them here.</p>
<h2>Conclusion</h2>
<p>From a plugin/theme developer&#8217;s perspective it&#8217;s straight forward allowing your users to use custom fields controlling how your plugin behaves. As a user it&#8217;s great having the possibility to use custom fields in case one wants to control how scripts and styles get included. Not only adds this extra flexibility to a plugin but makes updating a snap: you don&#8217;t have to remember how and where you changed the code.</p>
<p>I haven&#8217;t covered the issue that using custom fields may get tricky if your plugin is called directly &#8211; rather during the loop &#8211; maybe via an iFrame. If you do things like that it&#8217;s likely that you know how to access the database yourself or bootstrap WordPress to use <code>$wpdb</code> anyway.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.christianschenk.org/blog/wordpress-custom-fields-load-scripts-styles/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
