Latest Articles & Tutorials

Don't be stingy, Share this post with others!

WordPress 3.0: How to create a new widget in your blog or website

Many of you by now are already using WordPress 3.0 and if not then you should consider upgrading to 3.0 asap. In today’s post I will teach you guys how to add a widget or custom widget to your wordpress blog.

Widget Information

With the new WordPress template structure(Same but revised) some of you may have notice the ability to have multiple widgets under different classes. I think that is great because it gives you the option to style each widget the same or style each widget individually.

The Markup

Before we write the function for our widget we need to write up the markup. Open up your sidebar.php file then insert this into the file.


<div class="widget">
<?php
	// A second sidebar for widgets, just because.
	if ( is_active_sidebar( 'website-banner' ) ) : ?>

			<ul class="custombox">
				<?php dynamic_sidebar( 'website-banner' ); ?>
			</ul>

<?php endif; ?>
</div>

With the code above I have told WordPress to look for a widget named website-banner. I’ve also assigned a class name of custombox so I can later target that widget in the css(stylesheet).

Creating the Function

Open your functions.php file and insert the code below into the file.


	// Custom Area , located in the widget. Empty by default
	register_sidebar( array(
		'name' => __( 'website-banner', 'twentyten' ),
		'id' => 'banner',
		'description' => __( 'Website banner goes here', 'twentyten' ),
		'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
		'after_widget' => '</li>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );

Now it might be a little bit confusing but i will try my best to explain everything to you all. With the code above I define the name I gave the widget in the markup which was website-banner then gave it a description(Description will appear on widget via admin panel) “Website banner goes here” and finally gave it an id of banner which I can later classify in the css(stylesheet).

There you have it a new widget for your wordpress blog or website. If you have any trouble, questions or suggestions just leave a comment below and I will try my best to respond to them. Hope this tutorial helped you.

Don't be stingy, Share this post with others!

Marcell Purham

Marcell is the founder of Webdevtuts. He is also a web designer & developer who loves to design and develop websites. If you're looking for him you can find him via @webdevtuts


More posts by Marcell Purham →
, , , , , , , , , .

5 Responses to WordPress 3.0: How to create a new widget in your blog or website

  1. Pingback: wordpress « Keyurkr's Blog

Close