Setting up Twitter card functionality really gives your site a more reputable appearance and helps Twitter users know what they're going to see when they click your links. And it's not too hard to do.

Setting up Twitter card functionality really gives your site a more reputable appearance and helps Twitter users know what they’re going to see when they click your links. And it’s not too hard to do.

There are numerous plugins for self-hosted WordPress sites that will do this for you, but doing it yourself lets you tweak it exactly how you need.

First let’s look at what this looks like in Twitter:

This particular example shows a Summary card. You can also set up a Photo card, a Gallery card, a Product card, etc. – but for now we’ll just look at the Summary style. Look how many elements it’s pulling in. It’s got the site’s twitter account, the post title, the author’s twitter account, a summary and a picture, and a link to the article itself. We just need to tell Twitter what each of these are.

Step 1: Add Twitter as a contact method in WordPress

First we need to add Twitter as a contact method in user profiles. This lets us capture the Twitter handles of each author on our site. Simply add this code (credit to Joost de Valk) into your functions.php file:

Now when you edit your own profile (or that of another author), you’ll see “Twitter” as an option to add a username. Be sure each author you want to be credited has this field filled in.

Step 2: Add code to your </head>

Somewhere before your closing </head> tag, start by defining some variables:

(Notice in line 9 that you can set up a default image for posts that don’t have a featured image set.)

Then we assign these variables to the corresponding Twitter metadata code.

Be sure to replace the Twitter handle in line 6 with the twitter account for your site.

(Thanks to this dev.twitter.com thread for some of this code.)

Start the conversation




* Required


Basic HTML code will probably work. Inappropriate or irrelevant comments will be gleefully deleted. (You can disagree with me, just don't be a poop.)

Recent Dribbble Shots

Error retrieving Dribbble shots

See Christina on Dribbble.