888888.888888.88""Yb..dP"Yb..8888b..Yb..dP.88b.88....db....8b....d8.88..dP""b8..dP"Y8
88__...88__...88__dP.dP...Yb..8I..Yb.YbdP..88Yb88...dPYb...88b..d88.88.dP...`".`Ybo."
88""...88""...88"Yb..Yb...dP..8I..dY..8P...88.Y88..dP__Yb..88YbdP88.88.Yb......o.`Y8b
88.....888888.88..Yb..YbodP..8888Y"..dP....88..Y8.dP""""Yb.88.YY.88.88..YboodP.8bodP'


88b.88.888888.888888.Yb........dP.dP"Yb..88""Yb.88..dP
88Yb88.88__.....88....Yb..db..dP.dP...Yb.88__dP.88odP.
88.Y88.88"".....88.....YbdPYbdP..Yb...dP.88"Yb..88"Yb.
88..Y8.888888...88......YP..YP....YbodP..88..Yb.88..Yb

October 1, 2008

How many plugins do you use that have a small number of config settings that you almost never need to go back to? These plugins might help prevent spam, add a widget, or shortcode; they have settings but, crucially, don’t need tweaking or changing very often, if at all. What a waste it is for these plugins to create new admin pages just for that. Well here’s an alternative.

Take a look at this entry from my plugin page:

This entry has an extra action: configure. Selecting configure opens panel beneath the entry containing the basic configuration options letting you change the settings from the plugin page itself, and without requiring the addition of another admin page.

How it is done

You can download this sample plugin at the end of this post, but here is an explanation of how you achieve this in your own plugin.

There are four parts to this technique:

  1. Insert the form
  2. Insert the configure link and open the form
  3. Handle the form feedack.

I’ll explain these in turn.

Insert the form

When the table loads that lists all the plugins an action (after_plugin_row) is triggered imediately after each row. This action passes three values: the filepath of the plugin, the basic details of the plugin, and the state of the plugin, so whether it is active, inactive, or recently active.

Adding the form means checking against these to ensure that the form is inserted at the right point and outputing the form itself:

[php]
add_action("after_plugin_row", array(&$this,"add_config_form"), 10, 3);

function add_config_form($pluginfile, $plugindata, $context){
if ( $plugindata['Name'] == 'Plugin Config Sample' && $context == 'active' ) {
?>

Plugin Config Sample Configuration



}
}

It is important to note that the plugin page is effectively one big form. This means that you can't use an actual form to make the update, which is why there are no form tags in the function above. You will need to Ajax to get the data and submit it.

The plugin also adds some CSS so that the form is hidden by default which means we need javascript to make it visible.

Using jQuery it is very easy to work back and insert the configure link, the javascript is included in the sample plugin below so I won't spit it out right here.

The final part is using Ajax to actually update the plugin.

Jquery includes some really easy functions for using ajax so the following is all I have used:

[js]
$('#pcsc_config_submit').click(function(){ pcsc_config_update()});

function pcsc_config_update(){

//get the important value
API_Val = $('#pcsc_config-API').val();

//set the url
url = '/wp-admin/admin-ajax.php';

//add the action and the actual value
$.post(url , { "action" : "pcsc_config-update" , "pcsc_config-API" : API_Val }, function(d){
if ( d == 'updated' ) {
//show the updated message
$('#pcsc_message').show();
}
});
}

The important point to note here is the URL and the action value. By sending the request to admin-ajax.php and including an action name (pcsc_config-update) you can use a hook to handle request.

The following code in the plugin handles the request:

[php]
add_action("wp_ajax_pcsc_config-update", array(&$this,"save_config"));

function save_config(){
if ( !update_option('pcsc_config-API' , $_POST['pcsc_config-API'])){
add_option('pcsc_config-API' , $_POST['pcsc_config-API']);
};

die('updated');

}

Note the hook that calls the save_config function is 'wp_ajax_' + the action specified in the ajax call. The function updates the option and then dies and echos 'updated'. Looking back at the javascript, it tests for the value updated in the return data and makes the success message visible if it is there.

Obviously a real world scenario would include validation, error handling, and nonces.

You can download the example plugin here, it is very basic, just enough to demonstrate the technique, but hopefully you will consider this method next time you make a plugin that doesn't require much configuration. This will help to make WordPress a little less cluttered for everyone.

The 2.7 version of my Fun with Plugins, plugin generator, will include this has an option.

Update:I've just been pointed toward a filter that I overlooked (odd as I looked for something that did this specifically) which means extra actions can be added to the action list without the use of Javascript which is excellent news. Details of the filter: plugin_action_links can be found at Nerdaphernalia.

Because of this I have updated the plugin to include an alternative options as well. Option 1 is the javascript link, the second option will link to the settings page, but doesn't add an admin menu, so there is still only one link to it.

Wordpress Chat
Wordpress plugins chat?
3 comments
page 1308
Post Image The Easy Peasy Way
Calling for images using php wordpress?
26 comments
page 1065
3 Ways To Speed Up Your Blog Without A Cache Plugin
Comment on a few ways to speed up your blog?
one comment
page 1321
Updating Code Snippets Here
Code snippets?
one comment
page 1338
Wpunlimited The Ultimate Wordpress Theme
Html5 wordpress?
3 comments
page 1141
Fun With Theme Widgets
Funy photo widget?
24 comments
page 867
Quick N Dirty Admin Login Screen
Login page css templates?
no comment
page 128
Wpunlimited The Ultimate Wordpress Theme
Html5 wordpress?
3 comments
page 1141
Post Image The Easy Peasy Way
Wordpress attach image to multiple posts?
26 comments
page 1065
Using Your Own Url Shortener
Wordpress clear rewrite rules?
4 comments
page 1190
Quick N Dirty Category Redirection
Wordpress redirect category?
no comment
page 133
Html 5 Gallery
Themeatic html5?
6 comments
page 1305
Premium Ithemes Review Photo Gallery
Ithemes review?
4 comments
page 226
Updating Code Snippets Here
Wordpress fun plugins?
one comment
page 1338
Updating Code Snippets Here
Wordpress fun?
one comment
page 1338
Theming Habari Vs Wordpress
How to design a habari theme?
13 comments
page 440
Why I Ditched Disqus
Disqus email?
5 comments
page 1175
Post Image The Easy Peasy Way
Wordpress first image?
26 comments
page 1065
Quick N Dirty Admin Login Screen
login screen using css?
no comment
page 128
Html 5 Gallery
Picture gallery html5?
6 comments
page 1305
Post Image The Easy Peasy Way
Resizing images in thecontent?
26 comments
page 1065
Post Image The Easy Peasy Way
Wordpress first image gallery?
26 comments
page 1065
Html 5 Gallery
Html 5 photo gallery?
6 comments
page 1305
Post Image The Easy Peasy Way
Inserting an image url in comments?
26 comments
page 1065
Post Image The Easy Peasy Way
Wp attachment functions?
26 comments
page 1065
Dont Mess With My Toot Toot
Wordpress custom content?
16 comments
page 599
Using Your Own Url Shortener
String shortner?
4 comments
page 1190
Quick N Dirty Admin Login Screen
My admin login page?
no comment
page 128
Using Your Own Url Shortener
How to build a shortner link?
4 comments
page 1190
Theming Habari Vs Wordpress
Habari vs wordpress?
13 comments
page 440
Post Image The Easy Peasy Way
Get post attacments?
26 comments
page 1065
Are Child Themes The Best Option
Wp child themes?
15 comments
page 1262
Upload From Url
Upload to url?
6 comments
page 326
  1 query every 1232 seconds, updated 1 seconds ago.
Tuesday, 5pm
 __
(__)
   `

 Andrew Rickmann

Frank, I'm not quite sure which bit of it you don't know so I have tried to guess.

You need to add a new value in the jquery using

if ($('#secure_wp_index').is(':checked'))
{
SecureWP = 1;
} else {
SecureWP = 0;
}

Then add it to the post object right after “pcsc_config-API” : API_Val, so you change that to read:
“pcsc_config-API” : API_Val , “SecureWP” : SecureWP

you can then check what value is set in PHP using $_POST['SecureWP'] == 1

Tuesday, 2pm
 __
(__)
   `

 Frank

THanks for yout time. I use thsi in php/html
<input type="checkbox" name="secure_wp_index" id="secure_wp_index" value="1" <?php if ( $secure_wp_index == '1') { echo "checked='checked'"; } ?> />
Wth this is it possible to save the value of the checkbox. How i make this in the form with wp_ajax?

Friday, 8pm
 __
(__)
   `

 Andrew Rickmann

Which part is it that you are have a problem with? Is it the javascript side, or the PHP side?

Thursday, 9pm
 __
(__)
   `

 Frank

Nice workflow and i like this.
I have tested this code and i have a probelm, maybe you can help me?
How it is possible to use a input-field type checkbox for update the vaule in options?
I can't see the resoltion.
Thanks!

Monday, 4pm
 __
(__)
   `

 Where Is That Settings Page? | PATRONIT.NET

[...] the weekend, I happened to come across a post written by Andrew Rickmann which showcased an idea to create a configure link next next to the usual Activate/Deactivate Edit [...]

Monday, 4pm
 __
(__)
   `

 Configure This | PATRONIT.NET

[...] Keith and I dissect the news of the week. Jacob Santos was cool enough to call in to confirm that Andrew Rickmanns idea of placing a configure link inside of the plugin management panel would be included in the [...]

Saturday, 9pm
 __
(__)
   `

 Weblog Tools Collection: Configure This | Aslifm Blogu

[...] Keith and I dissect the news of the week. Jacob Santos was cool enough to call in to confirm that Andrew Rickmanns idea of placing a configure link inside of the plugin management panel would be included in the [...]

Friday, 7am
 __
(__)
   `

 Weblog Tools Collection: Configure This | PR & Tech

[...] Keith and I dissect the news of the week. Jacob Santos was cool enough to call in to confirm that Andrew Rickmanns idea of placing a configure link inside of the plugin management panel would be included in the [...]

Thursday, 5pm
 __
(__)
   `

 Weblog Tools Collection: Configure This | Aslifmbiz Blog

[...] Keith and I dissect the news of the week. Jacob Santos was cool enough to call in to confirm that Andrew Rickmanns idea of placing a configure link inside of the plugin management panel would be included in the [...]

Sunday, 6am
 __
(__)
   `

 Configure This · Softonix.com

[...] Keith and I dissect the news of the week. Jacob Santos was cool enough to call in to confirm that Andrew Rickmanns idea of placing a configure link inside of the plugin management panel would be included in the [...]

Sunday, 6am
 __
(__)
   `

 Where Is That Settings Page? · Softonix.com

[...] the weekend, I happened to come across a post written by Andrew Rickmann which showcased an idea to create a configure link next next to the usual Activate/Deactivate Edit [...]

Saturday, 5pm
 __
(__)
   `

 Configure This | PATRON DIGITAL.COM

[...] Keith and I dissect the news of the week. Jacob Santos was cool enough to call in to confirm that Andrew Rickmanns idea of placing a configure link inside of the plugin management panel would be included in the [...]