Saturday Morning Surfing: When a bug is unfixable; leave it alone

November 13, 2010 By 14 Comments

(Reading time: 5 – 8 minutes)

Programming is fun and easy compared to keeping track of everything.

One of the things I have to keep track of is the Thesis custom_functions.php source file for my Thesis custom template pages. This file sits on the web server of course, but also in a source code repository, and in a local copy running on my development computer.

Normally, this isn’t a problem.

Then I edited custom_functions.php through the built-in WordPress file editor. I forgot that the plugin editor strips out newline escapes ("\n" → "n"), which litters the web page with random letters “n” and thoroughly destroys the layout.

Now, having multiple copies is a problem, because one of the copies is broken.

So I spent a unhappy afternoon being stymied by an “unfixable bug” in the WordPress plugin editor.

“Works for me”

I’m not the only person who has had this trouble.

But none of the WordPress developers have it.

As you can see from the screen capture of the WordPress Trac ticketing system, issue #10903 is closed with a “worksforme.”

That’s a very hackerish thing to say.

I can’t say I blame them. WordPress is free software after all. If this issue really were a problem for me, I’d knuckle down and fix it myself, or pay someone to fix it for me.

Instead, I make like the internet and route around the damage.

The No-solution Solution

The no-solution solution for fixing bugs is pretty simple. Here’s a few concrete suggestions:

1. Leverage the pain of others.

Typically, when you have a bug in a piece of software like WordPress, many other people are experiencing the same problem.

Most likely, someone has also reported the problem.

Once the problem has been reported, it goes on a release schedule for eventual fixing (or not). You have little control (none) over the release schedule, so…

2. Do something else.

For me it falls into the category of “If it don’t work, find sumpin else to do.”

In my example above, I just stopped using the built-in plugin editor. I routed around the problem. Simple.

But that’s not good enough for some people. For example, Holly Jahangiri prefers a more direct approach:

That is an entirely-too-practical approach to life, David. I gravitate towards the “if it don’t work, beat your head against a brick wall until your ears bleed and some geek takes pity on you and figures it out so you’ll stop” approach. :)

3. Bang your head until your ears bleed.

A while back, Jena Isle had a problem with one of her articles submitted to Digg. The article could be loaded from her blog, but it came back with Invalid URL from Digg. It ended in my lap via Holly Jahangiri:

…”Invalid URL” has to do with special characters in the title. In this case, there are no obvious special characters, but when you try to Digg (or strangely enough, even copy from the address bar) the URL from the post page – Bam! error.

Bang your head until your ears bleed.

I did some poking around on Google, and found that it was known but infrequent problem, and nobody has any idea how to fix it. Blood, leaking from my ears… I emailed Holly something like “Don’t Digg that article.” Problem solved!

Holly, to her credit, continued to bang her head:

Oh, well, it’s still working for me – that bleeding out the ears thing – except there were no geekier geeks racing to my rescue and I did figure it out, finally, I think. For some reason, somehow, it was taking the url as having a comma before blogspot (I have no idea why, unless there’s some place to set that in the plug-in Jen’s using, but I suspect maybe, just maybe, it’s some weird error somewhere in her settings). Anyway, digging it from the FRONT page, not the post page, worked.

Yikes!

If head banging isn’t your thing (and nothing wrong with it if it is), you need to know…

When to punt

Free software such as WordPress depends on users reporting and, when possible, fixing bugs. It’s a good model, as you can see from the wild success of WordPress.

Fixing, or even reporting bugs isn’t always feasible. Putting on my developer hat, when a user can’t precisely describe a bug so that I can reproduce it, I’m not going to have time to fix it. Likewise, when I don’t have to precisely describe a bug, I won’t report it either.

Here are a few guidelines I use for deciding whether to fix or report bugs:

  • Do I have time? It’s going to be an hour’s work, at least. If fixing it won’t save me time in the long run, punt.
  • Does Google bring back junk? We’re getting close to the day when just about any keyword or phrase with traffic is going to be gamed. If I get no related results from search, punt.
  • Is the bug close to my competence level? There is this notion of a “technology stack” (which I’ll write more about in the future*). This means I’ll consider fixing bugs in WordPress, but not in the web server, etc.

NOTE: All of these guidelines apply to like activities, for example, web and WordPress theme design.

If something is just too hard to do, that’s a hint!

As a public service, here’s a recap of techniques for handling bugs:

  1. Leverage the pain of others.
  2. Do something else.
  3. Bang your head until your ears are bleeding.

Can you add to this list? What’s your special technique for handling bugs?

* BPE customers: this is a forward hook.
Filed Under: Extending WordPress Tagged With: , , , , , ,

DIY WordPress: Thesis Theme Custom Splash Page

January 21, 2010 By 27 Comments

(Reading time: 12 – 20 minutes)

NOTE (10/30/2010): I’m about 2/3 done with revising the source code to work with Thesis 1.8. Custom templates without sidebars works fine right now.

This article will be revisited after WP 3.0 and Thesis 2.0 are released.

With a little patience, you should be able to reverse engineer what you need from Thesis 1.7 using this article as a guideline.

Thanks for your patience.

Tired of looking at the same old, same old boggy bloggy home page? Want to create something unique and inviting?

Maybe you need a splash page.

Creating a custom splash page in isn’t overly difficult, but there are a few tricks to it. Here’s the view from 50,000 feet:

  1. Make backups of everything. Just do it. (You already know this, I’m mostly talking to myself here.) If nothing else, grab your whole theme folder (or the Thesis custom folder).
  2. Set up WordPress for a “static” web site. If you have a blog, it won’t be running on the front page. In this example,, we’re going to use “Home” and “Blog” for the Home and Blog pages respectively.
  3. Strip out everything you don’t need from the Home page. There’s several ways to do this. You can use CSS, or create a custom page splash page template, or use a combination of both. I’ll show you how to build up the page from scratch in this article. If you want a header, footer or different sidebars, those aren’t too difficult to implement.
  4. Create custom CSS rules as necessary. In the example, we want text boxes in arbitrary locations, so the home page source has to have custom <div> elements.

Simple, right?

I recently landed a client who wanted a splash page fronting her blog-driven website. Here’s her story and how I developed the splash page for Mo Mellady’s Planet Check.

Design parameters

The client, Mo Mellady, wanted a splash page for many of the reasons above. (You may know Mo’s work as the voice of Erin Esurance.) She’s restarting the Planet Check website and business after a year’s hiatus, and needed to move from a fully static website to a more flexible platform, one she could learn to operate fairly easily and would allow her to take more control over developing the content.

WordPress was an obvious choice.

For the splash page, Mo wanted something very clean and light. Nothing fancy, just something that set the tone for the site and could be implemented fairly quickly. Dori Yuen provided the design, and we decided to render all the imagery in the background, and overlay the text as necessary.

Another way to do this would have been to attempt to float all the images into place. That’s more CSS than any one of us cared to deal with.

Here’s what we decided:

  • Informational blurb on the home page describing a bit of Planet Check’s mission.
  • Links to draw people into the site.
  • Spiffy image to capture mood.

I spent a couple of hours doing some technical experiments on the CSS, worked with Dori to get the image sized and arranged, then got down to work.

Pre-Thesis splash page

Here’s one way to do it if you don’t own a copy of Thesis theme. As you will see when we’re finished, using Thesis for the same task turns out to be a lot easier to implement, and in the long run it will be a lot easier to maintain. Not to mention the fact that Thesis together with WordPress handles all the stupid browser incompatibilities (more on that in a few moments).

Create WordPress custom splash page template

I’m giving you the entire listing because I always hate it when people cut little snippets out of context. It’s not very long, and there’s plenty of whitespace to make it easier to read.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<?php
/**
 * Template Name: Front Page
 */
 
?>
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
<title>Planet Check</title>
 
<?php
$my_url = get_bloginfo('template_url') . '/frontpage.css';
?>
<link rel="stylesheet" type="text/css" href=<?php echo $my_url ?> >
 
 
</head>
<body>
 
<div id="page">
 
<?php
 query_posts('page_id=9');
   if (have_posts()) : while (have_posts()) : the_post();
      the_content();
?>
<?php endwhile; else: ?>
   <p>Sorry, no posts matched your criteria.</p>
<?php endif; ?>
 
 
</div><!-- page -->
 
 
</body>
</html>

That wasn’t too bad. If you didn’t quite get it… and you want to learn more about the WordPress loop, I strongly recommend purchasing a copy of Digging Into WordPress from the fine folks at Perishable Press.

Here’s the basic idea for the custom page template:

  1. Load your custom css classes. In this case, I have my CSS in a file named “frontpage.css.”
  2. In the WordPress loop, choose the correct page ID to display. Here, you can see we want page ID 9.
  3. When you’re in the “Edit Page” interface, choose the correct page template for the page you are editing:
    WordPress page template chooser

    Choosing the Splash Page custom page template

Now that we have the WordPress custom page template code written, we need some custom styling. Here’s the most relevant bits. There’s a bit more, but pasting the whole style file in would be too much. These are the critical bits:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

#main {
   float:left;
   font-family: arial;
   font-size: smaller;
   float: left;
   margin-top:450px;
   margin-left: 50px;
   width: 256px;
   margin-right: 0em;
}
 
#sidebar {
   float:right;
   width:230px;
   padding:10px;
}

This template code and CSS results in the first cut, which the client liked and was a reasonable compromise between “fast” and “fancy.”

First cut at splash page.

As you can see from the screenshot, the red boxes enclose the text and links. The orange arrow points at a vertical rule resulting from background color of an element “bleeding through” the padding on the content area. The client (Mo) liked it fine, so no problem.

However… as it turned out, Microsoft Internet Explorer refused to render it correctly.

Rant mode… (skip the rant, please)
I have to interject… this section is motivated by Microsoft. By their more-than-a-decade refusal to adhere to standards every single other web developor on Planet Earth is using. The simple, elegant CSS rules resulting in the desired layout worked very well in Safari, Firefox and Chrome… but not at all in IE 8.

Because of this, I have to spend an afternoon working – essentially for free – because of Microsoft’s business model. Thus I’m going the long way around the block and letting WordPress and Thesis handle what ought to be a trivial exercise.

I resent this. A lot.

It’s part of the reason I got out of web work 10 years ago: it was painfully evident that Microsoft was going to obstruct any attempt at a rational standard, forcing developers to do idiotic things like “css hacks.” Stupid.

And why am I ranting? Because the HTML editor in IE 8 refused to honor my line breaks. The function I just pasted in won’t work, it’s all on one line and commented out. Clicking the cursor to get focus in that form resets the form view to the first line of the form. Extremely jarring. Induces typos, deadly when working with code hosted remotely for a web application. And stupid stupid stupid.

Actually, it’s simply not possible to edit custom.css in IE 8. Not for me. The cursor won’t hold.


Ok, fine, back to Firefox and Chrome.

And since the layout was turning into a quagmire, I made the command decision to use Thesis theme instead of the free theme we had been using.

This decision cost me time, but I believe it was time well spent. For both me and you: you get valuable free information on extending Thesis, information I haven’t seen anywhere else (which is why I’m writing it).

Now let’s do it all over again!

Thesis theme splash page

If you haven’t developed a custom page in Thesis theme, start with How To Create Custom Template Pages in Thesis Theme.

Now that you’re back and armed with Thesis theme custom page knowledge, we’ll take it a little further.

As shown in the previous article, we’ll create a custom page template, add the template file to the Thesis directory, and add the functions controlling the page to custom/custom_functions.php.

For this custom splash page, we don’t want a header or a footer on the page. We do want a single custom sidebar.

Custom CSS class in Thesis

Thesis theme is so cool. You can create a custom class for each blog post or blog page. That’s what were going to do here, and it’s going to make our job a lot easier.

There’s several ways to create custom pages. For a “regular” WordPress theme, you create a page template in the theme’s root directory, and populate the template file with all the necessary commands. Thesis uses a custom page hook, which is very slick and elegant, but from what I understand, more or less limits you to a single custom page, unless you do some custom coding to select on specific, already written pages.

I do it a little differently by combining a custom page template file in the Thesis root directory which calls the custom page function in custom_functions.php. That template file looks something like this:

1
2
3
4
5
6

<?php
/**
 * Template Name: Splash Page
 * @package Thesis
 */
splash_page();

The benefits, of course, are that you can have as many custom page templates as you like, without having to program to check for page ID numbers, categories, or use any of the other numerous hacks.

Warning: If you use this technique, be aware you are adding code to Thesis which exists outside the custom directory. When you upgrade, copy or move Thesis, you will need to ensure you move all your custom page templates as well. Perhaps WordPress will evolve to support theme frameworks such as Thesis and this issue will be rendered moot.

Now we cut the code for a the actual page. Thesis makes this easy for us with lots of built-in functions which are already connected to the right hooks. Our job is to find and use only the functions we need.

(Whoa! Thunder! Lightning! I’m writing this article Tuesday afternoon January 19, 2010. We don’t get very many “real” thunderstorms in the San Francisco Bay Area, but we’re having a big one as I write. I expect the lights to go out shortly…)

Clearly, we don’t want the existing header, nor the existing footer, so let’s strip those out. Here’s the template code written to leverage all of Thesis theme’s internal functions and CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

function splash_page() {
    get_header(apply_filters('thesis_get_header', $name));
    echo '<div id="container">'."\n";
    echo '<div id="page">'."\n";
    echo '	<div id="content_box">'."\n";
    thesis_content_column();
 
    echo '		<div id="sidebars">' . "\n";
    echo '			<div id="sidebar_3" class="sidebar">'."\n";
    echo '				<ul class="sidebar_list">'."\n";
    dynamic_sidebar('Splash Page Sidebar');
    echo '				</ul>'."\n";
    echo '			</div>'."\n";
    echo '		</div>' . "\n";
 
    echo '	</div><!--content_box-->'."\n";
    echo '</div><!--page-->'."\n";
    echo '</div><!--container-->'."\n";
    get_footer(apply_filters('thesis_get_footer', $name));
}

That gets the page set up.

Your text for the page goes in the actual page. When you’re “hard coding” your layout, you need to pay attention to the length of your text, along with line breaks, font sizes, etc. You get more latitude here than in your blog. Don’t get too concerned about length constraints either. It’s only been recently, on the web, that manuscript length constraint have been relaxed. Traditionally, writers have always had to pay attention to the constraints of the page. This is no different.

Splash page sidebar

Since you’re going to be fiddling around with margins and padding of the sidebar to emplace it correctly, you need to create a custom sidebar. Here’s the sidebar code from custom/custom_functions.php:

1
2
3
4
5
6
7

if ( function_exists('register_sidebar') )
  register_sidebar(array('name'=>'Splash Page Sidebar',
			 'before_widget' => '<li class="widget %2$s" id="%1$s">',
			 'after_widget' => '</li>',
			 'before_title' => '<h3>',
			 'after_title' => '</h3>',
			 ));

Now go to “Appearance -> Widgets” and you will see “Splash Page Sidebar” ready to be populated with whatever widgets you desire. In this case, we’re loading a text widget with links into the main part of Planet Check, for example, the Planet Check blog.

Laying out the page

Here’s something that makes whatever you pay for Thesis worth the money. Seriously, this feature alone is worth a few hundred bucks of development time.

Specify custom CSS class for the page right in the page editor. Scroll down the box titled “SEO Details and Additional Style.” At the bottom, you will see a form that looks like this:

Specify custom class in Thesis theme.


Note there is no dot “.” at the beginning of the CSS class name. Prepend the dot in the style file, not here.

Next, specify the CSS rules in custom/custom.css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

/*   Splash page styling */
 
/* Get rid of the page headline */
.splashpage div.headline_area {
	display: none;
}
 
.splashpage #container {
   padding: 0px;
   border: none;
}
 
/* Lay in the background image */
.splashpage #page { 
   background-image: url("images/pc5.jpg");
   height: 974px;
   background-repeat:no-repeat;
   margin-left: 0px;
   padding-left:0px;
   border: none;
}
 
/* Shove the text down, a little to the right, and squeeze it. */
.splashpage div.format_text {
   padding-right: 150px;
   padding-top: 460px;
   padding-left: 20px;
   font-size: 150%;
   font-family: Arial;
}
 
/* Shift the text widget inside the Splash Page Sidebar */
.splashpage #text-4 {
   margin-bottom: 0px;
   padding-top: 30px;
   padding-left: 50px;
}

And here’s the completed custom splash page:

Finished splash page constructed from Thesis custom page.

Note that the headline “WELCOME TO PLANET CHECK” is actually an h4 element, not the actual article headline.

Spiffy, no?

Conclusion

Looks like we got lucky, the storm came through without knocking out the power.

The original splash page was for a non-Thesis theme. This article came together as a result of patching together the template in Thesis under a pretty tight deadline. I have a hunch there’s a lot easier ways to accomplish this same layout, using the content and sidebar CSS. Suggestions welcome for improving the CSS, the code, any aspect of the implementation, let’s hear it!

Be one of first three to implement a splash page from these instructions, I’d be delighted to link to your splash page. Leave a comment with the link explaining what you did, with a link.

Check out these example splash pages:

  1. The first splash page gets linked from here.
  2. It’s not too late to be the second splash page linked.
  3. Hurry! You’re almost out of time! 3rd is better than 4th.

Related articles

How to create a sales letter landing page with WordPress Thesis Theme

Filed Under: Extending WordPress Tagged With: , , ,