Easy as 1-2-3: Widgetize WordPress Themes

Advertisement

Easy as 1-2-3 is a new series here on Design Informer. The series will cover all kinds of tutorials, from Photoshop to WordPress. It will be really short and helpful tutorials that are easy to follow.

Part of what makes WordPress such a user-friendly platform is the endless supply of free widgets. With widgets, you can easily accessorize your blg without any knowledge of coding. (The majority of themes, however, keep this easy-to-use functionality exclusive to sidebars.) I recently widgetized my homepage1 in three easy steps, and I would like to share the process with you.

Step 1

The first thing you need to do is edit your functions.php file. I recommend you make a backup of the file on your local hard drive (just in case you break something.) Once you make a backup, it’s safe to add the following code to your functions.php:

if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Homepage Widget 1',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));

You have to give every widget a unique name. It’s a good idea to name a widget by where it is going to live. This widget houses the main image on my home page so I named it "Homepage Widget 1."

Also note that the ‘before_title’ and ‘after_title’ are set to h2 tags. Some themes are set to h3. Remember to make this adjustment if applicable.

Step 2

Open your home.php (or any file you wish to widgetize; the process is the same regardless) and add the following code:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Homepage Widget 1') ) : ?>
<p>This area is widget ready.</p>
<?php endif; ?>

Note the first line of code gets the same widget name. (i.e ‘Homepage Widget 1′) The placement and stylistic attributes are all controlled by adding additional code to your theme’s style.css file.

Step 3

Go back to the widget area in your WordPress control panel and start rocking out. You are done!

Widgetized

What do you think of the new series, Easy as 1-2-3? Did you find this tutorial helpful?

We would love to hear your thoughts. Learning how to add widgets to WordPress themes is an important and valuable skill. Are there any other widgetizing techniques that you know? Please leave your comments below. We would really appreciate it. You can follow the Design Informer on Twitter here2.

Footnotes

  1. 1 http://ocondesign.com/
  2. 2 http://www.twitter.com/designinformer

↑ Back to topShare on Twitter

Mario Ocon is the author of ocondesign.com. He brings over 10 years of web and print design experience to the table. Mario has had the privilege of servicing wide range clients that run the spectrum from small start-ups to well-established Fortune 500 companies.

Advertising
  1. 1

    Great tutorial Mario. I’m a plugin developer and I have some widgets out there public. I hate when people ask me to include a function or a shortcode for the widget because they haven’t got a widgetized sidebar. Thx for the post, perhaps I should send them over here ;)

    Cheers,
    ~ K

    P.S. Thx for putting up the subscribe to comments plugin ;)
    .-= Konstantin´s latest Blog Entry – The Twitter API v2 Transition =-.

    0
    • 2

      Thanks Konstantin. I’m glad you appreciated Mario’s tutorial. You should send them to this page. :)

      Oh, and I finally was able to add the Subscribe to Comments plug-in. Thanks for the tip. As a matter of fact, I even took it a step further and added threaded comments to the blog as well. Took me a while but I really like the end result. :)

      1
  2. 3

    nice. always a better to widgetize rather then hard code those side bar extras.
    .-= David Silva´s latest Blog Entry – Premium Blog Service (2mo. FREE) =-.

    0
    • 4

      I agree. I actually didn’t know how to do this until this tutorial. Right now, some of the sidebar on Design Informer is hard-coded but I will definitely be following this tutorial in the next few days to widgetize all of Design informer.

      0
  3. 5

    nice and simple tut… really helpful in my wp-theme-developer life

    0
  4. 7

    Jad, cool. Threaded comments look sweet, but I’m unable to continue the thread started above, there’s a limit of 2, oh well. Maybe you should try increase that number. Practice shows that 5 is generally enough, well at least on my blog ;)
    .-= Konstantin´s latest Blog Entry – The Twitter API v2 Transition =-.

    0
  5. 11

    Thanks bro for this awesome tuto Merry Christmas :D ;)

    0
  6. 13

    Konstantin

    Thank you. I’m glad you found this helpful. I hope other will to.

    David

    I agree with you. In the long run it’s going to make updating your site alot easier.

    0
  7. 15

    Nice tutorial, keep up the good work! :)

    0
  8. 17

    Great simple tutorial! Thanks!

    0
  9. 19

    I’d like to see it implemented on your site. Send me a link when you finish.

    0
  10. 20

    Simple and short!
    Thank you, that’s what i have been searching for…
    .-= Tom´s latest Blog Entry – Mit dem Nikon AF-S Nikkor 300 mm 1:2,8G ED VR II legt Nikon die Messlatte höher =-.

    0
  11. 21

    Nice tut and simple too

    0
    • 22

      Thanks Yousuf. That’s what I’m trying to accomplish with the “Easy as 1-2-3″ series. Simple tutorials that anyone can try out in a few minutes. :)

      0
  12. 23

    This Tutorial is short but really helpful! now I know how to manage my wordpress CMS more efficiently.

    0
    • 24

      Thanks! I myself didn’t know how to do this until I read this excellent tutorial by Mario. It will definitely allow me to code more sites in WordPress.

      0
  13. 25

    Very cool tut, thanks for sharing, I love your threaded comments, would love to see a tut on that.
    .-= loswl´s latest Blog Entry – David Choate Interview =-.

    0
  14. 26

    hi, this is a great tutorial, usually I will never use widgets. I will code them manually which is easy for me. However, this is very helpful for me, Thanks
    .-= Karthick´s latest Blog Entry – Comuna2 Plazza Premium Joomla Template by TemplatePlazza =-.

    0
  15. 28

    The usability and sheer number of themes to fit any type of blog is probably the number one reason why I love WordPress more than any other blogger platform out there.

    0
    • 29

      You’re right Angie. There’s plenty of great themes out there, some free and some not free. And there is also great support amongst other WP users so that’s why WP is awesome! :)

      0
  16. 30

    Great resource. Simple and effective tips. Thanks for sharing.

    0
  17. 31

    Great stuff!
    I would love to find out how to add separate widgetized areas for different pages if anyone knows a simple way to do that?

    So a sidebar for the homepage, a separate sidebar for the post page, archive page, etc
    .-= iDale´s latest Blog Entry – Toxic Spill Coaster is Drop-Drink Gorgeous =-.

    0
    • 32

      Well, all you would have to do for something like that is use custom templates and instead of calling a sidebar, you call that template that you created instead. If you’d like, I can send be more detailed.

      0
  18. 33

    Thanks for the tutorial dude.
    .-= Dinesh´s latest Blog Entry – Default https access for Gmail =-.

    0
  19. 35

    I don’t really understand how this is supposed to work. If you move the widget code to the home page and then add a widget in the WP widget area, wouldn’t the widget automatically be added to the sidebar, no the home page? Also, if you want some widget on the home page and some in the sidebar, how does each widget know where it belongs?
    .-= Anja´s latest Blog Entry – WELCOME! =-.

    0
    • 36

      Widgets can be wherever you place them. Traditionally, the sidebar, but you can put widget “areas” anywhere. He suggest naming each widget a unique name so you can have one in your home.php called “Homepage Widget 1″ and another in your sidebar called “Sidebar Widget 1″. You’ll see two widget blocks in your dashboard, each named uniquely. So you can drag your text widget to your “homepage widget 1″ area and your recent comments widget to the “Sidebar Widget 1″ area.
      .-= Joe Howard´s latest Blog Entry – Unlock the Hidden Job Market =-.

      0
  20. 38

    Nice Tutorial , thanks
    .-= SmashinGeeks´s latest Blog Entry – How To Setup Co.Cc Domain With Your Blogspot Blog =-.

    0
  21. 40
  22. 41

    Excellent tutorial. Great to hear that Easy as 1-2-3 is going to become a series.
    Really looking forward to the upcoming tuts!
    .-= Duane Kinsey´s latest Blog Entry – 13 Must Follow Logo and Brand Identity Design Blogs =-.

    0
  23. 42

    Finally, been looking for this kind of coding.

    Nice and easy to follow. Thx much. Bookmarked.

    0
  24. 43

    Thanks a lot for that post.
    It’s easy to follow and I have widgets in my template.

    0
  25. 44

    I know this is from 2009 but I couldn’t get it working until I added ‘id’ to the register sidebar array…

    0
  26. 45

    Amazingly helpful. Thanks a lot! :)

    0
  27. 46

    I’m happy that you found what you were looking for. Thanks for letting us know.

    0
  28. 47

    Thanks Mark! I will definitely try to write a good tutorial on upgrading the WP pre 2.7 to have threaded comments. It took me so long to install threaded comments but I’m glad I was finally able to do it. It’s really working out great so far.

    0
  29. 48

    You’re welcome Amanda. Look for more of these easy to implement tips in the next installment of Easy as 1-2-3.

    0

↑ Back to top