Cómo crear una nueva zona de Widgets en WordPress

En este articulo veremos cómo crear una nueva zona de Widgets en WordPress ya que en muchas ocasiones utilizamos temas ya preparados y no se adaptan del todo a nuestras necesidades. Gracias a WordPress esto es una tarea muy sencilla.

Resultado

• En la siguiente imagen marco en rojo donde quiero incluir la nueva zona del widget que ahora esta vacío:

• Después de la modificación el resultado es el siguiente:

Paso 1 – Crear zona de Widget

• Abre el fichero functions.php. La ubicación del fichero esta en la raid de tu tema. Te recomiendo que utilices un tema hijo para estas modificaciones para no perder los cambios cuando tu tema se actualice. Es posible que tu tema haya creado un fichero llamado custom-functions.php para que el usuario no modifique el fichero original.
• Al final del fichero escribe el siguiente código:

function migueltroyano_nueva_zona_widgets() {
	register_sidebar( array(
		'name'             => 'Nueva zona de widgets',
		'id'                   => 'id-nueva-zona',
		'description'   => 'Descripción de la nueva Zona de Widgets',
                'before_widget'   =&gt; '<div class="classe-widget">',
                'after_widget'  =&gt; '</div>',
	) );
}

add_action( 'widgets_init', 'migueltroyano_nueva_zona_widgets' );

• Abre los Widgets desde el menú Apariencia de WordPress y comprueba cómo se ha creado la nueva zona. Ya puedes agregar el contenido que quieras. En este ejemplo se agregado un código HTML personalizado.

Paso 2 – Visualizar la nueva zona en tu página

El siguiente paso es elegir donde queremos que se muestre nuestra nueva zona. Deber modificar el fichero php donde quieres que aparezcan estos widgets. Estos ficheros están ubicados en /wp-content/themes/tu_tema/. Edita el fichero php escogido y escribe el siguiente código:

<?php if ( is_active_sidebar( 'id-nueva-zona' ) ) : ?>
        <div id="id-nueva-zona" class="primary-sidebar widget-area" 
               role="complementary">
            <?php dynamic_sidebar( 'id-nueva-zona' ); ?>
        </div>
 <?php endif; ?>