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 */ ?>
3. Functions and WP path definitions
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
