Add a Widgeted Footer Area in WordPress

Add a Widgeted Footer Area

A lot of bookstore sites having widgeted footer area. In my theme there is no footer widget so I m going to add four footer widget to my theme. Keep in mind that it’s always a good idea to make a backup copy of the style.css and footer.php files before trying this.

Step #1

The first thing to do is to register the widgeted footer areas in your theme’s functions.php file. Using the Lifestlye theme as an example, here’s what the code looks like right now:

if ( function_exists('register_sidebars') )
    register_sidebar(array('name'=>'Sidebar Top','before_title'=>'<h4>','after_title'=>'</h4>'));
    register_sidebar(array('name'=>'Sidebar Bottom Left','before_title'=>'<h4>','after_title'=>'</h4>'));
    register_sidebar(array('name'=>'Sidebar Bottom Right','before_title'=>'<h4>','after_title'=>'</h4>'));
    register_sidebar(array('name'=>'468x60 Header Banner','before_title'=>'<h4>','after_title'=>'</h4>'));

And here’s what it will need to look like to register the additional areas:

if ( function_exists('register_sidebars') )
    register_sidebar(array('name'=>'Sidebar Top','before_title'=>'<h4>','after_title'=>'</h4>'));
    register_sidebar(array('name'=>'Sidebar Bottom Left','before_title'=>'<h4>','after_title'=>'</h4>'));
    register_sidebar(array('name'=>'Sidebar Bottom Right','before_title'=>'<h4>','after_title'=>'</h4>'));
    register_sidebar(array('name'=>'468x60 Header Banner','before_title'=>'<h4>','after_title'=>'</h4>'));
    register_sidebar(array('name'=>'Footer #1','before_title'=>'<h4>','after_title'=>'</h4>'));
    register_sidebar(array('name'=>'Footer #2','before_title'=>'<h4>','after_title'=>'</h4>'));
    register_sidebar(array('name'=>'Footer #3','before_title'=>'<h4>','after_title'=>'</h4>'));
    register_sidebar(array('name'=>'Footer #4','before_title'=>'<h4>','after_title'=>'</h4>'));

Step #2

The second thing you’ll want to do is establish the proper style for the widgeted footer area. Because most StudioPress theme’s footer areas are defined as “footer”, I’m going to define the main “div” for the widgeted footer area “footer-widgeted”. You’ll need to add all of the CSS shown below to style.css, but I’ll break them out so you can see what each section is. Make sure if you’re theme’s width is less than 960px, you’ll need to adjust that below.

Main Container Styling

#footer-widgeted {
        width: 960px;
        margin: 0px auto 0px;
        padding: 0px;
        }

Paragraph Stlying

#footer-widgeted p {
        color: #333333;
        font-weight: normal;
        margin: 0px;
        padding: 0px 0px 10px 0px;
        }

Hyperlink Styling

#footer-widgeted a, #footer-widgeted a:visited {
        color: #333333;
        text-decoration: none;
        }
#footer-widgeted a:hover {
        color: #333333;
        text-decoration: underline;
        }

Unordered List Styling

#footer-widgeted ul {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
        }
#footer-widgeted ul li {
        list-style-type: none;
        margin: 0px 0px 10px 0px;
        padding: 5px;
        }
#footer-widgeted ul ul {
        list-style-type: none;
        margin: 5px 0px 0px 20px;
        padding: 0px;
        }
#footer-widgeted ul li li {
        list-style-type: square;
        margin: 0px;
        padding: 0px;
        }
#footer-widgeted ul li ul li {
        margin: 0px;
        padding: 0px 0px 3px 0px;
        }

Widget Headline Styling

#footer-widgeted h4 {
        color: #333333;
        font-size: 16px;
        font-family: Arial, Tahoma, Verdana;
        font-weight: normal;
        margin: 0px 0px 5px 0px;
        padding: 0px;
        }

Widget Styling

#footer-widgeted .widget {
        background: none;
        margin: 0px;
        padding: 5px 0px 0px 0px;
        border: none;
        }

Widget Columns Styling

.footer-widgeted-1 {
        width: 215px;
        float: left;
        margin: 0px;
        padding: 20px 20px 5px 10px;
        }
.footer-widgeted-2 {
        width: 215px;
        float: left;
        margin: 0px;
        padding: 20px 20px 5px 10px;
        }
.footer-widgeted-3 {
        width: 215px;
        float: left;
        margin: 0px;
        padding: 20px 20px 5px 10px;
        }
.footer-widgeted-4 {
        width: 215px;
        float: right;
        margin: 0px;
        padding: 20px 0px 5px 0px;
        }

Step #3

Lastly, you’ll need to add the proper code to your footer.php file. Most StudioPress themes are coded similar, so this should work. Inside your theme’s footer.php file, look for this code:

<div></div>
<div id="footer">

Essentially, you’ll be placing the code below in between the two lines you see above. As a result, you’re code should look like this:

<div></div>
<div id="footer-widgeted">
    <div>
        <ul id="footer-widget-1">
            <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer #1') ) : ?>
                <li>
                    <h4><?php _e("footer-widgeted #1 Widget", 'studiopress'); ?></h4>
                    <p><?php _e("This is an example of a widgeted area.", 'studiopress'); ?></p>
                </li>
            <?php endif; ?> 
        </ul>   
    </div>      
    <div>
        <ul id="footer-widget-2">
            <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer #2') ) : ?>
                <li>
                    <h4><?php _e("footer-widgeted #2 Widget", 'studiopress'); ?></h4>
                    <p><?php _e("This is an example of a widgeted area.", 'studiopress'); ?></p>
                </li>
            <?php endif; ?> 
        </ul>   
    </div>      
    <div>
        <ul id="footer-widget-3">
            <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer #3') ) : ?>
                <li>
                    <h4><?php _e("footer-widgeted #3 Widget", 'studiopress'); ?></h4>
                    <p><?php _e("This is an example of a widgeted area.", 'studiopress'); ?></p>
                </li>
            <?php endif; ?> 
        </ul>   
    </div>      
    <div>
        <ul id="footer-widget-4">
            <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer #4') ) : ?>
                <li>
                    <h4><?php _e("footer-widgeted #4 Widget", 'studiopress'); ?></h4>
                    <p><?php _e("This is an example of a widgeted area.", 'studiopress'); ?></p>
                </li>
            <?php endif; ?> 
        </ul>   
    </div>      
<div></div>
</div>
<div id="footer">
Advertisements
Posted in Tips. Tags: . Leave a Comment »

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: