You are here: Home » Extending WordPress » DIY WordPress: Thesis Theme Custom Splash Page

DIY WordPress: Thesis Theme Custom Splash Page

by Dave Doolin on January 21, 2010 · 24 comments

(Reading time: 12 – 20 minutes)

NOTE: this code doesn’t work for Thesis 1.7 or greater versions. 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



Would you like more? Send me a letter...
"Hi Dave,
Website In A Weekend seems pretty cool. I'm serious about this WordPress and web stuff, and I'd like to keep up with it. My name is and my email address is . I'm comfortable with email newsletters. I know you will protect my privacy, and that I can unsubscribe at any time. "

Tagged as: Custom page template, Heroes link!, Splash page, Thesis theme

{ 23 comments }

Gordie January 21, 2010 at 2:21 am

And this will only affect one page? I have tried in the past to create a one off unique squeeze page and changed all pages except posts.

Keith January 21, 2010 at 6:14 am

FlexSqueeze Pro version is a theme designed just for making squeeze pages, might be worth checking out. I use the Flexibility2 theme on my site(s) right now (free version) and I really like them.

I have thought about upgrading to Thesis for my new project I am working on, but I have actually heard some rumblings about Thesis not being as good as it claims so I am still researching it.

Heather Kephart January 21, 2010 at 7:14 am

Holy snap! :-O

This is a bit above me at the moment, but I know it will help a lot of folks so I’m going to Tweet & Stumble it. Good work!

Also, really nice of you to put an estimated reading time up there!
Heather Kephart´s last blog ..Reality check, please! My ComLuv Profile

Dr Wordpress! January 21, 2010 at 7:47 am

@Gordie – Yep. Read through it carefully, you’ll see how it works.

@Keith – If I had the time & money, I’d buy several of the top themes and compare them.

@Heather – I don’t have a single audience for Website In A Weekend, so I tend to rotate my writing to each audience over time. This article’s audience is 1. Thesis folks, and 2. search engines. It will end up ranking quite well long term; love that organic traffic. Let’s connect up on SU as well.
Dr Wordpress!´s last blog ..MasterMind Power I: How 5 Boys Achieved Unparalled Success My ComLuv Profile

Lisis January 21, 2010 at 7:55 am

Wow! Totally over my head (as you know) but I will say, the finished product is GORGEOUS. :)
Lisis´s last blog ..The Harvard Psychedelic Club Blew My Mind My ComLuv Profile

Anne January 21, 2010 at 8:33 am

A splash page can be good for some blogs, but obviously not for everyone. It’s a great and very detailed tutorial – if I ever need a splash page, I’ll be sure to come back.
Anne´s last blog ..Keyword Synonyms and Google My ComLuv Profile

Gabe | freebloghelp.com January 21, 2010 at 8:45 am

I’m not a huge fan of splash pages but this one looks amazing! It looks like this one was done right!
Gabe | freebloghelp.com´s last blog ..Stop struggling — 54 article ideas for ANY niche My ComLuv Profile

Deacon January 21, 2010 at 9:45 am

Looks like Thesis makes things a whole lot easier. I custom coded my splash page for BDD, and it was a pain. All of BDD is custom coded, however.
I really aughta write a separate CSS file for my splash page, right now I have everything in one big CSS file.
Deacon´s last blog ..DayJob v ArtJob, Round 1 goes to DayJob My ComLuv Profile

Thomas January 21, 2010 at 11:40 am

Very nice work!! I love the color and black and white contrast. Personally I love the more graphically inclined websites and blogs. The newspaper plain style is just to mute and boring.
Thomas´s last blog ..Reach Out and Get Those Links! My ComLuv Profile

Amanda January 21, 2010 at 12:15 pm

Great tutorial, Dave. The end result is beautiful.

I especially enjoyed the rant about Internet Explorer. IE has always given me more headaches than happy rainbows.
Amanda´s last blog ..Staring Down a Tunnel My ComLuv Profile

Dr Wordpress! January 21, 2010 at 12:23 pm

@Lisis – it’s pretty well laid out by the numbers. I bet you could figure it out pretty fast.

@Anne – Yep.

@Gabe – I’m not the biggest fan either. Most of them are built in Flash, not my cup of tea. These things seem to run in cycles. Maybe we’ll see another cycle kick off soon.

@Deacon – Let’s talk about splash pages next weekend.

@Thomas – Thanks!

@Amanda – Heh… told ya! Let me know if you see anywhere I’m technically out to lunch here. I’m pretty sure I’ve missed something critical.
Dr Wordpress!´s last blog ..MasterMind Power Part II: Napoleon Hill – Father of the MasterMind My ComLuv Profile

Josh January 21, 2010 at 4:19 pm

Sweet tute Dave – you might even get me to stop being such a tight ass “Bah, I can do that myself!” programmer one day and switch over to Thesis too :)

I have to say, the page turned out very professional.

One question, what made you choose a h4 element over using a h1 – I notice you’re missing a h1 element entirely on this landing page which I’ve heard Google might not like so much. I’m not an super SEO expert but like to dabble and expand my knowledge where I can, could you share the reasoning?
Josh´s last blog ..Setting Up My Web Design Mini Business [Case Study] My ComLuv Profile

Dr Wordpress! January 21, 2010 at 4:23 pm

Josh, pure need for speed and formatting! I haven’t done any simple SEO on the landing page at all.

But I should.

I haven’t set up the SEO for the entire site yet either, on my todo list.

Thanks for the kick in the butt.
Dr Wordpress!´s last blog ..Blogging Katamari Style (I’m gonna roll you up!) My ComLuv Profile

Josh January 21, 2010 at 4:37 pm

Ahh I can relate :) Sometimes it just gets pushed to the back when getting the damn thing up and running is the priority.

It’s still quite a sexy looking site if I may say, love the organisation (great looking use of Thesis – nice and simple) and of course the nice graphics by Dori.

This has been one of your best articles so far I think, but then, I could be biased because it’s written in the style I’m using on my own site as well!

Stumbled and tweeted, my friend.
Josh´s last blog ..Setting Up My Web Design Mini Business [Case Study] My ComLuv Profile

Ricky Buchanan January 21, 2010 at 5:43 pm

Excuse my stupidity here, but what is it about Thesis here that makes your splash page creation easier? It seems that the only difference you’re using is the page class in the body tag – am I right?

I don’t think this counts as a splash page, but the front page on http://nopitycity.com/ is hand-done and customized. It’s not static though – even a reload will change it.

r
Ricky Buchanan´s last blog ..How Do I Use An iPhone Web App? My ComLuv Profile

Dr Wordpress! January 21, 2010 at 5:51 pm

Ricky! Great to see you back!

That’s a great question. The easiest answer for me is to say: “check out the code listings.”

(I need to caption those listings: Listing 1, Listing 2, etc. just like LaTeX.)

Basically, using Thesis lets me dispense with hand-rolling the loop, testing the page ID, providing the head element, closing the body and html elements, and a bunch of other various and sundry chores, none of which are difficult, all of which are tedious.

I don’t have to fool around with the CSS very much. With the hand-rolled, I defined some custom elements, loaded up a custom style sheet, and had to div the page manually.

With Thesis, I don’t have to div the page at all. Just define the class, add that the changes to the existing style sheet, and add a simple text widget to the sidebar.

The benefit to the client is she never has to worry about screwing up the divs on the page.

I gotta run, please come by more often. You ask the best questions. And you’re not stupid at all, far from it.
Dr Wordpress!´s last blog ..When B.L.O.G. Turns into J.O.B. – Downshift and accelerate My ComLuv Profile

Tuan Anh January 21, 2010 at 8:18 pm

That’s really long tutorials, I haven’t enough patience to do that, but anyway, thanks so much !!!!

Alexandra March 24, 2010 at 9:04 am

This is brilliant Dave, just what I’ve been looking for. I love Thesis and have been using it for my blog for some time now. I’m definitely gonna try this out for my new company website which I want to build with Thesis too, using a static front page. Thanks!

Dave Doolin March 24, 2010 at 9:10 am

Setting the custom class in the page editing interface is absolutely key. Much more difficult if you leave that out.
Dave Doolin´s last blog ..The Starfish Principle – Trying counts as success My ComLuv Profile

Joseph Engel June 12, 2010 at 5:31 pm

Hi Dave,

I just tried implementing this in Thesis 1.7 and can’t seem to get it to work properly. Will these steps will work?

Dave Doolin June 12, 2010 at 5:35 pm

No, won’t work for 1.7.

The Thesis API changed in 1.7.

I’m not happy about that at all, but that’s Chris’s prerogative.

I’m going to circle back around when WP3.0 and Thesis 2.0 are both released. Don’t want to waste my time chasing a moving API.

Thanks for reading.
Dave Doolin´s last blog ..WordPress Widget Plugin – Super easy customization (Tuesday means technical)My ComLuv Profile

Joseph Engel June 12, 2010 at 5:41 pm

Thanks for the lightening fast reply!
After spending a large part of the day working on this I was really beginning to question my sanity!

Any ideas on how I could accomplish the same thing currently?

Dave Doolin June 12, 2010 at 5:49 pm

Reverse engineer it. Start with the no_sidebars.php and rip out the header and footer code.

Keep an eye on the containers so you get your CSS working correctly. That’s really the key to it. The CSS example above should be more or less fine.

Comments on this entry are closed.

{ 1 trackback }

Previous post:

Next post: