WordPress plugin template: Shortcodes Toolbox

Wordpress plugin template shortcodes toolbox

WordPress is one of the web’s most beloved and used CMS platform. And we cannot agree more with this,… why? It’s easy to use, great free themes, huge support community and the best of them, it’s open source. For those who are not so familiar with WP, or maybe they need just another reason to switch to WP, WDC brings you an exclusive tutorial/freebie.

In this article we will try to explain the process of creating a WordPress plugin and also give you an exclusive plugin template freebie on which you can work, extend the plugin according your needs or use it for learning purposes. In the tutorial part we will cover a simple yet very useful topic called “shortcodes”. We all love those quick tags right? They make our publisher life easier so why not to built a custom plugin, personalized for our needs.

For an easier comprehension of the process we will name this base plugin “Shortcodes Toolbox”. Enjoy and share this article!

1. Plugin presentation and file structure

Introduced in WordPress 2.5 is the Shortcode API, a simple set of functions for creating macro codes for use in post content. ”Shortcodes Toolbox” allows you to add shortcodes into WordPress pages and/or post using short tags. Add buttons, links, related posts etc. without any HTML or CSS knowledge.

Let’s dive into it: Firstly we need to create the file structure. Create  a directory called shortcodes-toolbox. In this directory create a file called shortcodes-toolbox.php.

2. Basic plugin information and format

In order to proceed creating a WordPress plugin we need to keep in mind some basic rules. The most important step is adding the plugin information. Edit the previously created shortcodes-toolbox.php file and add the following lines:

<?php /*
Plugin Name: Name Of The Plugin
Plugin URI: http://URI_Of_Page_Describing_Plugin_and_Updates
Description: A brief description of the Plugin.
Version: The Plugin's Version Number, e.g.: 1.0
Author: Name Of The Plugin Author
Author URI: http://URI_Of_The_Plugin_Author
License: A license name e.g. GPL2
*/
?>
If you wish to publish the plugin on the official WordPress.org repository too you will need to follow some guidelines. For more information follow this link. For personal use, these are all the steps you need to make to have a functional plugin.

 

3. Functions and WP path definitions

It’s time to get into some PHP coding. First we need to define the WP paths and any CSS or JS files we intend to use. To have an example let’s create a file called style.css and place it into a directory called css (located in the main directory we created in the first step). So we end up with a file structure like shortcodes-toolbox/css/style.css
Let’s continue with the shortcodes-toolbox.php file editing and more precisely let’s add the WP paths. Add the following lines:
if(!defined('WP_CONTENT_URL'))
define('WP_CONTENT_URL', get_option('siteurl') . '/wp-content');
if(!defined('WP_CONTENT_DIR'))
define('WP_CONTENT_DIR', ABSPATH . 'wp-content');
if(!defined('WP_PLUGIN_URL'))
define('WP_PLUGIN_URL', WP_CONTENT_URL. '/plugins');
if(!defined('WP_PLUGIN_DIR'))
define('WP_PLUGIN_DIR', WP_CONTENT_DIR . '/plugins');

class STbox {
function cssStyles() {
$stPath = WP_PLUGIN_URL.'/'.plugin_basename(dirname(__FILE__)).'/styles/'.'/';
echo ' 			'."\n";
}
}

4. Plugin functionality

We can call this the heart of the plugin: the functionality part. To keep it dead simple let’s add some basic functionality like links, custom download buttons (styled via CSS) and a related posts feature. Keep in mind that these are just some basic examples and you have the freedom to add anything you like, or modify it according you needs.

Now let’s add some more PHP sparkle into the shortcodes-toolbox.php file:

/* Simple URL function */
function URL($atts, $content = null) {
	extract(shortcode_atts(array(
		"url" => 'http://'
	), $atts));
	return '<a href="'.$url.'">'.$content.'</a>';
}

/* Download button function, with multiple style posibilities (via CSS) */
function DownloadButton($atts, $content = null) {
	extract(shortcode_atts(array(
		"url" => 'http://',
        "color" => ''
	), $atts));
	return '<a href="'.$url.'">'.$content.'</a>';
}

/* Related posts function */
function RelatedPosts( $atts ) {
	extract(shortcode_atts(array(
	    'limit' => '5',
	), $atts));

	global $wpdb, $post, $table_prefix;

	if ($post->ID) {
		$retval = '<ul>';
 		// Get tags
		$tags = wp_get_post_tags($post->ID);
		$tagsarray = array();
		foreach ($tags as $tag) {
			$tagsarray[] = $tag->term_id;
		}
		$tagslist = implode(',', $tagsarray);

		// Do the query
		$q = "SELECT p.*, count(tr.object_id) as count
			FROM $wpdb->term_taxonomy AS tt, $wpdb->term_relationships AS tr, $wpdb->posts AS p WHERE tt.taxonomy ='post_tag' AND tt.term_taxonomy_id = tr.term_taxonomy_id AND tr.object_id  = p.ID AND tt.term_id IN ($tagslist) AND p.ID != $post->ID
				AND p.post_status = 'publish'
				AND p.post_date_gmt < NOW()
 			GROUP BY tr.object_id
			ORDER BY count DESC, p.post_date_gmt DESC
			LIMIT $limit;";

		$related = $wpdb->get_results($q);
 		if ( $related ) {
			foreach($related as $r) {
				$retval .= '<li><a title="'.wptexturize($r->post_title).'" href="'.get_permalink($r->ID).'">'.wptexturize($r->post_title).'</a></li>';
			}
		} else {
			$retval .= '
	<li>No related posts found.</li>';
		}
		$retval .= '</ul>';
		return $retval;
	}
	return;
}

We are now with the core file of this plugin. Save everything and open-up the style.css file.

6. CSS styling

In order to have some pretty download buttons we need to add some CSS styling. Open the style.css file and add the following lines:

.green a:link, .green a:visited{
color:#ffffff;
text-decoration:none !important;
}

.black a:link, .black a:visited{
color:#ffffff;
text-decoration:none !important;
}

.green a:hover, .black:hover{
color:#ffffff;
text-decoration:none !important;
}

.green {
display: inline-block;
font-weight:bold;
font-size:1.2em;
background : -webkit-gradient(linear, left top, left bottom, from(#88c841), to(#73b338));
background : -moz-linear-gradient(center top, #88c841, #73b338);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 5px 20px;
text-align: center;
-shadow: 0px 1px 0px #6c0909;
color:#ffffff !important;
text-decoration:none !important;
}

.green:hover {
background : -webkit-gradient(linear, left top, left bottom, from(#73b338), to(#88c841));
background : -moz-linear-gradient(center top, #73b338, #88c841);
color:#ffffff !important;
text-decoration:none !important;
}

.black {
display: inline-block;
font-weight:bold;
font-size:1.2em;
background : -webkit-gradient(linear, left top, left bottom, from(#000000), to(#414141));
background : -moz-linear-gradient(center top, #414141, #000000);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 5px 20px;
text-align: center;
-shadow: 0px 1px 0px #6c0909;
color:#ffffff !important;
text-decoration:none !important;
}

.black:hover {
background : -webkit-gradient(linear, left top, left bottom, from(#414141), to(#000000));
background : -moz-linear-gradient(center top, #000000, #414141);
color:#ffffff !important;
text-decoration:none !important;
}

7. Installation and testing

We are good to go. Let’s try the newly created plugin. Create a zip archive of the main directory shortcodes-toolbox and upload it via your WPs administration panel (Plugins->Add new). After the installation is successful create a new post or page and add the following lines to test out the plugin:

[DownloadButton url="http://www.google.com" color="green"]Download Google Chrome[/DownloadButton]
[DownloadButton url="http://www.google.com" color="black"]Download Google Chrome[/DownloadButton]
[link href="http://www.yahoo.com"]Yahoo[/link]

Save the post and voila. We have two shiny download buttons and a simple link. Everything added via shortcodes.

We hope you enjoyed this quick tutorial and don’t forget to download the source files too. For any questions don’t hesitate to use the comment section and be sure to share this article with your perks. Have fun and stay tuned for more great articles!

Download
Incoming search terms:

6 Comments

  1. USA Free Driving Online Test

    Good one thanks for sharing
    Joe

  2. chris

    great post ;)

  3. SCT

    can not believe it!! I was just “raped” Google in search of this information! Author – you’re the best!

  4. alexei

    It doesn’t install and work:(

Trackbacks for this post

  1. Cоздаем простой плагин для WordPress

Leave a Comment