By default, WordPress lets you embed Tweets on your site, which means that if you add the proper embed code, the Tweet will actually display on your post or page.

Cloudways

The thing is that it will be aligned to the left, and some of you would like it to be centered.

Therefore, in this article, I’ll show how to embed a Tweet in WordPress, and also how to center align it.

Cloudways

How to embed a Tweet in WordPress

1. Head over to the Twitter page and find the Tweet that you want to embed.
2. Press the down-arrow from the upper-right corner and select Embed Tweet.

Embed Tweet

3. Copy the code.

Cloudways

Embed Tweet Code

4. Now simply paste it in your Text Editor, not Visual, and the Tweet will display on your page or post, as you see below. For the Gutenberg editor, use the Custom HTML block.

As you can see, the Tweet is aligned to the left. Let’s center it.

Cloudways

How to center align an embedded Tweet in WordPress

The code for the above Tweet is this:

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Your one-stop shop for all the latest gadget news is <a href="https://twitter.com/circuitbreaker?ref_src=twsrc%5Etfw">@circuitbreaker</a>.<br><br>Watch <a href="https://twitter.com/hashtag/CircuitBreakerLive?src=hash&amp;ref_src=twsrc%5Etfw">#CircuitBreakerLive</a> right here, exclusively on Twitter! <a href="https://t.co/QjqiHqHz4Q">https://t.co/QjqiHqHz4Q</a></p>&mdash; Twitter (@Twitter) <a href="https://twitter.com/Twitter/status/915305992975400960?ref_src=twsrc%5Etfw">October 3, 2017</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Now, in order to center it, we need to add an extra CSS class next to the very first one, which is twitter-tweet. The class we need to add is tw-align-center.

You need to add that class in here: <blockquote class="twitter-tweet", so it will look like this: <blockquote class="twitter-tweet tw-align-center", and the whole code will eventually look like this:

<blockquote class="twitter-tweet tw-align-center" data-lang="en"><p lang="en" dir="ltr">Your one-stop shop for all the latest gadget news is <a href="https://twitter.com/circuitbreaker?ref_src=twsrc%5Etfw">@circuitbreaker</a>.<br><br>Watch <a href="https://twitter.com/hashtag/CircuitBreakerLive?src=hash&amp;ref_src=twsrc%5Etfw">#CircuitBreakerLive</a> right here, exclusively on Twitter! <a href="https://t.co/QjqiHqHz4Q">https://t.co/QjqiHqHz4Q</a></p>&mdash; Twitter (@Twitter) <a href="https://twitter.com/Twitter/status/915305992975400960?ref_src=twsrc%5Etfw">October 3, 2017</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Now your Tweet should be centered on your WordPress post or page.

The reason I said should is because it won’t work on every theme.

The embedded Tweet uses the <blockquote> tag, and if the theme developers have added some CSS code for it, especially code regarding alignment, then that extra class of CSS won’t be able to override it. I recommend contacting the theme developers and ask them for help.

Coding is not really my strong point, I’m not an expert, so the above explanation might not be totally accurate. If someone who knows to code reads this post, please feel free to leave a comment and correct me if I’m wrong.

What I can tell you for sure is that it’s theme or even plugin related, if you use some sort of blockquote plugin.

That’s a wrap

Hope you found the post useful and comprehensive.

Don’t forget to share it with your friends!

If you have any thoughts or questions, please drop a comment, contact us, or message us on Facebook.