Thinking of to clone twitter or X using WordPress? I was that ambitious too. But, thinking about it again, what’s the point? Probably what we really want to achieve is just something simpler. Which is, to display our post or content the same way as how twitter do in the timeline.
I did this and you can see on this site’s homepage.
Plugin I used to achieve this:
1- Ajax load more (to display the post). Also did some custom code here.
2- Stackable (for the tabs, same like twitter profile page).
How to achieve this:
1- Install and activate plugins mentioned above.
2- At Ajax load more plugin’s setting, generate the shortcode to display the post. You can choose your preferred content and which data you want to display here. At first, I prefer you to test first to get the idea how it looks like. Copy the generated shortcode.
3- Paste the shortcode at the page you want to display the post and publish. See first, how it got displayed here.
4- To change how it displays to be same as what I have in my site, go to Ajax load more plugin’s Templates > Repeater Templates. Copy and paste below code under Template Code.
*the code generated by ChatGPT. Please use at your own risk.
<li class="alm-item<?php if ( ! has_post_thumbnail() ) { echo ' no-img'; } ?>">
<?php
// Display the post thumbnail if available
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'alm-thumbnail' );
}
?>
<!-- Display the author name and date/time on the same line -->
<p class="entry-meta">
<span class="author-name" style="font-weight: bold; color: #ed7070;"><?php the_author(); ?></span> |
<span class="post-time"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></span>
</p>
<!-- Make the excerpt clickable and link to the post -->
<a href="<?php the_permalink(); ?>">
<?php the_excerpt(); ?>
</a>
<!-- Add reply link with comment count -->
<p class="reply-link">
<a href="<?php the_permalink(); ?>#respond">
Reply (<?php echo get_comments_number(); ?>)
</a>
</p>
</li>5- Refresh the page to see whether the post display as per expected.
6- Note that, I wanted to mimic the same user experience in twitter. Which, when user click on a tweet at the timeline, it will open the tweet itself. So, I made the code the same way. When user click on the post at the “timeline”, it will go to the single post page.
7- Because of this, based on your theme setting, you might see the post got underlined. This was due to the post linked to the single post page. You can adjust this in your theme settings.
8- Also note that, to be honest I’m not sure about the impact of this to your site’s SEO etc.
9- Now you can use Stackable’s tab block to create the tabs same as what we have in the twitter’s profile page. This should be easy and straight forward.