#wordpress theme customiztion

There are really three main parts to introducing a footer widget area in your theme:

Registering the Widget area in the WordPress Theme

Inserting the Widgets In the WordPress Theme

Putting some style into the Widgets

1. Register the footer widget area

Open the functions.php file from the WordPress Theme Editor and search for the following line of code: register_sidebar That should take you to the area where all the sidebars are registered in your theme.

Add the following block of code just below the other sidebar registration code (we are telling it to register 3 footer widget areas): register_sidebar( array( 'name' => 'Footer Sidebar 1', 'id' => 'footer-sidebar-1', 'description' => 'Appears in the footer area', '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 Sidebar 2', 'id' => 'footer-sidebar-2', 'description' => 'Appears in the footer area', '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 Sidebar 3', 'id' => 'footer-sidebar-3', 'description' => 'Appears in the footer area', 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => '</aside>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) );

2. Show the footer widget area in your theme

Open your footer.php file and insert the following block of code where you want to show the footer widgets. // here we have used 3 footer widget area <div id="footer-sidebar" class="secondary"> <div id="footer-sidebar1"> <?php if(is_active_sidebar('footer-sidebar-1')){ dynamic_sidebar('footer-sidebar-1'); } ?> </div> <div id="footer-sidebar2"> <?php if(is_active_sidebar('footer-sidebar-2')){ dynamic_sidebar('footer-sidebar-2'); } ?> </div> <div id="footer-sidebar3"> <?php if(is_active_sidebar('footer-sidebar-3')){ dynamic_sidebar('footer-sidebar-3'); } ?> </div> </div>

3. Style the footer widget area to your liking

Add the following block of CSS code to your theme’s style.css file to add some basic styling to the footer widgets you just added.

#footer-sidebar { display:block; height: 250px; } #footer-sidebar1 { float: left; width: 340px; margin-left:5px; margin-right:5px; } #footer-sidebar2 { float: left; width: 340px; margin-right:5px; } #footer-sidebar3 { float: left; width: 340px; }

       Have Fun!