How To Use The Twitter Grid Widget By Atomic Addons

The Twitter Grid widget by Atomic Addons shows the latest posts of an X (Twitter) account as a grid of cards. Each card has the post's text, with its links, @mentions and #hashtags clickable, buttons to reply, repost and like on X, and how long ago it was posted. You can add the account's avatar, name and handle on top. This guide covers connecting the account, adding the widget and setting up the grid.

Enable the Twitter Grid Widget

Twitter Grid is a Free widget and works with the free Atomic Addons plugin. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Twitter Grid. You can also open the Marketing category.

4. 4

   Turn the Twitter Grid widget on.

5. 5

   Click Save Settings.

Connect Your X Account

The posts load from the X API, so the widget needs the keys of an app created in the X Developer Portal. Reading an account's timeline needs an X API plan that includes it. Save the keys once for the whole site:

1. 1

   Go to WordPress Dashboard → Atomic Addons → Settings.

2. 2

   In Twitter API, fill in Consumer Key, Consumer Secret, Access Token and Access Token Secret from your app.

3. 3

   Enter the account to show in Twitter Username, without the @.

4. 4

   Click Save Settings.

All five fields are needed. Until they are filled in, the editor shows a notice with a Go to Settings link in place of the grid; visitors see nothing. If X returns no posts, the editor says so as well.

Add the Twitter Grid Widget

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Twitter Grid. The widget sits in the Atomic Addons category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

Layout

Content → Layout holds all of the widget's settings:

1. 1

   Columns: 1 to 6 columns: 3 by default, 2 on tablets and 1 on phones. Use the device icon to change the tablet and phone numbers.

2. 2

   Column Gap: The space between columns: Small (16px), Medium (24px, the default), Large (40px) or Collapse (none).

3. 3

   Row Gap: The space between rows, 30px by default.

4. 4

   Limit: How many posts to show, 6 by default.

5. 5

   Cache Time(m): How many minutes the widget keeps the posts before asking X again, 60 by default.

6. 6

   Show Avatar: Adds a header to each card with the account's profile picture, name and @handle. Off by default.

7. 7

   Enable Twitter Auth2 API: Reads the posts with an app-only token made from your Consumer Key and Consumer Secret, instead of signing each request with your access token. Try it if your X app is set up for app-only access. Off by default.

8. 8

   Avatar Link: Shown with Show Avatar: links the header to the account's profile on X, in a new tab.

9. 9

   Show Time: How long ago each post was made, linked to the post on X. On by default.

10. 10

    Long Time Format: Shown with Show Time: writes the time out, such as “3 hours ago”. Turn it off for the short form, such as “3h ago”. On by default.

11. 11

    Execute Buttons: Reply, repost and like buttons under each post. Each opens X in a new tab to do that action. On by default.

12. 12

    Exclude Replies: Leaves out posts that are replies to someone else, so only the account's own posts show.

13. 13

    Strip Emoji: Removes emoji from the post text.

14. 14

    Item Match Height: Makes every card in a row as tall as the tallest one. On by default.

A repost shows the original post's full text after “RT @name:”. If X can't be reached when the cache runs out, the widget shows the last posts it loaded successfully.

Style the Twitter Grid

Everything below is on the Style tab. Sections that belong to a feature you turned off are hidden.

• Items — the card in Normal and Hover states: text color, background, border, radius, padding, shadow, text alignment and typography, the Gap between the parts of the card, and the color and spacing of the divider above the buttons and time.
• Avatar — the picture's background, border, radius, padding, margin, size, opacity, shadow and alignment, plus the color and typography of the Name and Handle.
• Execute Buttons — the reply, repost and like buttons: color, background and their hover versions, radius, size and spacing.
• Time — color and typography.