<?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>Xavisys&#187; shortcodes</title>
	<atom:link href="http://xavisys.com/tag/shortcodes/feed/" rel="self" type="application/rss+xml" />
	<link>http://xavisys.com</link>
	<description>WordPress Plugins and Custom WordPress Development</description>
	<lastBuildDate>Wed, 16 Nov 2011 20:45:51 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
	<atom:link rel='hub' href='http://xavisys.com/?pushpress=hub'/>
		<item>
		<title>Efficient Related Posts 0.3.2 Released</title>
		<link>http://xavisys.com/efficient-related-posts-032-released/</link>
		<comments>http://xavisys.com/efficient-related-posts-032-released/#comments</comments>
		<pubDate>Sat, 22 Aug 2009 17:48:55 +0000</pubDate>
		<dc:creator>Aaron D. Campbell</dc:creator>
				<category><![CDATA[WordPress Plugin Updates]]></category>
		<category><![CDATA[Efficient Related Posts]]></category>
		<category><![CDATA[Related Posts]]></category>
		<category><![CDATA[shortcodes]]></category>
		<category><![CDATA[Wordpress Plugin Update]]></category>

		<guid isPermaLink="false">http://xavisys.com/?p=464</guid>
		<description><![CDATA[Version 0.3.2 of Efficient Related Posts was just released. Due to popular demand, it now has a shortcode to add add the list of posts anywhere shortcodes are supported in the loop. The readme was also updated to answer some of the common usage questions and to explain how to use the new shortcode. The [...]]]></description>
			<content:encoded><![CDATA[<p>Version 0.3.2 of <a href="http://xavisys.com/2009/06/efficient-related-posts/">Efficient Related Posts</a> was just released.  Due to popular demand, it now has a shortcode to add add the list of posts anywhere shortcodes are supported in the loop.  The readme was also updated to answer some of the common usage questions and to explain how to use the new shortcode.</p>
<p>The best place to find information is on the <a href="http://xavisys.com/2009/06/efficient-related-posts/">Efficient Related Posts</a> page which is updated regularly.  However, here are some of the new FAQs.</p>
<h4>How can I add a list of related posts to my posts?</h4>
<p>You can configure Efficient Related Posts to add related posts automatically in Settings -&gt; Related Posts.  Alternatively you can use the shortcode [relatedPosts] or the helper functions <code>wp_get_related_posts()</code> and <code>wp_related_posts()</code> in your theme files.</p>
<h4>How exactly do you use the [relatedPosts] shortcode?</h4>
<p>To use the default settings (from Settings -&gt; Related Posts) you just need to add <code>[relatedPosts]</code> to your post or page where you want to list to be.  You can also add some attributes to it such as num_to_display (Number of related posts to display), no_rp_text (Text to display if there are no related posts), and title (Title for related posts list, empty for none) like this:</p>
<ul>
<li><code>[relatedPosts title="Most Related Post" num_to_display="1"]</code></li>
<li><code>[relatedPosts num_to_display="1" no_rp_text="No Related Posts Found"]</code></li>
<li><code>[relatedPosts title="Try these related posts:" num_to_display="3" no_rp_text="No Related Posts Found"]</code></li>
</ul>
<h4>How do the theme helper functions work?</h4>
<p>You can use <code>wp_get_related_posts()</code> and <code>wp_related_posts()</code> to display a list of related posts in your theme.  They need to be used in &#8220;the loop&#8221; and the only difference is that <code>wp_get_related_posts()</code> returns the list and wp_related_posts() echos the list.  You can also pass an associative array of arguments to it such as num_to_display (Number of related posts to display), no_rp_text (Text to display if there are no related posts), and title (Title for related posts list, empty for none) like this:</p>
<ul>
<li><code>wp_related_posts(array('title'=&gt;'Most Related Post', 'num_to_display'=&gt;1))</code></li>
<li><code>echo wp_get_related_posts(array('num_to_display'=&gt;1, 'no_rp_text'=&gt;'No Related Posts Found'))</code></li>
<li><code>wp_related_posts(array('title'=&gt;'Most Related Post', 'num_to_display'=&gt;3, 'no_rp_text'=&gt;'No Related Posts Found'))</code></li>
</ul>
<h3 class='related_post_title'>Related Posts:</h3>
<ul class='related_post'>
<li><a href='http://xavisys.com/problem-related-post-plugins/' title='The Problem with Related Post Plugins'>The Problem with Related Post Plugins</a></li>
<li><a href='http://xavisys.com/wordpress-plugins/manual-related-links/' title='Manual Related Links'>Manual Related Links</a></li>
<li><a href='http://xavisys.com/wordpress-plugins/efficient-related-posts/' title='Efficient Related Posts'>Efficient Related Posts</a></li>
<li><a href='http://xavisys.com/wordpress-25-shortcodes/' title='WordPress 2.5 Shortcodes'>WordPress 2.5 Shortcodes</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://xavisys.com/efficient-related-posts-032-released/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>WordPress 2.5 Shortcodes</title>
		<link>http://xavisys.com/wordpress-25-shortcodes/</link>
		<comments>http://xavisys.com/wordpress-25-shortcodes/#comments</comments>
		<pubDate>Tue, 15 Apr 2008 18:57:52 +0000</pubDate>
		<dc:creator>Aaron D. Campbell</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[shortcodes]]></category>

		<guid isPermaLink="false">http://xavisys.com/?p=84</guid>
		<description><![CDATA[Warning: Shortcodes are affected by Trac ticket 6444, which was fixed in WordPress 2.5.1. First I touched on the topic in my first impressions of WordPress 2.5. Then I whined a little about the tickets relating to them, and eventually I released my Google Maps Plugin that uses them. In the end, WordPress&#8217;s new shortcodes [...]]]></description>
			<content:encoded><![CDATA[<p style="font-weight: bold; text-align: center;" class="message">Warning: Shortcodes are affected by <a href="http://trac.wordpress.org/ticket/6444">Trac ticket 6444</a>, which was fixed in WordPress 2.5.1.</p>
<p>First I touched on the topic in my <a href="http://xavisys.com/wordpress-25-first-impressions/">first impressions of WordPress 2.5</a>.  Then I <a href="http://twitter.com/aaroncampbell/statuses/785219794">whined a little about the tickets</a> relating to them, and eventually I released my <a href="http://xavisys.com/wordpress-plugins/google-maps/">Google Maps Plugin</a> that uses them.  In the end, <a href="http://codex.wordpress.org/Shortcode_API">WordPress&#8217;s new shortcodes</a> are really nice.</p>
<h2>What are they?</h2>
<p>First of all, a shortcode called &#8220;mycode&#8221; can look like any of these:</p>
<pre class="brush: xml; title: ; notranslate">[mycode]
[mycode foo=&quot;bar&quot; id=&quot;123&quot; color=&quot;red&quot; something=&quot;data&quot;]
[mycode]Some Content[/mycode]
[mycode]&lt;p&gt;&lt;a href=&quot;http://example.com/&quot;&gt;HTML Content&lt;/a&gt;&lt;/p&gt;[/mycode]
[mycode]Content [another-shotcode] more content[/mycode]
[mycode foo=&quot;bar&quot; id=&quot;123&quot;]Some Content[/mycode]
</pre>
<p>As you can see, shortcodes allow a user to put a code into a post or page, and a plugin can then easily handle those codes.  They can be nested, contain content (including HTML), attributes, etc.  Sounds great, but how can you leverage shortcodes for your benefit?</p>
<h2>How can I use them?</h2>
<p>You want to leverage the new, powerful shortcode system in WordPress 2.5, but where do you start?<br />
<span id="more-84"></span><br />
First of all, you need to add your shortcode:</p>
<pre class="brush: php; title: ; notranslate">add_shortcode('mycode', 'yourFunction');</pre>
<p>Your function should take two arguments and return the content that you want to replace the shortcode with.  The first argument will be an associative array of attributes (keys will be the attribute names, and the value will be the corresponding attribute value), and the second will be the content between the tags.</p>
<p>To handle default attributes, you can use shortcode_atts($defaultsArray, $attributesArray):</p>
<pre class="brush: php; title: ; notranslate">
function yourFunction ($attr, $content) {
    $attr = shortcode_atts(array('foo'   =&gt; 'bar',
                                 'id'    =&gt; '',
                                 'color' =&gt; 'blue'), $attr);
    return '&lt;h2&gt;Attributes&lt;/h2&gt;&lt;pre&gt;' . print_r($attr, true) . '&lt;/pre&gt;&lt;h2&gt;content&lt;/h2&gt;' . $content;
}</pre>
<p>That&#8217;s it!  That&#8217;s why they are so great, it takes next to nothing to handle!  However, maybe you&#8217;re thinking about a relatively complex way to use these, and you want to take it to the next level.</p>
<h2>The Next Level</h2>
<p>Maybe you&#8217;re worried that you&#8217;re users won&#8217;t grasp the intricacies of your shortcodes, or will be plagued by typos.  It&#8217;s a valid concern.  For example, I don&#8217;t want to assume that my users will be able to create a Google map by flawlessly entering:</p>
<pre class="brush: xml; title: ; notranslate"><div id='map_1' style='width:&quot;100%&quot;; height:&quot;400&quot;;' class='googleMap'></div>
<div id='dir_1'></div>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
    wpGMaps.wpNewMap(1, {"name":"&quot;Aero","mousewheel":true,"zoompancontrol":true,"typecontrol":true,"directions_to":"&quot;true&quot;","directions_from":"&quot;true&quot;","width":"&quot;100%&quot;","height":"&quot;400&quot;","description":"","address":"3432 W. Clarendon, 85017"});
}
//]]&gt;
</script></pre>
<p>The solution is to create a way for your users to generate the shortcodes and have them sent to the editor, but where to start?  First, you need to add a meta box to the writing/editing pages (these are the dropdown boxes below the editor, such as Tags, Categories, etc).  To do this, create a function that you will use to display the form used to generate your shortcode (I&#8217;m going to call it &#8220;insertForm&#8221;).  Then you need to hook into the admin_menu action, and use it to create the metaboxes:</p>
<pre class="brush: php; title: ; notranslate">
&lt;?php
function handleAdminMenu() {
    // You have to add one to the &quot;post&quot; writing/editing page, and one to the &quot;page&quot; writing/editing page
    add_meta_box('yourMetaBoxID', 'Your Meta Box Title', 'insertForm', 'post', 'normal');
    add_meta_box('yourMetaBoxID', 'Your Meta Box Title', 'insertForm', 'page', 'normal');
}

function insertForm() {
?&gt;
        &lt;table class=&quot;form-table&quot;&gt;
            &lt;tr valign=&quot;top&quot;&gt;
                &lt;th scope=&quot;row&quot;&gt;&lt;label for=&quot;wpYourPluginName_content&quot;&gt;&lt;?php _e('Tag Content:')?&gt;&lt;/label&gt;&lt;/th&gt;
                &lt;td&gt;
                    &lt;input type=&quot;text&quot; size=&quot;40&quot; style=&quot;width:95%;&quot; name=&quot;wpYourPluginName[content]&quot; id=&quot;wpYourPluginName_content&quot; /&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr valign=&quot;top&quot;&gt;
                &lt;th scope=&quot;row&quot;&gt;&lt;label for=&quot;wpYourPluginName_foo&quot;&gt;&lt;?php _e('Foo Attribute:')?&gt;&lt;/label&gt;&lt;/th&gt;
                &lt;td&gt;
                    &lt;input type=&quot;text&quot; size=&quot;40&quot; style=&quot;width:95%;&quot; name=&quot;wpYourPluginName[foo]&quot; id=&quot;wpYourPluginName_foo&quot; /&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr valign=&quot;top&quot;&gt;
                &lt;th scope=&quot;row&quot;&gt;&lt;label for=&quot;wpYourPluginName_bar&quot;&gt;&lt;?php _e('Bar Attribute:')?&gt;&lt;/label&gt;&lt;/th&gt;
                &lt;td&gt;
                    &lt;input type=&quot;text&quot; size=&quot;40&quot; style=&quot;width:95%;&quot; name=&quot;wpYourPluginName[bar]&quot; id=&quot;wpYourPluginName_bar&quot; /&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/table&gt;
        &lt;p class=&quot;submit&quot;&gt;
            &lt;input type=&quot;button&quot; onclick=&quot;return wpYourPluginAdmin.sendToEditor(this.form);&quot; value=&quot;&lt;?php _e('Send Map to Editor &amp;raquo;'); ?&gt;&quot; /&gt;
        &lt;/p&gt;
&lt;?php
}

function adminHead () {
    if ($GLOBALS['editing']) {
        wp_enqueue_script('wpYourPluginNameAdmin', 'path/to/yourJsFile.js', array('jquery'), '1.0.0');
    }
}

add_action('admin_menu', 'handleAdminMenu');
add_filter('admin_print_scripts', 'adminHead');
?&gt;
</pre>
<p>The specifics:<br />
yourMetaBoxID becomes the id of the metabox div.<br />
&#8220;Your Meta Box Title&#8221; will be the displayed title for the metabox.</p>
<p>You may have noticed that the submit button calls some javascript (specifically wpYourPluginAdmin.sendToEditor(this.form)), and we enqueue a JavaScript file.  Here is that file:</p>
<pre class="brush: jscript; title: ; notranslate">/**
 * Handle: wpYourPluginNameAdmin
 * Version: 0.0.1
 * Deps: jquery
 * Enqueue: true
 */

var wpYourPluginNameAdmin = function () {}

wpYourPluginNameAdmin.prototype = {
    options           : {},
    generateShortCode : function() {
        var content = this['options']['content'];
        delete this['options']['content'];

        var attrs = '';
        jQuery.each(this['options'], function(name, value){
            if (value != '') {
                attrs += ' ' + name + '=&quot;' + value + '&quot;';
            }
        });
        return '<div id='map_2' style='width:100%; height:400px;' class='googleMap'></div>
<div id='dir_2'></div>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
    wpGMaps.wpNewMap(2, {"name":"","mousewheel":true,"zoompancontrol":true,"typecontrol":true,"directions_to":true,"directions_from":false,"width":"100%","height":"400px","description":"","address":"' + content + '"});
}
//]]&gt;
</script>'
    },
    sendToEditor      : function(f) {
        var collection = jQuery(f).find(&quot;input[id^=wpYourPluginName]:not(input:checkbox),input[id^=wpYourPluginName]:checkbox:checked&quot;);
        var $this = this;
        collection.each(function () {
            var name = this.name.substring(13, this.name.length-1);
            $this['options'][name] = this.value;
        });
        send_to_editor(this.generateShortCode());
        return false;
    }
}

var wpYourPluginAdmin = new wpYourPluginNameAdmin();</pre>
<p>This JavaScript parses items from the form, formats a shortcode, and sends it to the editor!  Now you can create an interface for your user, to allow to easily generate VALID shortcodes for you to parse.<br />
<h3 class='related_post_title'>Related Posts:</h3>
<ul class='related_post'>
<li><a href='http://xavisys.com/reorder-gallery-now-in-wordpress-core/' title='Reorder Gallery now in WordPress Core'>Reorder Gallery now in WordPress Core</a></li>
<li><a href='http://xavisys.com/wordpress-should-update-get_sidebar-to-work-with-multiple-sidebars/' title='Wordpress Should Update get_sidebar to Work With Multiple Sidebars'>WordPress Should Update get_sidebar to Work With Multiple Sidebars</a></li>
<li><a href='http://xavisys.com/speaking-at-wordcamp-san-francisco-2011/' title='Speaking at WordCamp San Francisco 2011'>Speaking at WordCamp San Francisco 2011</a></li>
<li><a href='http://xavisys.com/wordpress-q-a/' title='WordPress Q &amp; A'>WordPress Q &#038; A</a></li>
<li><a href='http://xavisys.com/google-summer-of-code-2010/' title='Google Summer of Code 2010'>Google Summer of Code 2010</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://xavisys.com/wordpress-25-shortcodes/feed/</wfw:commentRss>
		<slash:comments>63</slash:comments>
		</item>
	</channel>
</rss>

