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
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.
4. Copy EVERYTHING in the text editor
“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
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.
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.
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.
One extra word of advice: If the results don’t look right, check that the HTML in the Text box is the same after you’ve saved it (leave the Widgets page then return to it)! WordPress.com automatically changes certain things (as well as disallowing some). You can sometimes get over the problem by enclosing the code in or bracketing. (I’m posting this but I don’t know if it will show correctly! My apologies if it doesn’t!)
Nope – it didn’t 🙁 “You can sometimes get over the problem by enclosing the code in or bracketing” should refer to using or bracketing – but take out those periods! 🙂
OK – I Surrender – it won’t show it – use division or paragraph codes in the normal greater than/less than brackets to bracket the code.
Hi Katie – it worked! Thanks so much. I’ve wanted to know how to do this for months and now I do. I’ll definitely be back for more tips.
This title is misleading. You’re not creating a new widget here. You’re merely adding content to a widget that comes stock with WordPress.
Thank you, this worked perfectly for adding Twitter’s official widget! Note: my wordpress theme is hosted by Laughing Squid. Might not work if hosted by wordpress because it contains java script.
to be clear, the Twitter official widget that you generate from your Twitter account settings contains java script
Thanks….
Hello Sir
The trick (I will call it a trick) helped me a lot in building small and simple widgets without coding.
Thanks a lot.
Nice drafted article. But still need some more detailed information and structure information like,
1. Register widgets-init
2. Register_widget
3. Class structure
This may help to guide http://buffercode.com/simple-method-create-custom-wordpress-widget-admin-dashboard/
yes, you right. thanks for sharing the link
Thank you so much!
Has made my life much easier! managing to use it in a customiseable sidebar plugin and removing any need for any more coding!
Thanks for the info. I’m still learning the unlimited possibilities with wordpress and this is a great tip.
Wow nice post. you made here good points
Thanks