Menu

Widgets 101

Earlier this week, Krista talked about ways to get widgety on your blog. You’ll find an assortment of widgets in your…

Earlier this week, Krista talked about ways to get widgety on your blog. You’ll find an assortment of widgets in your dashboard (by going to Appearance » Widgets), waiting patiently for you to activate them! So, now what? Let’s zoom in on several ways to transform your sidebar and enhance your site with different widgets.

Personalize widget titles

Scrawny Girl Twitter Widget

Twitter Widget

You can create custom titles for many of the widgets in your dashboard. For example, if you like having lively discussions on your blog, title the Recent Comments Widget with “Join the Conversation.” Or if you’re looking for an interesting title for your Twitter Widget, get inspired by Shawna at Scrawny Girl, who titled this widget with “Thinking Out Loud.”

Also, consider being consistent with your blog’s theme. Got a food blog focused on desserts? Create widget titles related to baking and cooking. How about “Sweet Tweets” for your Twitter Widget? Or “What’s Cooking?” for your Calendar or Upcoming Events widgets? You can even spice up the seemingly mundane Search Widget with “Search the Cupboard.”

Get creative with text widgets

about me displayWith a Text Widget, you can easily insert text into your sidebar. An “About Me” section at the top of a sidebar is common: a welcome message, a short version of your bio, or an elevator pitch of your site.

A clear and simple example of a Text Widget is on the left. But did you know you can do so much more with a Text Widget? You can display a combination of text, links, images, and HTML to make your sidebar colorful and more graphic.

Wild Wonton Text Widget

Wild Wonton Text Widget

Let’s take a peek at the travel blog Wild WontonIts background is clean and white, with splashes of sage green in the header, tagline, and sidebar. Krissy and Gideon spruce up the top right side with a text widget: they use an image — a small, green “Say What?” banner — in place of a widget title; place some of the text in bold for emphasis; and end with a friendly sign-off with their names.

The copy itself is also clever: a definition of “wonton,” which playfully refers to the name of the blog as well as its focus on travel and living abroad in China.

So, how did they create this Text Widget? They located the Text Widget from the “Available Widgets” area on the left in the dashboard, and dragged it to the right to where they wanted to display it in the sidebar. Then, they inserted text, a link to an image, a link to their About page, and a bit of HTML to create the effect:

HTML

If you know basic HTML, play around with the text widget — it’s a simple but flexible and powerful feature. For those who want a primer, poke around on an HTML tutorial.

Use the “image grid” option

Top Posts

Top Posts & Pages Widget

Some widgets in the dashboard, including the Top Posts & Pages and Blogs I Follow widgets, add nice visual touches to your sidebar. The Top Posts & Pages Widget showcases your most viewed posts and pages. You can see it in action on the art and design blog eggwhite, at the bottom right of the site.

To display the Top Posts & Pages Widget:

  • In your dashboard, drag the widget from the “Available Widgets” section to the right side, where you’d like to display it in the sidebar.
  •  Specify the number of posts to show (for example, eggwhite shows six).
  • Order the posts by likes or views.
  • Under “Display as,” be sure to choose “Image Grid,” which activates the display of square images, as seen on the right.
Blogs I Follow Widget

Blogs I Follow Widget

The Blogs I Follow Widget works similarly and displays linked images for the blogs you follow:

  • Drag the widget to the right side to enable it.
  • Give it a fun title (“Reading Material,” “Stuff I Like,”  “My Favorites,” “Fellow WordPressers,” etc.).
  • Select the number of blogs to display (up to 50).
  • Choose “Grid” under “Display as.”

Once saved, you’ll see an image grid of gravatars from the blogs you follow, similar to the one on the left. The widget not only enhances your blog visually but offers a glimpse into the community you’ve built on WordPress.com.

Edit your images for a different effect

When activated, the Image Widget displays an image in your sidebar. If you’d like to spruce up the look of your images but don’t have much Photoshop experience, consider editing an image by simply changing its shape or adding a border. Here’s how:

Circular Image Widget

Image Widget

Change an image’s shape: Take a look at the blog Careful Confessions — the blogger displays a circular photograph at the top of her sidebar. The circle shape creates a unique look, and it’s pretty simple to do with a free photo editor like PicMonkey (use the “Rounded Corners” option under the “Frames” tool). Then, follow the steps on our Support site to upload the image and create the Image Widget.

Add a border: Another way to easily transform an image is by adding a border. PicMonkey, as well as Pixlr, offer the option to add a border to an image, as well as other effects (a vintage Polaroid frame, frayed or burnt edges, a film strip effect, etc.). Depending on the look and feel of your blog, there may be a particular visual effect that’s appropriate.

On a general note, if you’re not sure what kind of images to use, be sure to read this week’s post on visual identity, and look out for Pick’s next posts in the series.

We hope these tips get you started on sprucing up your sidebar. If you’re interested in other widget tutorials, let us know in the comments. For support, feel free to post your questions in the widgets section of the Community Support Forum.

64 Comments

  1. Hi.

    I use the Spectrum theme on my blog Serenely Rapt. I recently created an account with DMCA to help protect my content. DMCA advises users to add their html code in the footer of the blog which will ensure protection to all pages automatically. Unfortunately, Spectrum has no footer widget area. For the time being, I have added the html code to the top of my sidebar but I’d prefer putting it in the footer as advised.

    How can I get around this? Can you help?

    Dagny

      1. Thank you for the response. I’ll place the widget at the bottom of the sidebar and keep my fingers crossed. :)

    1. The grid in your Blogs I Follow list looks nice — spruces up the sidebar a bit. And yes, the Text Widget is very flexible — you can do a lot with it, and that’s cool that you’ve changed the color of the text. Glad this post was helpful.

  2. me encanta ha sido posible obtener el widget de Facebook venir correctamente. editar las imagenes y los efectos diferentes :)

  3. Okay, I’ve tried following the instructions of every option you have for following instructions for uploading an image to either an image widget or a text widget from my computer. I’ve uploaded the picture via New Media, and via a New Post and Add Images, and tried copying the image url with into the image widget or copying the image url into a text widget with the <img src= etc, and none of it works. I can put an image form the web on an image or text widget, no problem, but not my own. Couldn't you just have the option in an image widget to upload from computer, like with the header pictures?
    Other than that, I love you guys.

    1. For image widget you don’t need the library click the image you want. then under file URL click inside the box.
      press ctrl and A to select all out the link. then copy and paste into the widget.
      hope that helps.

      1. No, to be honest. I get the picture in the widget. It says that if I leave the size empty, it will figure out the best size. Then what it does is make it so big that only a small corner, but hugely enlarged, is visible as the image.

  4. I love widgets! They can give your blog a bit more of an interactive feel and are an easy way to customize your site. I love wordpress and always have lots of comments from friends. I have set up numerous blogs for friends because of how user friendly the dashboard and customizations are to navigate! Keep up the good work, I am hooked. :-)

      1. There are only two of them. In the text of the sidebar on the right. Directly under my photo. Hypenates the words “pas-sion” and “de-sign.” Maybe you can’t see them though, maybe only my browser is doing it.

  5. This is a really helpful post and I was quickly able to set up the Top Posts & Pages widget using an image grid. It worked really well til this weekend when, instead of displaying the image from the respective popsts, it just displays a grid of my avatar. Similarly, when I publish a post and it is automatically shared to FB, it now just uses my avatar pic for the thumbnail instead of an image from the post. I haven’t played with any other settings so am a little baffled…

Comments are closed.