Come creare pagina di amministrazione backend WordPress

Come creare una pagina di amministrazione personalizzata nel backend di WordPress con la funzione add_menu_page() senza utilizzare un plugin?

È molto semplice perché con le funzioni add_menu_page() e add_submenu_page() del core di WordPress possiamo aggiungere controlli e funzioni personalizzate al backend per poi richiamarle nel frontend.

Infine vedremo anche come inserire l’icona personalizzata della tua pagina e il tasto “Salva modifiche”.

Per prima cosa dovrai aprire il file functions.php del tuo tema child e inserire questo codice.

Per Creare una pagina di amministrazione nel backend di WordPress apri il file functions.php del tuo tema child e inserisci questo codice:

add_action('admin_menu', 'ekw_general_settings');
function ekw_general_settings() {
  add_menu_page(	
      $page_title = 'Impostazioni del tema',
      $menu_title = 'Impostazioni del tema',
      $capability = 'administrator',
      $menu_slug  = 'impostazioni-del-tema',
      $function = 'ekw_settings',
      $icon_url = "www.miosito.it/immagine.svg",
      $position = 6
    );
}

• Questa funzione aggancia l’hook ‘admin_menu’ che serve appunto a gestire il menu di amministrazione nel backend.

Per ora abbiamo creato una pagina vuota che puoi già vedere nell’admin del tuo sito con la funzione ‘add_menu_page’, vediamone i parametri.

• $page_title: mostra il titolo della tua nuova pagina.
• $menu_title: stringa del titolo mostrato nel menu
• $capability: è il livello utente necessario per visualizzare la tua pagina. Accetta tutti i ruoli predefiniti, i ruoli custom e le autorizzazioni dei ruoli, come spiegato nella guida ufficiale.
• $menu_slug: è lo slug (url) della tua pagina nel backend e deve essere univoco
• $function: (string) nome della funzione che genera il contenuto
• $icon_url: percorso completo dell’icona della pagina, può essere un file .jpg, .png ma anche .svg di dimensioni 36x34px.
• $position: (int) è la posizione nel menu in base a quelle di WordPress già definite.

Questo è l’elenco delle posizioni dei menu predefiniti di WordPress:

• 2 Dashboard
• 4 Separator
• 5 Posts
• 10 Media
• 15 Links
• 20 Pages
• 25 Comments
• 59 Separator
• 60 Appearance
• 65 Plugins
• 70 Users
• 75 Tools
• 80 Settings
• 99 Separator

Il risultato a questo punto del nostro codice sarà simile a questo:

Ora vediamo come riempire la nostra pagina con funzioni e controlli personalizzati. Per farlo dobbiamo creare una funzione custom con lo stesso nome della variabile “$function” definita nell’esempio precedente:

function ekw_settings() {
  ?>
  <form action="#" method="post" id="ekw_form">
    <div class="wrap">
      <h1 class="wp-heading-inline">Impostazioni del blog</h1>

	<!-- resto del codice -->
	
	<input type="text" name="" value="">

    </div>
  </form>
<?php
}

• questa funzione non necessita di essere aggiunta al core (add_action(‘mia-funzione’)) perché è già richiamata nel parametro $function
• Devi creare una form per validare i dati da inserire nel database

Questa pagina eredita gli stili di default di WordPress ma puoi sempre aggiungerne di nuovi.

Ora veniamo al dunque, cioè come salvare i dati della pagina admin nel database di WordPress.

Abbiamo due strade possibili, cioè con php oppure con le chiamate Ajax.

In ogni caso dovrai aggiungere il tuo pulsante “salva modifiche” al codice, con la funzione “submit_button()” che accetta i seguenti parametri:

• $text: il testo del pulsante
• $type: il tipo di pulsante (‘primary’, ‘secondary’,  ‘small’, ‘large’, ‘delete’)
• $name: l’attributo personalizzato name=”” del pulsante
• $wrap: (bool true oppure false) indica se il pulsante deve essere racchiuso in un paragrafo)
• $other_attributes: è un array o ina stringa contenente gli altri attributi custom che vogliamo dare al nostro pulsante

      <?php
      submit_button(
        $text = 'Cancella',
        $type = 'delete',
        $name = 'my-custom-name',
        $wrap = false,
        $other_attributes = array(
          'style' => 'opacity:1;',
          'data-custom-attribute' => 'custom-value'
        )
      );
     ?>

Che tu scelga di effettuare una chiamata Ajax oppure utilizzare php, il risultato è una classica funzione per salvare i dati nel database.

if (isset($_POST['ekw_form'])) {
   set_theme_mod();
   update_option();
   do_action();
   // do something
}