Vous avez créer votre plugin WordPress et vous souhaitez ajouter une page dans le back-office afin de gérer les options de ce dernier.

Votre plugin « myPlugin » se trouve dans le dossier « plugins » de WordPress. Vous devez créez une page PHP ayant le même nom que votre dossier plugin, pour nous myplugin.php.

www.monsite.com/wp-content/plugins/myplugin/myplugin.php

Vous avez plusieurs possibilités pour accrocher (hook) votre page dans le menu de l’administration WP :

  • Un  lien dans le menu Outils (Tools)
    • Si votre plugin propose un outils
  • Un lien dans le menu Réglages (Settings)
    • Si votre plugin donne accès à des options ou des réglages
  • Un lien visible tout en bas du menu général (top menu)
    • Si vous avez besoin d’une ou plusieurs pages pour présenter un contenu, une promotion ou à peu près ce que vous souhaitez
  • Un ou plusieurs liens supplémentaires sous ce dernier lien (sub menu)

Il faut savoir que tous ces liens feront référence au même fichier myplugin.php même s’ils apparaîtront provenir de différentes pages. C’est ce que nous allons voir maintenant.

Tout en haut de votre page de plugin, pour nous myplugin.php, vous devez identifiez cette page comme la page de plugin.

< ? php 
/* Plugin Name: myPlugin
 * Plugin URI: http://www.myplugin.com/
 * Description: un plugin perso
 * Version: 1.0
 * Author: moi même
 * Author URI: http://mysite.com
 * License: 
 */

A présent votre page sera prise en compte par WP.

Maintenant copiez ce code et tester le :

add_action( 'admin_menu', 'my_plugin_menu' );

function my_plugin_menu() {
	add_options_page( 'My Plugin Options', 'My Plugin', 'manage_options', 'my-slug', 'my_plugin_callback' );
}

function my_plugin_callback() {
	echo '<div class="wrap">'; echo 'Hello world.'; echo '</div>'; 
}

Vous trouverez un lien « My plugin Options » dans le menu Réglages (settings).
Comment ça marche ?
Le Hook « add_action » permet d’ajouter un évènement dans WP en appelant une fonction « my_plugin_menu ».
Cette fonction ajoute un lien dans le menu Réglages (il y a d’autres liens comme on va le voir).

// les paramètres de la fonction
add_options_page(
    'My Plugin Options', // Le texte utilisé dans la balise title
    'My Plugin',         // le texte utilisé pour le menu
    'manage_options',    // La capacité requise pour ce menu à afficher à l'utilisateur.
    'my-slug',           // Le texte utilisé dans l'URL (slug)
    'my_plugin_callback' // Le nom de la fonction à appeler pour afficher la page (callback)
);

La fonction « my_plugin_callback » permet d’afficher le contenu de la page.
 
Si vous souhaitez ajouter une feuille de style pour personnaliser la page :

add_action('admin_head', 'myplugin_styles');

function myplugin_styles() {
  echo '<link href="/wp-content/plugins/myplugin/myplugin.css" rel="stylesheet" media="all" type="text/css" />';
}

 
Vous souhaitez personnaliser l’icône du menu, ajouter le paramètre plugin_url comme suit :

add_menu_page( 'My Plugin Menu', 'My Plugin', 'manage_options', 'myplugin-menu', 'my_menu_callback', plugins_url( 'myplugin/images/icon.png' ));

 
A présent toutes les différentes pages d’admin et la feuilles de style:

/* Plugin Name: myPlugin
 * Plugin URI: http://www.myplugin.com/
 * Description: un plugin perso
 * Version: 1.0
 * Author: moi même
 * Author URI: http://mysite.com
 * License: 
 */

// Le Hook pour ajouter l'action dans la pile WP
add_action( 'admin_menu', 'my_plugin_menu' );
// Le hook pour ajouter la feuille de style
add_action( 'admin_head', 'myplugin_styles' );

// Cette fonction ajoute tous les liens dans le menu
function my_plugin_menu() {
	// ajoute un lien dans le menu Réglages / settings
	add_options_page( 'My Plugin Options', 'My Plugin', 'manage_options', 'myplugin-settings', 'my_settings_callback' );
	// ajoute un lien dans le menu Outils / Tools
	add_management_page( 'My Plugin Tools', 'My Plugin', 'manage_options', 'myplugin-tools', 'my_tools_callback' );
	// ajoute un lien dans le menu / top menu
	add_menu_page( 'My Plugin Menu', 'My Plugin', 'manage_options', 'myplugin-menu', 'my_menu_callback', plugins_url( 'myplugin/images/icon.png' ));
	// ajoute une ou plusieurs sous page au menu 
	add_submenu_page( 'myplugin-menu', 'My Plugin submenu1', 'My Plugin', 'manage_options', 'myplugin-submenu1', 'my_submenu1_callback' );
	add_submenu_page( 'myplugin-menu', 'My Plugin submenu2', 'My Plugin', 'manage_options', 'myplugin-submenu2', 'my_submenu2_callback' );
}
// Ajout du lien vers la feuille de style personnalisée
function myplugin_styles() {
  echo '<link href="/wp-content/plugins/myplugin/myplugin.css" rel="stylesheet" media="all" type="text/css" />';
}
// affichage de la page Réglages / Settings
function my_settings_callback(){
	echo '<div class="wrap"><div class="icon32" id="icon-options-general"></div>'; 
        echo '<h2>My Plugin</h2>'; 
        echo '<h3>Réglages / Settings</h3>'; 
        echo '</div>'; 
} 
// Affichage de la page Outils / Tools
function my_tools_callback(){ 
        echo '<div class="wrap"><div class="icon32" id="icon-tools"></div>'; 
        echo '<h2>ResaForm</h2>'; 
        echo '<h3>Outils / Tools</h3>'; 
        echo '</div>'; 
} 
// Affichage de la page Top menu
function my_menu_callback(){ 
        echo '<div class="wrap"><h2>My Plugin page</h2></div>'; 
} 
// Affichage des sous liens 1 et 2 du menu précédent
function my_submenu1_callback(){ 
        echo '<div class="wrap"><h2>My Plugin subpage 1</h2></div>'; 
} 
function my_submenu2_callback(){ 
        echo '<div class="wrap"><h2>My Plugin subpage 2</h2></div>'; 
}

Soyez attentif au paramètre supplémentaire « myplugin-menu » qu’il y a au début du tableau dans add_submenu_page qui correspond au texte slug de la page parent (voir add_menu_page dans la fonction my_plugin_menu).
  
Téléchargez les fichiers pour tester : myplugin
Installez le plugin via l’interface ou par FTP dans le dossier plugins puis activez le.

wp-plugin-admin-page