Earlier, I wrote about how to center a YouTube embed. Today I want to share with you a quick little trick on how to center a Twitter (X) embed in your WordPress post.
How to center Twitter (X) embed
WordPress has an auto-embed feature, which means it will convert a Twitter (X) URL automatically and display the embed for you. For example, let’s say I use the following URL:
https://twitter.com/novashareio/status/1257408466328489984
WordPress automatically converts the above URL into what you see below. By default though, almost no WordPress themes have styles or CSS for Twitter (X) embeds. So by default, they are left-aligned. This might not be a big deal for some people, but if you are centering your images, left-aligned Tweets (posts) just look weird.
Check out some options you have below on how to center them.
1. Center Twitter (X) embed globally in your WordPress theme
The first option you have to use a global CSS style so that you never have to worry about that again. Use the following code:
.twitter-tweet {
max-width: 550px !important;
}
The easiest way to add this is under “Additional CSS.” Go to “Appearance → Customize” in your WordPress dashboard. Then paste the above code and click “Publish.”
And now the auto-embedded tweet and all future ones will be centered. That was easy!
2. Center Twitter embed manually
The second option you have to use an inline CSS style. Did you know that Twitter actually has a style already for centering Twitter embeds?
Step 1
On Twitter, click on “Embed Tweet” to grab the code.
Step 2
Copy the code and paste it into your WordPress post. Make sure you are in the “text” mode, not visual mode. If you are using the WordPress Block Editor (Gutenberg), just make sure to add the embed as an HTML block.
Step 3
You then need to edit the code and append Twitter’s style to it. On the first line of the embed code, change the following:
<blockquote class="twitter-tweet" data-lang="en">
To this:
<blockquote class="twitter-tweet tw-align-center" data-lang="en">
And your done! Your embedded tweet is now centered.
The wait is finally over, our fast and lightweight social sharing plugin for #WordPress is here!
— novashareio (@novashareio) May 4, 2020
– Inline SVG icons, under 5 KB front-end. 💥
– Easy native WordPress UI.
– Share counts or no share counts, it's up to you. ⚡
– Click to tweet block. 🐦https://t.co/K2axCYolVR pic.twitter.com/rZw8tadcWn
Summary
Have any questions about centering a Tweet embed on your WordPress site? If so, drop them below.
Brian, this is what I’m looking for. For a simple css code, the embed tweets automatically center on the content post. Thanks for sharing this.
Great, glad it was helpful!
Alot of people wrote shit codes, but yours was awesome. A simple css code center all my embed tweets. Works for me, works perfectly…….. Thank you so much i love it
Haha, thanks Danny. I try to write non-shitty code : )
When I use the embed code instead of showing it like Twitter embed my theme is converting the embed code into blockquote.
Hey Narendra,
I’ve updated the post above. If you are using the WordPress Block Editor (Gutenberg), you can simply add the embed code as an HTML block. That should fix your problem.