A beginner’s guide to creating custom widgets in WordPress dashboard

1
86
wordpress-anshullabs

Being recognized as one of the most terrific publishing tool, WordPress has been serving as the backbone for hundreds and thousands of websites prevalent over the internet. Backed by a narrow learning curve, WordPress is a complete web development software even for the not very tech savvy population. Building websites for different verticals has become a complete breeze with WordPress. The future of this web platform is definitely bright with a whole new level of administrative simplicity being added as a whole. If you too are running a WordPress powered website or are thinking about building one, then you’d undoubtedly wish that your WordPress dashboard is simple-to-use. Well, there are numerous plugins which allow you to add different modules into your website, but in order to attain a completely customized dashboard, it is an addition of widgets that can serve as the best match. Continue reading this post which offers you a step wise approach to create custom widgets in your WordPress admin dashboard.

A brief on the kind of custom widget that we’ll be creating in this tutorial

Well, in this tutorial, we’ll be creating a custom widget which will display latest tweets from a custom user.  And now, steps which allow you to create a custom widget in your WordPress dashboard

Step 1- Register the dashboard widget for your WordPress blog

Use wp_add_dashboard_widget function for registering the new dashboard widget for the blog as shown below:

Step 2- Add a simple new widget to WordPress dashboard

For this, just open your functions.php file and add the below code to it:

In the above code, I’ve set the function called “twitter_dashboard_setup” which will add a widget with a unique twitter-dashboard-widget id. I’ve named this widget as “Recent Tweets”.

Step 3- Hook the twitter_dashboard_setup  into dashboard setup process

The function used for hooking twitter_dashboard_setup into dashboard setup process is shown below:

Here, twitter_dashboard_content is the callback function including the actual contents of the WordPress widget. Also, the twitter_dashboard_content() function will return a text “Hello, People!”.

That’s it! We’re done with creating the new custom widget. Now, you can go to your admin main page where you can see the new widget towards the bottom of the page. You can choose to drag the widget anywhere you feel like.

A look at the steps associated with outputting the latest tweets from custom user

Now that we’ve created a custom dashboard widget, you can use GET statuses/user_timeline API from Twitter for loading the tweets and twitter-provided script for rendering them on the created widget.

Step 1- Put scripts in WordPress

As the very first step, use admin_enqueue_scripts action hook for targeting scripts into the main WordPress admin page. For this, you can use the below function which checks current page and loads the scripts as per requirement:

In the above code, you can opt for changing themefm to a suitable theme name. Plus, you can even choose to set the count of output tweets by simply changing the count number.

Step 2- Rewrite twitter_dashboard_content() function

Finally, you need to rewrite twitter_dashboard_content() function with the one that’s already specified in twitter-provided scripts structure. Below is the final version of code listing:

That’s it!

Wrapping Up
Widgets are indeed the best assets of WordPress dashboard and being able to create them efficiently is perhaps the best thing. So, those were the steps you need to follow for creating your own WordPress widget. Hope you’d have followed the steps thoroughly. Do drop in your queries/feedback using the comments section provided right under this post.

1 COMMENT

LEAVE A REPLY