Les 3 – Admin sidebar menu maken

Lesbeschrijving

In deze les gaan we een Admin menu knop aan de sidebar in de admin sectie toevoegen. Dit menu bestaat ook uit een submenu.

Om dit voor elkaar te krijgen maken we eerst een nieuw bestand. De zogenaamde admin controller file. Hierin kunnen we alle functionaliteit plaatsen die met de admin specifiek te maken heeft.

De file is opgebouwd uit een prepare functie, en ondersteunende functies. De prepare functie heeft als doel alle voorbereidende functionaliteiten op te starten, zoals het definieren van het menu.

Het menu is opgebouwd uit een hoofdmenu ( add_menu_page() ) en een aantal submenus’s. ( add_submenu_page() ). Deze functies hebben elk een verwijzing naar een andere functie die de pagina opbouwd die getoond moet worden. Deze pagina’s staan in de admin/view map.(wp-content/plugins/my-event-organiser/admin/views)

Stappenplan

1. Admin controller bestand aanmaken

Maak in de admin map het bestand MyEventOrganiser_AdminController.php aan. ( wp-content/plugins/my-event-organiser/admin/MyEventOrganiser_AdminController.php )

2. Admin controller klasse aanmaken

Open dit bestand en voeg een lege controller klasse toe.

<?php
/**
* This Admin controller file provide functionality for the Admin section of the My event organiser.
*
* @author < your name >
* @version 0.1
* 
*/

class MyEventOrganiser_AdminController {

}

?>

3. Voorbereidende functionaliteit toevoegen.

Voeg aan deze klasse een prepare functie toe. Deze functie verzorgt alle voorbereidende functionaliteit voor de Admin controller klasse. Het menu wordt toegevoegd met de add_action, hierin wordt verwezen naar de huidige klasse (MyEventOrganiser_AdminController) en specifiek daarin de functie addMenus. Deze functie wordt gebruikt om de pagina op te bouwen bij het klikken op dit menu.

De functie is static zodat deze ook aangeroepen kan worden zonder dat de klasse geïnstantieerd is.

Let op de admin controle: Deze functionaliteit wordt alleen uitgevoerd als de huidige gebruiker de wordpress admin rechten heeft.
(De vetgedrukte code is nieuw, de andere code kun je gebruiken om de juiste plek terug te vinden)

class MyEventOrganiser_AdminController {

/**
* This function will prepare all Admin functionality for the plugin
*/
static function prepare() {

// Check that we are in the admin area
if( is_admin() ) : 

// Add the sidebar Menu structure
add_action( 'admin_menu', array( 'MyEventOrganiser_AdminController', 'addMenus' ) );

endif;
}

}

4. Hoofdmenu toevoegen

Voeg de functie addMenus toe en voeg een hoofdmenu item toe door gebruik te maken van de add_menu_page functie van WordPress. In deze functie zit een parameter die naar de View pagina verwijst die wordt getoond als er op dit menu item wordt geklikt. [array( ‘MyEventOrganiser_AdminController’, ‘adminMenuPage’),]

De Teksten tussen de __( X, ‘my-event-organiser’ ) moet je maar gewoon overnemen. Deze manier van noteren heeft met internatlonaliseren ( i18n ) te maken, oftewel vertalingen. Hier komen we later nog wel eens op terug.

In dit voorbeeld vullen we de laatste parameter (de positie in het menu NIET in).

/**
* Add the Menu structure to the Admin sidebar 
*/
static function addMenus() {
add_menu_page(
//string $page_title The text to be displayed in the title tags 
//of the page when the menu is selected
__( 'My Event Organiser Admin', 'my-event-organiser'),

//string $menu_title The text to be used for the menu
__( 'My Event organiser','my-event-organiser' ),

//string $capability The capability required for this menu to be displayed to the user.
'manage_options',

//string $menu_slug The slug name to refer to this menu by (should be unique for this menu)
'my-event-organiser-admin',

//callback $function The function to be called to output the content for this page.
array( 'MyEventOrganiser_AdminController', 'adminMenuPage'),

//string $icon_url The url to the icon to be used for this menu.
//* Pass a base64-encoded SVG using a data URI, which will be colored to match the color scheme.
//This should begin with 'data:image/svg+xml;base64,'.
//* Pass the name of a Dashicons helper class to use a font icon, e.g. 'dashicons-chart-pie'.
//* Pass 'none' to leave div.wp-menu-image empty so an icon can be added via CSS.
MY_EVENT_ORGANISER_PLUGIN_INCLUDES_IMGS_DIR. '/icon.png'

//int $position The position in the menu order this one should appear

);

}

5. Submenu toevoegen

Vervolgens gaan we een submenu toevoegen. Dit doen we door de WordPress functie add_submenu_page() te gebuiken. De functie start met een verwijzing naar het hoofdmenu (‘my-event-organiser-admin’) en heeft ook weer een verwijzing naar welke pagain getoond moet worden als er op geklikt wordt.

Voeg onderstaande code toe aan de hiervoor gemaakt functie addMenus():

static function addMenus() {
add_menu_page(...);

add_submenu_page ( 
// string $parent_slug The slug name for the parent menu 
// (orthe file name of a standard WordPress admin page)
'my-event-organiser-admin',

// string $page_title The text to be displayed in the title tags of the page when the menu is selected
__( 'event_categorie', 'my-event-organiser' ),

// string $menu_title The text to be used for the menu
__( 'Event categorieën',  'my-event-organiser'),

// string $capability The capability required for this menu to be displayed to the user.
'manage_options',

// string $menu_slug The slug name to refer to this menu by (should be unique for this menu)
'meo_admin_event_category',

// callback $function The function to be called to output the content for this page.
array( 'MyEventOrganiser_AdminController', 'adminSubMenuEventCategory' )
);

}

6.1 Pagina aan de hoofd menu knop toevoegen

In de add_menu_page hebben we opgegeven dat de functie adminMenuPage uitgevoerd moet worden. Deze functie gaan we nu toevoegen. Daarna voegen we een nieuwe admin view pagina toe.

Voeg de volgende functie toe aan de admin controller file:

/**
* The main menu page 
*/
static function adminMenuPage() {

// Include the view for this menu page.
include MY_EVENT_ORGANISER_PLUGIN_ADMIN_VIEWS_DIR . '/admin_main.php';

}

6.2 View pagina admin_main aanmaken

We maken nu in de admin views map het volgende php bestand aan: admin_main.php. (wp-content/plugins/my-event-organiser/admin/views/admin_main.php)

Open dit bestand en plak er de volgende code in:

<div class="wrap">
Admin main page.
<?php

?>
</div>

Elke view die je aanmaakt MOET mimaal bestaan uit de div class. De tekst Admin main page zou je weg kunnen laten. Tussen de php tags gaan we later de functionaliteit toevoegen.

7.1 Pagina aan de sub menu knop toevoegen

In de add_submenu_page hebben we opgegeven dat de functie adminSubMenuEventCategory uitgevoerd moet worden. Deze functie gaan we nu ook toevoegen. Daarna voegen we een nieuwe admin view pagina toe om de event categoryCRUD later in te kunnen bouwen.
Voeg de volgende functie toe aan de admin controller file:

/**
* The submenu page for the event categories
*/
static function adminSubMenuEventCategory() {
// include the view for this submenu page.
include MY_EVENT_ORGANISER_PLUGIN_ADMIN_VIEWS_DIR . '/meo_admin_event_category.php';
}

7.2 View pagina admin_main aanmaken

We maken nu in de admin views map ook het volgende php bestand aan: meo_admin_event_category.php . (wp-content/plugins/my-event-organiser/admin/views/meo_admin_event_category.php)

Open dit bestand en plak er de volgende code in:

<div class="wrap">
Admin event categorie CRUD.<br />
( Uitje, excursie, etc)
<?php
?>
</div>

Tussen de php tags gaan we later de CRUD functionaliteit voor de verschillende event categorieën toevoegen. De ‘wrap’ class is een standaard class die wordpress gebruikt voor de pagina opbouw.

8 Admin menu plaatsen.

Je hebt nu een admincontroller gebouwd met daarin de opbouw van het menu. Ook zijn de pagina’s die worden getoond als op het menu geklikt wordt al klaar gezet. Nu moet je er alleen nog voor zorgen dat de code die gemaakt is ook uitgevoerd wordt. ( Het maken van de klassen en functies doet op zich nog niets)

8.1 Klasse initialisatie.

Hiervoor openen we het bestand my-event-organiser.php met de nu nog lege klasse MyEventOrganiser. Deze opstart klasse gaan we gebruiken om het admin gedeelte aan te roepen.

We beginnen met het bouwen van een constructor (Wordt altijd bij het aanmaken van de klasse uitgevoerd om te initialiseren) Vanuit de constructor starten we de initialisatie van de klasse op.(add_action ( ‘init’, array( $this, ‘init ), 1); ) Betekend eigenlijk: Voer de actie uit in deze klasse ($this) met de naam init.

Deze bestaat uit het aangeven welke bestanden er allemaal nodig zijn, en het uitvoeren van voorbereidende acties. Een van de voorbereidende acties is het klaarzetten van het menu.

public function__construct() {

// Fire a hook before the class is setup.
do_action( 'my_event_organiser_pre_init' );

// Load the plugin.
add_action( 'init', array( $this, 'init' ), 1 );

}

8.2 Module initialisatie.

Je hebt de klasse geïnitialisseerd, nu gaan we de module initialisatie uitvoeren. Deze bestaat uit 2 stappen:

    1.Het laden van de benodigde bestanden (requireAdmin() ).
    2.Het opbouwen van de admin door het uitvoeren van de controller prepare function. Deze zorgt er ook voor dat de menu’s worden opgebouw.
/**
* Loads the plugin into WordPress.
*
* @since 1.0.0
*/
public function init() {
// Run hook once Plugin has been initialized.
do_action( 'my_event_organiser_init' );

// Load admin only components.
if ( is_admin() ) {

// Load all admin specific includes
$this->requireAdmin();

// Setup admin page
$this->createAdmin();
}
}

/**
* Loads all admin related files into scope.
*
* @since 1.0.0
*/
public function requireAdmin() {

// Admin controller file
require_once MY_EVENT_ORGANISER_PLUGIN_ADMIN_DIR. '/MyEventOrganiser_AdminController.php';

}

/**
* Admin controller functionality
*/
public function createAdmin(){

MyEventOrganiser_AdminController::prepare();

}

9 Module menu testen.

Wanneer je alle code correct hebt overgenomen kun je nu het menu testen door de my-event-organiser plugin te activeren. Je vindt aan de linker kant het my-event-organiser menu met een submenu. Op de paginas van het menu zie je de teksten : “Admin mainpage” en “Admin event categorie CRUD.”

Opdracht

Volg eerst de lesbeschrijving van deze les. Wanneer je die klaar hebt kun je deze opdracht uitvoeren.

Maak een extra submenu in het my-event-organiser plugin menu met de titel “event types”.

Zet op de bijbehorende pagina de tekst:

Admin event types CRUD.
(Open inschrijving, alleen IVS Leden, etc)

  • Dit menu moet boven het event-category menu komen te staan.
  • De bestandsnaam en menu-slug is: meo_admin_event_types