This entry is part 6 of 7 in the Writing Your First WordPress Plugins, Basic to Advanced Series
- How to Begin Writing Your First WordPress plugin
- Structuring Your First WordPress Plugin
- Writing Your First WordPress Plugin Part 3
- Writing Your First WordPress Plugin Part 4
- Writing Your First WordPress Plugin Part 5
- Writing Your First WordPress Plugin Part 6
- Writing Your First WordPress Plugin Part 7 – Final
In part 6 of Writing Your First WordPress Plugin, I’m going to continue where we left off in part 5 and demonstrate how to create your plugin settings form. We will create a complete settings page that allows you to save your plugin options to the database easily from the Settings page that we added in part 5. Plugin settings pages like this are extremely important for high quality plugins because they give your user a much higher lever of control.
Adding the options form is not very difficult, but it can be a bit confusing if you do not understand what is going on. The first thing we need to do is write another short function that will create our plugin options. This allows us to store our options in the WordPress options table. This function should be placed inside of your “admin-page.php” file.
function mfwp_register_settings() { // creates our settings in the options table register_setting('mfwp_settings_group', 'mfwp_settings'); } add_action('admin_init', 'mfwp_register_settings'); |
Our setting(s) is now available for use, all we have to do is retrieve it and then enter some information back into it. Let’s setup a global variable that will contain the contents of our setting. To do that, place this in the globals section of the main plugin file:
// retrieve our plugin settings from the options table $mfwp_options = get_option('mfwp_settings'); |
Now, all we need to do is create the HTML form on our settings page that will enter our custom information into the setting in the database. I’m not going to explain how the form works here, but it is explained in depth in the video. So, open the “admin-page.php” file and replace the complete mfwp_options_page() function with this:
<?php function mfwp_options_page() { global $mfwp_options; ob_start(); ?> <div class="wrap"> <h2>My First WordPress Plugin Options</h2> <form method="post" action="options.php"> <?php settings_fields('mfwp_settings_group'); ?> <h4><?php _e('Twitter Information', 'mfwp_domain'); ?></h4> <p> <label class="description" for="mfwp_settings[twitter_url]"><?php _e('Enter your Twitter URL', 'mfwp_domain'); ?></label> <input id="mfwp_settings[twitter_url]" name="mfwp_settings[twitter_url]" type="text" value="<?php echo $mfwp_options['twitter_url']; ?>"/> </p> <p class="submit"> <input type="submit" class="button-primary" value="<?php _e('Save Options', 'mfwp_domain'); ?>" /> </p> </form> </div> <?php echo ob_get_clean(); } |
Once you’ve done all of this, your settings page should look like this:
Your settings page will now be able to save the Twitter URL inputted by your user. So the last thing to do, is output their saved Twitter URL in the HTML that we have displayed at the bottom of each post. Open your “display-functions.php” and replace the mfwp_add_content() function with this:
<?php function mfwp_add_content($content) { global $mfwp_options; if(is_singular()) { $extra_content = '<p class="twitter-message">Follow me on <a href="' . $mfwp_options['twitter_url'] . '">Twitter</a></p>'; $content .= $extra_content; } return $content; } add_filter('the_content', 'mfwp_add_content'); |
Now, whatever the user enters in the admin page, will be displayed here, in the Twitter link.
In the next section, I will discuss adding additional options, and also doing a little bit of data validation to make sure that no harmful data is entered into the option’s database.
Download WIP Plugin
I have 2 users, and for some reason the twitter information I enter for one user shows up for the other user and vice versa. It’s like they’re seeing the same array field. How come? Great tutorial btw!
Sounds like you have the field names mixed up somewhere. Confirm that all of your input names are correct, and also that the name of the option you are retrieving for each field is correct. Feel free to show me your code via a pastebin.com if you want.
Amazing! Amazing!! Amazing!!!
Ha, thanks đŸ™‚
Nice tutorial.
But still i stucked, got some errors after submitting the url.
Warning: call_user_func_array() [function.call-user-func-array]: First argument is expected to be a valid callback, ‘mfwp_register_settings ‘ was given in /home/ewdcom/public_html/webassignment.in/theme2/wp-includes/plugin.php on line 405
ERROR: options page not found.
Can you show your code please? That error is shown because WP is looking for a function named “mfwp_register_settings”, but it’s not found, so you have probably named it something else.
I am not usually one to comment on a tutorial page but I wanted to take a second and thank you for all of the work and the sudo-in-depth explanation of what is going behind the curtain. This has been very helpful to me and several others that I know are using it. So again thank you.
BTW …
Is there a real advantage to being a paid subscriber if so what is it ?
I’m glad you enjoyed it and thank you for your comment!
As a paid subscriber, you get access to all premium tutorials and several premium plugins. You can see the complete list here.
Hi Pippins Your tutorials are awesome.! Had a great time with lesson five.How does one expand the dropdown actions on Posts to include delete or custom actions. You also need to put together a book and expand from begginers to complex level by exapanding on real life scenairo problems. Thanks once again and am hoping to hear from you.
I’m glad you like them! By drop down actions, are you referring to the sub menu items under the main Posts menu?
WHOA! You are right. There is a lot of stuff going on with the admin options. My head is spinning a bit now, but I’ll take your recommendation for right now to just focus on learning how to add additional inputs, text areas, etc…and allow the register_settings and such come to me in time. I greatly appreciate you taking the time to put this tutorial together. It has been extremely helpful.
Simply great¡¡ Clear, quick and to the point¡¡
Thanks for your great tutorial! I have some plugin idea in my head- yiur tutorial is a great start!
Something in my setup isn’t allowing the data to save. I’ve gone over the code at least 10 times, fixing mistakes and typos, but now I don’t see anything wrong. I had already started my plugin when I got stuck, so some of the elements are in a different order than your tut, but they’re all there and I removed most of the extras I picked up from other tuts along the way.
The fields appear fine, then the message that the settings were saved appears as it should, but the fields empty upon save and refresh.
It’s evolving as I go, but here’s the code up on GitHub: https://github.com/pmgllc/stealth-login-page
Any insights into my error(s) would be greatly appreciated.
I found the error – finally. I was recording the input value as _settings instead of _options. Now the fields are entered when I reloaded the page – didn’t even have to re-enter them.
Great!
Hello again, I can update the URL and it displays. Problem is it also dispays the URL of the home website when I hover? E.g:
http://www.foxtracker.com.au/www.twitter.com
instead of
http://www.twitter.com
??
I don’t understand your question.
I have added the code and updated a twitter address in the field on the admin page. When I then go to the post and hover the mouse over the URL instead of http://www.twitter.com showing and being able to click on it, it shows my websiteurl + the twitter url. I have at no point typed in my homepage URl so it is like it is adding the home page url + what I type in.
If you go here:
http://foxtracker.com.au/?p=1
you will see what I mean.
Where at on that page?
I have redone the code and it works now. No idea why though….
sorry…spoke to soon.
Go to this URL (http://foxtracker.com.au/?p=15
) and hover over ‘Twitter’ and look at the url that pop’s up.
it is showing the home URL plus what I add in the admin page [twitter_url]
It’s acting like i have ‘plugin_dir_url( __file__ )’ as part of the $extra_content field.
Got it!
I was putting http://www.twitter.com in the field and getting the issue. What I did was put HTTP as well and that fixed it.
It would seem that if WordPress uses the HTTP to identify a URL as aposed to a page where the site URL in front of the page name is legit.
finally……
Great!
I’m really enjoying this set of tutorials. It moves kind of fast, but for an experienced programmer, things are quite clear. Thanks very much for producing it.
However, I think you lost it a little in this tutorial when you threw in all that stuff about _e and localization. It just so happens that I do understand that, because I’m working on a trilingual website and I’ve read up on WordPress localization. But as a professor, I always try to look at tutorials from new students’ eyes.
Localization is completely irrelevant and extremely distracting for a tutorial on plugin option pages–the topic is challenging enough that it only makes things more confusing when you throw in an uncompletely unrelated (and nontrivial) aside. Moreover, you aren’t even consistent with the localization, since you left the code in the H2 tag unlocalized–so someone who doesn’t know what it is might be wondering why the H2 text doesn’t need that weird _e stuff whereas the label and the H4 do. This is a shortcoming of an otherwise excellent series.
I don’t completely disagree with you, but I also believe it’s really important for developers to be introduced to internationalization early, otherwise they tend to ignore it until the very end. I18N is something best implemented from day one.
My comment is purely from a pedagogical perspective. I agree with you on the importance of i18n, but I find it is not helpful for learners to throw in a very incomplete piece of a much more complex topic as an aside, just because it is important. It confuses learners. It is usually better to only mention it in passing, but not show it if you don’t have the opportunity to properly explain it.
In contrast, I appreciated how you devoted an entire tutorial (#2) to doing little more than illustrating best practices. If you had tackled i18n there, then it wouldn’t have been so jarring later. Again, another reason it is so jarring is that you do not apply it consistently throughout the tutorial (which seems to indicate that at the time of the tutorial you were training yourself in taking i18n seriously).
As I’ve said, this is a relatively minor comment. Despite this issue, your tutorial is one of the best I’ve found on the Web (and I’ve examined dozens).
Thank you for the feedback!
This wasn’t daunting at all. I really have enjoyed the series so far and have learned a lot. What’s the difference between the free version and the Plugins 101 series? Thanks.
The Plugin 101 series goes into further depth and looks at a lot of the topics that go into writing a really high-quality plugin.
Hi Pippin! I can’t see the video, there is only a white space.
Thanks,
Sorry about that, it has been fixed.
Hi,
I was working in your part 5 of the tutorial and the result you get in your video in the 14th minute was not achieved in my system rather i get an error message like this:
Error: Options page not found.
Help me in this area.
Thanks.
in newer versions of wordpress, options.php was replaced with options-general.php
Thanks for the heads up.
@Thomas S
Thank you, I was getting the same issue!
Thanks for the tutorila Pippin
Sorry not working as I said before. I’m looking to find a solutions and give you feedback.
Ok, options.php still exist and it’s always the right way to use the action=”options.php”.
My problem was in my add_action(‘admin_init’, ‘mfp_register_settings’);
I forgive a caracter to admin_init -_-‘
So please check your function name spelling.
Thank you for all
Hey
I’m sorry. it was not part 5 but 6.
Thanks.
Could you paste your complete code to snippi.com and then share the link here?
Thanks Pippin for a great tutorial. I enjoyed following it and the videos helped also. Am looking forward to expanding on the plugin to include more options.
Hi, just wanna say thank you đŸ™‚
This is GREAT tutorial !! Thanks Pippin !!
Thanks for making such a wonderful tutorial.
Please can you reupload the project please