Monkey House

Reclaiming the Front Page of the Androida WordPress Theme

Users of the Androida theme already know about this. Readers of my blog may have thought I was doing something intentional. Basically, the content in the slider and the 3 “featured categories” area was always getting smooshed up. Line breaks/paragraphs just weren’t being respected.

The Short Version

I ramble. I mean, I REALLY ramble. So, to get the short version, jump right to the last heading in the article.

The Long Version: the Problem

One thing that immediately bothered me a bit about the otherwise spiffy^‡ Androida theme is that using the Business layout resulted in front-page content that has all its HTML/XHTML tags stripped out. The implication is that you cannot have paragraphs (<p>), links (<a>), additional images (<img>), or ANYTHING. Just pure pure text.

An example of why this sucked: since rendered HTML allows for line breaks, this means that no matter how many times you hit “enter” in your post, you will never be able to put spaces between your paragraphs. I didn’t quite realize why at first, but I knew that all tags were being stripped out. Not even ugly old <br/> line-breaks were doing it. AAAARGH!! I NEED line breaks for the sake of readability and sanity!

I headed over to the Web2Feel forum to see if anyone else had ever encountered this. Someone HAD, but the forum admin himself thought that the post was just not formatted. I’m not sure if he’s the original coder, but even if he was, there’s no way he could be held responsible for every single plug-in and its idiosyncracies for a FREE theme. As I stated in their forum, it was clear that some sort of “sanitization” was happening. It was just a matter of figuring out where.

The Long Version: Finding The Culprit

No matter how you slice it, the santization was being called from the “meat” of the front page. The front page consists of header.php, layouts/business.php, and footer.php.

I figured it COULD be a script of some sort being called in the header, so I looked there first. No scripts with obvious names jumped out, so I didn’t bother looking any further. A growing trend is to include scripts in the footer instead, but I didn’t think that seemed likely, so I didn’t even bother. I jumped right over to business.php.

Now, anyone who has ever looked into WordPress code knows that content is retrieved/displayed via a function called the_content(). I figured I’d look at the code surrounding this function and see if anything shook loose in my brain. As it turns out, I found this (actually, a bunch of these, but it only took one):

“That’s curious,” thinks I. I thinks, “Wonder if that’s a standard function that comes with WordPress….” So after I thinks, I Googles for “the_content_limit” (keeping the underscores of course) and soon discover that it’s part of a plug-in. Closer inspection of my plug-ins reveals what I really should have known all along… when I installed Androida, one of the required plug-ins was “limit-post.php”, which as you can guess, is supposed to limit posts.

I look at the above code, and I think, obviously the number being passed to the function represents its length, presumably in characters. What does that have to do with stripped tags?

Only one thing to do… open an editor (I just used the one built into WordPress) and inspect the Limit Posts plug-in (limit-post.php). The culprit stood out like a sore thumb. See if you can spot the baddie (hehe, I know you will, even if you’ve never touched a line of code in your life):

Didja see that? Yup, you did.

The Long Version: The Solution

Here was the offending line inside the Limit Posts plug-in (limit-post.php):

I didn’t bother tracing through everything that went into creating $content up to that point in time… it was obviously going to be the content (duh!) of the post. And it was now about to be updated by a function called “strip_tags()”. Didn’t take a rocket surgeon to know that something called “strip tags” being applied to something called “$content” was going to be the problem!

Couldn’t have been easier to find the solution. First hit in Google (search term: “php strip_tags”) brought me to this page describing the function: PHP.net strip_tags

In short, if you do not pass an array to the function, it will just strip all tags. But if you pass a non-delimited (I assume the braces automatically delimit) array of permissible tags, you can retain the power of the function while permitting tags that you want to be considered safe. For example, if you want to allow paragraph tags (my biggest one!) and anchor tags (ie. links), you would update the line to look like this:

Images are still stripped out, which is usually going to be the best idea anyhow. If you are modifying an Androida theme, you will probably also want to add back in the <em> and <strong> tags as a minimum… I would go on to add back any HTML

Voila!

‡(yes, I will always put that disclaimer… no matter how much I complain during the next several weeks, I chose this theme because it was cool)

Addendum: Turns out I don’t like there to be links on the front page… at least not without being properly styled. Also, header links aren’t stripped out by the function, so they’ll need to be styled in order to keep the front page looking smooth-ish. Alternatively, I could start using Excerpts and include those instead!

As mentioned in a previous post, I wanted to add a link to the “traditional blog” layout… just a bunch of posts in reverse chronological order. When my dad came over for a visit today, he reinforced this need– “I like your new layout, but how do I just go to the blog?”

Seemed simple. The Androida theme, upon which the new layout is built, includes 2 different layout options– “business” or “blog”. Surely I just have to link to an appropriate .php file to get what I want, right? Nope… doesn’t work that way. So I set off to find the solution. Now, I don’t know why I couldn’t find any solutions through Google, but I couldn’t. I don’t know why I couldn’t get a plug-in to do this for WordPress, but I just couldn’t find one.

So, I cooked up my own “hack” for the theme. It’s not pretty… there’s definitely a way to make it more integrated with the theme options. My way is hard-coded, which means that the theme isn’t portable without manual tweaking. So, I’ll clean it up some day if I ever want to contact Web2Feel to ask them if I can release an Androida Redux theme. But in the meantime, I had to have that link, so the quick and easy solution was the way to go.

How it’s done

What Needed Changing

WordPress loads an index.php page from its root directory, which in turn loads another index.php page from inside your theme folder. When you look at Androida’s particular index.php it looks like this (formatting my own):

In English: Get the header (loads header.php). Then check to see if there’s ANY option set in Androida (just a sanity check). If there is, use the template found in the template directory, plus the subdirectory “layouts”, with the filename $layout.php. If you have set an option in Androida, the $layout variable translates a “business” or “blog”, so the filename becomes either “business.php” or “blog.php”. Otherwise, if there’s no option set at all by Androida, use “business.php” (in other words, business.php becomes the default). Then get the footer (footer.php).

This means that you can only use one layout or the other with default Androida.

How I Changed It

However, PHP has a $_GET function which I can take advantage of. All this function does is “look at your address bar” and extract any variables that appear after a “?”. You’ve all seen these… in your address bar you’ll see something like “http://www.mywebpage.com?username=Greg&favhockeyteam=Senators”.

So, all I needed to do was invent an arbitrary new variable (I called it “pagetype” but you could call it “fuzzykittenpaws” if you want) and use it to tell Androida’s index.php something new.

In English: I wanted it so that whenever you put “http://blog.monkey-house.ca?pagetype=blog” in your address bar, you would see a blog layout.

For this to work, index.php needed to understand what to do with “pagetype”:

Most of the code is the same… that whole middle part is identical, you’ll notice. I could have “refactored” the code, and in fact I could have used the $layout variable instead of my new $pagetype… but that would require more refactoring than it was worth. So,

In English: Declare a new variable called $pagetype by using $_GET to grab it from the address bar (if there is no ?pagetype=blog in the address bar, $pagetype will become “null”, which is fine). Get the header (just like before). But now, first thing to do is check to see if $pagetype is “blog”. If it is, load the blog.php template file. This implies that if it is NOT “blog”, execute the rest of the original Androida code. Then get the footer.

Adding a Link to Navigation

The final thing I needed was a link. This is where the hard-coding breaks the portability of the theme. I opened “header.php” and located the following:

This is located inside my menu div. All it does is set a “Home” link, which gets a valid URL from WordPress, and then uses the standard “Pages” list to generate any links based on “Pages” I have (as of this writing, I have none… but that might change).

All I had to do is add an extra item to the list… a hard-coded link containing the URL with the pagetype variable–http://blog.monkey-house.ca?pagetype=blog.

It will actually be relatively easy to change this hard-coding to make it portable… it just needs to become another Androida option. But that’s for another day.

Just a first attempt to come up with a vector-based character for Mama Monkey…. also an exercise in learning Illustrator, as the idea for the graphic came from the following tutorial:

Vectips Create a Cute Panda tutorial

If I use it, I will make it smaller… add a body, and make a corresponding “Greg” character. Probably won’t use the radial background, either, but it looked good in the tutorial so I grabbed it for this as well. Here’s Mama Monkey in her monkey costume:

Eek, just realized how different it looks on a different monitor… going to have to make the “smile lines” less gray… but rather than be a perfectionist at the moment, I’ll get back to it if I decide to use this motif.

Like many things, this blog is late in coming.  It was too late coming to chronicle my time as a teacher in Mexico, my year in Northern Ontario in Kashechewan, a 1200-km bike journey from Ottawa, my blooming romance and subsequent marriage to the love of my life (she doesn’t know I plan to call her Mama Monkey on this blog… we’ll see how she takes to that!), or the first 6 months of Mama Monkey’s pregnancy.

But, better late than never.

As somebody with a certain degree of design acumen (or at least a reasonable sense of aesthetics), I thought the thing holding me back would failure in finding a non-generic blog theme that I liked.  After all, when I taught myself CSS and XHTML (polishes knuckles on t-shirt) to seamlessly integrate WP 2.2 into my website (gregdpettit.com) I had no excuses, right?  Well, after burning up my energy creating the site, I pretty much abandoned it and there it has sat for 2 years waiting to be something.

So, no, it wasn’t the theme holding me back.

That said, it looks like the cycle is beginning all over again.  I’ve installed 2.7.1 to my new domain here, and I thought, “just grab a decent theme and start blogging.”  Except, it doesn’t have my personal touch.  Even the header needs some CSS tweaks (let the height of the header be fluid) to get the original (crappy) logo I made to work right… no energy, no energy. On hold, on hold…sigh…

So What’s This Blog About, then?

I started blogging for the company I work for (blog.filecatalyst.com) and realized sometimes I would just want to ramble about random stuff. Some of the stuff that will appear here (assuming my beautiful wife never joins me in writing):

• Being a new dad
• Music (in particular, guitar playing and general home studio recording)
• Home Renovations
• Reviews of any damn thing I feel like reviewing
• The glory of Mutton Chops; one of the grandfather facial hair styles of the genealogy of beards!
• Having a pair of very different dogs in my family
• Being a husband
• Board games (my library is not deep, but my geekiness is profound!)
• Art
• Web Design

…and if I feel like doing here what I never did at my personal website….

• English grammar and usage
• Education and teaching

I know, I know… people tell me if I want a well-traveled blog, I either need a strong personality to carry it off (check out Mariel Hemingway from my blogroll), or focused content (check out Saunderslog.com). I have neither! But no matter, I will either find my niche, my niche will find me, or I will simply never have an audience. No problem!

Oo Oo Oo!
Greg