Wouldn’t it be nice if you are able to put things like what ever you want in your thesis footer and header?
You can also make this Widgetised header and footer much more productive and do almost anything with it when used in conjunction with the display widget plugin(This plugin helps you to show the content of your thesis widgetised header and footer in your specified posts,categories,and pages)
To widgetise your thesis header and footer first copy this code in your thesis custom_funtions.php file
// header and footer widgets
register_sidebar(array('name'=>'Header', 'before_widget' => '<li id="%1$s">','after_widget' => '</li>','before_title'=>'<h3>', 'after_title'=>'</h3>'));
register_sidebar(array('name'=>'footer', 'before_widget' => '
', 'after_title'=>'
'));The codes register your thesis footer and header.
Now put these codes in your custom_functions.php file
// --- Header
function show_sidebar_header() {
?>
php _e('Header', 'thesis'); ?>
php } ?>
php
}
add_action('thesis_hook_header', 'show_sidebar_header');
// --- Sitewide Footer
function show_sidebar_footer() {
?>
php _e('Footer', 'thesis'); ?>
</div>
</li>
<?php } ?>
</ul>
</div>
</div>
<?php
}
add_action('thesis_hook_footer', 'show_sidebar_footer');
// ------ End
Congratulations you have just widgetised your thesis header and footer.
But this is just raw code without any styling
So lets add some style to your thesis footer and header
Put this code in your custom.css file
/* ----- Header/Footer Widgets ---- */
.custom #sidebar_header {background: #222;}
.custom #sidebar_header {color: #ccc; padding-top: 0em; border-top: 3px solid #666;}
.custom #sidebar_header {border-top:none; text-align:center;}
.custom #sidebar_header a:hover {color: #dddddd; text-decoration: none; }
.custom #sidebar_header a {color: #ffffff; }
.custom #sidebar_header ul.sidebar_list li.widget {text-indent:0; color: #eee; width:23%; margin-right:0%; float:left;}
.custom #sidebar_header ul.sidebar_list li.widget h3 {text-indent:0; padding-top:0.2em; color:#ccc; font-size:22px; font-family:georgia;}
.custom #sidebar_header ul.sidebar_list li.widget a {color: #fff; border-bottom:0; padding:0.2em;}
.custom #sidebar_header ul.sidebar_list li.widget a:hover {color:#ccc; padding:0.2em;}
/* ----- footer -----*/
.custom #sidebar_footer {background: #222;}
.custom #sidebar_footer {color: #ccc; padding-top: 0em; border-top: 3px solid #666;}
.custom #sidebar_footer {border-top:none; text-align:center;}
.custom #sidebar_footer a:hover {color: #dddddd; text-decoration: none; }
.custom #sidebar_footer a {color: #ffffff; }
.custom #sidebar_footer ul.sidebar_list li.widget {text-indent:0; color: #eee; width:23%; margin-right:0%; float:left;}
.custom #sidebar_footer ul.sidebar_list li.widget h3 {text-indent:0; padding-top:0.2em; color:#ccc; font-size:22px; font-family:georgia;}
.custom #sidebar_footer ul.sidebar_list li.widget a {color: #fff; border-bottom:0; padding:0.2em;}
.custom #sidebar_footer ul.sidebar_list li.widget a:hover {color:#ccc; padding:0.2em;}
Now go and check your widgets section ,your header and footer widgets will be their.
Now when you populate your widgets in header and footer they will align horizontally from left to right and not vertically.
You can trim some of css that you want or combine the two for header and footer .I have customised them separately so that I can give different looks
Note:- I got this idea from the widget me plugin for thesis but I have made considerable amount of changes to the base code to suit my taste.
Related posts:
- How to Add Clickable header into Thesis Wordpress Theme
- How to Customize Thesis Theme Block Quote
- How to add Digg and Tweetmeme Button In Thesis Wordpress Theme
- Thesis 1.6 Make Thesis customization Easy.
- Thesis Open Hook Wordpress Plugin : Easily customize Thesis Wordpress Theme
- How to add Page Navigation To Thesis Wordpress Plugin
- Wordpress Related Posts With Horizontal Thumbnails For Thesis Theme
- Add linkback to your article in your feeds with RSS Footer wordpress plugin
{ 8 comments… read them below or add one }
This is the must awaited guide.. I thought Harsh will come up this post.. Shoaib u made it man.. Thanks a ton..
shoiab. way to go man. great. thanx for the post
Excellent guide man, thanks very much
Nice one. Is this tutorial applicable for non-thesis theme?
Wiredcubes I’m afraid not, this one is written for Thesis theme only.
wait for sometime till m done with my xamz and then will make something which should work with almost any wordpress theme you want….
nice article
If I get a chance I will be testing this out tonight, I have been having the itch to change up my blog style the last few days and this might be what I need to get it closer to what I want. Thank you as always bro.