How to add stylish asnio 3 column footer to thesis wordpress theme

May 3, 2010 by: sensehow 13

Tweet

Do you like the widgetized footer that we use here at sensehow in thesis theme?It is the asnio footer that makes it look so good.Do you know how can you add this footer to your thesis theme? Asnio footer was developed by asnio,an young blogger who writes at asnio.com.This thesis three column footer makes you 3 ready made widgets for footer and an copyright section for your thesis wordpress theme.

It is very easy to install this thesis widgetized three column footer.

STEPS TO INSTALL ASNIO 3 COLUMN THESIS FOOTER:

1.Download Asnio footer from here

2.Unzip it and you will find 2 files footer_function.php and footer_css.

3.Paste the footer_function in custom_functions.php in your thesis file editor in wordpress dashboard.

function asnioFooter() { ?>
<div id="container">
<div id="foot">
<h5>Blog Categories</h5>
<span>Information Covered on the Blog</span>
<ul id="cats">
<?php wp_list_cats('sort_column=id&hide_empty=0&optioncount=0&hierarchical=0'); ?>
</ul>

<div>
<ul>
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 1') ){    ?>
<li>
<div>
<h3><?php _e('Footer Widget 1', 'thesis'); ?></h3>
<p>You can edit the content that appears here by visiting your Widgets panel and modifying the <em>current widgets</em> there.</p>
</div>
</li>
<? } ?>
</ul>
</div>

<div>
<ul>
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 2') ) { ?>
<li>
<div>
<h3><?php _e('Footer Widget 2', 'thesis'); ?></h3>
<p>You can edit the content that appears here by visiting your Widgets panel and modifying the <em>current widgets</em> there.</p>
</div>
</li>
<? } ?>
</ul>
</div>

<div>
<ul>
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 3') ) { ?>
<li>
<div>
<h3><?php _e('Footer Widget 3', 'thesis'); ?></h3>                                                                <p>You can edit the content that appears here by visiting your Widgets panel and modifying the <em>current widgets</em> there.</p>
</div>
</li>
<? } ?>
</ul>
</div>

<div id="copyright">
<ul>
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Copyright') ) { ?>
<li>
<div>
<h3><?php _e('Copyright', 'thesis'); ?></h3>                                                                <p>You can edit the content that appears here by visiting your Widgets panel and modifying the <em>current widgets</em> there.</p>
</div>
</li>
<? } ?>
</ul>
<!-- Please do not remove these lines. If you have a developers license, you may remove the thesis copyright, but do not remove the Asnio copyright unless you have paid the $5 fee. Feel free to remove these comment lines however -->
<p>Get smart with the <a href="http://diythemes.com/thesis/">Thesis WordPress Theme</a> from DIYthemes.</p>
<p>Footer by <a href="http://asnio.com/">Asnio</a>.</p>
</div>
</div>
</div>
<? }
add_action('thesis_hook_after_html', 'asnioFooter');
remove_action('thesis_hook_footer', 'thesis_attribution');
remove_action('thesis_hook_footer', 'thesis_admin_link');

register_sidebar(array('name'=>'Footer 1', 'before_title'=>'<h3>', 'after_title'=>'</h3>'));
register_sidebar(array('name'=>'Footer 2', 'before_title'=>'<h3>', 'after_title'=>'</h3>'));
register_sidebar(array('name'=>'Footer 3', 'before_title'=>'<h3>', 'after_title'=>'</h3>'));
register_sidebar(array('name'=>'Footer Copyright', 'before_title'=>'<h3>', 'after_title'=>'</h3>'));

Click the big ass save button.

4.Now copy the code in footer_css from the file or below and paste it in the custom.css from your thesis editor.

#foot {
background: #2B2A2A;
border: 0.6em solid #212020;
color: #DBEDF9;
font-size: 12px;
margin: 20px auto;
overflow: hidden;
padding: 1.5em;
}

#foot a { color: #DBEDF9; border-bottom: 1px dashed #DBEDF9; text-decoration: none; }

#foot a:hover { background: #DBEDF9; color: #3D3C3C; }

#foot span.cat, #foot h3 { /* controls all blue headings */
color: #23A2D7; font-size: 16px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; }

#foot h5 { font-size: 23px; }

#foot ul li ul { list-style-type: square; margin-left: 10px; }

#foot ul.sidebar_list { padding: 1.8em 30px 0 0; }

#foot li.widget .widget_box { background: none; border: 0; }

#foot .textwidget p { line-height: 22px; margin-bottom: 11px; }

#foot .col { float: left; list-style: none; width: 33.3%; }

#cats {
background: #3D3C3C;
list-style-type: none;
margin-top: 13px;
overflow: hidden;
padding: 10px 0 7px 20px;
}

#cats li {
float: left;
font-size: 1.2em;
line-height: 1.8em;
margin: 0 2px 5px 0;
width: 165px;
}

#copyright {
border-top: 1px dashed #3D3C3C;
clear: both;
font-size: 13px;
letter-spacing: 1.3px;
line-height: 21px;
padding-top: 10px;
}

#copyright p { font-size: 13px; }

#copyright ul.sidebar_list, #copyright .textwidget, #copyright li.widget .widget_box, #copyright li.widget { margin: 0; padding: 0; }

5.Now save it and go to the widgets section and you will find three footer widgets section.Add some widgets to those footer 1,2 and 3 and visit your site.you can see the 3 column widgetized asnio footer as above,

Hope you have successfully added the 3 column asnio widgetized footer to your thesis wordpress theme.If you have any doubts then post a comment here.

Related posts:

1. How to add a widgetized 3 column footer in thesis wordpress theme
2. Thesis-how to place ads Above the post title in thesis wordpress theme
3. How to add stylish page navigation in thesis using wp-pagenavi
4. Fourblogger.com Absolute Guide to Thesis wordpress theme
5. How to add social bookmarking icons in thesis and other wordpress themes
6. How to add page navigation in thesis without openhook plugin