How to add Twitter cards code to your WordPress website

Age of Article Warning:
This article was originally published 65 months ago. The information, tips and techniques explained may outdated. Examples shown on this page may no longer work. Please consider this when viewing the below content.

28th November 2014 update:
There is a new post with updated code for adding Twitter Cards to your WordPress website – please view the new article at
latest Twitter Card article

How would you like to be able to add Twitter cards markup code to your WordPress website?

Twitter cards is a brand new way to add extra content to your Tweets, simply by adding Twitter Card html code to your webpages. So that when someone links to your content in Twitter, a “card” with more information will be attached to the Tweet.

 

So firstly here are the basic steps involved to add Twitter Card markup to your website:

[highlight class=”highlight_yellow” style=””]Step 1.[/highlight]
Review the Twitter Card documentation- in this post I’ll show you how to add Summary Card to your Tweets. This is the Default card which contains title, description, thumbnail image, and Twitter account attribution.
You can read the documentation here.

[highlight class=”highlight_yellow” style=””]Step 2.[/highlight]
Add the required Twitter Meta markup to your page header

[php]
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@ insert-twitter-Account" />
<meta name="twitter:creator" content="@ insert-twitter-account-for-page-Author" />
<meta name="twitter:url" content="the page url goes here" />
<meta name="twitter:title" content="the page title goes here" />
<meta name="twitter:description" content="the page excerpt or short description goes here" />
<meta name="twitter:image" content="add an image to your card here" />
[/php]

[highlight class=”highlight_yellow” style=””]Step 3.[/highlight]
Twitter have provided a great tool so that you can check your markup to make sure you’ve got it right. Add your URL that you wish to validate here

[highlight class=”highlight_yellow” style=””]Step 4.[/highlight]
Request approval for your website from Twitter Cards- simply click on the “Request Approval” button as shown in the image below and fill your details in the form to register your domain. Please note that Twitter must approve the integration- which according to their site takes a couple of weeks.
Add Twitter Cards to WordPress website

The “automatic” way to have your WordPress website pages setup for Twitter Cards -Summary Card

What’s the easiest way to add this code to your webpages so that you maximise the potential of Twitter Cards?

As each page on your website has its own unique content, you want your Twitter Cards to show different content for each page. But adding this manually each time can be quite time consuming, and also easy to forget to do.

The following code will add the required Twitter card markup to your home page, your posts, pages and category. It uses permalinks, excerpts, bloginfo and other WordPress code to tailor the Twitter cards for the different pages.

Add the following code to your header.php

[php]
<?php if ( is_category() ) { $cat = get_query_var(‘cat’); $metacat= strip_tags(category_description($cat)); $current_page_URL = $_SERVER["SERVER_NAME"] . $_SERVER["REQUEST_URI"]; ?>
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@ CHANGE-ME" />
<meta name="twitter:creator" content="@ CHANGE-ME" />
<meta name="twitter:url" content="<?php echo esc_url($current_page_URL);?>" />
<meta name="twitter:title" content="<?php single_cat_title();?>" />
<meta name="twitter:description" content="<?php echo $metacat;?>" />
<?php } ?><?php if (is_single() || is_page() ) : if (have_posts() ) : while (have_posts() ) : the_post(); ?>
<meta name="twitter:description" content="<?php echo get_the_excerpt();?>" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@ CHANGE-ME" />
<meta name="twitter:creator" content="@ CHANGE-ME" />
<meta name="twitter:url" content="<?php the_permalink();?>" />
<meta name="twitter:title" content="<?php the_title();?>" />
<?php endwhile; endif; elseif (is_home() ): ?>
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@ CHANGE-ME" />
<meta name="twitter:creator" content="@ CHANGE-ME" />
<meta name="twitter:url" content="<?php echo home_url();?>" />
<meta name="twitter:title" content="<?php echo esc_attr(get_bloginfo(‘name’));?>" />
<meta name="twitter:description" content="<?php bloginfo(‘description’); ?>" />
<meta name="twitter:image:src" content="INSERT-IMAGE-URL" /><?php endif; ?>
[/php]

Don’t forget to add your Twitter handle/ username where it says CHANGE-ME and add an image URL for your Home page Twitter Card where it says INSERT-IMAGE-URL.

You might have noticed that I haven’t added the markup for the “twitter:image:src” for the posts and pages. I thought that it might be nice to be able to customise this individually for each post using the built in WordPress custom meta data that you find in the post editing screen.

Firstly add this to the your childtheme’s functions.php file:

[php]
add_action(‘wp_head’,’twitcard_img’);
function twitcard_img(){
global $post;
if (is_single()||is_page()){
if(get_post_meta($post->ID,’twitcard_picture_url’,true) != ”)
echo ‘<meta name="twitter:image:src" content="’.get_post_meta($post->ID,’twitcard_picture_url’,true).’" />’;
}
}
[/php]

This defines a new function called “twitcard_img” that extracts the data that you insert into the custom field “twitcard_picture_url” and adds that into the header of your posts and pages inside the content of “twitter:image:src”.

Now you need to create that custom field. Go into a post or page editing screen. Click on the “Screen Options” and ensure “Custom Fields” is ticked.

custom fields in screen options

 

Next scroll down to “Custom Fields” and add your new custom field “twitcard_picture_url”

add new custom field

 

Now when you create posts and pages, add the image URL that you want in your Twitter card into this custom field, and the “twitcard_img” function will auto add it your pages header, so that your Twitter card will display that image.

using custom field

 

Then load the URL into the validator and check it out.

how to Twitter Card setup

 

So there you have it. Have you started using Twitter Cards already? Be one of the first and get started today.

10 thoughts on “How to add Twitter cards code to your WordPress website

  1. David, thanks for the post, it´s great! I have one question. What should I change if I want the code to automatically use the page/post image?
    Thanks!

    • Hi Nicolas,

      If you are wanting to use a featured image from a post for the Twitter card then you can modify the function twitcard_img():

      add the following line:


      else echo '<meta name="twitter:image:src" content="'.wp_get_attachment_url( get_post_thumbnail_id($post->ID)).'" >';

      after this line:


      echo '<meta name="twitter:image:src" content="'.get_post_meta($post->ID,'twitcard_picture_url',true).'" />';

  2. Thanks for a nice guide. I just have doubt. I added this line in the head php to get an automated thumbnail instead of adding one through the custom fields or through the code you gave nicolas to add on functions.php

    <meta name="twitter:image:src" content=" ” />

    Is it correct?

    • Hi BM,

      thanks for feedback.
      Yes if you edit the header.php directly you can insert meta fields. The idea with adding it to a function, was to automate the adding in of a picture from a particular field.

      But if you set it up this way and it works better for you, then just test with the Twitter validator to be sure it is working correctly.

  3. Hi david,

    Thanks for this great post! ;-)
    I added the code in my header and the other piece of code in my functions.php

    The validator is Ok for my home page, but still an error with “no card found” when i try to validate for a post.

    I have added this on my functions.php file :

    add_action(‘wp_head’,’twitcard_img’);
    function twitcard_img(){
    global $post;
    if (is_single()||is_page()){
    if(get_post_meta($post->ID,’twitcard_picture_url’,true) != ”)
    echo ‘ID,’twitcard_picture_url’,true).'” />’;
    else echo ‘ID)).'” >’;
    }
    }

    Any help will be amazing ;-)

    • Hi Samy,

      I am currently creating a new and improved version of this post, which I hope to have up in the next couple of days, however please provide me the url to your site and I’ll take a look see if I can provide any help

Comments are closed.