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.
SUBSCRIBER'S BONUS DOWNLOAD - 5 photoshop action scripts.
Add your opinions and comments for Add 3 Column Widgetized Footer For The Frugal Theme
Related posts:
- Powered By Frugal 0savesSave This theme is now powered by Frugal. After using Thesis for quite sometime now, I feel it is time for some new adventures with WordPress Themes. What better then, than to use the copy of Frugal Theme that I won some time ago. I had plans to use...
- The Frugal Theme Review 0savesSave Finally got a chance to take a good look at the Frugal Theme. For those who have not heard of it, the Frugal Theme is another premium WordPress Theme that sells for $87 Single User and $167 for developers. Single user will naturally mean you can only use...
- The Frugal Theme Framework 0savesSave I have been looking at the Frugal Theme from time to time to keep up with it’s development as it seems to be to be quite an awesome WordPress Theme framework. The Frugal Theme, developed by Eric Hamm, started off as a basic free Theme but improved over...
- Frugal 3.5 Is Now WordPress 3 Compatible 0savesSave The Frugal Theme, a premium theme has been updated to be WordPress 3 compatible. The latest release is Frugal 3.5 and in making the theme to work with WordPress 3, new and powerful features has also been added to the Theme to make it the most user friendly...
- One Column Neoclassical Theme 0savesSave Some bloggers prefers a Theme which has only one column for their contents and nothing else. They want no distractions for their readers and honestly, from a blog reader’s point of view, I do enjoy reading more from a blog that has no too much fancy stuffs cluttered...
Posts
