Come aggiungere icone alle categorie WordPress

Come aggiungere icone alle categorie WordPress? In questa guida voglio spiegarti come aggiungere icone personalizzate nel backend di WordPress usando una funzione scritta in codice e senza un plugin.

Con questa funzione puoi aggiungere anche altri campi personalizzati alle categorie degli articoli e potrai modificarli dal backend.

In sintesi:

• Apri il file functions.php del tuo tema child
• Inserisci queste due funzioni
• Vai nel backend e vedrai i campi modificabili delle icone personalizzate

Iniziamo subito.

Per prima cosa dovrai aprire il file functions.php del tuo tema child, se non sai come crearlo ho scritto per te una breve guida.

Per aggiungere icone o campi personalizzati alle categorie di WordPress dovrai utilizzare questo codice.

Il risultato finale è una casella dove potrai inserire il nome dell’icona da allegare a questa categoria. WordPress assegna in automatico la grafica e lo stile classico delle altre caselle già presenti nella pagina e applicherà le modifiche al colore e allo stile quando lo cambierai dalle impostazioni.

Questo codice serve per aggiungere la casella nella pagina “modifica categoria” del backend di WordPress utilizzando l’hook “category_edit_form_fields”:

function ekw_edit_category_icon($term) {
	/* creo la casella per aggiungere l’icona */
    ?>
    <tr class="form-field term-icon-wrap">
  			<th scope="row"><label for="tag-icona"><?php _e( 'Icona' ); ?></label></th>
  			<td>
          <input name="tag-icona" id="tag-icona" type="text" value="<?php

	/* se esiste già un icona la recupero dal database */
          echo get_term_meta($term->term_id, 'Icona', true); ?>" size="40" aria-required="true">

			<!-- Aggiungo una descrizione alla casella -->
    			<p class="description">Icona personalizzata per questa cagoria da <a href="https://material.io/resources/icons/?style=baseline" target="_blank">Icon Material Desgn</p>
        </td>
  		</tr>

    <?php
    /* aggiungo l’icona al database al click su “aggiungi nuova categoria */
    if ( isset( $_POST['tag-icona'] ) ) {
      $term_icona = $_POST['tag-icona'];
      $term = get_term_meta($term_id, 'Icona', true);
      if ($term_icona != $term) {
       update_term_meta( $term_id, 'icona', $term_icona ) or die("errore");
     }
    }
  }
	/* aggiungo la funzione al backend nelle categorie */
  add_action('category_edit_form_fields', 'ekw_edit_category_icon', 10, 2);

Con questo codice ti basterà cercare il nome dell’icona dalla libreria icone di Google e inserirlo nella casella che hai appena creato. Ricorda di installare la libreria Icons Material Design, trovi tutto in questa guida.

Ora vediamo il codice da aggiungere nella pagina “aggiungi nuova categoria” di WordPress, questo utilizzerà l’hook “category_add_form_fields”:

function ekw_add_category_icon($term) {
    ?>
	<!-- creo la casella nel backend -->
    <div class="form-field term-icon-wrap">
      <label for="icona"><?php _e( 'Icona' ); ?></label>
      <input type="text" name="tag-icona" id="tag-icona" value="">

	<!-- aggiungo una descrizione alla casella -->
      <p>Icona personalizzata per questa cagoria da <a href="https://fonts.google.com/icons?selected=Material+Icons" target="_blank">Icon Material Desgn</a></p>
    </div>
    <?php
    if ( isset( $_POST['tag-icona'] ) ) {
  		$term_icona = $_POST['tag-icona'];

			/* aggiungo l’icona nel database di WordPress */
  			 update_term_meta( $term_id, 'Icona', $term_icona );
  	}
  }
  add_action('category_add_form_fields', 'ekw_add_category_icon', 10, 2);

Ora che hai la possibilità di aggiungere icone personalizzate alle categorie di WordPress, vediamo come mostrarle nel frontend del tuo sito.

Per farlo dovrai aver creato un tema child e al suo interno dovrà contenere il file category.php, cioè il file che mostra la pagina delle categorie.

Per recuperare l’icona dal database dovrai usare la funzione get_term_meta() di WordPress in questo modo:

/* seleziono la categoria corrente */
$obj = get_queried_object();

/* seleziono l’ID della categoria corrente */
$id_cat = $obj->{'term_id'};

/* seleziono l’icona in base all’ID della categoria corrente */
$icon = get_term_meta($id_cat, 'Icona', true);

Per mostrarla a video dovrai semplicemente creare un oggetto <span> contenente la categoria.

<span class="material-icons ekw_icon_large"><?php echo $icon; ?></span>