Supponiamo di voler aggiungere una nuova area widget  al nostro sito WordPress, nel nostro esempio aggiungeremo un’area widget in alto nel tema twentyfifteen.

La procedura consiste nel modificare il file functions.php per cui è importante lavorare direttamente con un tema child, altrimenti ad ogni aggiornamento del tema genitore, la modifica andrà persa.

Se desideri informazioni su come creare un tema child, leggi questo articolo: “Tema child WordPress, come crearlo?

Apriamo il file functions.php e cerchiamo register_sidebar

Se abbiamo trovato Register_sidebar

significa che il nostro tema in uso sta già registrando alcune aree widget. Nel nostro caso avremo:

register_sidebar( array(
		'name'          => __( 'Widget Area', 'twentyfifteen' ),
		'id'            => 'sidebar-1',
		'description'   => __( 'Add widgets here to appear in your sidebar.', 'twentyfifteen' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );

Per aggiungere un’area widget nell’header…

dovremo semplicemente ricopiare questo codice e incollarlo immediatamente sotto avendo cura di modificare il valore name, id e description.

Avremo quindi:

register_sidebar( array(
		'name'          => __( 'Widget Area', 'twentyfifteen' ),
		'id'            => 'sidebar-1',
		'description'   => __( 'Add widgets here to appear in your sidebar.', 'twentyfifteen' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );
register_sidebar( array(
		'name'          => __( 'Header Widget Area', 'twentyfifteen' ),
		'id'            =>'header-1',
		'description'   => __( 'Add widgets here to appear in your header.', 'twentyfifteen' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );

Se invece NON abbiamo trovato Register_sidebar

dovremo aggiungere una nuova funzione. Procediamo in questo modo, aggiungendo quanto segue:

/* Registro la mia area widget.
 */
function register_widget_areas() {
	register_sidebar( array(
		'name'          => __( ' Header Widget Area', 'twentyfifteen' ),
		'id'            =>'header-1',
		'description'   => __( 'Add widgets here to appear in your header.', 'twentyfifteen' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );
}
add_action( 'widgets_init', 'register_widget_areas' );
;

Il prossimo passo è: aggiungere l’area widget nella location desiderata.
Poichè nel nostro esempio stiamo aggiungendo un’area widget all’header, procederemo a modificare il file header.php
Anche in questo caso lavoriamo sempre sul nostro tema child.

Aggiungiamo il seguente codice subito dopo <div id=”content” class=”site-content”>

<?php if ( is_active_sidebar( 'header-1' ) ) : ?>
	<div class="header-area">
		<?php dynamic_sidebar( 'header-1' ); ?>
	</div>
<?php endif; ?>

Per iniziare ad usare la nuova area widget, apri il tuo pannello di amministrazione, Aspetto -> Widget ed aggiungi il contenuto che ritieni opportuno. Valuta di aggiungere a tuo piacimento eventuali regole css per adattare il tuo widget al tema in uso.

Buon lavoro e per eventuali domande su come aggiungere area widget a WordPress non esitare ad inserire un tuo commento all’articolo 😉