Creating Twitter card templates for WordPress

November 11, 2018

Back to Tips and Tricks Table of Contents

I use WordPress for the technical committee that I co-chair – the IEEE RAS technical committee on Agricultural Robotics and Automation – abbreviated AgRA. As of this writing, I have a month’s experience using it, but I don’t administer the site, and did not set it up. So I basically don’t know much about WordPress, besides how to write posts.

I do maintain our Twitter account, @AgRoboticsTC, and want to post activities of the technical committee there, and I am also somewhat of a novice with Twitter. I have consistently been using Twitter since February 2018 – Phenome 2018 being the watershed moment – so not very long. The tweets I was composing were fine, but the links from our AgRA page weren’t very fancy or eye-catching, even with great visual content.

So I once I figured out what Twitter cards were, I tried finding Twitter card plugins for WordPress. I found one, the site admin installed it, but for various reasons I’ll not go into we decided against using a plugin. Plan B – hard coding! Not everything worked from other tutorials, so here’s my tutorial for how I got Twitter card meta tags to work, assuming WordPress newbie-ness. Also, I cover summary and large summary cards.

Contents

Don’t break current install

While I was a bit nervous about mucking about with another entity’s webpage, I started to breathe easier when I realized that I could add templates. This is neat! You can play around with some new post/page templates so when you compose a post, you can choose which kind of card you want to use. Where do you find these?

wp-content->themes->your-theme->single.php
wp-content->themes->your-theme->header.php

where your-theme is replaced with whatever theme you are using.

Once you have some additional templates, you will be able to select these when you compose a post or page. This Post-Attributes box shows up on the right-hand side of the editor, once you have more than a default template to choose from:

Select Template

The process is as follows:

Since the first step is self-explanatory, I’ll go to step two. Of course, you may choose different names, but I will use my names in the examples because at some point they have to match, so you’ll see where that happens.

Add meta tags for summary cards in the header

You’ll need to add meta tags in the headers. I started with summary cards, and for the nitty gritty, recommend you read some of the docs from Twitter about the different types of cards. Right before the closing </head> tag, I inserted this in header-twitter.php:

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@AgRoboticsTC">
<meta name="twitter:creator" content="@AgRoboticsTC">
<?php if (is_single()) { ?>
<meta name="twitter:title" content="<?php echo get_the_title(); ?>">
<meta name="twitter:description" content="<?php echo strip_tags($post->post_content); ?>">
<?php } else { ?>
<meta name="twitter:title" content="<?php wp_title(''); echo ' | '; bloginfo( 'name' ); ?>">
<meta name="twitter:description" content="<?php echo the_excerpt(); ?>">
<?php } ?>
<?php if ( has_post_thumbnail( $post->ID ) ) : $swt_thumbsrc = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'thumbnail' ); ?>
<meta name="twitter:image" content="<?php echo $swt_thumbsrc[0]; ?>" />
<?php else : ?>
<meta name="twitter:image" content="http://ieeeagra.com/wp-content/uploads/2018/11/cropped_icon.png" />
<?php endif;

Breaking it down – and this example was adapted from here after trying many that did not work for my theme at all.

twitter:card

Specifies the type of card. The summary card has a small image and then a summary to the right.

twitter:site

The originating site’s twitter handle.

twitter:creator

The creator of the post. In this case, the creator and site are the same, but for a site with multiple authors, you may want to make a few headers and single templates with different values for this field.

twitter:title

Title of the post or page.

twitter:description

A short summary of the post. This can be specified on a page-by-page basis, but with WordPress, we want a one-size-fits-all option. Many code snippets have get_the-excerpt($post-ID$) instead of $post->post_content, but for my theme, that was empty. strip_tags removes html tags, so it can output some pretty text.

twitter:image

If the post has an asssociated image (that is thumbnailed), that image is set at the display image. Otherwise, the default image is used. I set that image to be our Twitter icon. One could imagine for specific scenarios of different authors, you may want different default images. This could be fun!

Specify that the single template should use this header

Once your header has the meta tags, you have to instruct a single-post-twitter-card.php to use it, and also add some information so that it will be picked up as a new template.

Whereas your single.php may have looked like this:

<?php
/**
 * The Template for displaying all single posts
 *
 * STUFF
 */

get_header(); ?>

The new single-.....php template needs to include:

My single-post-twitter-card.php beginning lines become:

<?php
/*
 * Template Name: Post-Twitter-Card
 * Template Post Type: post, page
 */
 get_header('twitter');  ?>

For specifying the header, if you named your header header-yourname.php, you would put yourname in the parantheses in get_header();.

Large image cards

There is a one-line difference in the header from summary cards, and summary large image cards.

<meta name="twitter:card" content="summary_large_image">

You’ll also need to create a corresponding single-......php that references this header, to be able to use it.

Things to consider when choosing between summary or large Twitter cards.

Test time

Create a test post, or change an existing post to use one of the new templates using the Post Attributes selector:

Select Template

Update, refresh that page on the website, then head over to the Twitter card validator. Paste the link of the post/page in the box, and see what happens. You may have to wait a minute or two.

Summary card

In a perfect world, this is what you will see for the summary card from the validator. It is slow. Troubleshooting is below, though. Note: the log is useful when things work. It is not particularly useful when things don’t work. Select Template

Summary card, large image

Ditto here – so I changed the template for this post to the large summary card: Select Template

Text only post

Text only posts need some images too, this one shows the use of the default image. Select Template

Troubleshooting

Since the world is not perfect, things may go a bit screwy. The faster, and more precise way to figure out what was going on for me was to use the webpage inspector. This used to be a button on the web browser, but now in my old age you have to work harder for it.

In Firefox, Menu->Web Developer->Inspector, then there will be a window at the bottom. Expand the head section, and take a look at the meta tags and the strings for them. I had issues with the image paths, as well as working out what was going on with the summary.

Happy tweeting!

© Amy Tabb 2018-2020. All rights reserved. The contents of this site reflect my personal perspectives and not those of any other entity.