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:

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>

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

22/01/2015 Mis à jour le 19/12/2019 Par Copier coller | Dans wordpress