How to Create a Multi-Column Widgetized Footer for Wordpress

Written by sara williams
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Create a Multi-Column Widgetized Footer for Wordpress
Add multiple widgetized sections for a multi-column footer in WordPress. (Photos.com/PhotoObjects.net/Getty Images)

While WordPress designed widgets -- small programs you can drag and drop into place from the back end -- for use in blog sidebars, some themes also use widgets in their footers. These themes often place three or four "widgetized" sections in the footer, which can hold widgets such as "Popular Posts" and "Recent Comments." You need to edit the HTML code of the footer, the PHP in the "functions.php" file and the CSS (Cascading Style Sheet) code of the "style.css" file in your theme to create the same functionality in your own themes.

Skill level:
Easy

Other People Are Reading

Instructions

  1. 1

    Navigate to "Appearance" from the sidebar of your WordPress dashboard. This is the backend you log in to from the "wp-admin" directory of your website. Click the "Editor" link that displays in the "Appearance" submenu.

  2. 2

    Locate the "footer.php" file listed under "Templates" on the "Edit Themes" screen and click its link. Create three DIVs in your footer and give each one a unique ID name:

    <div id="footer">

    <div id="left">

    </div>

    <div id="center">

    </div>

    <div id="right">

    </div>

    </div>

  3. 3

    Add this code inside each of the three footer DIVs:

    <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar')) : ?>

    <?php endif; ?>

    Change the name "Sidebar" in the "dynamic_sidebar()" function for each of the three DIVs, making each one unique. Names like "Left Footer" work well. Click the blue "Update File" button to save your work.

  4. 4

    Go to the "functions.php" file in the "Edit Themes" screen. Add this code above the closing "?>" PHP delimiter tag:

    if (function_exists('register_sidebar') )

    register_sidebar(array(

      'name' =&gt; 'Left Footer',
    
      'before_widget' =&gt; '&lt;div id="%1$s" class="widget %2$s"&gt;',
    
      'after_widget' =&gt; '&lt;/div&gt;',
    
      'before_title' =&gt; '&lt;h3&gt;',
    
      'after_title' =&gt; '&lt;/h3&gt;',
    

    ));

    Change the "name" to match the name of your first footer widget area. Add this code two more times, so each widget area has this corresponding code. Each time you add the code, change the "name" to match one of your footer widget areas. Save the file.

  5. 5

    Load your "style.css" file in the "Edit Themes" screen and add this code to the bottom:

    footer div { float: left; width: 33%; }

    This code aligns each widgetized section horizontally across your footer. Add any other styles as needed.

Tips and warnings

  • An understanding of the CSS "box model" is very helpful for this type of footer layout. If you do not know the model, you should study it and learn about the effects of margins and padding in particular.
  • Back up your theme before editing and re-upload the theme via FTP if you cannot get back in to WordPress due to a PHP error.

Don't Miss

Resources

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.