Join 9,000+ Readers

Most Useful WP Tutorials for Building Custom Widgets

by Jake Rocheleau

on February 16, 2014

in Wordpress

WordPress widgets are very simple to implement once you have created the codes in your theme. Many free WordPress themes will come prepackaged with their own custom widgets. This is also the case for some more advanced plugins, but overall it does require some time coding these to work properly.

featured image creating crafting wordpres widgets custom

Often times developers would rather sit down and build their own solutions for running custom widgets. In this tutorial I want to present a set of great articles related to coding your own custom WordPress widgets. If you are unfamiliar with PHP then this will be a challenge but it is not impossible. The entire WordPress system is based in PHP so it is worth learning some details of the language, assuming you plan to customize many various WP sites in the future.

Getting Started

For those who are unfamiliar with PHP I recommend Googling all the functions you do not understand. It will either take you to the PHP documentation, or the WordPress codex. An older article on Design Shifts covers templates for custom widgets and page templates when developing in WordPress. The template code will setup a location in your theme and allows you to drag widgets anywhere on the page. Here is their sample code:

//
//  Adding more Widget Areas to the Sidebar
//
 register_sidebar( array(
 'name' => __( 'Publications', 'YourChildThemeName' ),
 'id' => 'publications',
 'description' => __( 'A List of Publications', 'YourChildThemeName' ),
 'before_widget' => '<li id="%1$s">',
 'after_widget' => '</li>',
 'before_title' => '<h3>',
 'after_title' => '</h3>',
) );

And while this article is fantastic at giving you the basics, we still do not know how to create a new widget function. Something like the highest rated tags, or the top 5 categories with the most filed posts. I definitely recommend the tutorial post on AmereServant which focuses on the latest trends in WP3+.

You will learn how to create a custom widget template and also import your own codes from an external PHP file. All of these codes will still be kept inside your theme folder, which makes organization a breeze. Some developers will disagree with these methods but I say it all boils down to your personal preferences. WordPress is a fairly bloated CMS and there are no set programming guidelines. You should follow whatever works best for your project and whatever can scale quickly when updating.

New Dashboard Widgets

The admin dashboard is a more advanced level of widget creation. This isn’t to say you should not attempt it, but instead you should keep your eyes open and try to learn the best practices for these solutions. Many developers will not even bother with dashboard widgets because they are too convoluted and many people wouldn’t want them.

wptuts wordpress blog tutorial how to admin dashboard widgets open source

But I feel as WordPress grows faster it will become a very popular solution for web development. I found this excellent post on WP Tuts+ which offers an overview for creating Admin dashboard widgets. All of the codes are free to copy and very easy to follow. It will just require some edits inside your theme’s functions.php file.

Keep in mind that dashboard widgets are no different than typical theme widgets. You can still write any PHP code you wish, and this could be querying something from the database or even pulling content out of a 3rd party API. The possibilities are endless once you understand the standard template. Also check out WP Tuts+ article on building custom WordPress widgets if you are looking for more source code.

Widget Options

One other great feature is writing in options for your widget. This will allow you to create extra input fields right from within the admin panel. Then you can setup a custom widget title, design, practically anything if you know enough PHP. A particular post written by WP Web Hosting goes much further into detail.

register widgets wordpress sidebar open source

Their example is one of the best solutions out there. Granted there are some other articles worth checking out, but their code samples are very easy to understand. You should be able to copy over all the functions and have this widget loading properly(with extra options). Creating WP widgets means flexibility from within the administration panel. This is the main reason you would spend all this extra time hard-coding the effects into your theme functions.

Further Resources

Closing

I hope this article may provide a good starting point for new developers interested in WordPress widgets. As many have said before, this is not hard but it will require some time studying. Building an entire WordPress theme or plugin is certainly a lot more difficult. But all of these unique user-based customizations can be achieved with some time and a lot of patience.

About Jake Rocheleau

Jake is a freelance writer and web developer. He writes articles for numerous blogs on freelancing, Wordpress, CSS3, and jQuery. You can find him all throughout Google and follow his tweets @jakerocheleau. Connect with Jake on Google +