Genesis themes are amazing. With each theme, you know what you’re getting without the complicated menus and other settings that some other themes come with. Plus I like to tweak the code, so what better way than to start with a child theme. One of the nice things about Genesis themes are the widgetized home pages, which offer a lot of flexibility in terms of the content that you can add to them. The one thing I had trouble with though is how to add Twitter Card to Genesis widgetized homepage.
What are Twitter Cards?
According to Twitter, Twitter Cards let you:
attach rich photos, videos and media experiences to Tweets, helping to drive traffic to your website
The following tweet is an example of a tweet that has a summary card with a large image.
Explore Nepal's diverse and beautiful landscape with these adventure photos https://t.co/IFsMsLenJ2
— National Geographic (@NatGeo) October 16, 2016
Look at that picture. Doesn’t it grab your attention?
Twitter Cards lets you have the same type of photo along with the link you share.
How to add Twitter Cards
The easiest way to add Twitter Cards is to install the WordPress SEO by Yoast plugin. In the plugin, go to the Social settings page.
Enter your Twitter username (i.e. the part after the @ when someone mentions you in a tweet), then save the changes.
After that, click the Twitter tab and check the box to Add Twitter card meta data. Also, choose the type of card to use. I prefer the summary with a large image, but choose whichever option you prefer.
Finally, go to your profile under Users > Your Profile, enter your Twitter username and save changes.
Add Twitter Card to Genesis Widgetized Homepage
Unfortunately, all we’ve done so far is incorporate the Twitter card settings on the posts and pages that have (at a minimum) a featured image. With a widgetized homepage, we don’t get the option to add a featured image, so we need to add an image some other way.
Open up your Genesis child theme’s front-page.php file and add the following snippet.
add_action( 'wp_head', 'sd_add_twitter_image' ); function sd_add_twitter_image(){ echo '<meta name="twitter:image" value="http://example.com/wp-content/uploads/your-1024x512px-image.png" />'; } |
Since this is being loaded in the front-page.php file it will only load on the homepage, which is where we want it to load. Be sure to swap out the reference to the image with your own image. Note, the recommended image size is 1024x512px.
If your child theme does not have a front-page.php file, you can add the following snippet to your child theme’s functions.php file.
add_action( 'wp_head', 'sd_add_twitter_image' ); function sd_add_twitter_image(){ if ( is_front_page('') ) { echo '<meta name="twitter:image" value="http://example.com/wp-content/uploads/your-1024x512px-image.png" />'; } } |
That’s it your homepage should now have it’s own Twitter Card!
Validate Twitter Cards
If you want to check to see how your changes look, you can use Twitters Card Validator tool. Enter the URL to your homepage, and click Preview Card. It will give you a preview of what your site will look like if linked to in a tweet.
Sometimes the preview doesn’t come back correctly right away. You might need to clear your site’s cache if using a caching plugin, or just wait a few minutes for Twitter to catch up to your changes.
Leave a Reply