Create 3 Column Footer in Thesis Theme 2.0

Recently we posted following things in our blog for Thesis Theme 2.0, those are

Thesis Theme 2.0 tutorials

Free Thesis Boxes

Thesis Skins

Today I am going to show you how to create 3 column footer in Thesis Theme 2.0?

Steps

  • First go to your WordPress admin Dashboard
  • Then go to Thesis Skin editor section
  • Then go to Thesis add box section
  • First create 3 column footer container via Thesis add box section, then click on that 3 column footer container and give css class as per below image

3 container

  • Then Create 3 footer widget box via Thesis add box section and give css class for each footer widget box(refer below image)

footer1Like above image, you can give 2nd footer box CSS as column2 and 3rd footer box CSS as column3.

  • Then move 3 footer widget box to 3 column container section via drag and drop option(refer below image)

inside container

  • After finishing above things add 3 column footer  to footer section via drag and drop option(refer below image)

inner footer

  • Then click save template. After finishing this go to CSS section
  • Then create package for 3 column footer
  • First go to package section, then select columns package, then click add package button(refer below image)

add package

  • Then give Name, reference and CSS sector(refer below image)

package-css-sector

  • Then go to options section in package, then give CSS as per below image.

single column css

Like above image, you can give Column2 CSS Selector as column2 and Column3 CSS Selector as column3.

  • In this package you can give padding also
  • Then click package save button
  • Then add package name(&3columns_footer) to skin CSS section
  • After finishing this click CSS save button
  • Then go to wordpress widget section, there you will see 3 footer column widget, then add things as per your wish, that’s all
  • Now you successfully created 3 column footer

If you have any doubt or suggestion, feel free to write as comment in comment section.

If you like this post share with your friends via following social media options…

Leave a Comment

  • Ryan @ Digital Photography Hobbyist December 5, 2013, 3:56 pm

    I like the tutorial, but it would be a bit helpful / useful to have a screenshot of what the footer actually looks like so the reader knows what to expect before doing the tutorial. Just my 2 cents.

  • Tim December 17, 2013, 2:25 am

    Awesome, thanks.
    How to apply to whole site?

  • Tim May 4, 2014, 9:57 pm

    hi
    will this work for Social Triggers? None of the boxes are shown in ST, that you refer to here.
    Tim

Password Reset
Please enter your e-mail address. You will receive a new password via e-mail.