How to Create A Custom Widget in WordPress

So, you want to make a custom widget for your sidebar or footer, but don’t know HTML?  Never fear!  There’s a pretty nifty trick you can use to create a custom widget in WordPress. (A “widget” is simply a section of content on your site, most often in the sidebar or footer).

This trick won’t work for all widgets, but if you want to do something simple that uses text, pictures, and/or links, this will work.

This method may take some trial and error to get right.

Step 1: Create the Widget

1. Create a new post or page

You don’t need to worry about titling it, since you won’t be publishing it.

2. Put the widget content into the post/page

Enter Widget Content

Keep in mind the width of your sidebar, which is much narrower than a post or page. Images wider than the sidebar will look weird in it.

3. Click the “Text” tab.

Text tab in WordPress

4. Copy EVERYTHING in the text editor

Copy everything

“Command+A” on a Mac or “Ctrl+A” on a PC will highlight everything for you, then you can just press “Command+C” or “Ctrl+C” to copy. Alternatively, you can right-click and select “Copy”.

We recommend saving the post or page as a draft, in case you want to come back and make edits to the widget later.

Tweetables:

  • Did you know that you can make a custom widget in WordPress? Click to Tweet
  • I’ve been wondering how to make my own widgets in WordPress! Click to Tweet
  • Now I have more control over my WordPress site. Click to Tweet
  • Creating a custom widget in WordPress. Sound complicated? Not after @AuthorMedia explains it. Click to Tweet

Step 2: Make it a Widget

1. Click on “Appearance” –> “Widgets” in your dashboard sidebar

Widgets in menu

On this page, you’ll see two sections, ‘Available Widgets’ and ‘Sidebar’.  The sidebar is your current sidebar, and the available widgets is a list of widget types that are available. Depending on your theme, you may also see additional areas to put widgets, such as your footer. In the available widgets area, you’ll want to find the one called ‘Text’ and drag it into your sidebar where you want it to appear (higher up in the Sidebar list means it appears higher on your site). It will expand to reveal a text box.

Text widget

2. Paste the HTML code you copied in here.

Command+V (on a Mac) or Ctrl+V (on a PC) will do this for you.

Text widget

3. Click the blue Save button.

It will now appear on your site; check it.  You may need to adjust the widget some to make it look correct in the sidebar (since you created it in the wider page/post editor)

TIP:  If the new widget looks particularly ugly, go back to the Widgets page in your WordPress dashboard and drag the widget out of the sidebar to delete it.  Then, once you’ve fixed the problems, just start from the beginning of Step 2 again.