Twitter Embed Width Issue in WordPress Fix

Posted on by admin

Twitter Oembed Responsive Width in WordPressIf you’re like me and love the forward movement of responsive design then you may have been as surprised as I was to find that Twitter embeds in WordPress posts were not responsive. Worse than that Twitter had hooked them up with an in-line styling that cannot be over written.

Quick Fix

Well you can go into your WordPress admin section and go to the media settings. There you can set the actual width that you want the Tweets to be shown. However , that still does not make it responsive and if you make it small enough for mobiles then on larger screens it looks lost.

How to Make Twitter Embed Responsive

In WordPress we need to call on some jQuery magic as this is the only way I could figure out how to do it.

The jQuery Script

jQuery(document).ready(function($){
setInterval( function() {
$( '.twitter-tweet-rendered' ).removeAttr( 'style' );
}, 100 );
});

This tiny little script allows us to remove the style attribute from the div class twitter-tweet-render. However on it’s own it would run before the Twitter js had run and so would not change anything. That is why I have wrapped it up in a setInterval that waits a fraction of a second before it activates the removal of the style attribute. This gives Twitter enouogh time to finish styling the Tweet and therefore the attribute exists to be able to remove.

The Functions.php

To get your newly written script called into WordPress you will need to do the following:

wp_register_script( 'embed_twitter' , 'path/to/your/script/oembed-twitter.js', array( 'jquery' ) );
 
wp_enqueue_script ( 'embed_twitter' );

Summary

Okay so it’s not ideal but until Twitter fix their wicked ways it will have to do :) and if you’re worried about relying on jQuery for styling; don’t because if someones javascript is not turned on then Twitters code won’t work anyway. You still get your tweet but with no styling

Comments are closed.