Need a WordPress website this weekend? Start here...

DIY WordPress: Thesis Theme Custom Splash Page

January 21, 2010 By

(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: , , ,