Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Easy as 1-2-3: Widgetize WordPress Themes

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 homepage in three easy steps, and I would like to share the process with you.

Step 1 Link

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') )
'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 Link

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 Link

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


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 here1.

Footnotes Link

  1. 1
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook


Mario Ocon is the author of 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.

  1. 1

    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. :)

  2. 2


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


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

  3. 4

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

  4. 6

    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.

  5. 7

    You’re right Konstantin. I just changed the limit to three. Thanks for pointing that out. :)

  6. 9

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

  7. 11

    Nice tutorial, keep up the good work! :)

  8. 13

    Great simple tutorial! Thanks!

  9. 15

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

  10. 16

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

  11. 17

    Nice tut and simple too

    • 18

      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. :)

  12. 19

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

    • 20

      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.

  13. 21

    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.

  14. 22

    :) Whatever works for you, but after learning this, I find it much easier than manual coding. It’s also perfect for client websites as well.

  15. 23

    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.

    • 24

      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! :)

  16. 25

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

  17. 26

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

  18. 27

    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.

  19. 28

    No problem. Glad you liked it. ;)

  20. 29

    Thanks for the response on the question Joe! That was a really helpful answer and I appreciate you taking initiative to help out. :)


↑ Back to top