Create a Footer Widget in WordPress

Don’t get me wrong; I love my clients. But I don’t have the time (or energy) to handle all the simple content updates that they need. So providing them with a widget empowers them to get in there and update the content as much as they want.

In this article I will walk you through how to create a footer widget from scratch. How you implement the design is up to you, but I will show you how to plug in the details so you can tweak your design using CSS.

There are three steps to creating a widgetized footer:

1. Register the new widget
2. Initialize the widget
3. Inserting the widget into your footer.php

We’ll go through each in baby steps and show you how it’s done.

Step 1: Register the Widget

You can do this step in your functions.php file for your theme or create a plugin. Since you’re probably new to this, the best place to start is in your functions.php file for now and you can always move it later.

Paste the following code and edit as needed. I’ll step you through what each generally means:

register_sidebar(array( 
'name' => __('Footer Widget 1'), 
'description' => __('Footer Widget'), 
'id' => 'footer-widget-1', 
'before_title' => '<div id="widget-title-one" class="widget-title"><h3>', 
'after_title' => '</h3></div>', 
'before_widget' => '<div id="your-footer-widget-id" class="your-footer-widget-class">', 
'after_widget' => '</div>'        ));

The register_sidebar function lets WordPress know about your new widget. The name is what will show up in the Appearance » Widgets menu as the title. The description is the italicized text under the title that can be used to give users a hint to the use of the widget.

The id is critical because it’s what we’ll use later when we initialize the widget. Use something unique. Before_title and after_title is the code that will actually be rendered around the title of the widget – you can use <h2> or <span> or whatever your theme utilizes for sidebar CSS elements.

Before_widget and after_widget are the same except they wrap the widget code. This gives you the ability to fully integrate the widget into your theme as needed.

If you do nothing else, you’ll still have the widget in your Appearance » Widgets menu:

Step 2: Initialize the Widget

This is just a rinse and repeat of the Step 1, but I wanted to break it up so you could see each in action. To initialize a widget that will be dynamically updated (using the Appearance » Widget menu), we need to use a special WordPress function:

dynamic_sidebar( 'footer-widget-1' );

Just paste that code in your functions.php file right below the code from Step 1. Notice how the argument for the function is the same as the ID in Step 1? Don’t forget that little step!

Now WordPress will render whatever widget you drop into this widget area in the Appearance » Widgets menu. Most of my clients just need the text widget so they can add whatever they want.

But we still haven’t told WordPress where to render this widget!

Step 3: Inserting the Widget into Your Footer.php

Say goodbye to your functions.php and open the footer.php file. You’ll see the <footer> tag. Peruse through your other footer content that’s already in there and find a good spot for your widget area. I’m putting mine at the beginning of the footer tag, so it will be rendered first thing:

<?php if ( is_active_sidebar( 'footer-widget-1' ) ) : ?>
<ul id="sidebar">
<?php dynamic_sidebar( 'footer-widget-1' ); ?>
</ul>
<?php endif; ?>

It’s the same drill as the last two steps – make sure the ID in Step 1 and Step 2 are the same her in both the IF statement and the dynamic_sidebar function argument.

Now you can add a widget to your footer area! It’s that easy and you can use CSS to style as needed.

And with that little bit of work on the part of your client, here’s what they’ll see on their site:

Step 4 (optional): Style Your Footer Area

In my example, I’m using the WordPress default theme (TwentyEleven). Because I used the before_title and after_title divs to include class and id, I can take full advantage of CSS to style these as needed. A little branding never hurt anyone, right?

My title class is widget-title, which is a standard CSS theme element. I don’t want to change all the widget-title CSS, so I’ll target the div ID instead. In my styles.css file that we can edit directly in WordPress under the Appearance » Editor menu, I can do something as simple as:

#widget-title-one h3 {color:#f48e0b}

This leaves the other widget-titles alone and gives us a gaudy, orange title just for this footer area.

Getting the text area styled properly is a little more specific since this may depend upon what widget you use here. If you just you the text widget in this area, here’s one method of targeting with CSS:

.your-footer-widget-class  {color:#209520}

Too easy, right? Now you can really drill down and get these looking good and let your clients add whatever they want to this area, leaving you free to do more important things – like get some coffee.

The post Create a Footer Widget in WordPress appeared first on YinPress.