How to create a settings page in the WordPress admin settings and save setting values?

In this post we shall create a settings page under the admin settings page of a WordPress installation and save some data.

Let us start with a simple listing of the main tasks that we need to perform.
1. Create a plugin.
2. Add our own menu item in the WordPress admin settings menu.
3. Open our own page with a form through the settings menu.
4. Provide Nonce security.
5. Save and show the data.

In case you haven’t developed a WordPress plugin please go to this post and try it out.
http://blogs.hypatiasoftwaresolutions.in/how-to-start-with-plugin-in-wordpress/

Now, let us start on our current task.
Install WordPress and create a plugin called champak-settings.
This means creating a directory called champak-settings in the WordPress plugin directory and creating a file called champak-settings.php inside it.

The first thing any plugin should do is check if it is being called directly and exit if that is the case. How do you do it?
“ABSPATH is a PHP constant defined by WordPress in its core. If your plugin file is accessed from outside of WordPress, the constant ABSPATH or WPINC will not be defined, so it exits the plugin code, preventing any unauthorized access to your code”.
WPINC actually stands for WordPress Includes.

So, our post will start with:

/*check if the plugin is being called directly. If so exit*/
if(!defined('WPINC'))
{
die;
}

The defined function checks for existence of a constant. Syntax is defined(name). The die function exits the current script.
Now, think of the task at hand. We want to create a admin-settings page for our plugin. We shall define our task into many files and directories. We will keep files in a directory tobe called champak-settings-admin. Next, we will use the php glob function to search for all php files and include them. The code is:

/*Get every php file inside the champak-settings-admin directory and include them*//*Get every php file inside the champak-settings-admin directory and include them*/foreach ( glob( plugin_dir_path( __FILE__ ) . 'champak-settings-admin/*.php' ) as $file ){ include_once $file;}

Next, use the <?php add_action( ‘plugins_loaded’, ‘function_name’ ); ?> hook to add the settings menu. The code so far in champak-settings.php is:

The champak-settings.php as it looks now:

<?php
/**
* Plugin Name:       champak-settings * Plugin URI:        http://hypatiasoftwaresolutions.in * Description:       Create an admin setting page. * Version:           1.0.0 * Author:            Champak Roy * Author URI:        http://hypatiasoftwaresolutions.in */
/*check if the plugin is being called directly. If so exit*/if(!defined('WPINC')){die;}
/*Get every php file inside the champak-settings-admin directory and include them*/foreach ( glob( plugin_dir_path( __FILE__ ) . 'champak-settings-admin/*.php' ) as $file ){ include_once $file;}
add_action( 'plugins_loaded', 'champak_settings' );
function champak_settings() {
$pluginmenu = new ChampakAdminMenu( new AdminMenuPage() ); $pluginmenu->init();
}

Now, we shall take a look at the contents of the champak-settings-admin directory.


Look up the end of the previous file.

function champak_settings() { $pluginmenu = new ChampakAdminMenu( new AdminMenuPage() ); $pluginmenu->init(); }

Here is the code for ChampakAdminMenu.php

<?php
class ChampakAdminMenu {
private $submenu_page;
public function __construct( $submenu_page ) { $this->submenu_page = $submenu_page; }
public function init() { add_action( 'admin_menu', array( $this, 'add_options_page' ) ); }
public function add_options_page() {
add_options_page( 'Champak Settings Admin Page'/*Name of the Page under settings*/, 'Champak Settings'/*Menu under settings*/, 'manage_options', 'custom-admin-page', array( $this->submenu_page, 'render' ) ); }}

This is the AdminMenuPage.php

<?php
class AdminMenuPage {
public function render()/*Display HTML for the page*/ { include_once( 'views/formhtml.php' ); }}

Next, we will create a directory called views and create a file formhtml.php and write the following code.

Hello ChampakJi, this is an admin page that I just created.

Let us look at the output now.

This is the admin settings page as it appears now.

To be continued.

Leave a Reply