How to create a five-column footer, like on the demo website

• peterguirguis

  said

  I would like to create a four column footer. May I please ask how I would be able to do that? Do I have to use HTML for that and enter it in the footer area, or is it possible to do it some other way like by creating a sidebar?

• andy

  said

  The method used on the demo site is a combination of column shortcodes and sidebars. Below is the code I used for the demo website:

  [three_fourth]
      [one_fourth]
          [sidebar alias="footer-left-1" ]
      [/one_fourth]
   
      [one_fourth]
          [sidebar alias="footer-left-2" ]
      [/one_fourth]
   
      [one_fourth]
          [sidebar alias="footer-left-3" ]
      [/one_fourth]
   
      [one_fourth_last]
          [sidebar alias="footer-left-4" ]
      [/one_fourth_last]
  [/three_fourth]
   
  [one_fourth_last]
      [sidebar alias="footer-right-1" ]
  [/one_fourth_last]

  I created each of the sidebars first in the theme admin area “Appearance > Design Settings > Sidebars” then copied the shortcode for each sidebar into the column structure shown above. This provides a series of widget ready areas to add content directly to the footer.

  There are a lot of different ways you create the footer content for your site. The code shown above is just one method.

• peterguirguis

  said

  Thank you so much Andy, this worked perfectly! What a great and easy way to create and customize the footer area. You guys are awesome

• andy

  said

  Thank you Peter. It really does mean a lot to hear that. I put so much effort into the creation of my themes, especially the functionality to make them more than “just another WordPress theme”. Doing the support side of the job you mostly hear about the problems and times when things are not working. That is challenging at times. Getting this kind of feedback means so much and will probably keep a smile on my face the rest of the day! Thank you.

• peterguirguis

  said

  You are so welcome Andy and I really do mean it with all my heart. When it was time for me to choose a theme, I ended up purchasing Mingle. I was so impressed with its functionality, looks, and coding that I ended up buying Unite after that for one of my clients. I love both themes and I really do think that the quality of work that you are producing is excellent. I’m always looking to purchase or partner up with people that take pride in their work, and it’s obvious that that is the case with you.

  Wishing you all the best

• wibbsy

  said

  I found another and perhaps slightly easier way to control this… use a plugin that gives a widget a shortcode (i.e. ‘amr shortcode any widget’) then just call the shortcode in each of the column structures you define. Just means you only need 1 shortcode sidebar rather than 1 for each widget.

• peterguirguis

  said

  That’s a great idea too Wibbsy, thanks for sharing that

• snerp

  said

  I have a question, how do I adjust the width of the sidebars. When I add the Calendar widget it’s too wide and causes overlapping. I noticed on your demo the “search” is wider

• andy

  said

  The shortcodes for layouts simply add default containers where the widths are predefined. You do not have any requirement to use these and could instead create your own containers with DIV tags.

  For example:

  <div style="width: 70%; margin-right: 3%;">
      [sidebar alias="footer-left-1" ]
  </div>
  
  <div class="last" style="width: 25%">
      [sidebar alias="footer-right-1" ]
  </div>

  You have the freedom to create whatever you like but relying on shortcodes and other pre-made content will limit you to the settings that they already contain.

• dv100

  said

  OK. So I thought I was following your first example above perfectly well — going into the theme admin area “Appearance > Design Settings > Sidebars” and creating each new sidebar as described. I then created a new page footer and copied the shortcodes into the “Footer – bottom content” area and saved the footer. I then went to the Widgets area and saw that my newly created sidebars were all there and I thought “great!” … however after adding widgets to each of the sidebars, and refreshing my home page, I don’t have the widgets showing up in footer area…

  Should mention that I also specified that my new home page use the newly created footer also.

  What am I missing? I know it’s something simple that I missed I’m sure, but if anybody can illuminate what this might be, I’d be very appreciative.

  Thanks in advance.
  Daniel

• dv100

  said

  Well, I just found my own mistake. Though I told “Layout: Home Page Layout” to use the new footer i created, I didn’t tell the page I had created called “Home” to use the new footer. This solved the problem instantly. Crisis averted! Getting better at this every day.

  Cheers. DV

• andy

  said

  @dv100

  Glad to hear it.

• aikidoofcharlotte

  said

  Andy,

  Great theme, it’s coming along, on the Footer, I added sidebars, “4″ but don’t see how you got the fifth sidebar in on the right with the “Search and Social Media icons”, can you explain this…been using the support forum and it’s really good. my domain in progress is http://aikidoofcharlotte.net

  Thanks!

  Jon

• jeffw

  said

  @aikidoofcharlotte The content of that area is a custom search form (search this forum for “mingle footer search”) above an [icon_list] shortcode for the social icons.

• aikidoofcharlotte

  said

  thanks Jeff, getting there…a little stumped, got the 5 areas of the footer in, with Sidebars and code, but my search button is not staying on the same line as the search box, it’s going to next line on the bottom right of page, http://aikidoofcharlotte.net, I thought I saw some code in the forum but now I can’t find it plus can you tell me where to change it. I want to have th footer like the demo. Forum has been very helpful thus far. Thanks!