Como hacer un sidebar de WordPress personalizado

[morrisongarden]

Tutorial para crear tu propio sidebar WordPress, crea un sidebar personalizado, para poder integrarlo en header, footer o cualquier lugar de tu WordPress, dándole formato mediante CSS y pudiendo añadir Widgets desde tu panel de control.

Como crear tu propio sidebar WordPress personalizado?, Hace poco me encontré con la necesidad de tener que crear un sidebar personalizado para un cliente, en concreto necesitaba un lugar debajo de un slider donde poder colocar 5 campos personalizados, una forma de hacerlo era simplemente colocando un nuevo div con los 5 campos, pero el cliente no iba a tocar el código HTML así que la solución perfecta era configurarle un sidebar desde donde el pudiera modificar, añadir y eliminar campos desde su propio panel de control. Busqué tutoriales sobre el tema, pero ninguno daba con la solución completa, así que me decidí a hacerlo desde “0″, aquí os lo dejo paso a paso. Espero que lo disfrutéis!.

PASO 1:
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 PHP:

/** 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 PHP:

"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 titulo en el widget y lo mismo con after_title.

PASO 2:
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:

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

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

Código HTML:

<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.

PASO 4:
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 HTML:

<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 llamado sidebar_personalizado.

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.

Podéis ver el tutorial original en mi web //"http://morrisongarden.com/sidebar-wordpress-personalizado/