So, you want to make a custom widget, but don't really want to deal with HTML? Never fear! There's a pretty nifty trick you can use:
Step 1: Create the 'Widget'
- Start by creating a new post or page. Don't worry about titling it or anything, you won't ever publish it.
- Use the editor to create your widget.
- Keep in mind the width of your sidebar, as it will be different from the width of the editor, and images wider than the sidebar will look weird in it. If you don't know the width of your sidebar, feel free to ask, and we can check that for you.
- Once you're happy with the general feel of it (keeping in mind it will look slightly different given the width difference), click to the "Text" tab. (Found in the upper right of the editor box, right under the end of the title bar)
- Copy EVERYTHING that appears in the editor pane on the html side. (you should see a fair amount of these "<" ">")
- TIP: CMD+A on a Mac or Ctrl+A on a PC will highlight everything for you, then you can just press CMD+C or Ctrl+C to copy
- After you've copied your widget's HTML, click on 'Appearance' > 'Widgets' in your dashboard sidebar.
- On this page, you'll see two new sections, 'Available Widgets' and 'Sidebar'. The sidebar is your current sidebar, and the available widgets is a list of widget types that are available.
- You'll want to find the one called 'Text' in this Available Widgets section 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.
- Paste the widget HTML you copied in Step 1 in here.
- 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) To do so:
- Just go back to the page/post you initial created and switch back to 'Visual' (right next to the "Text" tab)
- Make your edits
- Switch back to "Text" and copy the code again.
- Then paste it back in the Text Widget you just created, after deleting what's already there.
- TIP: If the new widget looks particularly ugly, just drag it back to the Available Widgets to disable it. Then, once you've fixed the problems, just start from the beginning of Step 2 again.