|
Administrator
Posts: 18,715
Join Date: Jan 2006
Rep Power: 10
|
PHP: Making your own WordPress plugin
In this tutorial I will teach you how to make your very own WordPress Plugin. I will show you how to make an options page in the admin panel, add and change plugin options and more.
WordPress has very good plugin support and so it is fairly simple to make a working plugin. To start off I will show you the basic structure of a plugin file. - [FONT='Courier New',Courier,monospace]<?php[/font]
- [FONT='Courier New',Courier,monospace]/*[/font]
- [FONT='Courier New',Courier,monospace]Plugin Name: The plugin name shown in the plugins admin panel[/font]
- [FONT='Courier New',Courier,monospace]Plugin URI: The plugin URL[/font]
- [FONT='Courier New',Courier,monospace]Description: A short description of your plugin. HTML is allowed.[/font]
- [FONT='Courier New',Courier,monospace]Author: Authors name.[/font]
- [FONT='Courier New',Courier,monospace]Version: The version of your plugin[/font]
- [FONT='Courier New',Courier,monospace]Author URI: The URL of the authors website[/font]
- [FONT='Courier New',Courier,monospace]*/ [/font]
The above code is read by WordPress and the info is displayed the plugins admin panel. All the fields are self explanatory.
- [FONT='Courier New',Courier,monospace]function mycoolpluginintialize(){[/font]
- [FONT='Courier New',Courier,monospace] echo "This is my plugins admin page!<br /> I am so cool!";[/font]
- [FONT='Courier New',Courier,monospace]} [/font]
You need to put the code you want to be executed on your plugin admin page in a function so that when you register the page with WordPress it knows what to show. - [FONT='Courier New',Courier,monospace]function addmyplugintoasubmenu() {[/font]
- [FONT='Courier New',Courier,monospace] add_submenu_page('options-general.php', 'My Cool Plugin page', 'My Cool Plugin', 10, __FILE__, 'mycoolpluginintialize');[/font]
- [FONT='Courier New',Courier,monospace]}[/font]
- [FONT='Courier New',Courier,monospace]add_action('admin_menu', 'addmyplugintoasubmenu');[/font]
- [FONT='Courier New',Courier,monospace]?> [/font]
First we make a function that tells WordPress to add a new submenu under the Options tab ( options-general.php), make the title of the page My Cool Plugin page, name the tab My Cool Plugin, have the tab point to this file and the function mycoolpluginintialize. The 10 is the priority of this function, this can generally be left at 10. Next we call the WordPress function add_action(), this takes two parameters, when to do this action, and what function to call when this action is supposed to be run. admin_menu is a hook in the WordPress admin interface we can use call our add page function and addmyplugintoasubmenu is the function we use to add our options page.
And now here is the full sample code: - [FONT='Courier New',Courier,monospace]<?php[/font]
- [FONT='Courier New',Courier,monospace]/*[/font]
- [FONT='Courier New',Courier,monospace]Plugin Name: The plugin name shown in the plugins admin panel[/font]
- [FONT='Courier New',Courier,monospace]Plugin URI: The plugin URL[/font]
- [FONT='Courier New',Courier,monospace]Description: A short description of your plugin. HTML is allowed.[/font]
- [FONT='Courier New',Courier,monospace]Author: Authors name.[/font]
- [FONT='Courier New',Courier,monospace]Version: The version of your plugin[/font]
- [FONT='Courier New',Courier,monospace]Author URI: The URL of the authors website[/font]
- [FONT='Courier New',Courier,monospace]*/[/font]
- [FONT='Courier New',Courier,monospace] [/font]
- [FONT='Courier New',Courier,monospace]function mycoolpluginintialize(){[/font]
- [FONT='Courier New',Courier,monospace] echo "This is my plugins admin page!<br /> I am so cool!";[/font]
- [FONT='Courier New',Courier,monospace]}[/font]
- [FONT='Courier New',Courier,monospace] [/font]
- [FONT='Courier New',Courier,monospace]function addmyplugintoasubmenu() {[/font]
- [FONT='Courier New',Courier,monospace] add_submenu_page('options-general.php', 'My Cool Plugin page', 'My Cool Plugin', 10, __FILE__, 'mycoolpluginintialize');[/font]
- [FONT='Courier New',Courier,monospace]}[/font]
- [FONT='Courier New',Courier,monospace]add_action('admin_menu', 'addmyplugintoasubmenu');[/font]
- [FONT='Courier New',Courier,monospace]?> [/font]
Not as confusing as you though eh? You can try and save that in a file in your plugins directory and it will work. Try activating it, it doesn't do much but it's a start.
You might be asking how do I make my plugin a sub-page of a different tab. Simple, change options-general.php in the above example to the name of a different admin page, here are some admin pages: - Dashboard - index.php
- Write - post.php
- Manage - edit.php
- Links - link-manager.php
- Presentation - themes.php
- Plugins - plugins.php
- Users - profile.php
- Options - options-general.php
- Import - import.php
Now lets make a plugin that will add an introduction to the home page of your blog and make that introduction editable in the admin panel. To start we will do something similar to the above except with a few extra functions that will check if the admin form has been submitted and output the introduction to the template. - [FONT='Courier New',Courier,monospace]<?php[/font]
- [FONT='Courier New',Courier,monospace]/*[/font]
- [FONT='Courier New',Courier,monospace]Plugin Name: Hepa7's Into Plugin[/font]
- [FONT='Courier New',Courier,monospace]Plugin URI: http://www.marek.litomisky.com[/font]
- [FONT='Courier New',Courier,monospace]Description: This plugin allows you to have an introduction on your blog home page.[/font]
- [FONT='Courier New',Courier,monospace]Author: Marek Litomisky[/font]
- [FONT='Courier New',Courier,monospace]Version: 0.1[/font]
- [FONT='Courier New',Courier,monospace]Author URI: http://www.marek.litomisky.com[/font]
- [FONT='Courier New',Courier,monospace]*/[/font]
- [FONT='Courier New',Courier,monospace] [/font]
- [FONT='Courier New',Courier,monospace]//This function will be used in our templates to show the intro.[/font]
- [FONT='Courier New',Courier,monospace]function hepa_intro_show(){[/font]
- [FONT='Courier New',Courier,monospace] $check_on = get_option("hepa_intro_active"); //Get plugin option to check if we want to show the intro[/font]
- [FONT='Courier New',Courier,monospace] if($check_on){[/font]
- [FONT='Courier New',Courier,monospace] $intro_title = get_option("hepa_intro_title"); //Get option title[/font]
- [FONT='Courier New',Courier,monospace] $intro_text = get_option("hepa_intro_text"); //Get option text[/font]
- [FONT='Courier New',Courier,monospace] echo "<h2>".$intro_title."</h2><p>".$intro_text."</p>"; //echo the whole thing[/font]
- [FONT='Courier New',Courier,monospace] }[/font]
- [FONT='Courier New',Courier,monospace]} [/font]
It's a good idea to give your plugin functions and options a unique prefix ( hepa_intro_) because WordPress will crash if it detects dual function names. The code above tells WordPress some info and makes the function that will display the intro. Any functions declared in a plugin can be used in a template so to add the intro to any template we will simply call this function. - [FONT='Courier New',Courier,monospace]//Make our admin page function[/font]
- [FONT='Courier New',Courier,monospace]function hepa_intro_adminpage(){[/font]
- [FONT='Courier New',Courier,monospace] //Check if the admin form has been submited[/font]
- [FONT='Courier New',Courier,monospace] if(isset($_POST['submitted'])){[/font]
- [FONT='Courier New',Courier,monospace] //Get form data[/font]
- [FONT='Courier New',Courier,monospace] $intro_ison = $_POST['ison'];[/font]
- [FONT='Courier New',Courier,monospace] $intro_title = $_POST['title'];[/font]
- [FONT='Courier New',Courier,monospace] $intro_text = $_POST['text'];[/font]
- [FONT='Courier New',Courier,monospace] //Update plugin options[/font]
- [FONT='Courier New',Courier,monospace] update_option("hepa_intro_title", $intro_title); //The first parameter is the name of the option and the second is the value, this will be stored in the database by WordPress[/font]
- [FONT='Courier New',Courier,monospace] update_option("hepa_intro_active", $intro_ison);[/font]
- [FONT='Courier New',Courier,monospace] update_option("hepa_intro_text", $intro_text);[/font]
- [FONT='Courier New',Courier,monospace] //echo a pretty 'Options Edited' message[/font]
- [FONT='Courier New',Courier,monospace] echo "<div id=\"message\" class=\"updated fade\"><p><strong>Intro plugin options updated.</strong></p></div>";[/font]
- [FONT='Courier New',Courier,monospace] }[/font]
- [FONT='Courier New',Courier,monospace] //echo the code for a nice container for our plugin admin page[/font]
- [FONT='Courier New',Courier,monospace] echo "<div class=\"wrap\">[/font]
- [FONT='Courier New',Courier,monospace] <h2>Intro plugin Setup</h2><br />You can configure <strong>Hepa7's Intro Plugin</strong> here. You can change wether the plugin shows the intro, the intro title, and the intro text. For support visit http://www.marek.litomisky.com";[/font]
- [FONT='Courier New',Courier,monospace] //It's always a good idea to put in a link to your website so that the user can get support and check for newer versions.[/font]
- [FONT='Courier New',Courier,monospace] //Make a nice little form for the option editing[/font]
- [FONT='Courier New',Courier,monospace] ?><form method="post" name="options" target="_self">[/font]
- [FONT='Courier New',Courier,monospace]<table width="100%" border="0" cellspacing="2" cellpadding="2">[/font]
- [FONT='Courier New',Courier,monospace] <tr>[/font]
- [FONT='Courier New',Courier,monospace] <td width="300">Do you want to activate the intro plugin?</td>[/font]
- [FONT='Courier New',Courier,monospace] <td><select name="ison">[/font]
- [FONT='Courier New',Courier,monospace] <option value="true" selected="selected">Yes</option>[/font]
- [FONT='Courier New',Courier,monospace] <option value="false">No</option>[/font]
- [FONT='Courier New',Courier,monospace] </select>[/font]
- [FONT='Courier New',Courier,monospace] </td>[/font]
- [FONT='Courier New',Courier,monospace] </tr>[/font]
- [FONT='Courier New',Courier,monospace] <tr>[/font]
- [FONT='Courier New',Courier,monospace] <td>Intro Title:</td>[/font]
- [FONT='Courier New',Courier,monospace] <td><input name="title" type="text" style="width:100%;" /></td>[/font]
- [FONT='Courier New',Courier,monospace] </tr>[/font]
- [FONT='Courier New',Courier,monospace] <tr>[/font]
- [FONT='Courier New',Courier,monospace] <td>Intro text:</td>[/font]
- [FONT='Courier New',Courier,monospace] <td><textarea name="text" style="height: 200px; width:100%;"></textarea></td>[/font]
- [FONT='Courier New',Courier,monospace] </tr>[/font]
- [FONT='Courier New',Courier,monospace]</table>[/font]
- [FONT='Courier New',Courier,monospace]<p class="submit">[/font]
- [FONT='Courier New',Courier,monospace]<input name="submitted" type="hidden" value="yes" />[/font]
- [FONT='Courier New',Courier,monospace]<input type="submit" name="Submit" value="Update Options »" />[/font]
- [FONT='Courier New',Courier,monospace]</p>[/font]
- [FONT='Courier New',Courier,monospace]</form></div><?php [/font]
- [FONT='Courier New',Courier,monospace]} [/font]
The form has no action, this will simply submit the form to the same page. The submit button is in a specialy themed paragraph tag to make it look pretty. And now for the last part, adding the admin page and then adding the intro into a template. - [FONT='Courier New',Courier,monospace]//Add the options page under the Options tab in the admin panel[/font]
- [FONT='Courier New',Courier,monospace]function hepa_intro_addpage() {[/font]
- [FONT='Courier New',Courier,monospace] add_submenu_page('options-general.php', 'Intro Plugin Options', 'Intro Plugin Options', 10, __FILE__, 'hepa_intro_adminpage');[/font]
- [FONT='Courier New',Courier,monospace]}[/font]
- [FONT='Courier New',Courier,monospace]add_action('admin_menu', 'hepa_intro_addpage');[/font]
- [FONT='Courier New',Courier,monospace]?> [/font]
The above code simply adds the admin page. The whole plugin code: - [FONT='Courier New',Courier,monospace]<?php[/font]
- [FONT='Courier New',Courier,monospace]/*[/font]
- [FONT='Courier New',Courier,monospace]Plugin Name: Hepa7's Into Plugin[/font]
- [FONT='Courier New',Courier,monospace]Plugin URI: http://www.marek.litomisky.com[/font]
- [FONT='Courier New',Courier,monospace]Description: This plugin allows you to have an introduction on your blog home page.[/font]
- [FONT='Courier New',Courier,monospace]Author: Marek Litomisky[/font]
- [FONT='Courier New',Courier,monospace]Version: 0.1[/font]
- [FONT='Courier New',Courier,monospace]Author URI: http://www.marek.litomisky.com[/font]
- [FONT='Courier New',Courier,monospace]*/[/font]
- [FONT='Courier New',Courier,monospace] [/font]
- [FONT='Courier New',Courier,monospace]//This function will be used in our templates to show the intro.[/font]
- [FONT='Courier New',Courier,monospace]function hepa_intro_show(){[/font]
- [FONT='Courier New',Courier,monospace] $check_on = get_option("hepa_intro_active"); //Get plugin option to check if we want to show the intro[/font]
- [FONT='Courier New',Courier,monospace] if($check_on){[/font]
- [FONT='Courier New',Courier,monospace] $intro_title = get_option("hepa_intro_title"); //Get option title[/font]
- [FONT='Courier New',Courier,monospace] $intro_text = get_option("hepa_intro_text"); //Get option text[/font]
- [FONT='Courier New',Courier,monospace] echo "<h2>".$intro_title."</h2><p>".$intro_text."</p>"; //echo the whole thing[/font]
- [FONT='Courier New',Courier,monospace] }[/font]
- [FONT='Courier New',Courier,monospace]}[/font]
- [FONT='Courier New',Courier,monospace] [/font]
- [FONT='Courier New',Courier,monospace]//Make our admin page function[/font]
- [FONT='Courier New',Courier,monospace]function hepa_intro_adminpage(){[/font]
- [FONT='Courier New',Courier,monospace] //Check if the admin form has been submited[/font]
- [FONT='Courier New',Courier,monospace] if(isset($_POST['submitted'])){[/font]
- [FONT='Courier New',Courier,monospace] //Get form data[/font]
- [FONT='Courier New',Courier,monospace] $intro_ison = $_POST['ison'];[/font]
- [FONT='Courier New',Courier,monospace] $intro_title = $_POST['title'];[/font]
- [FONT='Courier New',Courier,monospace] $intro_text = $_POST['text'];[/font]
- [FONT='Courier New',Courier,monospace] //Update plugin options[/font]
- [FONT='Courier New',Courier,monospace] update_option("hepa_intro_title", $intro_title); //The first parameter is the name of the option and the second is the value, this will be stored in the database by WordPress[/font]
- [FONT='Courier New',Courier,monospace] update_option("hepa_intro_active", $intro_ison);[/font]
- [FONT='Courier New',Courier,monospace] update_option("hepa_intro_text", $intro_text);[/font]
- [FONT='Courier New',Courier,monospace] //echo a pretty 'Options Edited' message[/font]
- [FONT='Courier New',Courier,monospace] echo "<div id=\"message\" class=\"updated fade\"><p><strong>Intro plugin options updated.</strong></p></div>";[/font]
- [FONT='Courier New',Courier,monospace] }[/font]
- [FONT='Courier New',Courier,monospace] //echo the code for a nice container for our plugin admin page[/font]
- [FONT='Courier New',Courier,monospace] echo "<div class=\"wrap\">[/font]
- [FONT='Courier New',Courier,monospace] <h2>Intro plugin Setup</h2><br />You can configure <strong>Hepa7's Intro Plugin</strong> here. You can change wether the plugin shows the intro, the intro title, and the intro text. For support visit http://www.marek.litomisky.com";[/font]
- [FONT='Courier New',Courier,monospace] //It's always a good idea to put in a link to your website so that the user can get support and check for newer versions.[/font]
- [FONT='Courier New',Courier,monospace] //Make a nice little form for the option editing[/font]
- [FONT='Courier New',Courier,monospace] ?><form method="post" name="options" target="_self">[/font]
- [FONT='Courier New',Courier,monospace]<table width="100%" border="0" cellspacing="2" cellpadding="2">[/font]
- [FONT='Courier New',Courier,monospace] <tr>[/font]
- [FONT='Courier New',Courier,monospace] <td width="300">Do you want to activate the intro plugin?</td>[/font]
- [FONT='Courier New',Courier,monospace] <td><select name="ison">[/font]
- [FONT='Courier New',Courier,monospace] <option value="true" selected="selected">Yes</option>[/font]
- [FONT='Courier New',Courier,monospace] <option value="false">No</option>[/font]
- [FONT='Courier New',Courier,monospace] </select>[/font]
- [FONT='Courier New',Courier,monospace] </td>[/font]
- [FONT='Courier New',Courier,monospace] </tr>[/font]
- [FONT='Courier New',Courier,monospace] <tr>[/font]
- [FONT='Courier New',Courier,monospace] <td>Intro Title:</td>[/font]
- [FONT='Courier New',Courier,monospace] <td><input name="title" type="text" style="width:100%;" /></td>[/font]
- [FONT='Courier New',Courier,monospace] </tr>[/font]
- [FONT='Courier New',Courier,monospace] <tr>[/font]
- [FONT='Courier New',Courier,monospace] <td>Intro text:</td>[/font]
- [FONT='Courier New',Courier,monospace] <td><textarea name="text" style="height: 200px; width:100%;"></textarea></td>[/font]
- [FONT='Courier New',Courier,monospace] </tr>[/font]
- [FONT='Courier New',Courier,monospace]</table>[/font]
- [FONT='Courier New',Courier,monospace]<p class="submit">[/font]
- [FONT='Courier New',Courier,monospace]<input name="submitted" type="hidden" value="yes" />[/font]
- [FONT='Courier New',Courier,monospace]<input type="submit" name="Submit" value="Update Options »" />[/font]
- [FONT='Courier New',Courier,monospace]</p>[/font]
- [FONT='Courier New',Courier,monospace]</form></div><?php [/font]
- [FONT='Courier New',Courier,monospace]}[/font]
- [FONT='Courier New',Courier,monospace] [/font]
- [FONT='Courier New',Courier,monospace]//Add the options page under the Options tab in the admin panel[/font]
- [FONT='Courier New',Courier,monospace]function hepa_intro_addpage() {[/font]
- [FONT='Courier New',Courier,monospace] add_submenu_page('options-general.php', 'Intro Plugin Options', 'Intro Plugin Options', 10, __FILE__, 'hepa_intro_adminpage');[/font]
- [FONT='Courier New',Courier,monospace]}[/font]
- [FONT='Courier New',Courier,monospace]add_action('admin_menu', 'hepa_intro_addpage');[/font]
- [FONT='Courier New',Courier,monospace]?> [/font]
The last thing we need to do is to add the intro to the home page of our template. Each template is different so I will show you the code to use and where to put it in the default template. In the WordPress admin interface go to the Presentation tab, make sure your blogs template is the default one, then go to the Theme Editor tab. On the right select the template file Main Index Template. Now find the following code: - [FONT='Courier New',Courier,monospace]<?php if (have_posts()) : ?> [/font]
And add the following code before it: - [FONT='Courier New',Courier,monospace]<?php hepa_intro_show() ?> [/font]
The code you add might be different if you changed the name of the function. Also you might need to put the code elsewhere depending on the template you are using.
Thats it! Now make sure you upload the plugin file to the wp-content/plugins/ directory, active it, and fill in the options, and the intro should show up on your blog homepage.
The plugin you made in this tutorial is very simple, one feature you might want to add is remembering the options you have set in the options page so you don't have to re-write the whole introduction every time you want to edit it.
|