April 30, 2012

The Font Combinator - Find Beautiful Web Fonts

The Font Combinator, a web typography tool

I love Google Web Fonts. They're free, they're stylish, and they're easy to use on any website. There's one thing lacking from the web fonts interface though — it's not easy to preview how different fonts look together. That's where developer Chip Cullen's web app, The Font Combinator, comes in!

The Font Combinator is so easy to use it barely needs a tutorial, but I want to give you a rundown of its features so you can use it to its fullest right away.

To start using the Font Combinator, go to www.font-combinator.com.

the font combinator website

At the top of the page you'll find a sample article with a headline, subhead, and two paragraphs. At the bottom of the page you'll find simple controls for changing the font, the font size, the line height, the color of the text, and the color of the background.

The Font Combinator includes all of the Google Web Fonts, plus the traditional "web safe" system fonts like Arial, Helvetica, and Times New Roman. So handy for setting fallback fonts! The combinator automatically updates when a new font is added to the Google fonts collection, so it's always up to date.

Here's an example of the Font Combinator in action: I've selected three fonts for this demo. The headline is Syncopate, the subhead is Rammetto One, and the body text is in good ol' Georgia. I've also played around with the colors using the Combinator's built-in color picker.

font combinator in use demonstrating different fonts

Did you notice that I changed what the text says, too? Yet another cool feature! You can delete the default headings and paragraphs and replace them with your own.

You can hide portions of the demo text if you're not going to use all of the elements in your design. So, for example, if you're not planning to use a subhead and just want to test a headline and a paragraph font, you can easily hide the subhead by clicking the "hide" button. If you want it to come back, click the "show" button.

Here's another useful detail: if you resize your browser window, the combinator resizes along with it. This way you can test how your fonts will look in different sections of your site or in different viewports, and adjust your sizing (or font choices) accordingly.

I've spent hours playing with this addictive design tool, and if you're a font fan like me I bet you will, too! Many thanks to Chip Cullen for his hard work on this awesome app.

Installing Google Web Fonts

After you've chosen the perfect font, you're ready to install it! Check out How to Install Google Web Fonts on Your Blog for installation instructions.

Fonts in the title card: Alegreya SC and Pinyon Script, selected with the Font Combinator, of course!
Embellishments: Creative Market

April 23, 2012

All About Alt Text

all about alt text

In my earlier post about blog images I sung the praises of alt text, but I didn't go into detail about the whats, whys, and hows. This basic piece of HTML is so essential to your blog's health that it deserves its own dedicated tutorial. So today I'll dig in deep and give you the tools to become an alt texting master. Let's get to it!

What is Alt Text?

One quick semantic note: it's "alt text", not an "alt tag". People will still know what you're talking about if you call it an alt tag, but to be correct, say alt text!

Alt text is an attribute you add to an HTML image element to describe the image. If you write your alt text well, you'll help your visitors and search engines get a better understanding of your content.

So what do you write as alt text? It all depends on context.

man wearing nothing but a scarf, wielding knitting needles like weapons in a comedic fashion

This awesome photo could be used in many different types of blog posts. In a tutorial on knitting the scarf he's wearing, I'd describe it as "man wearing a striped red and pink scarf". If the kinda threatening pose he's taking with those knitting needles is more relevant to the post, "man poised to attack with knitting needles" makes good alt text. If his near-nudity is more relevant to the post than the other aspects of the photo, I'd go with "man wearing nothing but a pink and red scarf".

If the picture itself is the subject of your blog post, the alt text doesn't need to be very detailed. For example, if my post is an interview with scarf guy about why he posed like a crazy knitting monster, the alt text can be "Joe Blow in a scarf" (I'm pretty sure Joe Blow isn't his name, but you get the point).

Why Should I Use Alt Text?

Two very good reasons:

1) First, and most importantly, it provides information to visitors who cannot see the images on a website, either due to visual impairments or because they have images turned off in their browser. People with visual impairments use screen readers that read the text from a website out loud to them. The screen reader reads the alt text to describe visual elements of websites. Visitors browsing without images will see the alt text in place of the images.

2) Second, alt text provides information about an image to search engines. Without alt text, search engines don't know what they're "looking" at when they encounter a picture. So, your alt text is an opportunity to describe your image to search engines.

This is especially important if your blog posts have lots of images. Providing alt text will help bring visitors to your site since the search engines will have more detailed information about what your blog has to offer. It also greatly improves your chances of showing up in image searches, like Google Image Search or Bing Images.

Now, this does not mean that you should stuff keywords into your alt text. I can't stress this enough: always, always, always consider your human visitors when you write alt text. Visitors with visual impairments will hear all the words in your alt text read aloud, and you need to respect that. You shouldn't describe scarf guy as "knitting needles on sale, best knitting needles, cheap knitting needles, knitting, how to knit a scarf". That's not an accurate description of the photo and it's an insult to anyone who has to listen to that from a screen reader.

How Do I Add Alt Text to My Images?

Some blogging platforms prompt you for alt text when you upload a photo. Just fill in your text in the "alt text" field and you're good to go. Other blogging platforms auto-fill the alt text for you using the image's filename. If your blog uses your filenames, make sure you give the photos good, descriptive names. "DSC483012.jpg" is not a good name.

If your blogging platform doesn't have a built-in method of handling alt text, or you skipped alt text in old posts and want to add it in now, you can manually add it to your images. To do this, go into your posts in HTML view and look for your image elements.

In HTML, an image element (at its absolute minimum) looks something like this:

<img src="images/naked-scarf-guy.jpg">

You add alt text to the element after the closing quotation mark on the image source, like so:

<img src="images/naked-scarf-guy.jpg" alt="man in a scarf wielding knitting needles">

By the way, if your blogging platform doesn't support alt text or makes it hard for you to add it, complain! Alt text is a basic HTML feature and it should be easy for you to use.

How Long Should Alt Text Be?

There's no absolute limit on alt text length, but the general consensus is that you should keep it brief — no longer than a tweet. Remember that your visitors with visual impairments will have the alt text read out loud to them by their screen reader, and you don't want to bore them with pointless details.

One case where it's ok to get wordy with your alt text is when you're presenting an infographic or otherwise visualized data without any accompanying explanation. For example, it makes good sense to put all the steps of a simple flowchart into the alt text if you're not going to spell out the steps in an accompanying paragraph — if your graphic is very complex, though, it's best to provide a written alternative to the image and keep the alt text brief.

Do I Need to Add Alt Text to Every Image?

You should add an alt attribute to every image, but you can (and should) leave the attribute blank on purely decorative images. For example, if you have an image of a pretty squiggly flourish separating sections in your blog's sidebar, your readers with visual impairments don't need to hear anything about it — it's just there to add visual appeal and has no functional or informative purpose. Leaving the alt attribute blank tells a screen reader to ignore the image entirely. To leave the alt attribute blank, just don't put anything in the quotation marks after alt=. Like this:

<img src="images/fancy-squiggle.png" alt="">

Leaving the alt attribute blank also makes sense if adding alt text would be repetitive. For example, if you have a post titled "A Photo of My Dog" with a captioned photo of your dog at the top of the post, and the first sentence of your post says "Check out this cute picture of my dog!", blank alt text spares screen reader users from hearing essentially the same thing four times in a row.

In Summary

Well-written, relevant alt text provides valuable information about your blog to both your human visitors and search engine robots. Keep it brief and to the point, and leave it blank on non-essential decorative images. And remember, it's alt text, not an alt tag ;)

Further Reading:

WebAIM has in-depth information about how to write the right alt text for an image in context.

For even more detail, check out the official guide to HTML5 alt text techniques from the World Wide Web Consortium (W3C). The W3C develops HTML standards, so you know this information comes straight from the top!

The Firefox add-on Fangs shows you what a screen reader would read out loud from your blog. This is a fascinating tool that can help you discover accessibility issues on your site and get a better feel for how readers with visual impairments experience your blog.

Scarf Attack photo by Flickr user TheGiantVermin, used under Creative Commons license.

April 16, 2012

Hands On with WooDojo

An introduction to WooDojo by WooThemes

This post was written when WooDojo first launched. The plugin suite has been updated and expanded extensively since. You can read about the current WooDojo options on WooThemes' website.

I'm a big fan of WooThemes' Wordpress themes. I'm especially fond of the powerful features they pack into their designs. So I am super excited about WooDojo! It's a badass little bundle of Woo power built to work with ANY Wordpress theme. And it's free!

I spent some time playing with WooDojo so I could share its goodness (and some of its quirks) with you. Let's have a look, shall we?

Installing WooDojo

WooDojo installs like any other Wordpress plugin. You download it directly from WooThemes, then upload it into your theme by going to Plugins > Add New > Upload.

Once installed, WooDojo shows up in the Wordpress menu beneath Jetpack with a cute little Dojo icon.

WooDojo icon in Wordpress menu

When you click the WooDojo icon you'll go to the Dojo, where you'll find individual control panels to turn on each of the WooDojo features and install the two additional Wordpress plugins included with WooDojo. All of the features work independently so you can just turn on the ones you want to use and leave the others off.

WooDojo control panel

Let's go through each of these features one-by-one and see what it does!

Bundled Features

Login Branding

This is a great option for branding a group or community blog. You can upload your own logo to personalize your Wordpress login screen, like so:

Wordpress login screen with a custom logo

You can also set the clickthrough link on the logo so it goes to any URL you want.

Custom Code

The custom code option lets you add your own CSS and HTML to your theme without digging into the guts of the theme (and, let's be honest, possibly screwing it up). This is a handy way to try out new styling on the fly, and remove it just as quickly if something goes haywire.

You can add Custom CSS:

custom CSS option in WooDojo

And enter custom HTML for the <head> tags or just before the </body> tag of your website (Hello, Google Analytics!).

custom HTML option in WooDojo


The ShortLinks plugin makes it easy to generate tweetable, trackable shortlinks for your blog posts. As a default the ShortLinks are set to use the native Wordpress shortlinks (the ones that end with p=some number). If you've got a Bit.ly account you can enter your account info to use Bit.ly links, or you can use the TinyURL link shortening service.

shortlink control panel in WooDojo


The WooDojo tabs widget displays your blog's latest posts, most popular posts, most recent comments, and recent tags in a tabbed widget. I've got to be honest with you about this widget, though. It needs some cosmetic work. It looks scrunched up and has some overlap on the tabs in normal-sized sidebars. It looks best in a wide footer area where it has a little room to spread out. I'm hoping WooThemes will give it a little more polish in the next update! If you want to give it some polish yourself with some custom CSS, .widget_woodojo_tabs selects the widget tabs.

WooDojo tabs widget

Social Widgets

By "social widgets" they mean "Twitter widgets" right now, but I wouldn't be surprised if new social media services get added to WooDojo updates. There are two Twitter widgets in WooDojo. The first is the Twitter Profile, which has a lot of customization options. You can choose to display or hide your avatar, name, screen name (your Twitter username), description, location, tweet count, followers count, "friends" count (people you follow), "Tweeting since" date, and a follow link. Here's a look at the control panel for the widget:

options panel for WooDojo Twitter Profile widget
Here's an example of the Twitter Profile with every option enabled:

WooDojo plugin Twitter Profile

I'm not sure why they chose to call people you're following "friends", but you can hide that if you think it's dorky.

The second Twitter widget is a classic twitter stream with nice, fine-tuned options. You can set how many tweets to display, specify if you want to show your retweets, show or hide reply tweets, and add an optional follow link. Here's a screenshot of the Twitter widget in action:

WooDojo twitter widget

Now that we've checked out everything in the bundled features, let's move on to the Wordpress Plugins!

Wordpress Plugins

You'll need a free WooThemes account to download and install the Wordpress Plugins included with WooDojo. Signup is quick and you'll have access to the WooThemes public support forums along with the two quite powerful plugins.


Have you ever wanted to show a specific widget only on certain parts of your blog? WooSidebars let's you do exactly that!

This plugin allows for some deep customization of widgets, so I'm just going to do a quick demo of one of the ways you can use it. For this demo, let's say you want to show your Twitter stream widget on post entry pages only, so your readers would only see it if they were on a single post's page, but not on the home page and not on any static pages.

To set up the custom widgets, first go to Appearance > Widget Areas.

WooSidebars widget areas in Wordpress

In the Widget Areas section, click Add New. Give your widget area a name and a description.

WooSidebars new widget area

At the bottom you'll see a "Conditions" area. This is where you set up the rules for where the custom widget areas will appear. To set the widget to show up on post pages only, click Advanced > Post Types > Individual Posts.

setting WooSidebars for post pages only

Next, from the dropdown menu at the left, select the sidebar you want to replace with your new sidebar widget. You can choose left or right sidebar areas, or footer areas.

selecting which sidebars to replace in WooSidebars

After you've chosen which sidebar to replace, publish the widget area.

Once the widget area is published, you can go to Appearance > Widgets and find your custom widget area. Drag and drop the widget you want to display in that area (I'm dropping in the WooDojo Tweets widget) and save the widget.

dropping a widget into a WooSidebars custom widget area

Now, go check out your blog! On the home page you won't see the custom widget. But, when you click an individual post, there it is! In this demonstration, I've replaced the primary widget area with the custom widget area to show off the tweet stream.

a Wordpress blog homepage vs a post page with WooSidebar custom widget areas enabled

This is just the simplest example of what you can do with this very powerful plugin. You can use it to finely target ads, show links to blog posts that relate to specific static pages, or vice versa... seriously, possibilities are endless.


WooCommerce is a fully-featured e-commerce plugin that turns your Wordpress installation into an online store. The many robust features of this plugin deserve their own full-length post; you can find details on WooThemes WooCommerce page, and a good third-party tutorial at OS Training.

Getting Help with WooDojo

WooThemes has an active support forum where you can get help from other WooDojo users and from the developers themselves. Questions get answered quickly over there, and since WooDojo is new the developers are taking and responding to suggestions, critiques, and requests in the forum.

Are you using WooDojo? What do you think? Let me know in the comments!

April 9, 2012

Add Pin It Buttons to Your Blogger Posts

pin it buttons for blogger

Update: May 2013 Many more Pin It options for Blogger have become available in the year since this post was written — including new, easy-to-use official Pin It buttons! See The Big Guide to Pin It Buttons for Blogger for an overview of 6 different options.

Ah, the Pin It button. If you follow the official Pin It button installation instructions on the Pinterest site, it is the clunkiest, hardest-to-implement social media button ever. An active blogger could spend the rest of their life trying to add the button with those instructions.

In my quest to find a non-ridiculous way to add Pin It buttons to post images in Blogger, I Googled around and tried a bunch of different tutorials. But, I wasn't thrilled with what I found. So, I took my search off Google and on to Github, where I found a script I could modify to work on Blogspot blogs in a way that makes me happy. Perhaps it will make you happy, too!

Today I bring you:

How to Add a "Pin It" Button for Each Photo in a Blogger Post

Difficulty: Brave Beginner to Intermediate
The default installation is simple cut & paste. The optional advanced customizations require extra time and attention.

What the Code Does:

  • Gives every image in your blog post its own Pin It button.
  • Automatically fills in the Pinterest description with your post title (this feature can be disabled).


I've installed these buttons on my demo site at codeitpretty.blogspot.com.

Button Requirements

Note: This will not work on the old "classic" templates (like Minima) or Dynamic Templates blogs. Some custom templates are also not compatible with these buttons. A list of known incompatible templates is here. Be sure to test your blog for timestamp links with the instructions below before continuing with the tutorial.

Before beginning this tutorial, enable the timestamp links for your blog posts by going to "Layout" and clicking the "Edit" link in the "Blog Posts" column. Make sure the timestamp option is checked like in this screenshot:

blogger post options screen with a highlight on the timestamp link option

Once you've checked the timestamp link, press save and look at your blog. You should see clickable timestamp links in your post footer. The timestamp link is highlighted in this screenshot:

screenshot of a timestamp in a post footer

If you don't see timestamp links in your post footer, these buttons are not compatible with your template. Sorry! There are other Pin It button options available for Blogger.

Suggested Layout

These buttons look best on blogs that have at least 40 pixels of space between the right edge of the widest photos in the content column and the left edge of the right sidebar. This extra space is not required for the buttons to work, but it helps make them look good. If your content column and sidebar are very close together, the button placement can be unpredictable.

Recommended Browsers

You will have an easier time copying and pasting this code into your blog if you're on Firefox, Chrome, or Safari. Internet Explorer users sometimes have formatting issues with copied code. For best results with this code (and pretty much everything else on the Internet), don't use IE!

All set? Let's get started!

Basic Installation

Before You Do Anything: Back Up Your Template! Seriously, do not skip the backup. And don't come crying to me if you make a mistake and don't have a template backup!

Add jQuery to Your Blogger Template

You need to add jQuery to your template for this code to work, so we'll do that first.

  1. In Blogger, go to Template > Edit HTML
  2. Find the pair of <b:skin> </b:skin> tags in your template. They're up near the top, usually within the first 20 lines.
  3. Paste this into the template, just above the <b:skin> </b:skin> tags :
  4. <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
  5. Press the orange "Save Template" button.

(By the way, if you have installed my Pinterest gadget for Blogger on your blog, you can safely remove the jQuery script link from the top of that gadget after adding jQuery to your template.)

Now, let's move on to adding the Pin It buttons!

Get the Code

Here it is!

Install the Code

This is the super-easy part. Just paste that code into an HTML/JavaScript gadget on your blog (if you don't know how to add a gadget, you can find the official Blogger instructions here).

Press save and you'll have a Pin It button next to the bottom right corner of every image in your posts.

Test the buttons out and make sure they pin properly before you move on. If they don't, make sure you've turned on the post timestamps, and that the timestamps appeared in your post footers. These buttons need working timestamps to function correctly.

Advanced Customizations

There are a few options to customize these buttons for your blog.

Move the Button Onto Your Images

The default code puts the button next to the bottom right corner of the photo. If you like it there, cool! I like it there too. But, if you prefer, you can move the button onto the photo with a little bit of CSS.

To add custom CSS to your blog:

  • go to Template > Customize > Advanced
  • Click Add CSS

Enter this CSS into the Add CSS box:

a[class*='pin_it_button_inline'] {
position: relative;
right: 45px;
bottom: 10px;

You'll need to play with those right & bottom numbers to get the perfect placement on your photos — it's going to vary from blog to blog. Once you have it in the right spot, press the "Apply to Blog" button to save your CSS.

If you're going to place the button on the image, you may want to turn off the counter. Instructions for that are below.

No Pin It Button on "Signature" Images

If you use an image "signature" or another decorative image in all or most of your posts, you probably don't want Pin It buttons on that image. You can hide the button on those images with CSS.

To add CSS to your template:

  • go to Template > Customize > Advanced
  • Click Add CSS

Copy and paste the following line of CSS into your "Add CSS" box, then replace "your-filename-here" with your signature image's filename. Make sure to include its file extension (.jpg, .png, .bmp, or .gif):

img[src*="your-filename-here"] + a[data-pin-log='button_pinit'] {
visibility: hidden;
For example, if your signature image is called "signature.png", the CSS rule to hide the button from that image would be:
img[src*="signature.png"] + a[data-pin-log="button_pinit"] {
visibility: hidden;

Press the "Apply to Blog" button once you've entered your signature image's filename into the CSS.

No Pin It Button, Sometimes

Sometimes, you may want to hide the Pin It button from a certain image without affecting the other images in that post or on your blog. You can do that with CSS! Here's how:

First, add this piece of CSS to your template by going to Customize > Advanced > Add CSS.

.nopin a[data-pin-log='button_pinit'] {
visibility: hidden;

Then, go into the HTML view of the post and find the HTML for the image you'd like to "unbutton". You can quickly find it by doing a find on page for your image's filename. Find the "separator" div that wraps your image. It will look something like this:

Enter the word nopin immediately after the word separator, like this:

Save your post, and the Pin It buttons will disappear from that specific image, but will still appear on the other images within your post.

Turn Off the Pin It Counter

The Pin It buttons have a counter by default. All of the counters on an individual page of your blog will increase by one when any image from that page is pinned. Based on feedback on the old version of the button code, I know that really bothers some bloggers! There's no way to change how the counter works, but if you'd like to hide the count, change count-layout="horizontal" to count-layout="none" in line 7 of the gadget code.

Disable the Title as Description

This code uses your post title as your images' description. That works nicely for most blogs, but if you frequently use double quotes, ampersands (&), or other special characters in your titles, you'll notice that the description cuts off at the first special character. There are two good alternatives to using the title as the description:

Alt Text

If you add alt text to your images, you can use the alt text as your image description instead. To do that, change:

+ $title +


+ $(this).attr('alt') +

in line 7 of the code.

Blank Description

You can leave the description field blank by changing:

+ $title +


+ ' ' +

in line 7 of the code.

Remove Pin It Buttons from Static Pages

If you don't want the buttons to show on your blog's static pages, I've posted instructions for removing the buttons from static pages in the Appendix.

Show me your buttons!

Leave a comment or tweet me so I can see where you're using the buttons! And, of course, let me know if you have any questions!

Special thanks to the Githubber who wrote the Pinterest button script I based this on!

Strawberry Tart photo CC-BY-SA Michael Phams

A Note About Comments:

This button tutorial has been updated five times. If you have a problem with the tutorial, please don't try any of the suggestions from comments before February 7, 2013. Instead, check the steps again and make sure you didn't miss anything. If you're still having trouble after double-checking the tutorial, leave a comment and I'll do what I can to help you out :)