Creating a Side Menu for a WordPress plugin

We’re going to want to add a side menu to our WordPress plugin. To do this, we’re going to want to use the add_menu_page function

About the add_menu_page function

The add_menu_page function allows us to add a menu to our WordPress plugin.

The add_action hook

The add_action hook is a function that happens after a specific action is called. Somewhere in the WordPress core, do_action will be called.

So first we’d add our action, along with a callback, then we’d do an action, and when we do that action, the callback we had passed into add_action will fire.

1. First we call add_action for the specific action we want in our plugin
2. Then do_plugin fires its action, which results in call the callbacks for add_action to be fired afterwards

Adding the side menu in our code

In our my-first-plugin.php file, we want to call add_action, and from there we call our callback function. Lets define the callback function we’re going to use.

I’m going to name my callback function, registerMenuPage.

Next I’m going to set the following values:

• page_title
• menu_title
• capability
• menu_slug
• icon_url

function registerMenuPage() {
  $page = array(
        'page_title' => 'Victoryflame Plugin', 
        'menu_title' => 'Victoryflame', 
        'capability' => 'manage_options', 
        'menu_slug' => 'victoryflame_plugin',
        'callback' => '',
        'icon_url' => 'dashicons-store', 
      );
   add_menu_page( $page['page_title'], $page['menu_title'], $page['capability'], $page['menu_slug'], $page['callback'], $page['icon_url'] );

}

Now when you reload the page, you should see a menu item that says ‘Victoryflame’ on it. Its indicated by the red rectangle I’ve added onto the page (by adding it to the screenshot). The reason it says Victoryflame is because I set the menu title to Victoryflame.

Having our side menu do something when we click on it

Now that we have our side menu, we want it to actually do something. When we currently click on it, we get sent to WordPress’ not found page. So next we want our WordPress application to send us to a page we create

For now, this page will be a blank page with some text on it.

Creating the page our menu item will point to.

Lets create a class called Views in our my-first-plugin.php file.

In there we will have a function called VictoryFlameView, which will return a string of HTML. Add this class just before the Menu

class View {

  public function VictoryflameView() {
    echo '<h1> I am the page your menu directed you to</h1>';
  }

}

Connecting our view to our menu page

Now that we’ve created our view, we want it to point to our page.

The way we do this is using the callback parameter we left as a blank string earlier.

So first, lets instantiate an instance of our view class inside our addSideMenu function in our SideMenu class.

 public static function addSideMenuItems() {

    $view = new View();

    $pages = array(
      array(
        'page_title' => 'Victoryflame Plugin', 
        'menu_title' => 'Victoryflame', 
        'capability' => 'manage_options', 
        'menu_slug' => 'victoryflame_plugin', 
        'callback' => '',
        'icon_url' => 'dashicons-store',
      )
    );

    $page = $pages[0];
    add_menu_page( $page['page_title'], $page['menu_title'], $page['capability'], $page['menu_slug'], $page['callback'], $page['icon_url'] );
  }
}

Next we want to to make our callback point to our function inside the View class. But we cant just pass in a function as a string, like we do for add_action. The reason being that the function we want to access is behind the View class.

We could always get rid of the class and just have functions by themselves but then this poses two problems

• Using classes helps organize our code together
• Even if we don’t want to use classes, we should have the option to use a class to organize what views we want to set in our menu.

For passing in a function that’s part of a class, we need to pass in an array where the first element is the instance of our class, and the second value is the function from the class we want to pass in

array($instanceOfOurClass, 'functionFromClassWeWantToCall');

So in our case we want to pass in the variable view as our first value, which is an instance of our View class, and pass in ‘VictoryflameView’ as our second value, the function we want to call.

    $view = new View();

    $pages = array(
      array(
        'page_title' => 'Victoryflame Plugin', 
        'menu_title' => 'Victoryflame', 
        'capability' => 'manage_options', 
        'menu_slug' => 'victoryflame_plugin', 
        'callback' => array( $view, 'VictoryflameView'), // view->VictoryflameView
        'icon_url' => 'dashicons-store',
      )
    );

Now when we go click on our menu item we get the following page