The Frugal Theme, despite all it versatility, has certain limits when you really want to do something a little but more special to it. In all fairness, you can already add many things to many different locations using the 4 custom widgets but when it comes to having a widgetized footer, the custom widgets will only allow you one single column which greatly limits your choice of what you want to be shown there. having a 3 column widgetized footer will solve this problem.
Putting to use what I learned about custom function codes and custom css codes when I was using the Thesis Theme not too long ago, I created a 3 column widgetized footer for the Frugal Theme. You can see the example in my footer here. You can of course style yours to suit the layout of your own Theme.
The Custom Functions Codes
The cutom functions php file in the Frugal Theme can be found under Appearance – Editor in your WordPress dashboard. Copy and paste these codes to the bottom of that file.
/*---------------------------------*/
/*3 COLUMNS WIDGETIZED FOOTER FOR THE FRUGAL THEME */
/* register sidebars for widgetized footer */
if (function_exists('register_sidebar')) {
$sidebars = array(1, 2, 3);
foreach($sidebars as $number) {
register_sidebar(array(
'name' => 'Footer ' . $number,
'id' => 'footer-' . $number,
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h3>',
'after_title' => '</h3>'
));
}
}
/*-----------------------*/
/* set up footer widgets */
function widgetized_footer() {
?>
<div id="footer_setup">
<div class="footer_items">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 1') ) : ?>
<?php endif; ?>
</div>
<div class="footer_items">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 2') ) : ?>
<?php endif; ?>
</div>
<div class="footer_items">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 3') ) : ?>
<?php endif; ?>
</div>
</div>
<?php
}
add_action('frugal_hook_before_footer','widgetized_footer');
These codes will tell WordPress to register the new widgets and widgetized them. Note that I have hooked the widgets to appear before the actual footer and not inside the footer proper. That is because I am using a fixed size image as my footer. If you prefer, you can use the ‘frugal_hook_footer’ to place it inside the footer itself. However, I would prefer you place it before the footer so as not to screw up whatever you have done to your footer.
By now, if you check out your widgets page, you should see 3 new widgets at the bottom of all the default ones. Now we will have to style the widgets and place them correctly side by side. To do that, we will need these codes in our custom css file.
/* footer widget area setup */
#footer_setup {
/* widgetized footer background (not footer background) */
background: #444343;
/* widget padding */
padding: 1em 0em 1em 1.5em;
/* margin at bottom of widgets */
margin-bottom: none;
/* do not change this! */
overflow: hidden;
}
/* widget item setup */
#footer_setup .footer_items {
/* contents alignment */
text-align: left;
/* widget width */
width: 33.3%;
/* space between widgets */
padding-right: 0px;
/* text color */
color: #2361A1;
/* do not change these! */
display: inline-block;
float: left;
height: 100%;
}
/* widget item headers*/
#footer_setup .footer_items h3 {font-family: Impact, sans serif;
/* font size */
font-size: 1.5em; padding: 1.0em 0 0 1.0em 0.5em;
/* bold or not */
font-weight: normal;
/* uppercase or not */
text-transform: uppercase;
/* space out the letters*/
letter-spacing: 0px;
/* font color*/
color: #ffffff;
/* padding under header text */
padding-bottom: 3px;
/* border under header text */
border-bottom: 3px none #ffdf00;
/* distance between border and widget text */
margin-bottom: 5px;
}
/*decides the look of overall text in the footer*/
#footer_setup .footer_items ul li { list-style:none;
font-family: verdana;
font-size:1.0em;
line-height:1.5em;
}
#footer_setup .footer_items ul { margin: 1em; padding: 0px; }
From here, you can play around with the attributes until you find something you like. If you use the same values you will get exactly the same look as mine here. Just remember what you have changed so you know where to go back to if you do not like what you see.
The only thing that you should not mess with is the width of the individual widgets which is set at 33%. This ensures that all the widgets are equally sized.
Have fun with your new 3 column widgetized footer for the Frugal Theme.
One Response to “Add 3 Column Widgetized Footer For The Frugal Theme”
Read below or add a comment...