This content is reader-supported, which means if you click on some of our links that we may earn a commission.
Website

11 Easy Steps to Create a Custom WordPress Widget

WordPress software is the go-to for people looking to create content for the web.

Just because it’s popular doesn’t mean it’s the perfect solution as-is for every content creator, though. Fortunately, you can tailor the software to better meet your needs.

Creating custom WordPress widgets requires knowing some coding techniques. However, creating these widgets will deliver the personalization you may need to make WordPress work better for you.

Why Creating a Custom WordPress Widget is Worth It

A WordPress widget is a piece of code that gives users the ability to add elements to a WordPress page with drag and drop ease. The widget simplifies adding elements like:

  • Banners
  • Sign-up forms
  • Menus
  • Calendars
  • Search bar
  • Lists

Widgets simplify building your WordPress site with design elements, placing interesting visual components and useful information for your readers in clearly visible areas. 

If building your own widgets seems like too much work, understand that WordPress includes many existing widgets as part of the software. Third-party developers also regularly create widgets that you often can use for free.

However, if none of the existing widget options quite do what you need them to do, the process of creating your own WordPress widgets is worth exploring.

The Investment Needed to Create Custom WordPress Widgets

Creating a customized WordPress widget is going to require a bit of a time investment on your part. If you are not familiar with what PHP coding looks like, or if you dislike having to type precise strings of text with no errors, the process may be a long, frustrating slog with no guarantee of success.

The WordPress support site offers a reference page designed to help you create all of the coding correctly, listing the various options you have available. This doesn’t necessarily make the process easy for a beginner, but it should help you avoid some significant coding mistakes that leave your widget unable to function as it should.

The good news is you don’t need a computer science degree to create your own custom widgets for WordPress. Newcomers can do the work successfully, as long as they’re willing to do some homework about PHP coding first. Understand that you probably will need to spend a few to several hours familiarizing yourself with at least the most basic coding techniques before starting your own widget.

The even better news is that there’s not a huge financial investment required to create a custom widget. Beyond the investment you’d make anyway in creating your WordPress site, signing up for web hosting, and so on, there’s no additional cost to create custom widgets yourself. 

Building Your First Custom Widget

After learning a bit about PHP coding, you’ll be ready to try creating a custom widget. The first time you build a custom widget for WordPress, it may take you a couple of hours for an extremely basic widget. If you don’t type accurately, it may take another hour or so to track down and fix typographical errors and coding errors. 

Some people may prefer using the premade widgets that are part of WordPress to save some time and hassle. (Scroll ahead to learn more about those.) However, if you need a widget that’s precisely tuned to the way you use WordPress, you may have no choice but to create a custom widget.

11 Steps to Create a Custom WordPress Widget

Here are the steps required to create your own custom widget. Understand that we are listing the most basic steps here. For more precise needs, you’ll need to consult the WordPress support site and study PHP coding techniques.

#1 – Take a Few Preliminary Steps

Before starting the process, we recommend that you take a couple of steps to protect your WordPress site. During this process, the chances of making a huge error that damages your site are small, but they do exist.

  • Back up the site: Create a full backup of your WordPress site before you begin the process of creating a custom WordPress widget. 
  • Use a child theme: Do not use your main WordPress theme to create your first custom widget. Work on a child theme until you’re fully comfortable with the process to prevent potential errors.
  • Find a test environment: You will want to find a way to test your newly created widget on a local environment, rather than on a live site. 

#2 – Select a Text Editor

You’ll be creating the coding that the widget requires inside a text editor. You do not want to use Microsoft Word or Google Doc to create your coding text for the WordPress widget, as these word processing software packages sometimes place invisible characters into the file. Hidden characters could cause the coding to work improperly.

Text editors don’t provide much in the way of options for formatting the text, but because you’re just seeking a basic, clean text string, you don’t want formatting (which also can add hidden characters).

Some safe text editors you could use for free include:

  • Atom
  • Notepad (included with Windows)
  • Notepad++
  • TextEdit (included with the Mac OS)

#3 – Understand the Four Basic Methods of Widget Creation

Within the latest version of WordPress, the software supports up to 18 methods that you can use to create a custom widget. You will add individual methods to the file you create in the text editor to tell WordPress how to deploy the widget.

WordPress uses its built-in WP_Widget class to deploy these methods. WP_Widget is the portion of WordPress that runs widgets.

To create the most basic custom widget in WordPress, you must make use of at least four methods. You could use four methods for creating a basic banner that greets visitors to the site, for example. The most commonly used four basic methods are:

  • __construct()
  • widget()
  • form()
  • update()

For our discussion of the steps required to create a custom widget for WordPress, we will stick with these four basic methods. However, if you want to create a custom widget that offers more complex functionality, you will need to use more methods.

#4 – Create the Header

Open the text editor you’re going to use. In the opening section of the editor, you’ll add the text:

class [name of your widget] extends WP_widget {

Inside the square brackets, you’ll need to enter the name of your widget, using an underscore between each word. You will then need to add each of the methods you want to use in order. Add a closed bracket at the end of the entire file to offset the open bracket shown here.

You have quite a few options for creating the coding inside your text editor to make the custom WordPress widget. We will not try to list every possibility that you can enter into the file for your widget, which would become unwieldy. Instead, we will list the most basic text you will add.

#5 – Add the __construct() Method

Using the __construct() method in your text editor allows you to set up the parameters for your custom WordPress widget. This method spells out the widget ID, the title (or name), and the description. Introduce the __construct() method like this:

public function __construct() {

Note the double underscore that’s part of this command, as well as the open and closed parentheses. (You have the option of adding extra commands between the parentheses for each method.) It is vital to enter all of these characters properly. Making an error in adding the text can cause significant problems for your coding. 

People who regularly do coding understand the need for entering exact characters. Those who are new to coding and building a widget like this may become extremely frustrated trying to enter all of the characters properly. 

On the lines following the introduction of the __construct() method, you then can add the ID for your widget, which needs to exactly match the name you used in the header. You can add notes as well as descriptions of what each line does.

With the ID command, you will add a name in this section that indicates how WordPress will display the name of the widget within the software.

After entering all of the information that’s part of the __construct() section, add the closed bracket. 

#6 – Add the widget() Method

Use the widget() method section to add and define the output that the widget will generate. The widget() method displays the HTML code in the widget on the front end of your WordPress site.

You can enter the message that the widget will display on your site through this section, for example. You also can specify the title for the widget in this section, as well as adding a “learn more” link inside the widget.

You can even add blank lines for the custom widget through the widget() method. Adjusting the positioning of the blank lines will greatly affect the way your widget looks. You can add description lines within this section, should you want to add notes to explain some of the lines of code.

Introduce the widget() method like this:

public function widget() {

After entering all of the commands and notes within this method, don’t forget to add the closed bracket, or you’ll generate coding errors.

#7 – Add the form() Method

Next, you’ll be adding the form() method to your text editor. Within this section, you’ll be setting up form fields that create the options for the backend of the widget. It controls how the widget will look on the backend.

Introduce the form() method like this:

public function form() {

Don’t forget to add the closing bracket after entering the information in the form() method. For a very simple widget, you may only add a little bit of information here.

#8 – Add the update() Method

The fourth method for creating a basic customized widget in WordPress involves adding the update() method.

This method makes it easier to customize the widget after it appears on the site, allowing you to change a banner message, for example. Rather than having to go back and build an entirely new widget each time you want to change the text in the widget, the update() method makes it far easier to change the text.

Items that you can add through the update() method include:

  • A field for the widget title
  • An area for a text message
  • A field for a URL address that visitors can click
  • A select field to determine whether clicking the URL will open a new browser tab

Introduce the update() method like this:

public function update() {

Add the closed bracket after you finish adding the information. When you’re creating a simple widget, you may not have a lot of information to add to the update() method. 

#9 – Registering the Custom Widget

As a final step for entering text into the text editor for your widget code, you’ll need to include a function that registers your widget with WordPress and tells it how to use the custom widget. Start with:

function [name of your widget] () {

You’ll need to add the closed bracket after adding any extra instructions you have.

Then make use of the add_action code, which completes the process of telling WordPress to load the widget and begin using it. 

The add_action code should include:

add-action ()

Use a semicolon after the closed parenthesis in the add_action code.

Add the coding required to register the widget to the end of the text editor file. With some older versions of WordPress, though, you may need to add the text for registering the widget at the top of the file, ahead of all of the other text.

#10 – Adding Your Code

Once you’ve completed creating your code in the text editor, you will be ready to test it out. You will need to add it to the functions.php file. 

You’ll have to log in to your WordPress administration area to add the code. The functions.php file is available by clicking on Appearance, Theme Editor, and Theme Functions. Within the functions.php file, paste the text from your text editor at the bottom of the file and click Update File to save your changes.

#11 – Using the Custom Widget

Within the WordPress window, click on the Appearance menu, followed by Widgets. You should see the name of your widget listed.

Click on and drag the name of the widget into the Sidebar section (listed toward the right of the page) to pick the position of the widget on the page. Click Save.

Then go to your WordPress site to see if the widget appears. If it seems to be working, you created the widget correctly. If it isn’t working correctly, you will need to return to the text editor and search for coding errors.

Adding and Customizing a Premade Widget

If the coding work to add a widget seems overwhelming, WordPress has some widgets built into the software. Additionally, some WordPress themes will provide access to widgets that you can use without having to do coding. Some plugins add widgets as well.

To see the widgets that are part of WordPress already, open the admin page. Click on Appearance, followed by Widgets.

In the Widgets window, you’ll see a list of available widgets that you can add to the page. Along the right side of the window, you’ll see the areas of your page where you can add widgets (including the Sidebar area). The areas you have available will depend on the WordPress theme you’re using.

To add one of the premade widgets to your page, click on it, dragging it to the right side of the window. Drop it onto the section where you’d like to see it appear. 

Removing Widgets

To remove a widget from your page, open the Widgets window again. Look through the list of widgets already on the page along the right side of the window. Click on the name of the widget you want to remove. Then click Delete.

Next Steps

Certainly, using accurate PHP coding to create a custom WordPress widget can be a significant challenge for someone who is new to coding. However, once you have the process figured out, this custom widget can give your site an advantage over competitors.

Creating your own WordPress widgets should simplify the process of making content that looks great. Adding custom information may even help you expand the reach of your site.

Finding a WordPress hosting service that provides the features you need for the new direction of your site can be a smart next step to take. Consider investigating the best ecommerce themes in WordPress too, as these can help you monetize your growing site.


Make your website better. Instantly.

Over 300,000 websites use Crazy Egg to improve what's working, fix what isn't and test new ideas.

Free 30-day Trial