Menu

Widgets 201

In the first post of this series, “Widgets 101,” we introduced some popular widgets, including the Text and Image Widgets, and…

In the first post of this series, “Widgets 101,” we introduced some popular widgets, including the Text and Image Widgets, and also mentioned quick ways to transform an image by changing its shape or adding a frame. Since this month is all about photography and phoneography, let’s focus on Image Widgets and explore how to customize them.

If you’re short on time and want to skip ahead:

Image widget essentials

First, let’s make sure we’ve got the basics down. To activate an Image Widget in your sidebar, go to Appearance » Widgets in your dashboard and locate the widget that says “Image” under Available Widgets. Then, drag it to the right, where you’d like it to appear.

image widgetBe sure to fill in the required fields for this widget — the “Image URL” is important, as WordPress.com needs to know where your image is saved so it can display your image. In other words, you need to grab the image’s URL, which you can do by going into your Media Library (Media » Library), clicking the “Edit” link under the image, and copying the link under “File URL.”

This URL is what you’ll insert in the “Image URL” field, shown in the screenshot on the right.

You can also use an image URL on another website — be sure to check the URL in your browser before adding it to the widget to confirm it ends with an extension specific to an image file (such as .jpg, .gif, .png).

Also, do take advantage of the “Link URL” field at the bottom. If you want an image in your sidebar to direct readers somewhere on your site (or elsewhere), specify the link here.

Custom-made image widgets

wanna-bewriter.comConnor at adventures of a wanna-be writer created Image Widgets for his sidebar (on the right), each labeled with text and linked to specific categories on his blog. We like how the black-and-white images (and the font of the image text and captions) work together as a cohesive visual set, and how the objects in the images evoke the literary life.

You can create similar images, too. If you have a working knowledge of Photoshop, whipping up sidebar images is probably a snap. If you don’t have Photoshop, or are a design and photo editing newbie, use one of the free (and very handy) online photo editors out there (like PicMonkey, Pixlr, or FotoFlexer) to transform your images with text, textures and effects, overlays and icons, frames, and more.

Let’s say I want to create an Image Widget for my sidebar that, when clicked, directs my readers to a page on my blog of galleries of ocean photographs. I can do this easily by adding effects to one of my own images.

So, here’s what I’ve done: I grabbed this Instagram image of the Pacific Ocean from my feed; dropped it into PicMonkey; and used its various effects to insert text, add texture, and crop and frame it — all in less than a minute. Here’s the result:

Pacific Ocean-edited

Next, I’ll add this image to my Media Library, copy the “File URL” as described in the section above, and insert this URL into the field in the widget. I’ll control the size by inputting the dimensions (in pixels) for the “Width” and “Height.” And voilà — I’ve created a custom-made Image Widget, which I can link to a gallery page on my site.

The process is pretty simple — all you need are some images to experiment with and an online photo editor. Custom-made Image Widgets help to shape your site’s overall aesthetic, as Connor’s widgets illustrate above, and contribute to the visual branding your blog, which we’ll talk about next.

Visual identity: branding your blog

Not too long ago, Pick talked about branding your blog: creating an overall mood and ensuring your site visually represents you and your interests. We like the look of Zoe’s blog, Miss Zoe: The Art of Creating, because she creates a visual identity using color, font, and pattern — not just in her sidebar, but everywhere.

Miss Zoe header

Miss Zoe’s custom header image

Miss Zoe's image widgets

Miss Zoe’s image widgets

The pattern used in her custom header — underneath the name of her blog — matches up perfectly with her custom-made image widgets, which direct users to her social media profiles on Facebook, Instagram, Twitter, and Pinterest, as well as a contact email link.

In your dashboard, you’ll find many widgets, including ones for TwitterFlickrAbout.me, and more. They work in different ways — some display your latest content (tweets, Flickr photos), while others simply link to your profiles elsewhere.

Creating your own images for your favorite social networks will help to visually unify your site, especially when combined with a specific color palette. You can specify a custom link color in Oxygen, Zoe’s current theme (and her shade of powder blue is #0da4d3, in case you’re wondering!). The image backgrounds and header design match this color, creating a nice visual package.

So, consider how you can use color in Image Widgets, as well as other features like a custom header and custom background image, to visually brand your blog.

If you’re interested in experimenting with backgrounds and textures, browse options on sites like Subtle PatternsMy Site My WaySquidfingers, and GRSites.

Have questions? Ideas? Let us know in the comments.

66 Comments

      1. I trying to reblog someone’s post. What I get when I go there is no image message with the 404 error. I simule post to Facebook and when you click the link it goes to my blog and again the 404 no image message

  1. This has been the hardest thing for me to understand. I can never get widgets onto my page, and the instructions for putting them up are never clear. Maybe you should publish a Widgets for Idiots guide.

  2. What is PicMonkey? How do you get words and phrases into pictures… I’m not very technical and I always have difficulty with everything before I finally get it… It just takes me a while longer than normal…

    1. PicMonkey is a photo editing program you can download that lets you add text to your images, as well as other special effects — click the link in the post to learn more.

    1. There’s no ready-made Pinterest widget, but you can make one yourself using the instructions in this post — upload a picture of the Pinterest logo to your media library, put it in an image widget, and link it to your Pinterest page.

  3. Reblogged this on euzicasa and commented:
    Widgets….How to make them, how they work: I wish I would be able to make widgets with Active script, but yet I not able to figure that out

  4. I just discovered this widget last night with intentions of doing what Connor at adventures of a wanna-be writer did. Great to see it in a similar use. Thanks for providing further instructions!

  5. Well, I’m game to try! I can do the basics with them but it never occurred to me to customise widgets. You can bet I won’t do it in a 1, 2, 3 seconds!

  6. okay, I loved this post. I think I stumbled on here by accident, but I’m so glad. lots of useful stuff, I particularly liked the information about how to use images in your side bar and editing them on the online photo editors – I didn’t know about that. Great! Can’t wait to see your next post :)

    1. Take a look at the Widgets 101 post linked to in the article, too — there’s way more you can do with a plain ol’ text widget than you might think!

  7. This is fantastic! I’ve been looking for a way to easily create a button on my blog, and this works marvelously! Thanks for the helpful post!

  8. This was REALLY helpful. Thank you! I need a little time to dig in with some added creative effort, but I can hardly wait. The possibilities are endless and I needed a little hint about how to get started. I’m appreciative. :-)

  9. I may be the only person in the world doing all blogging + computing by phone, but maybe not. (With a 3gig monthly limit, too on my plan.) Wish there was more I could do, mobile-ly.

    (I set up my blog in a fever of rushing through, at a friend’s house, but I don’t get the chance to “play” online often, if at all.) ( I know, it’s unusual, but that’s what comes from becoming disabled, and the ensuing poverty.) I can’t watch videos or listen to music from other sites if I want to post a photo or 2 everyday, which I do. But it’s given me a fantastic outlet for my creative frustration.

    Good info, will store this somewhere for the happy day I have access to a real computer + unlimited interwebs. :)
    Until then, it’s phonetography business as usual.

    1. Hi I display my instagram photos via the Flickr widget. I think I saw this in a forum when I was trying to look for ways on how to show my Ig feed. What you have to do is to assign a hashtag that Flickr will pick up and it will automatically be displayed on your Flickr widget. Hope it helps, cheers!

      1. We’ve actually been to a few of the same places! I was in Pamanga, Philippines in November and Tokyo when I was much younger!! Keep writing and always keep traveling! xoxo

    2. Hi @Margotoleary — I’ve never used SnapWidget.com so can’t comment on the service. I do know that some code isn’t allowed on WP.com blogs because they’re potentially dangerous, and if nothing appears in the widget when you try to use some bit of code, that *may* be why. (More on this here: http://en.support.wordpress.com/code/)

      Alternatively, you can follow these steps to embed Instagram photos on your blog: https://dailypost.wordpress.com/2013/03/12/embed-your-instagram-images/

  10. Awesome! I love going to The Daily Post because it gives me unexpected inspiration and more fuel to actually improve my blog one day at a time. Heading off to the widgets section of my blog now to hopefully promote my brand better. Cheers!

    1. While we don’t have a Pinterest widget in the dashboard to use, you can make one yourself using the instructions in this post — upload a picture of the Pinterest logo to your media library, put it in an image widget, and link it to your Pinterest page.

      Also, we currently don’t have video tutorials here at the Daily Post, but there are some beginner videos on WordPress.tv in case you want to take a peek.

      We also have a general section on widgets at Learn.wordpress.com.

  11. am a bit of widget fan-atic but have to curb my enthusiasm. Nice clear instructions and some inspirational ideas though a word of warning is that widgets slow page loads as well as create an overfussy, messy look.

  12. Just added an image widget to my blog and I love it! Just by doing this I feel the inspiration to take more control of my blog designs now and definitely to play around with my widgets more!

  13. How do you get more than one image into a sidebar, like the examples you have shown above with Connor and Miss Zoe? I can only seem to use the image widget to upload one picture.

    1. You can activate more than one image widget in your sidebar, which is how you can achieve the column of multiple image widgets. Just drag a new image widget to the right — you can add as many as you want.

      1. Thanks Michelle…I just figured it out and added another. For some reason I was looking and not seeing the image widget. You know, the kind of looking when something is always there but it’s temporarily invisible. ;)

Comments are closed.