Widgetized Thesis Theme-Header, Content box and Footer

This Tutorial explains about widgetized thesis theme -header,content box and footer. While doing thesis theme customization we are adding different types of codes in custom_function.php. For example if you are place any add in your site you should use custom function.php. You are in a situation to replace one advertisement to another in particular place you should replace the code in custom functions.php file. And to add more social bookmark icons you should edit the previously added bookmark icons code in custom function.php in order to replace any links.

thesis widget example header

For every process you have to use ftp software. If you use wordpress admin if any code misplaced in customfunctions,php file your site showing error message you will not access wordpress admin until the error has been corrected.

In order to avoid these problems use widgets for placing ads in header and etc, social bookmark icons, author box. If you use widgets to place ads in your site even though you placed some error code inside the widget you site not shown any error message you can also access wordpress admin to rectify the error no need for ftp. So use widgets to place social bookmark icons and ads.

How to create widgets in your thesis theme

By default thesis theme 1.6 has sidebar widgets. You can use those sidebar widgets wherever you need in thesis theme. If you need any thing below post use sidebar widget and you can style this widget as per your wish. Thesis theme offers number of hooks to place widget exactly where you need in your site. You can place widgets below post, above post, inside header, inside footer.

To create widget copy and paste the below code in cstom_fnction.php file.

/*** TO BUILD  WIDGET thesis theme paste in custom_functiom.php***/

register_sidebars(1,
array(
'name' => 'Widget_name',
'before_widget' => '<li id="%1$s">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>'
)
);
function widgetized() { ?>
<div id="widgetname">
<ul>
<?php thesis_default_widget(3); ?>
</ul>
</div>
<?php }

add_action('thesis_hook_before_post', 'widgetized', '1');

The above code thesis_default_widget(3) you should replace the number 4 as you next widget in the sidebar of the wordpress dashboard. Example If you are having already 4 widget boxes in wordpress admin you should replace 3 as 5. To see the available widgets in wordpress dashboard Select ‘widgets’ under ‘appearances’ tab in the wordpress dashboard. Here you can see the number of widget boxes available in your site. In thesis theme by default it has two widgets sidebar1 and sidebar2. By changing the hook you can place any where you need widget in your site.

widgets in wp-admin

To style your widget box copy and paste the below code in custom.css file.

/*To CREATE WIDGETS  paste in custom.css file***/
.custom #widgetname ul.sidebar_list li.widget h3 {text-indent:0; padding-top:0.2em; color:#111; font-size:15px; font-family:georgia; background:none;}
.custom #widgetname ul.sidebar_list { margin:0em;}
.custom #widgetname ul.sidebar_list li.widget  {font-size:1em;}
.custom #widgetname { width:7em; float:right; }

The above code you can change the width and other parameters as your wish.

Now you have created your widget box which will available at ‘widgets’ under ‘appearances’ tab in the wordpress dashboard in the widget name. Drag and drop a text widget inside newly created widget. And place any code you need like advertisement or bookmark icons and etc.

Create widget in Header

I previously explained about this tutorial how to add social book mark icons in header. Most of the peoples like to place 468×60 advertisements in right side of the header. You can create header widget to place ads in header for this the above code you should change only the widget name and hook to locate widget and style as per your need.

Widget inside post box

To place ads below post or bookmark icons below post use this tutorial. You can also create widget box above post for welcome message to your readers. To add author box you can create appropriate widget and place codes inside the widget via wordpress admin.

Widgets in Footer

We have already discussed about three column and 4-column widgetized footer. Those two tutorials we divided footer into 3column or 4-column with same style. In other words the columns are looks same because we have used one style for all columns.

You can also create multiple widgets in footer by using the above code. You can style each widget with your own style. That means you can divide the footer area as per your need by changing the css code. If you are using widgets to place ad you can easily replace ads via wordpress admin without ftp software.   Share your experience in comment section. For more checkout our all Thesis theme tutorials..

{ 17 comments… add one }

Leave a Comment

  • Anthony Feint February 2, 2010, 3:13 PM

    I’m working on creating a widgetized footer for my blog at the moment. Im using similar code but im working on some different css styling.

    Reply
  • Pascal February 2, 2010, 4:05 PM

    Thanks Anthony. You can style you css as your wish.

    Reply
  • Christine Green February 5, 2010, 10:46 PM

    You guys are awesome! Thanks so much for all your tutorials and the free Ebook on Thesis customization! It’s exactly what I’ve been looking for!

    Reply
  • Pascal February 6, 2010, 11:56 AM

    Thanks Christine.

    Reply
  • Dimas April 19, 2010, 8:01 AM

    Suresh, nice tips, I’ve been thinking of widgetizing the footer on my site, this would make thesis or any theme for that matter much more flexible and client friendly…

    Reply
  • Suresh April 19, 2010, 9:23 AM

    hai dimas,

    widgetizing thesis theme is very simple and Client friendly..our clients no need to confuse where we place the customization or other link code..other wordpress themes we need to do some changes in this code..

    Reply
  • TTF July 9, 2010, 12:13 AM

    Can you please suggest a way to place widgets just *below* the header? I want to use it for announcements etc. I already have my navbar below the banner so it will mean having a widget just below navbar and stretched across entire length for announcements. My site: http://blog.thetradersforum.net/

    Any help will be much appreciated.

    Reply
  • Rachel July 30, 2010, 1:35 AM

    I have added your footer widget code but when I add content inside the widgets, they are not aligned properly. This is the website I am working on:

    .

    If you take a look at the footer items, you can see that the items are cascading all over the place–up…down…up…but they should be aligned side-by-side. How can I fix this?

    Thanks,
    Rachel

    Reply
  • Pascal August 9, 2010, 6:55 PM

    Hi rachel,

    Our thesis team totally move to our membershipsite fourbloggerclub. so nowadays we are solve any single thesis issue for $$ only. it is ok for you. send your requirements.
    contact us via contact form

    Reply
  • Rachel July 30, 2010, 1:37 AM

    Oh, I forgot to include that I’m using Thesis version 1.8b
    Thanks again:

    Rachel

    Reply
  • Sirc August 9, 2010, 6:29 PM

    Hi Pascal,

    Your popularity has reach me quick. I saw the video in youtube and it was awesome. I am really looking forward to any of your videos in the future. One question pal, I did the process above and was quite disappointed not to see expected results. Why does the “image path url” of youtube, facebook, etc. don’t show off? Please diagnose.

    Reply
  • Pascal August 9, 2010, 6:47 PM

    Hi sirc,

    Our thesis team totally move to our membershipsite fourbloggerclub. so nowadays we are solve any single thesis issue for $5 only. it is ok for you. send your requirements.
    contact us via contact form

    Reply
  • d October 2, 2010, 12:08 AM

    I used the code to put a widget in my header, but I changed the hook to ” “add_action(‘thesis_hook_before_header’, ‘widgetized’, ’1′)” The widget is now in the header, but I would like to alight the widget to the right side of the header. I viewed the link about adding banner ads to the header, in hopes that I could figure out how to position the widget there, but I could not. How do I position the header widget in the right corner of my header?

    Reply
  • Kunal @ TechHogger November 24, 2010, 12:54 AM

    A very useful tutorial . I was looking to design my sidebar title and found your this post.
    A nice post.

    Reply
  • slade powers January 30, 2011, 12:59 AM

    i hope i’m in the right place…
    i’m running wp 3.0 and thesis 1.8 and would like to know how to create a link to a text document. better said; I want to create a link in my footer to a privacy statement and a user policy, both text documents.
    any suggestions? i’m really green at this. the internet tutorials have helped but press through to all issues but mine. i use dreamweaver so i create the css, html, php, etc from scratch. this is really different than from scratch. thesis does it all for you. i just don’t know where to put the 2 documents (the server, no doubt) but how to upload the docs via Thesis is the question.
    Thanks to all that can help. Greetings from Santa Barbara, Ca

    Reply
  • Pascal February 1, 2011, 10:58 AM

    Just create posts or pages in the wordpress for the privacy statement and user policy. And then you should link to that posts or pages.

    Alternatively, there is one plugin called “easy privacy policy”. Install and activate it. It will create privacy policy. I am using this in my blog. This is my privacy policy that created by this plugin. http://fourblogger.com/privacy-policy/

    Reply
  • serge September 6, 2011, 9:51 PM

    Hi, as for footer widgets, you have this code as well http://creersitepro.com/2011/thesis_footer_widgets/ – a bit more flexible as no need for extra coding if making it 4 or 5 columns,

    cheers,
    serge

    Reply