Customized Image Widget

Home › Documentation › Amble Tutorials › Customized Image Widget

WordPress includes an Image Widget. It’s great to have, but it’s a little limited in style, so Amble made a few enhancements.

We should note that the customized style is applied only to the image widget when it’s published to the banner sidebar position, but it also is dependent on whether you use a caption.

Using the Image Widget to Showcase a Post

For example, we used this on the live demo to showcase a specific post. This does not give you the choice to select a post, but we can mimic the effect.

We used an image that is used for a post and then created an HTML caption for that image.

Steps to Create This Style

  1. Have an image ready to upload, or have it uploaded to your Media Library. We recommend that if you publish this to the Banner Sidebar, have the image around 1000px (give or take a couple of 100 pixels).
  2. Drag a WordPress Image Widget into the Banner Sidebar and then insert your image.
  3. Click on the Edit button
  4. Add a caption to your image (use the code below as a template) and replace the sample content with your own. Be careful not to delete the HTML code parts.
  5. Click the Save button.

Sample Caption

Use this as a template for your caption by copying and pasting it. Replace only the text part and the link (if you want a button), but try not to remove the HTML code parts.

<p class="image-widget-title">Memories from our last summer weekend trip</p><p class="image-widget-caption">This is a caption where I will insert a button right after the caption text</p><p class="image-caption-link"><a href="https://www.yourwebsite.com/some-article/">Read More</a></p>

Enter the code into the caption field (click the Edit button in the Image Widget).

Missing Attributes

As usual, WordPress neglects to include common-sense features. In this case, there is no way to disable the widget title, nor is there an option to publish/show this widget on select pages only. We wrote an article titled How to Show or hide widgets on specific pages with WordPress about this.

To add this capability, plus a lot more, we recommend checking out the free Widget Options plugin. We use this on our demo sites, as well, as on the Rough Pixels website.