How to add Categories in Footer of Thesis Theme

How to add categories in footer? Answer for the question is we can add categories in footer by two ways.  First one add categories directly to the whole footer width. Second one is to widgetize  your footer with three columns or 4- columns. Then use any one column to add category widget in footer. I previously explain about how to widgetize your footer and how to add categories inside the 3-culomn widgetized footer.

In this video tutorial explains about how to add categories directly to the footer whole width. You can add your categories first part of the footer or middle or at last. By using the corresponding hook you can place anywhere in footer. By default thesis footer is having thesis attribution and wordpess admin function. If you don’t want these functions you can remove by using hooks.

If you want your categories above these two functions add your thesis_hook_footer function above those admin and attribution function.

The below image is a three column widgetized footer. In the third column I added category widget. It shows all the categories. It won’t differentiate parent and child categories.

3 column widgetized footer with categories

3 column widgetized footer

In this tutorial I am going to add categories below the three column footer and also with parent and child category differentiation.

To achieve this copy and paste the below code in custom_functions.php use ftp to paste the code.

/*cats in footer paste in custom_function.php  */

function footer_cats() {
echo '    <div id ="cats">' . "\n";
echo '
<h5>' . __('Categories', 'thesis') . '</h5>' . "\n";
echo '<ul>';
wp_list_categories('title_li=');
echo '</ul>';
echo '    </div>' . "\n";
}

add_action('thesis_hook_footer', 'footer_cats');

The path is public_html/fourblogger.com/wp_content/theme/thesis_16/cusom/custom_functions.php.

Once you have placed the above code then you should style your category menu.

Now come to wordpress admin Copy and paste the below code in custom.css file.

/* paste in custom.css  */

.custom #cats{
float:left;
background:none repeat scroll 0 0 #444343;
text-align:left;
margin-top:13px;
overflow:hidden;
padding:10px 0 7px 20px;
}
.custom #cats li {
float:left;
font-size:1.8em;
line-height:1.8em;
margin:0 2px 5px 0;
width:190px;
}
.custom #cats li a {
border-bottom:1px dashed #DBEDF9;
color:#DBEDF9; text-decoration:none;
}
.custom #cats .children li {
float:left; font-size:1em;
line-height:1.8em; margin:0 2px 5px 0;
width:100%;
}
.custom #cats h5{
font-size:2.5em;  font_weight:bold;
}

The above code you can set you parent and children category widths and font size also.

To paste the code, Choose ‘custom file editor’ under thesis options in left sidebar of the wordpress dashboard. Select custom.css file and click on edit selected file.

Paste the above code and save it. And visit your site with categories in footer.

categories in footer

The above image testing category has four child categories which is differentiated with small dot and circle if you have sub category under child which will marked with another symbol. In this code I have text-align left for parent and child. You can use different text alignment to identify easily. Share your experience in comment section. For more checkout our all Thesis theme tutorials..

{ 12 comments… add one }

Leave a Comment

  • Tony Thomas January 6, 2010, 12:00 AM

    Hello Suresh,

    Quick THANK YOU and question…

    Love the tutorial!

    How do you get the footer to
    span the entire width of the page
    (like the bottom of this page)?

    Thank you, kindly,
    Tony Thomas

    Reply
  • Dave Doolin | Website In A Weekend January 6, 2010, 1:23 AM

    I’ll be back in the near future because I have to implement this for someone.

    I can see a couple more article that look useful as well.

    Reply
  • Pascal January 6, 2010, 1:29 AM

    You are most welcome Dave. I am also getting ready to make a guest post on your blog. :)

    Reply
  • Suresh February 21, 2010, 12:52 PM

    After finishing, i will inform you.

    Reply
  • Blogger Den February 22, 2010, 4:26 AM

    Really cool post dude! Thanks for sharing this info, it’s really useful.

    Reply
  • Pascal February 22, 2010, 9:31 AM

    Thanks bloggerden.

    Reply
  • Extreme Acai May 17, 2010, 5:11 PM

    How Can I add all the posts in the footer

    Reply
  • Suresh May 17, 2010, 6:37 PM

    hai

    Use the below php function in footer using the footer hook(thesi_hook_footer)..
    php wp_get_archives('type=postbypost&limit=50'); ?>
    It shows recent 50 posts you can change the limit..
    The above post custom function.php code instead of category code your the above mentioned php function…

    the complete function all posts available here
    http://fourblogger.com/how-to-create-sitemap-and-archives-for-a-blog-with-thesis-theme/

    Reply
  • Tony Jennings July 11, 2010, 4:13 PM

    Hi Suresh,

    Boy you do talk funny! Anyway – thanks for taking the time to share these Thesis mods, it certainly helps save time having to code them up myself.

    By the way, you have lost the backslashes on the line returns in you code snippet above for function: footer_cats – I guess they got stripped when you pasted into your WP.

    Reply
  • Pascal July 15, 2010, 7:12 PM

    Hi Tony,

    I am Pascal. I inform suresh to know about the function you mentioned.

    Thanks

    Reply
  • Gouri July 14, 2011, 2:48 PM

    Is there a way to extend the footer full width without including any of the categories? Just want to have custom text/widgets in it. Thanks.

    Reply
  • admin July 14, 2011, 5:07 PM

    We have tutorials for thesis theme footer design. See this page. http://fourblogger.com/thesis-theme-customization-tutorials-for-footer-round-up/

    Reply