Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

how to add footer widget in wordpress theme

STEP 1: Register a Sidebar-
If you want to add a sidebar in your WordPress theme then first you need to register it.
So search the function “function theme-slug_widgets_init()" into function.php file.
now copy below code into your function for register the sidebar.

function twentyseventeen_widgets_init() 
{
/*................................Copy From Here................................................................*/

register_sidebar( array(
        'name'          => __( 'Footer 2', ‘theme-slug’ ),
        'id'            => 'sidebar-1',
        'description'   => __( 'Add widgets here to appear in your footer.', 'theme-slug' ),
        'before_widget' => '',
        'after_widget'  => '',
        'before_title'  => '',
        'after_title'   => '',
    ) );

/*................................Copy To Here................................................................*/

}
add_action( 'widgets_init', 'twentyseventeen_widgets_init' );

Note:- Here "theme-slug" is your theme name.
This will add footer widget areas to your theme.
If you want to add multiple sidebar in footer then just paste the code double time.But change the 'name' and 'id'.

STEP 2: Now call the sidebar.
So after register the sidebar you can call it where you want but for footer we call it into "footer.php" file.
now paste the below code into your "footer.php" file

/................................Copy From Here................................................................/

    <?php
if ( is_active_sidebar( 'sidebar-1' )) : ?>

    <div class="first full-width">
        <?php dynamic_sidebar( 'sidebar-1' ); ?>
    </div>

    <?php endif; 
get_template_part( 'template-parts/footer/site', 'info' );
?>

/................................Copy To Here................................................................/

Note:- Widgets always called by its "Id".
If you want to add multiple sidebar in footer then

/................................Copy From Here................................................................/

    <?php
if ( is_active_sidebar( 'sidebar-1' ) && is_active_sidebar( 'sidebar-2' ) && is_active_sidebar( 'sidebar-3' )) : ?>


    <div class="first fourth-part">
        <?php dynamic_sidebar( 'sidebar-1' ); ?>
    </div>
    <div class="second fourth-part">
        <?php dynamic_sidebar( 'sidebar-2' ); ?>
    </div>
    <div class="third fourth-part">
        <?php dynamic_sidebar( 'sidebar-3' ); ?>
    </div>

    <?php endif; 
get_template_part( 'template-parts/footer/site', 'info' );
?>

/................................Copy To Here................................................................/

STEP 3: Now add the CSS
Just paste bellow CSS in your "style.css" file

/................................Copy From Here................................................................/

.full-width
{
  width:100%;
  padding:15px;
  float:left;
}
.second-part
{
  width:50%;
  padding:15px;
  float:left;
}
.third-part
{
  width:33.33%;
  padding:15px;
  float:left;
}
.fourth-part
{
  width:25%;
  padding:15px;
  float:left;
}

/................................Copy To Here................................................................/

That's it.now you can see your new footer with multiple sidebar.

Sign In or Register to comment.