Create a fancy footer and sexy front page – Part 3
Step 4: Register additional widgets
We have our templates required to display the widgets, but without registering them, they won’t appear in your WordPress admin. Opening our functions.php file on line 45 or thereabouts, you will see the call that registers the sidebar widget.
register_sidebar( array( 'id' => 'primary', 'name' => __( 'Primary Sidebar', 'blm_basic' ), 'description' => __( 'The following widgets will appear in the main sidebar div.', 'blm_basic' ), 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => '</aside>', 'before_title' => '<h4>', 'after_title' => '</h4>' ));
To register new widgets, all that’s needed is to duplicate this code and give it a new name and id like so:
register_sidebar( array( 'id' => 'first-footer-widget-area', 'name' => __( 'First Footer Widget Area', 'blm_basic' ), 'description' => __( 'The first footer widget area', 'blm_basic' ), 'before_widget' => '<div id="%1$s" class="col">', 'after_widget' => '</div>', 'before_title' => '<h4>', 'after_title' => '</h4>', ) );
You can then repeat this for the second and third widgets. If you still have your Twenty Ten theme files open, you’ll notice that they are using slightly different code. I’m using
instead of
. This is just a matter of preference. In my final sidebar-footer.php, I’ve also simplified the output for each widget like so:
<?php if ( is_active_sidebar( 'first-footer-widget-area' ) ) : ?> <?php dynamic_sidebar( 'first-footer-widget-area' ); ?> <?php endif; ?>
Etc.. for second and third.
Once these templates are all in place, I can then set up my widgets and can tweak the footer CSS like so:
/* Footer area
------------------------------------------------------------*/
footer {
clear: both;
width:900px;
margin:0 auto 0 auto;
padding:10px 30px;
overflow:hidden;
background:#4a4d4d;
border-top:1px solid #634466;
color:#FFF;
}
footer ul {
padding: 0 0 0 20px;
}
footer li {
padding:3px;
}
footer a {
color:#FFF;
text-decoration:none;
}
footer a:hover {
color:#FFF;
text-decoration:underline;
}
.col {
float:left;
padding-right:60px;
width:290px;
}
.last {
padding-right:0px;
width:200px;
}
footer h4 {
color:#FFF;
padding: 5px;
border-bottom:1px solid #555757;
}