How to Embed a Tweet and Center Align It in WordPress

>How to Embed a Tweet and Center Align It in WordPress
  • center align

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.

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.

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.

Embed Tweet Code

4. Now simply paste it in your Text Editor, not Visual, and the Tweet will display on your page or post, like you see below.

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

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 coding 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.

Web Hosting
By | 2018-06-18T23:13:17+00:00 October 16th, 2017|Coding, Tips|1 Comment

One Comment

  1. Jason D. Kioke April 12, 2018 at 2:22 PM - Reply

    Yes! It worked. Thank you for sharing!

Leave A Comment

Subscribe
SUBSCRIBE NOW

     Join the Weekly      Newsletter

Get WordPress guides and tutorials right in your inbox, once a week!
close-link