Como crear tu propio sidebar en Wordpress personalizado?

Abrimos el archivo “functions.php”, es el lugar donde vamos a definir nuestro sidebar, para ello tenemos que incluir el siguiente código.

Código :

/** Sidebar personalizada SIDEBAR PERSONALIZADO */
if(function_exists('register_sidebar')){
    register_sidebar(array(
        'name' => 'Detalles_vuelo',
        'before_widget' => '<div class="clase_personalizada">',
        'after_widget' => '</div>',
        'before_title' => '<h7>',
        'after_title' => '</h7>',
    ));
}

Definimos el campo name, con el nombre que le queramos dar a nuestro nuevo sidebar, será el nombre que veremos aparecer junto a nuestros otros sidebar

Definimos before widget, con la que va a ser el aspecto de nuestro sidebar, en este caso la definimos con una clase personalizada llamada clase_personalizada, en el caso de que queráis utilizar la clase por defecto que viene en vuestro theme tenéis que poner en el campo.

Código :

"widget %1$s"

El campo after_widget, se deja tal y como está para dar paso a diferentes widgets que queramos ir añadiendo.

El campo before_title, es como podéis ver el formato que le queremos dar a nuestro título en el widget y lo mismo con after_title.

Creamos un nuevo archivo php, en este caso podemos llamarlo sidebar_personalizado.php, y tan solo tenemos que colocar este código y guardarlo.

Código :

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Detalles_vuelo') ) : ?> <?php endif; ?>;

Creamos nuestra clase personalizada en la hoja de estilos que por defecto utilice nuestrotheme, casi siempre es style.css, y sobre todo darle el mismo nombre que va el código del paso 1.

Código :

<div class="clase_personalizada"></div>

Aprovechamos también para crear nuestro div personalizado, que es donde irá nuestro sidebar wordpress. Guardamos todo en el servidor y ya lo tenemos casi listo para poder implementar nuestro sidebar wordpress personalizado.

Por último buscamos el archivo PHP donde queramos alojar nuestro nuevo sidebar, nuestro nuevo sidebar puede ser horizontal horizontal o vertical, cuando tengamos localizado el lugar colocamos el siguiente código.

Código :

<div id="detalles-vuelo"><?php get_sidebar('personalizado') ?></div>

El código get_sidebar iría dentro de nuestro div personalizado y veréis que “personalizado” es la llamada a nuestro archivo que hemos creado en el paso 2, y que hemos llamadosidebar_personalizado. Así queda en el panel de administración:

Y ya está, a disfrutar experimentando ya que esta forma de personalizar nuestro WordPress nos va a dar un montón de alas para hacer aún más dinámico y personalizable.