Get Centered, WordPress Auto Embedded Tweets!

Oh web design vanity, thy name is obscure CSS class.

This is something really really visually petty, but, you hopefully know you can in WordPress you can embed a single tweet by just finding it’s URL (it’s the link on the time/date stamp) and putting it on a blank line:

Hah! You get the tweet just like it looks in twitter. All the links work! In the old days (like 4 years ago) we were screen shooting them (still useful if you use tweets from people that delete their own <cough>#socalledpresident</cough>) or copying ugly embed code.

<3 WordPress.

WordPress auto embedded tweet, you so off center

But visually it’s bugged me… the embedded tweets are left aligned, which is not a bad problem on themes like this one with a relatively narrow content columns, but elsewhere… it looks crappy.

You can’t wrap it in any centered tags.

I’ve ignored it a while, but eventually, you gotta right/control click on an element and open the Inspector.

Ewwwww. CODE! (yummy)

When you see what that one line in the WordPress editor generates under the hood, you might cry or close the laptop. It’s like a little web page embedded in a riddle wrapped in a taco under a blanket… I’d poked and prodded in there before, but never quite found the right class to fiddle with.

A few weeks ago I went back into the HTML well one more time. Way at the top of the mess is the iframe tag that wraps the whole thing… I can see it manually sets a width, but also applies a twitter-tweet-rendered class, and looking for that I see that it sets a top and bottom margin, but not left or right.

So I reach in the Inspector and click to add a new element to test:

And I can create a class and try some left and right auto margin setting…

And when I look back at my page.. SHAZAMMO! Look at how stylish I am!

Now while I am self high-fiving, keep in mind this is only a test I can see the results for in my own browser, and only in this session. The Inspector has been my go-to to figure out visual layout and punch and poke til I find something that works. It beats editing CSS, uploading to server, and reloading.

Since I edit my own themes, all the time, it’s an easy step for me to update my theme’s CSS. But what if that sends shivers down your soul or you are on maybe a multi-site set up where you cannot edit the theme?

You got options, Sam I Am.

• A number of WordPress themes come with places to enter Custom CSS; look in the theme options or the Customizer
• If not, you get this as part of the Jetpack plugin (along with a boat load of other stuff)
• If not, you can get custom CSS with any theme via plugins like Simple Custom CSS

Regardless, with any of these, you get a text box where you can toss in any CSS you like, and it should add to or override what the theme does. So this is all you need there:

There you go, get those auto embedded tweets centered (this likely works on other sites where you use the copy/paste twitter embed code).

You can be fashionable now, like I was in 1974:

What’s Wrong with this Photo? flickr photo by cogdogblog shared under a Creative Commons (BY) license

Featured image: I was not finding anything close to what I had in mind while searching Google Images (with filters set for limited to images licensed for reuse) and settled on this one… then I saw it was by my good friend Tom Woodward, and EVERYTHING CHANGED! Attributing friends is the best… “off center” by bionicteaching is licensed under CC BY-SA

If this kind of stuff has value, please support me by tossing a one time PayPal kibble or monthly on Patreon