Menu

Create a Custom Image Widget: A How-To for Non-Designers

Learn to make a custom Image Widget with this step-by-step tutorial.

Image by Rob Brewer (CC BY-SA 2.0)

Widgets on WordPress.com are handy features: they display important information and visually enhance our sidebars and footers. For those of you who want to personalize your site a bit more — for free — consider creating a custom Image Widget, which you can use to:

  • promote a book, project, or event
  • call attention to specific links, like your social channels
  • shape your visual identity

Here, we’ll show you how to design your own image, which you can insert into an Image Widget.

New to WordPress.com?
Widget essentials:

Widgets 101
Widgets 201
Widgets 301

Custom Image Widgets can be simple — consider the colored blocks of text for Bethany Meyer’s social media accounts on LifeAbsorbed (seen at left).

Or, you can mix image with text to create an even more personalized Image Widget, like this “2015 Reads” widget that appears at the top of Sasha Martinez’s sidebar at Other Sashas:

2015 reads image widget

You don’t need to be a Photoshop whiz to achieve certain editing effects. You can do it for free, and you don’t need design experience. All you need is this tutorial, PicMonkey, and a willingness to experiment. I encourage you to follow the steps below with your own image.

So, let’s say I want to create an Image Widget for my “Essays on Nature” category of posts, which I’ll display prominently in my sidebar. Here’s what we need to do:

Select an image for the Image Widget

Find an image that will act as the background for your widget. Your sidebar and footer are fairly narrow spaces, so choose an image that displays well at a smaller size. Stay away from pictures with lots of detail, or wide-angle landscapes that won’t look as clear in thumbnail size. Close-up shots, abstract images, and patterns work great. If you don’t have an image that works, browse a site where you can download free images.

Drop the image into PicMonkey

Drop your image into PicMonkey. On the homepage, click “Edit” at the top, then find your image on your computer. After you select your image, you should see an interface like this:

Screen Shot 2014-10-13 at 4.15.03 PM

Use tools and filters to achieve an overall effect

The Exposure tool: I primarily use the Brighten and Contrast options. More than 5 to 10 points in either direction can really change the quality and feel of your image, so tweak with care.

The primary features I use in PicMonkey’s toolbox are Crop, Exposure, and Sharpen. Crop this image first, before you do anything else. If you’d like to stack numerous thin widgets atop each other, like Bethany does on LifeAbsorbed, crop the image to the desired size. Make sure there’s enough space for text, and a large-enough, readable font.

Let’s say I’d like to place a soft filter over my image. One of the handiest areas of PicMonkey is the Effects panel — look for the magic wand on the left, under the crop icon, and click on it:

Screen Shot 2014-10-13 at 3.41.08 PM

The panel changes, and you’ll see a new list of options for filters. Click on different ones to see the effects applied on your image, and click Cancel if you’re not happy with the effect. You have the option to set the intensity of each effect, too.

To get a vintage look, Tranquil and Rapture might work for you. Or, scroll down and click on Yester-color, which combines a 1970s film filter and rounded edges.

Screen Shot 2014-10-13 at 4.20.17 PM

The Sharpen tool: This is usually a final image editing step, just before moving on to the text layer. While each image is different, I tend to stay between 5 and 10 for Sharpness and 5 and 20 for Clarity.

Once you’re done experimenting, head to the Sharpen tool and increase the Sharpness and Clarity a bit. This makes your image crisper, which is especially helpful if it’s displayed at a small size.

Add a layer of text

Click on the Tt icon to view font options. This is where you can have some fun — as font can be playful, or sophisticated — and set the mood for your site. But be mindful of the font you choose, making sure that it complements the fonts already on your site. (If you don’t know what fonts your theme uses, use a browser extension like WhatFont to identify them.)

Screen Shot 2014-10-13 at 4.37.58 PM

Frame the image with a border

This step is optional, but an Image Widget with a border can look sleek, especially if you create multiple Image Widgets with the same frame. The frames offer a visually cohesive look — and if the border is the same color as an accent in your theme’s color palette, even better.

Click on the Frames icon to see border options, from thin black lines to faux-film edges. You can also apply shape cutouts and create widgets that are circular, heart-shaped, and more.

Screen Shot 2014-10-13 at 4.50.13 PM

Save your image and insert it into an Image Widget

To access your Media Library, open up a new post and click the “Add Media” button. Find and click on your image, then click “Edit” to view its details.

Once you’re happy with your image, save and upload it into your blog’s Media Library. You’ll need the image’s URL to set up your Image Widget, so copy it from the image’s detail screen:

image url

To add a new Image Widget, go to your Customizer (My Site→ Customize → Widgets), click on the site section where you’d like to add the widget, click “Add a Widget,” and search for and select “Image.”

Image widget search

Not all of these widget fields are mandatory — for instance, you don’t have to add a widget title or caption. Some people forego them for a cleaner look.

Once added, fill in the appropriate fields of your new widget. The important fields are Image URL (which is where the entire URL for the image we just created will go), and the Link URL at the bottom (which will be the URL of the category page I’d like to promote — my essays on nature). You’ll likely have to adjust the width and height figures so the image fits in your sidebar or footer — don’t be afraid to play around with the dimensions.

image widget fields

Admire your new widget!

Once you’ve saved your new Image Widget, go to your site and click on it to ensure it goes to the page you’ve specified. After that, you’re all set. Happy image making!

essays on nature widget

 

Show Comments

32 Comments

Comments are closed.

Close Comments

Comments

  1. Thank you, thank you, thank you! I just sent a help request to somewhere in the wordpress world to help me with this issue-this could not have been more timely or appreciated!

    Like

    1. Good question. I could probably do a whole other tutorial on this, but since you’ve used PicMonkey before, here are some general steps you could do:

      — At top of PicMonkey homepage, click on Design and then Custom.
      — Set your canvas size, which will depend on your sidebar/footer space and what you want. 200×50? Probably larger than that.
      — Use the Canvas Color picker on the left panel to choose your background color.
      — Click on Tt icon (for text), pick your font, and add text to the canvas. You’ll probably need to adjust the font so it all fits — but don’t make it too small…
      — Save the image, then follow the instructions from this tutorial on copying the image URL and creating the Image Widget.

      If you have further questions on using PicMonkey itself, the PicMonkey site and tutorials are likely much more thorough than I could ever be! http://www.picmonkey.com/blog/category/tutorials/

      Liked by 1 person

      1. Oh, the steps above would be to create one single bar. You’d then repeat this process for multiple social accounts, and you can use either the same background color or different ones, as shown in the example.

        Like

  2. I use PicMonkey for all of my widgets too! It is really easy to do and the more creative you are, the better your widgets turn out! Have fun and experiment today and make a widget! Stop on over to check out mine!

    Like

  3. Hooray!!! I’ve been wondering how to do this. PicMonkey has already become a favorite of mine, thanks to your recommendation. Can’t wait to give it a spin for an image widget. 🙂

    Like

    1. There isn’t a URL for this — from what you’ve said, it seems like you want to create a custom image for the Follow Blog widget, but that’s not possible, as far as I know.

      One option, though, is to create a new page titled “Subscribe” (or “Follow Me,” etc.), and on that page you can include this (added in your Text Editor):

      [blog_subscription_form]

      That offers the same function as the Follow Blog Widget. You could then create an Image Widget that links to this page.

      Alternatively, there are URLs for your blog’s feeds, for your readers that follow blogs/sites via feed readers. It’s not the same thing, but it’s also an option: http://en.support.wordpress.com/feeds/

      As shown in the Your Feeds section, your main blog feed URL is: http://soulsetinmotion.wordpress.com/feed/

      Liked by 1 person

  4. Is it possible to get the widgets side by side? I have a pretty small icon that I’m attached to, but it doesn’t make sense to have it all spread out. (I have a basic xyz.wp.com site) Is there a way to clean it up or am I going to have to make new icons?

    Like

    1. To get smaller images side by side, I believe you wouldn’t use Image Widgets, but instead create a Text Widget which has multiple images that are then linked to whatever you want (social accounts, other sites, etc.).

      A similar request: http://en.forums.wordpress.com/topic/2-widgets-side-by-side-in-the-sidebar?replies=4

      For more on creating Text Widgets, read the “Get creative with text widgets” section in this post: https://dailypost.wordpress.com/2013/01/31/widgets-101/

      Liked by 1 person