Post

To be honest, I don’t know a whole lot about creating WordPress plugins. I needed a Tab-Slide Out Plugin for WordPress but none of the ones I could find did just what I wanted them to do. So I found out is that it isn’t really very hard to start a plugin — it’s very similar to creating a page template. I just needed to create a *.php file that contains the following:


<?php
/**
* @package plugin_folder
* @version 1.0
/
/
Plugin Name: Name of the Plugin
Plugin URI:http://your_domain.com/plugin-support-directory/
Description: Short Description of the Plugin
Author: Your Name
Version: 1.0
Author URI: http://www.your_domain.com/
*/
?>


Of course, this doesn’t actually do anything until you create a function or action but if you create this *.php file and place it in the WordPress plugin directory/plugin_folder, you’ll see a new plugin that can be activated!

So what? Well, it’s a start. . .

I started looking into this when I wanted to use the handy jQuery tabslideout plugin, “tabSlideOut v1.3”,  by William Paoli on a WordPress multisite. Rather than adding in the jQuery code to every site individually, I wanted to activate it globally — like a network activated plugin. So I made myself a minimally functional plugin that shows up on all of the theme demos pages to help navigate between themes.

The tab displayed on the right near the top of this page is only slightly modified from the jQuery plugin and has been limited to being displayed on just this page. I just needed to create a directory structure that matches the structure for the jQuery plugin (e.g., ‘/css’ & ‘/js’), then load the jQuery scripts via the ‘wp_enqueue_script’ and ‘wp_enqueue_style’ functions.  In this case, it’s just this:

function tab_panel() {
wp_enqueue_script('tabs', plugins_url('js/tabSlideOut.vCTH.js', FILE), array('jquery'), 1.3, false);
wp_enqueue_script('tabsmagic', plugins_url('js/tabSlideOut_Magic.js', FILE), array('jquery'), 1, true);
wp_enqueue_style( 'tab-style', plugins_url('css/tabs.css', FILE) );
}
add_action( 'wp_footer', 'tab_panel' );


Then there needs to be the information to display inside the tab-slide panel.  If I was ambitious, this would be some variable code that is taken from a settings panel on the admin side of the plugin. But, because I was in a hurry (and, as I said, I don’t really know that much about creating plugins), I created the panel manually in the main plugin file as this:

$start_panel = '<div class="slide-out-div">

<a class="handle" href="http://link-for-non-js-users.html">Content</a>
<h3>Slideout Tab</h3>
<p>This is a jQuery Plugin by <a class="front_links" href="http://wpaoli.building58.com/" target="_blank" title="Author">William Paoli</a>
that has been adapted to be a WordPress plugin.</p>
<br/><p>There are no Dashboard Options for this plugin. It can only be edited via the WordPress Plugin Editor.</p>
<br/><p>It can be used as a contact form or any number of other informational uses.</p>
<br/><img src="/wp-content/plugins/tabs_appear/images/CTH_TAB.png" width="47" height="45"style=""/>';

echo $start_panel;
$end_panel = '</div><!--End .slide-out-div -->';

echo $end_panel;
}

add_action( 'wp_footer', 'create_panel' );

Combine those two sections with the plugin package info and voilà, it’s a plugin! One thing I liked about this jQuery plugin is that it slides in when a click happens outside of the plugin.  When I was looking at pre-built WP plugins, I never found one that worked as well as this lovely little jQuery code.

Anyway, here’s the package to download, if anyone wants to build a better tab-slide out plugin for WP!

Tabs Appear WordPress Plugin

Have fun!