I have already covered the basics of WordPress plugin development in how to create a WordPress plugin tutorial. In that tutorial, you learned how to create a proper WordPress plugin header so that it can be activated and deactivated from the WordPress admin panel, and how to call a plugin’s function in a WordPress theme. In this tutorial, we will create a WordPress plugin admin panel or options page using the WordPress Options API.
• First we will create a place to store the value of our option in WordPress database using the add_option function. It will be done on the activation of the plugin. We must also make sure that this option is deleted from the database when the user is no longer using the plugin, that is, when the plugin is deactivated. This can be done using the delete_option function.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | /* What to do when the plugin is activated? */ register_activation_hook(__FILE__,'my_first_plugin_install'); /* What to do when the plugin is deactivated? */ register_deactivation_hook( __FILE__, 'my_first_plugin_remove' ); function my_first_plugin_install() { /* Create a new database field */ add_option("my_first_data", 'Testing !! My Plugin is Working Fine.', 'This is my first plugin panel data.', 'yes'); } function my_first_plugin_remove() { /* Delete the database field */ delete_option('my_first_data'); } |
In the code above. when the plugin is activated, my_first_plugin_install function will be called which will create a new entry in database with the name my_first_data. When the plugin is deactivated, my_first_plugin_remove function will be called which will delete the my_first_plugin_remove entry from database.
• Now we will create a new sub menu item in the WordPress dashboard, under the ‘Settings’ top menu, using the function add_options_page.
1 2 3 4 5 | add_action('admin_menu', 'my_first_admin_menu'); function my_first_admin_menu() { add_options_page('Plugin Admin Options', 'My Plugin Settings', 'manage_options', 'my-first', 'plugin_admin_options_page'); } |
The above code will create a new menu entry under Settings, with the name ‘My Plugin Settings’ as shown in the image.
While calling add_options_page function, we also defined which function should be called when the user goes to our WordPress plugin’s admin panel. The function is plugin_admin_options_page.
Here’s the code for plugin_admin_options_page function. This code basically creates a text label, text box and a submit button. Users can save values directly on this plugin admin panel.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <?php function plugin_admin_options_page() { ?> <div class="wrap"> <?php screen_icon(); ?> <h2>Plugin Options Admin Page</h2> <p> <form method="post" action="options.php"> <?php wp_nonce_field('update-options'); ?> Enter Text: <input name="my_first_data" type="text" id="my_first_data" value="<?php echo get_option('my_first_data'); ?>" /> <input type="hidden" name="action" value="update" /> <input type="hidden" name="page_options" value="my_first_data" /> <input type="submit" value="Save Changes" /> </form> </p> </div> <?php } ?> |
After adding the above code, if you click on the ‘My Plugin Settings’ menu, you will see this,
You can now save any value into your plugin’s options. This value will be saved in the my_first_data database entry that we created above. You can retrieve this value using the function get_option.
1 | echo get_option('my_first_data'); |
That’s it. You just created a very simple WordPress plugin admin panel or options panel. You can add many more things to a WordPress plugin admin page, and I will cover more about that in future tutorials. For any queries or feedback, post comments below.