Updating the "WP to Twitter" WordPress Plugin to Fix "Code 410" Errors

I found myself in the position of needing to update our "WordPress to Twitter" plugin (http://wordpress.org/plugins/wp-to-twitter/) from version 2.6.7 to 2.7.3, due to getting a constant "Code 410" error whenever we tried to do a post - apparently an issue with Twitter's 1.1 API update. Here's how I did it:

1. Deactivated the old wp-to-twitter plugin, using the WordPress "Plugins" admin-console.
2. Using a Linux terminal with direct server access, I scp'd the new version's ZIP file over and unzipped it into my /wp-content/plugins directory.
• When prompted to overwrite files, I chose "A" for all.
3. Went back to my plugins admin-console, refreshed the page and reactivated the plugin.

All settings (including my Twitter API keys/tokens/secrets, bit.ly, etc.) were miraculously still there, and the new version appears to be up and running. Quite a nice surprise, when it comes to managing WordPress!

Randomly Rotate Strings for Display on a WordPress Page Using PHP (Shortcode Exec)

I was asked by our marketing team if we could have our WordPress-based homepage randomly display one of several possible tag lines. Well, sure... with PHP it's dead simple. And if you have Shortcode Exec PHP installed in your WordPress site, it's actually even easy under WordPress.

Here's how I did our particular page. It will randomly choose a string from a PHP array, and present it in a clean looking, rounded-corner wrapper. If you use this, of course you may want to modify the strings and styles to suit your needs. Note, rounded corners aren't fully supported by most IE versions ~ I try not to waste time developing for IE, but if you have a solution, feel free to post it here.

Create a new Shortcode Exec PHP like so...

/* Rotate random hyperbole lines on the homepage */
$hyperboleStrings = array(
1  => "We have the best product",
2  => "Our solution solves problems",
3  => "Industry leading solutions"
);
$whichStringToShow = rand(1, sizeOf($hyperboleStrings));
echo $hyperboleStrings[$whichStringToShow];

Now all you have to do is save it and go to the page you want to add it to. In my case, I had to go to Appearance -> Editor -> header.php...

<div class="rounded_corners" id="hyperbole-line">
<?php echo do_shortcode("[homepage_hyperbole_rotator]"); ?>
</div>

And, here's my CSS...

.rounded_corners {
-moz-border-radius: 10px; /* firefox */
-webkit-border-radius: 10px; /* safari, chrome */
-khtml-border-radius: 10px; /* KDE HTML layout engines */
border-radius: 10px; /* css3 */
}
#hyperbole-line {
background-color: #20b0b0;
width: 85%;
padding: .25em;
text-align: center;
margin: 10px auto 10px auto;
color: #fff;
font-style: italic;
font-size: 1.75em;
padding: 0;
letter-spacing: 1px;
}

Exclude WordPress Recent Posts Having a Certain Category

Say you have a homepage that you list recent posts on, using the "Recent Posts" widget or something.

Also say that you want to exclude posts that have a certain category. In my case, I have regular blog posts, and I also have a category of blog posts for "Press Releases" that I have a separate section on my homepage for.

Well, I don't want duplicated post links on my homepage, now, do I?

So, here's the hack (I prefer to avoid the term "solution" when dealing with WordPress)...

In my theme's functions.php file (Appearance -> Editor -> Theme Functions), I added the following bit of code at the end (change the red text to the appropriate ID of the category you wish to exclude - you should be able to specify multiple categories by separating them with spaces e.g. '-1 -2 -3'):

function exclude_category($query)
  {
  if ( $query->is_home() )
    {
    $query->set('cat', '-TAG ID OF CATEGORY');
    }
  return $query;
  }
add_filter('pre_get_posts', 'exclude_category');

From what I'm able to gather, the function intercepts the standard procedure for getting posts, via the add_filter function. More of your typical WordPress voodoo black magic, if you ask me... building layers upon layers upon layers /smh.

Firing CSS3 Transition on Page Load Event (in WordPress)

CSS3 has some pretty cool stuff ~ among these are transitions and animations. So, when I was tasked with making the tagline on my company's website "pop" or stand out somehow, CSS3 is the first thing that came to mind.

It was fairly easy, but the one trick I needed to figure out was how to make it all happen when the page is finished loading -- of course, WordPress didn't really make this easy on me... it has a nasty habit of not rendering or interpreting the code that I tell it to. Naturally.

Anyway, here is the tagline...
(forgive the poor quality of the GIF I used to record the browser window)

Here is the HTML event hook, which I added this to my header.php file...
(don't you just love that WordPress syntax BS?)

<script language="JavaScript" type="text/javascript">
// <![CDATA[
window.onload = function(){
  document.getElementById("body").setAttribute("class","loaded"); }
// ]]>
</script>

And add an ID attribute to the body tag, with a value of "body" for the hook above...
(ignore the elipses, I have other stuff in that tag that you don't need to care about)

<body id="body" ...>

Here is the CSS...
(the tagline container is classed "header-right" ~ the only thing you need to care about is the "#body.loaded" selector)

.header-right div {
  color: #ffffff;
  font-size: 1.8em;
  font-weight: normal;
  text-align: right;
  line-height: 1;
  margin-right: 15px;
  font-style: italic;
  text-shadow: 0 0 0 #dd5500;
  /*the following configures our transition effect - 500/200ms are
    delays to give the page time to render before doing transitions*/
  transition: color 2500ms ease-out 500ms, text-shadow 2000ms ease-in 200ms;
}
#body.loaded .header-right div {
  color: #178582;
  text-shadow: 0 0 180px #ff9944;
}

How does it work? Well, basically, you give the body node (which is what onLoad works with) an ID that we can later use to grab it and work with. Then, a JavaScript listens for the onLoad event; and when it fires, that same JavaScript will apply an attribute (class="loaded") to the body tag. Then, CSS will naturally go in and apply the transition effect (since the selector for "loaded" now exists in the document).