Twitter Cards with WordPress

Twitter plus WordPress

Last time I gave you the rundown on how to use Twitter Cards. I covered everything you needed to manually add the markup to your pages, but if you run a WordPress blog (like this one), you probably want something more automated.

Of course, there are WordPress plugins to do this for you. I was using one for a while, but then decided to brew my own solution. Nothing against plugins, but it was overkill for my needs. Plus, it was an excuse to learn something new.

The Meta Tags

Add this code to header.php (inside of <head>):

A quick is_single() check makes sure we only do this stuff on a post page. After that, we gather up some data and spit it out in meta tags. Some of these values (card, creator, site) won’t change post to post, so we can hardcode them. The rest need to be pulled from the post data.

Getting title is easy. description and image would be easy, too… if we were inside The Loop. Sadly, we’re not. No biggie, we’ll just have to work harder with less convenient functions.

The Support Functions

Add this code to functions.php:

I use the first 200 characters of the post content for description. The get_card_description() function takes care of all the text massaging and trimming to make this happen. If you’re curious about the regex on line 9, read this post.

When creating a post, I set the post’s featured image to whatever I want to see in image. The get_card_image() function retrieves the image URL for me to use.

Troubleshooting Featured Image

If you don’t see the ability to set a featured image on the post add/edit page, then click the “Screen Options” tab at the top right of the page and make sure the “Featured Image” checkbox is ticked. If you don’t see a checkbox for “Featured Image”, then you probably need to add featured image support to your WordPress theme. Don’t worry, it’s easy. Just add something like this to your functions.php:

Done

And that’s it. Next time you publish a post, the Twitter Card markup will be set for you. Just make sure you set a featured image for the post if you want one to show in the Twitter Card.

0 comments » Related topics:

Hi Again

If you’re reading this, then you’re looking at the newly upgraded Coder’s Block blog. Hooray!

History

I started this blog 3 years ago with a “don’t sweat the details” attitude. Part of that was using Blogger to launch my blog quickly, knowing I’d want something better in the future. Well, it took longer than expected, but I finally upgraded my blog to run on WordPress, on my domain, integrated with my portofio.

Learning WordPress

I thought this would be a weekend project. Ended up taking 3 weeks, and that’s with me rushing after Google somehow found and indexed the blog before it was ready. Still not sure how they found it.

I started by cloning the baked-in Twenty Twelve theme. Then I combed through every file and function, learning what everything did, and removing, editing, or adding to fit my needs. This is the result. I now also have a new-found respect for WordPress developers. Using WordPress is simple. Working under the hood isn’t.

Migration

And then there was the migration. WordPress has a Blogger Importer plugin, but it strips out embedded scripts. Kind of a bummer if you run a web dev blog with lots of gists, codepens, and fiddles. I also needed to do a lot of markup massaging on my posts to fit them into their new home. I ended up throwing together a quick and dirty post massager that applied 11 regexes, then I applied a few more using the Search Regex plugin, just to get things reasonably presentable. It was certainly tedious, but it also gave me a chance to review old posts and add updates as needed.

After the migration, I still had to worry about redirecting visitors from my old blog to my new one and preserving any SEO juice I had. Thankfully, the Blogger To WordPress plugin made this easy.

Loose Ends

I waffled back and forth between using the baked-in WordPress commenting system or Disqus. Finally settled on Disqus, mostly so I could offload the complexity of a commenting system out of my templates and functions.

There are some other speedbumps I encountered, and I few tricks I picked up, but those are probably better saved for other posts.

2 comments » Related topics: