Shortcodes, Widgets & Sidebars

Widgets »Twitter Timeline Widget

Twitter offers embeddable timelines that allow you to display any public Twitter feed on your blog. These timelines are interactive, so readers can reply, retweet and favorite tweets straight from your blog or website.

Get Your Twitter Widget ID

First, go to Twitter and create your Twitter Widget. There, you can pick your color scheme and size your Twitter widget. Once you’re done, click “Save Changes.”

Your widget ID is the long number you see in the URL while editing your Twitter widget:


Copy this widget ID — you will need it to display your Twitter Timeline on your blog.

↑ Table of Contents ↑

Twitter Timeline Widget

You can use our Twitter Timeline widget to put a timeline in your sidebar, or other widget area on your blog.

First, get your Twitter widget ID with the steps above. Then, you’re ready to add the widget:

Widget Settings

Create a widget by going to My Sites and selecting Customize:


Under Customize, go to Widgets, then Add a Widget:


Search for “Twitter” and you’ll see a Widget option for adding your Twitter Timeline:


Open the widget, and add your Twitter widget ID under “Widget ID.”



You’ll also be able to customize the following layout options:

  • Title: Set a custom title to be displayed above the widget. The default text is “Follow me on Twitter,” but you can also change it to anything you like (e.g. “I’m on Twitter” or “Recent Tweets”).
  • Width: You can set a specific width (in pixels) for your timeline. If you set this to “0” then it will try to automatically fill your sidebar.
  • Height: You can make your timeline taller or shorter by setting a height. The default is 400px which will normally show 2 or 3 of your most recent tweets (you can see the rest by scrolling).
  • # of Tweets Shown: This setting overrides the “Height” setting – if you select 5 tweets, it will always show 5 with no scroll. If you don’t set a # of tweets, it will fall back to your height setting, and you can scroll to see more tweets.
  • Widget ID: A unique number that identifies your widget with Twitter. See the above get your Twitter widget ID section on where to get this number.
  • Layout Options: You can play around with these options to change how your timeline looks. You’ll see a preview of the changes in your Customizer.
  • Link/Border Color: If you’d like to customize your timeline to match your theme better, then you can enter the hex code for a color in these boxes.
  • Timeline Theme: Twitter provides a dark and a light color theme for the timeline, so depending on your blog’s theme, you might want to change this.

Once you’re done setting your options, just click Save and you can refresh your site to see it in action.


↑ Table of Contents ↑

Embedding with a Shortcode

You can also embed your Twitter Timeline on a post or page on your blog.

To insert the timeline into a post, paste the following shortcode into your post editor:

[twitter-timeline id=1234 username=yourhandle]

In the shortcode, id is your Twitter widget ID and username is your twitter handle, without the @ symbol. (See the above get your Twitter widget ID section on where to get your widget ID.)

The shortcode will look something like this in your post editor:


That’s it! When you publish the post, it will look something like this:

↑ Table of Contents ↑

Not quite what you're looking for?

Get Help