WordPress: Cómo añadir un widget area

¡Buenos días! Hoy vamos a ver cómo crear nuestros propios widget areas en themes de WordPress para mostrar widgets donde nos interese. ¡Vamos allá!

Paso 1: registrar el widget area

Para hacerlo accedemos al archivo functions.php de nuestro tema y pegamos este código al final:

add_action( 'widgets_init', 'new_widget_area' );

function new_widget_area () {
register_sidebar( array(
'name' => 'My Widget Area',
'id' => 'new-sidebar',
'class' => 'new-sidebar',
) );
}

Podemos personalizar los campos de id, class y name y ponerlos a nuestro gusto.

Si queréis añadir más de una widget area, simplemente se trata de replicar la función register_sidebar(), cambiándole al menos el nombre y el ID:

add_action( 'widgets_init', 'new_widget_area' );

function new_widget_area () {

register_sidebar( array(
'name' => 'My Widget Area',
'id' => 'new-sidebar',
'class' => 'new-sidebar',
) );

register_sidebar( array(
'name' => 'My Widget Area 2',
'id' => 'new-sidebar-2',
'class' => 'new-sidebar',
) ); 

}

Ahora si vamos a Apariencia > Widgets en nuestro panel de control veremos que nos aparece el widget area. Sin embargo si le añadimos un widget éste no se mostrará ya que sólo hemos registrado el área y nos queda indicar dónde se va a mostrar.

Paso 2: imprimir el widget area

Ahora debemos insertar nuestro widget area en la estructura HTML de la página web. Este paso es un poco más “tricky” ya que debemos saber interpretar un poco el HTML y PHP para saber dónde insertar el código sin romper nada.

En este ejemplo lo hago en el front-page.php porque quiero mostrarlo en la portada y lo inserto antes del footer. Para insertar el widget área deberemos pegar el siguiente código con el ID del widget area dentro de las comillas:

<?php dynamic_sidebar('new-sidebar');?>

Si antes hemos cambiado el id del ejemplo, aquí deberemos escribir el nuevo ID para que coincidan.

¡Ya está! Ahora si guardamos todo y recargamos, podemos ver que si asignamos un widget al widget area, este se mostrará en el lugar donde lo hemos insertado.

También te puede interesar

WordPress: Cómo crear ubicaciones de menú
WordPress: Cómo crear childthemes
WordPress: Cómo crear templates propias