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.

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.

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.

Joe Granados the author

Joe Granados is the owner 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
  1. pat says:

    Hey Marcell,

    I think you have confused the language of WordPress. You article does an excellent job of describing how to create an addition sidebar in your theme. However, the title of your article would indicate that you are going to demonstrate how to construct a widget in 3.0.

    Sidebars are used for displaying Widgets.

    Widgets allow you to display customized content, e.g. Recent Posts, Archives, HTML, Calendar, etc.

    I was hoping that you were going to show how to construct a widget in 3.0.

    Anyway, keep up with the excellent articles but double check your verbage.

    Have an outstanding day!

    Dr. Pat

Leave a Reply