{"id":89540,"date":"2019-08-02T14:26:01","date_gmt":"2019-08-02T19:26:01","guid":{"rendered":"https:\/\/wpengine.com\/?post_type=resource&p=89540"},"modified":"2022-02-01T20:27:57","modified_gmt":"2022-02-02T02:27:57","slug":"develop-custom-widgets-wordpress","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/develop-custom-widgets-wordpress\/","title":{"rendered":"Develop Custom WordPress Widgets"},"content":{"rendered":"\n

You\u2019ve likely used widgets in WordPress, as handy ways to customize<\/a> certain areas on your website. Sometimes they do exactly what you need, but occasionally you might want them to have a slightly different appearance or functionality. <\/p>\n\n\n\n

Fortunately, developing custom widgets<\/a> for WordPress is possible. These PHP objects can be created from scratch and implemented on your site, or collected into a plugin for use in multiple themes. Either way, creating your own widgets is not as hard as you might expect. <\/p>\n\n\n\n

In this article, we\u2019ll go over how to develop your own custom widgets, and walk through determining what your widget will be used for and what you\u2019ll need first. Let\u2019s get started! <\/p>\n\n\n\n

Determine What Your Widget Is For<\/h2>\n\n\n\n

There are a few things you\u2019ll need to think about before you start putting together your first custom widget. Planning ahead will help you create your niche piece of coding more effectively. <\/p>\n\n\n\n

Widgets can only be placed in widget-ready areas<\/a> of a WordPress website. So you\u2019ll want to make sure you know exactly where your widget will be implemented, and what its purpose will be. You should be able to pinpoint what will make your widget unique, as this will help you to better plan out its design. <\/p>\n\n\n\n

Depending on the theme you are using, widgets can usually be placed in sidebars, headers, and footers:<\/p>\n\n\n\n

Sometimes there are multiple options for one or more of these areas (such as a \u201cSidebar 1\u201d and \u201cSidebar 2\u201d, for example). No matter where it\u2019s placed, a widget essentially uses PHP object programming to produce a piece of HTML for front-end display and back-end administration. <\/p>\n\n\n\n

As you will be adjusting the WP_Widget<\/a> class on your site in order to make custom changes, you\u2019ll want to finalize the plan for your widget prior to diving in. If there are other elements to your widget, such as a contact form function or a feed of data, make sure you have all the extra information you require before starting. <\/p>\n\n\n\n

What Will I Need? Start With the Base Code for a Widget<\/h2>\n\n\n\n

There are two main ways to approach developing your custom widget. You can create a plugin that your widget will be located in, or you can paste your widget code directly into your functions.php<\/em> file.<\/p>\n\n\n\n

When you choose the latter option, your widget will only be functional with your current theme. Therefore, in most cases the best choice is to use a custom plugin, which will enable you to use the widget with any theme.<\/p>\n\n\n\n

You will also need a WordPress widget\u2019s base code<\/a>, a text editor for editing your code, access to your WordPress admin dashboard, and a Secure File Transfer Protocol (SFTP) client<\/a> for accessing your site\u2019s files directly. Once you have all the necessary ingredients in place, you\u2019re ready to make a widget.<\/p>\n\n\n\n

How to Start Building Your Custom WordPress Widget (In 3 Steps)<\/h2>\n\n\n\n

Once you decide what the purpose and function of your widget is going to be, you can begin to develop the code. You\u2019ll want to be familiar with the basics of classes and objects in PHP5<\/a>, as well as the anatomy of a widget<\/a>.<\/p>\n\n\n\n

To get started, you\u2019ll want to set up a new folder to hold your widget files. Place your new folder in your wp-content\/plugins\/ <\/em>directory, and name it:<\/p>\n\n\n\n

Now you have a staging area for your new widget\u2019s code files. <\/p>\n\n\n\n

Step 1: Use a Base Code to Format Your Widget<\/h3>\n\n\n\n

While you can work from scratch if you\u2019d like, the easiest way to get started is to use a well-written base code. You can find the WP_Widget class<\/a> in your WordPress site\u2019s file directory, located in wp-includes\/class-wp-widget.php<\/em>.<\/p>\n\n\n\n

To create your custom widget, you\u2019ll be extending the existing class to execute new functions. You can also find widget base codes on GitHub<\/a>. While there are many programmers out there willing to share their code, be sure to review what you\u2019re using and make sure it meets the WordPress coding standards<\/a>.<\/p>\n\n\n\n

Once you have your base code, you\u2019ll need to insert it into the file you just created, so that WordPress will register your widget<\/a>:<\/p>\n\n\n\n

\/\/ register My_Widget
add_action( 'widgets_init', function(){
 register_widget( 'My_Widget' );
});<\/pre>\n\n\n\n
The registration code is simple, and should be copied directly into your widget\u2019s file.<\/p>\n\n\n\n
Step 2: Customize Your Widget <\/h3>\n\n\n\n
At this point, you can start customizing your widget to do whatever you\u2019d like. Naturally, the way you do this will vary depending on your goals. However, there are a few basics you will need to familiarize yourself with first, especially if you\u2019re new to development.<\/p>\n\n\n\n
One concept you\u2019ll want to understand are WordPress hooks<\/a>. These enable you to \u2018hook in\u2019 to WordPress’ core code, and enact a certain function at a specific point in time. <\/p>\n\n\n\n
There are four main elements<\/a> in the widget class that you\u2019ll need to work with. They include:<\/p>\n\n\n\n