Part 2 of the mini-series, in this tutorial I’m going to guide you through how to create and manage pages for your plugin.

If you haven’t already, read through part 1 to get up-to-date with the series.

Right, lets jump in! We’re going to start by creating a couple of pages for us to play around with for our plugin. Open up your classes/plugin.class.php file to begin with.

We need to create a construct function to execute the code when the page loads:

function __construct(){

}

Inside our construct function we need to add an action:

add_action('admin_menu', array($this,'awesomePluginPages'));

To simplify, we are telling WordPress when the hook admin_menu is called we need to run the function awesomePluginPages.

As you may have guessed we now need to create a function called awesomePluginPages:

function awesomePluginPages(){

}

Inside our function we need to run a few functions that will create pages for us to use, everything I am about to run through is covered in depth on the WordPress codex here: http://codex.wordpress.org/Add…

add_menu_page('My awesome plugin','My awesome plugin','administrator','myAwesomePluginMenu',array($this,'myAwesomePluginMainPage'));
add_submenu_page('myAwesomePluginMenu','Page 1','Page 1','administrator','myAwesomePluginMenu',array($this,'myAwesomePluginMainPage'));

add_submenu_page('myAwesomePluginMenu','Settings','Settings','administrator','MyAwesomePluginSettings',array($this,'myAwesomePluginSettings'));

Putting it altogether:

class awesomePlugin{
    function __construct(){
        add_action('admin_menu', array($this,'awesomePluginPages'));
    }

    function awesomePluginPages(){
        add_menu_page('My awesome plugin','My awesome plugin','administrator','myAwesomePluginMenu',array($this,'myAwesomePluginMainPage'));

        add_submenu_page('myAwesomePluginMenu','Page 1','Page 1','administrator','myAwesomePluginMenu',array($this,'myAwesomePluginMainPage'));
 
        add_submenu_page('myAwesomePluginMenu','Settings','Settings','administrator','MyAwesomePluginSettings',array($this,'myAwesomePluginSettings'));
    }
}

To understand how the add_menu_page and add_submenu_page functions work and what each parameter does, have a look at the following codex entries:

https://developer.wordpress.org/reference/functions/add_menu_page/

https://developer.wordpress.org/reference/functions/add_submenu_page/

Save the file and login to your WordPress control panel, you should now have an option on the left hand side for “My awesome plugin”.

Congratulations! You have created your pages. Now we need to add some content to our pages.

Above we reference 2 functions that are used to display content:

array($this,'myAwesomePluginMainPage')

and

array($this,'myAwesomePluginSettings')

Create 2 new functions with the names above:

function myAwesomePluginMainPage(){

}

function myAwesomePluginSettings(){

}

Lets start by adding a title to our page and a description, in the first function we have created above we need to start with some html:

function myAwesomePluginMainPage(){
    $output .= '<div class="wrap">';

    $output .= '<h2>My Awesome Plugin</h2>
    <h3>This is an awesome tagline for your page.</h3>';

    $output .= '</div>';

    echo $output;
}

Your main plugin page should now be displaying the content you provided above!

##Creating and updating options

In our settings page, we’re going to create a form with a couple of test options! I will show you how to create the option in the database, access its value and update it as necessary. To start we’re going to need to code a couple of form elements in a function like we did previously:

function myAwesomePluginSettings(){

    $output .= '<div class="wrap">';

    $output .= '<h2>Settings page</h2>';

    $submiturl = str_replace( '%7E', '~', $_SERVER['REQUEST_URI']);

    $option1 = get_option('myAwesomePluginOption1');
    $option2 = get_option('myAwesomePluginOption2');

    $output .= '<form action="'.$submiturl.'" method="post">';
    $output .= 'Option 1:   <input type="text" name="option1" value="'.$option1.'">';
    $output .= 'Option 2:   <input type="text" name="option2" value="'.$option2.'">';
    $output .= '<input type="hidden" name="submitform" value="1">';
    $output .= '<input type="submit" name="myAwesomePluginSubmit" value="Save Settings">';
    $output .= '</form>';

    $output .= '</div>';

    echo $output;

}

Using the get_option function built into WordPress we can get access to the values we stored when running the installation function (in part 1) we then fill the 2 inputs with the values retrieved. Now all we need to do is find a way to process the form:

if(isset($_POST['submitform']) && $_POST['submitform'] == 1){

    $new_option1 = $_POST['option1'];
    $new_option2 = $_POST['option2'];

    update_option('myAwesomePluginOption1',$new_option1);
    update_option('myAwesomePluginOption2',$new_option2);

    echo '<div id="setting-error-settings_updated"><strong>Settings saved.</strong></div>';

}

Put simply, we check if the hidden field is set and if it has the correct value, we then fill out 2 variables with the values from the form. Once we have done that we then use the update_option function built into WordPress to update the 2 options we created in install.class.php. Put it all together:

function myAwesomePluginSettings(){

    $output .= '<div class="wrap">';

    $output .= '<h2>Settings page</h2>';

    if(isset($_POST['submitform']) && $_POST['submitform'] == 1){

        $new_option1 = $_POST['option1'];
        $new_option2 = $_POST['option2'];

        update_option('myAwesomePluginOption1',$new_option1);
        update_option('myAwesomePluginOption2',$new_option2);

        echo '<div id="setting-error-settings_updated"><strong>Settings saved.</strong></div>';

    }

    $submiturl = str_replace( '%7E', '~', $_SERVER['REQUEST_URI']);

    $option1 = get_option('myAwesomePluginOption1');
    $option2 = get_option('myAwesomePluginOption2');

    $output .= '<form action="'.$submiturl.'" method="post">';
    $output .= 'Option 1:   <input type="text" name="option1" value="'.$option1.'">';
    $output .= 'Option 2:   <input type="text" name="option2" value="'.$option2.'">';
    $output .= '<input type="hidden" name="submitform" value="1">';
    $output .= '<input type="submit" name="myAwesomePluginSubmit" value="Save Settings">';
    $output .= '</form>';

    $output .= '</div>';

    echo $output;

}

Your page when submitted should now show your updated options.

Well done! We now know how to create options, update options and retrieve options.