<p>I use the fantastic <a href="http://wordpress.org/extend/plugins/twitter-for-wordpress/">Twitter for WordPress plugin</a> on my website. Sometimes though, <a href="http://twitter.com">Twitter</a> decides that it doesn’t want to make my tweets available. The plugin has accounted for this, and it displays <strong>No public Twitter messages</strong> when this happens. That kinda sucks though.</p>

<p>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? <strong>jQuery of course</strong>.</p>

<h2>When the Tweet Comes Through</h2>
<p>Here is the markup that is displayed on my site when a tweet comes through successfully:</p>

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

</code></div>

<h2>When the Tweet Doesn’t Come Through</h2>
<p>This is what you end up with:</p>
<div class="codeblock"><code>
&lt;div id="twitterContainer"&gt;<br /> No public Twitter messages.<br />&lt;/div&gt; 

</code></div>

<h2>The jQuery</h2>
<p>My thinking is that I will check the contents of <strong>div#twitterContainer</strong> to see if it is <strong>No public Twitter messages</strong>. If it is, I think it would be useful to replace that text with a link to <a href="http://twitter.com/davist11">my Twitter account</a> with a message telling people to follow me.</p>

<p>So first, let’s execute the jQuery code when the document is loaded:</p>

<div class="codeblock"><code>
$(document).ready(function() {<br /> <br />}); 

</code></div>

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

</p><div class="codeblock"><code>
$(document).ready(function() {<br /> &lt;strong&gt;if(jQuery.trim($('div#twitterContainer').text()) == 'No public Twitter messages.') {<br />   <br /> }&lt;/strong&gt;<br />}); 

</code></div>

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

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

</code></div>

<div class="clearfix">
<p><img src="//assets.trevor-davis.com/uploads/images/content/2009/02/twitter-plugin-fixed.jpg" alt="Screenshot of fixed Twitter plugin" class="rightSide frame" height="164" width="150" /><strong>That’s it</strong>. This is just <a href="//trevor-davis.com/blog/tutorial/improving-a-flickr-plugin-with-jquery/">another example of how I have used jQuery to improve a WordPress plugin on my site</a>.</p>

<p>You can see this in action on my site, or <a href="//assets.trevor-davis.com/play/fixing-twitter-plugin/">take a look at the demo</a>.

</p><p><a href="//assets.trevor-davis.com/play/fixing-twitter-plugin/" class="more-link">See Demo</a></p>
</div>