Centering embedded tweets in WordPress

Update: While the below solution is fun and works, it’s a little heavy handed code-wise. It’s easier to modify the presentation of the tweet using CSS which I explain in the next post.

A better solution is probably documented somewhere, but this worked for me and more importantly I had fun.

I was reading a blog post and noticed that the embedded tweets there were centered neatly and were not the same width as my own embedded tweets. The ones that I had inserted were left justified and had a 550px width.

I’d never liked the styling of my tweets, but all I was doing was pasting the tweet URL into the editor. I wasn’t pasting in the code from Twitter, WordPress was retrieving it for me via oEmbed.

I looked at the source of that page and noticed that the other blog post had added an additional CSS class to the tweet called tw-align-center and the hard-coded width=”550″ was removed.

That’s not surprising because when you visit Twitter’s page on embedding tweets, you can see the options for alignment. But how to do it in WordPress?

Filters to the rescue

Back in December 2011 Otto described in a comment how to filter the oembed_result so I used that code to modify the HTML like so.

add_filter('oembed_result','twitter_no_width',10,3);
function twitter_no_width($html, $url, $args) {
        if (false !== strpos($url, 'twitter.com')) {
                $html = str_replace('class="twitter-tweet"','class="twitter-tweet tw-align-center"',$html);
                $html = str_replace('width="550"','',$html);
        }
        return $html;
}

I put that into my child theme’s functions.php file and visited a post that had embedded tweets.

And nothing changed. I had forgotten that WordPress caches the oembed_result. That way the HTML from Twitter is only retrieved once or until the cache is cleared.

I used the editor and just re-saved the post. I didn’t change anything, but the HTML was retrieved again and an updated copy was placed in the cache.

That produced the result I wanted. There is probably an easier way to invalidate the cache but this will work for all new posts going forward.

What If you change themes?

I put the filter code into my child theme’s functions.php file because I wanted that look for this theme. If I switch themes then I don’t mind the look changing and I can do this again.

It is very easy to make that code into a plugin. Just put that into code into a file in wp-content/plugins and add a plugin header like this

<?php
/*
Plugin Name: Center Embeded Tweets
Description: This plugin will modify the oembed_result from Twitter resulting in the tweet being centered.
Version: 0.1
*/

Paste the filter code after the header and save that file as center-tweets.php. Activate that plugin and the filter will work no matter what theme you use.

What I want to play with next is that cache. If I change themes, does the cache get invalidated or does the same modified HTML output remain? I don’t know but that will wait for another night.