Rajouter un ou des widget dans le footer

Rajouter un ou des widget dans le footer

Ce post est juste un mémo sur la façon de rajouter des widget area sur son site, si jamais il n’en dispose pas par défaut, ou que vous avez développé vous mêmes le site;

Dans functions.php, on retrouve le code pour enregistrer de nouvelles sidebar:

function utopia_widgets_init() {
    register_sidebar(array(
        'name' => __('Main Sidebar', 'utopia'),
        'id' => 'sidebar-1',
        'description' => __('Appears on posts and pages except the optional Front Page template, which has its own widgets', 'utopia'),
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget' => '</aside>',
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ));

    register_sidebar(array(
        'name' => __('First Front Page Widget Area', 'utopia'),
        'id' => 'sidebar-2',
        'description' => __('Appears when using the optional Front Page template with a page set as Static Front Page', 'utopia'),
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget' => '</aside>',
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ));

    register_sidebar(array(
        'name' => __('Second Front Page Widget Area', 'utopia'),
        'id' => 'sidebar-3',
        'description' => __('Appears when using the optional Front Page template with a page set as Static Front Page', 'utopia'),
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget' => '</aside>',
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ));
   
}
add_action('widgets_init', 'utopia_widgets_init');

Peu importe le nombre de widget présents, si jamais vous n’avez rien pour le footer, vous pouvez le créer ici ,à  la suite des autres, comme dans le code ci dessous:

 register_sidebar(array(
        'name' => __('Second Front Page Widget Area', 'utopia'),
        'id' => 'sidebar-3',
        'description' => __('Appears when using the optional Front Page template with a page set as Static Front Page', 'utopia'),
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget' => '</aside>',
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ));
    register_sidebar(array(
        'name' => __('Footer Widget Area', 'utopia'),
        'id' => 'sidebar-4',
        'description' => __('Appears in the footer', 'utopia'),
        'before_widget' => '<div id="%1$s" class="col-sm-3"><div class=" widget %2$s">',
        'after_widget' => '</div></div>',
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ));
 
    
}

add_action('widgets_init', 'utopia_widgets_init');

Cela va automatiquement le rajouter dans le backoffice:

Widgets

Il faut ensuite l’afficher sur le site. Pour cela on se rend sur le fichier footer.php:

<div id="footer">
    <div class="container">
        <div class="row-fluid">
            <div class="second_wrapper">
                <?php dynamic_sidebar('sidebar-4'); ?>
                <div class="clearfix"></div>
            </div><!-- second_wrapper -->
        </div>
    </div>

Utopiafooter

Libre à vous de styliser tout ça à votre sauce!!
Ici, pour l’exemple je me suis servi des classe widget.

#footer .widget{}

Sur de nombreux thèmes la technique est de créer 3 ou 4 widgets area pour le footer, forçant ainsi un affichage par bloc. L’utilisateur n’est pas limité et peut rajouter autant de widgets qu’il veut, par widget area (ou sidebar).

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.