Currently Browsing: Home » Flipping your text in WordPress

Flipping your text in WordPress

Youtube’s April Fool’s 2009 prank was to flip everything on their featured videos upside-down. In this post I will show you how to flip the contents of your posts in WordPress. While not nearly as cool as flipping the entire page, it’s still something you can keep ready for next year’s April Fool’s.

Youtube Flipped

First, let’s start with a method, flip($content).


function flip($content) {

}

Before we do anything else, we need a look-up table. To save you the trouble of creating one yourself, I have created one for you based on the mappings found at this resource.


$table = array ( '!' => '¡', '"' => '„', '&' => '⅋', '\'' => ',', ',' => '\'', '.' => '˙', '3' => 'Ɛ', '4' => 'ᔭ', '6' => '9', '7' => 'Ɫ', ';' => '؛', '<' => '>', '>' => '<', '?' => '¿', 'A' => '∀', 'B' => '𐐒', 'C' => 'Ↄ', 'D' => '◖', 'E' => 'Ǝ', 'F' => 'Ⅎ', 'G' => '⅁', 'J' => 'ſ', 'K' => '⋊', 'L' => '⅂', 'M' => 'W', 'N' => 'ᴎ', 'P' => 'Ԁ', 'Q' => 'Ό', 'R' => 'ᴚ', 'T' => '⊥', 'U' => '∩', 'V' => 'ᴧ', 'W' => 'M', 'Y' => '⅄', '_' => '‾', 'a' => 'ɐ', 'b' => 'q', 'c' => 'ɔ', 'd' => 'p', 'e' => 'ǝ', 'f' => 'ɟ', 'g' => 'ƃ', 'h' => 'ɥ', 'i' => 'ı', 'j' => 'ɾ', 'k' => 'ʞ', 'l' => 'ʃ', 'm' => 'ɯ', 'n' => 'u', 'p' => 'd', 'q' => 'b', 'r' => 'ɹ', 't' => 'ʇ', 'u' => 'n', 'v' => 'ʌ', 'w' => 'ʍ', 'y' => 'ʎ', );

Please note that this table is not exhaustive, but it should suffice for most sites.

Now that we have the lookup table, we simply need to code the replacement algorithm. The simplest way, of course, would be as follows: 1) Create a new string; 2) Loop through the original string; 3) If a replacement exists, append the replacement to the new string, and if not, append the original. Here it is:

function flip($content) {
	# Lookup table goes here, omitted because of length

	$new = '';

	$len = strlen($content);
	for ( $i = 0; $i < $len; $i++ ) {
		if ( $table[$content[$i]] != '' )
			$new .= $table[$content[$i]];
		else
			$new .= $content[$i];
	}
}

However, there are two cases we would want to check for: escaped symbols, like &amp;, and tags, like <p>. Two sub-cases of the tag case are <script> and <style> tags. While it is fine to flip the contents of other tags, flipping the contents of these two tags can bring about undesired results.

To do this, we would add a simple (nested) if/else.

You can replace the existing for-loop with this one:

for ( $i = 0; $i < $len; $i++ ) {
	// Tag case
	if ( $content[$i] == '<' ) {
		$start = $i;
		// <script> subcase
		if ( substr($content, $i + 1, 6 ) == 'script' ) {
			while ( substr($content, $i, 9 ) != '</script>' )
				$i++;
			$i += 8;
		}
		// <style> subcase
		else if ( substr($content, $i + 1, 5 ) == 'style' ) {
			while ( substr($content, $i, 8 ) != '</style>' )
				$i++;
			$i += 7;
		}
		// Base subcase
		else {
			while ( $content[$i] != '>' )
				$i++;
		}
		$new .= substr($content, $start, $i - $start + 1);
	}
	// Escaped char case
	else if ( $content[$i] == '&' ) {
		$start = $i;
		while ( $content[$i] != ';' )
			$i++;
		$substr = substr($content, $start, $i - $start + 1);
		if ( $table[$substr] != '' )
			$new .= $table[$substr];
		else
			$new .= $substr;
	}
	// Base case
	else {
		if ( $table[$content[$i]] != '' )
			$new .= $table[$content[$i]];
		else
			$new .= $content[$i];
	}
}

To make the magic happen in WordPress, you’ll need to modify your theme files. Find your functions.php file and place the flip($content) function into it.

After the function, add this line:


add_filter( 'the_content', 'flip' );

or, if you want to keep this to April 1st only, just put a check:


if ( date('md') == '0401' )
	add_filter( 'the_content, 'flip' );

And that’s it. Have fun flipping your text.

Tags: ,

This entry was posted on Friday, April 3rd, 2009 at 06:15:19. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Responses to “Flipping your text in WordPress”

  1. Aafrin says:

    thank you for the tutorial. will it work on wp 3.0 ? can i use the same code

Leave a Reply

Want to be notified when someone replies? Subscribe to this post's comment RSS feed.
Any field marked with a * is required.