jQuery – Accordion Image Menu Plugin

Overview

Jquery Accordion Image Menu Plugin allows to create an accordion menu using the images as background. It’s allows multiple animations effects like: swing, circ, back, bounce, etc using the jQuery UI Effects.

How it Works

The plugin provides a method called AccordionImageMenu which is invoked on a container DIV or UL. Each child link of the container can be expanded/contracted with the mouseenter/mouseleave event. Options control the dimensions, title and effects.
Continue reading jQuery – Accordion Image Menu Plugin

WordPress Plugin – Simple Option Page

After writing your plugin maybe you want to allow the users to costumize it. One way to do this is including an option page on the wordpress admin section.
To write a simple option page I’ll use the previews example  Happy Face Replacer Plugin. And I’ll allow the user to set the happy face image url.

Admin Menus/Submenus

First of all you need to figure out where is the best place to include your administration page on the wordpress admin sections: SettingsManage, PluginsPresentation, Write, Users.
In this case I’ll use the “Manage” panel.

The Action

To tell wordpress about your option page you need to use an action ‘hook’ called admin_menu (on the previews post you can read more about wordpress actions, filters and hooks).
In our main plugin file “happy_face_replacer.php” we need to include something like this:

add_action('admin_menu', 'function_to_create_your_menu');

Inside of the ‘funtion to create your menu’ you need to use one of the ‘add_menu/submenu_page’ functions :

add_menu_page(page_title, menu_title, access_level/capability, file, [function]);

for the menus or:

add_submenu_page(parent, page_title, menu_title, access_level/capability, file, [function]);

for the submenus.

In this example we need to call the function:

add_management_page

As your plugin your admin menu, page and functions must have a unique name. Continue reading WordPress Plugin – Simple Option Page

Writing a simple WordPress Plugin

There is two words to describe wordpress: “Simplicity” and “Flexibility”. You can do almost whatever you want with this application and its tons of free themes and plugins. This is a simple plugin example that include the steps I used to write my first plugin.
In this case I will replace the phrase “happy_face” inside the post by an image.

The Standards.

The Name

If you want to share your plugin with the community it has to be unique. No other plugin on the WordPress Plugin Directory can share this name.

In this example let’s use:

Happy Face Replacer

The Files

You need at least one “main file” .php with your principal functions. The name of this file could be derived from your plugin name. Besides you can use the others necessaries folders and .php, .js, .css files.
Our main file could be:

happy_face_replacer.php

The Header

At the top of your main file you need to include this header.

<?php
/*
Plugin Name: Happy Face Replacer
Plugin URI: http://www.pluginURI.com
Description: Plugin Description Here.
Version: 1.0
Author: Your Name
Author URI: http://www.yoursite.com
*/
?>

It will make your plugin look like this at the plugins panel:


The Hooks.

Beftore the version 1.2 to change the functionality of WordPress modifications (hacks) of the source code was needed. Now you can interact with the core of the application using the hooks.
The hooks intercepts the default wordpress behavior. For example, before wordpress shows the content of a post it check if there is a function (hook) registered that modified “the content”, if so the content is passed to this function before to print the final result.

There is two principal hooks:

Actions related to specific events like: add_category, get_header, get_footer.
To use the hook action you need to use this function:

add_action ( 'hook_name', 'your_function_name', [priority], [accepted_args] );

On this link Plugin API/Action Reference you can find the ‘hook_name’ that you need to intercept.

The ‘priority’ is optional and specifies the order in which the functions associated with a particular action are executed (default: 10).

The last parameter defines how many arguments your function can accept (accepted_args = 1 by default).

Filters are function to modified the wordpress data like: the_excerpt, the_title, category_description. Visit Plugin API/Filter Reference.

If you want to ‘hook’ a function to a specific filter action you need this similar function.

add_filter ( 'hook_name', 'your_function_name', [priority], [accepted_args] );

In my example I will use a filter hook. So the main file could be something like this:

<?
add_filter('the_content', 'happy_face_replacer');

function happy_face_replacer ($content) {
     $happy_face_image = "<img src='happy face image URL'>";
     return preg_replace('/happy_face/', $happy_face_image, $content);
}
?>

The function “happy_face_replacer” takes the content of your post ($content) before to be printed and replace the phase “happy_face” by the image.

That’s it.

If you want to try this simple plugin just download the file and install it:

Here you have some useful links:
Writing a Plugin
Plugin API/Hooks 2.0.x
Plugin Resources
Custom Queries