I use the fantastic Twitter for WordPress plugin on my website. Sometimes though, Twitter decides that it doesn’t want to make my tweets available. The plugin has accounted for this, and it displays No public Twitter messages when this happens. That kinda sucks though.

It’s definitely nice that the plugin doesn’t throw an error, but I really don’t want that message displayed on my site. So what’s the solution? jQuery of course.

When the Tweet Comes Through

Here is the markup that is displayed on my site when a tweet comes through successfully:

<div id="twitterContainer">
 <a class="twitter-link" href="http://twitter.com/davist11/status/1200405534">
  I feel like I'm in an episode of Seinfeld right now.
 </a>
</div> 

When the Tweet Doesn’t Come Through

This is what you end up with:

<div id="twitterContainer">
 No public Twitter messages.
</div> 

The jQuery

My thinking is that I will check the contents of div#twitterContainer to see if it is No public Twitter messages. If it is, I think it would be useful to replace that text with a link to my Twitter account with a message telling people to follow me.

So first, let’s execute the jQuery code when the document is loaded:

$(document).ready(function() {
 
}); 

Next, we are going to check and see if the contents of div#twitterContainer is No public Twitter messages:

$(document).ready(function() {
 <strong>if(jQuery.trim($('div#twitterContainer').text()) == 'No public Twitter messages.') {
   
 }</strong>
}); 

Finally, let’s just replace this text with a link to my Twitter feed:

$(document).ready(function() {
 if(jQuery.trim($('div#twitterContainer').text()) == 'No public Twitter messages.') {
  <strong>$('div#twitterContainer').html('<a href="http://twitter.com/davist11" class="twitter-link">Follow Me on Twitter</a>');</strong>  
 }
}); 

That’s it. This is just another example of how I have used jQuery to improve a WordPress plugin on my site.

You can see this in action on my site, or take a look at the demo.

See Demo

Fixing a Twitter WordPress Plugin with jQuery