Thesis Newsletter: Home Sweet Home Page

Download a PDF version of this newsletter.

March 2, 2010

Home Sweet Home Page

I think of a blog or website's home page as the face of the entire site. It will be the first page many new visitors will see when they find it in a search engine. It's also the page frequent visitors will most often return to for current news and highlights. Fortunately, the various features built into WordPress and Thesis can help ensure you're putting your site's best face forward. Here are a few tips to help you make the most of them.

PLANNING YOUR HOME PAGE

Before you select an option in the Thesis admin panel or write a line of code in one of your custom files, you need to think about what type of content you want on your home page.

Blog posts vs. static page: The first decision to make is which of these two main types of structure you want for the page. This will primarily be determined by the overarching purpose of your site. If your goal is to educate people or share your opinions, a blog page can work well because it lets your visitors see your most recent postings right up front. If it's a business site where you're trying to sell your products or services, a static page may be a better choice for highlighting your offerings.

Note that the term "static page" isn't meant to imply that it never changes. It can include all sorts of dynamic content, including news items, daily specials, and event listings. You can also have home pages that combine both types of content on the page. For example, a static page may include a section that lists some of your most popular blog posts and a blog page can have an area for highlighting more permanent information, like the mission statement for a nonprofit or an ad for an e-book you're selling. A good example of this is the Johnny Vagabond site, which uses a blog home page but has a large featured content area at the very top.

For more information about working with static pages, check out the February 2nd issue of this newsletter.

Plain text vs. rich content: Most sites will have a combination of both text and graphical elements (which may include animation or video) on their home pages and the proportion will be determined by several factors. Text is generally better for clearly conveying lots of information ("a picture is worth a thousand words" notwithstanding) whereas graphics add more visual "oomph" to a page. Text also loads faster and gives you greater ability to optimize your site for search engines. Graphics help draw the eye to specific areas of the page so are a good choice for calls-to-action, like asking people to subscribe to a newsletter, or to showcase your work—for example, using thumbnails of writing samples, photos of successful projects, or a video with client testimonials.

Full posts vs. extracts: The Atlantic magazine recently redesigned its website (not with Thesis as far as I know:) and, in the process, changed some of the bloggers' pages so that they displayed extracts on each bloggers' main page instead of full posts. While it's not unusual for redesigns to elicit a wave of initial negative feedback (hello Facebook), the furor over this particular change has the publishers actually reversing the decision, which is unusual.

I can see the argument that blogs that are highly dependent on the writer's personality are more effective when you can read through their posts continuously without having to constantly click through to another page and back again. On the other hand, I use excerpts on Tech for Luddites because I want to make it as easy as possible for visitors to scan through multiple entries to see what might grab their interest. If someone's looking for a tip on using Twitter, it doesn't follow that they will necessarily then want to read the next post about Outlook. My blog also isn't as dependent on timeliness as many others—my most popular post by far, which is about how to unhide friends on Facebook, is almost a year old.

So, as with everything else webby, there's no one "right" answer—but you should definitely think about it as you're planning the page. Fortunately, one of the big benefits of Thesis is how easy it is to change from all full posts to a combination to all extracts (through Thesis Options > Display Options > Posts) so you can test which one works better for YOUR site and change it as necessary.

HOME PAGE VS. "HOME" PAGE

I think this is one of the most confusing things about WordPress. And unfortunately, Thesis only adds to the confusion.

Most people consider a site's home page to be the top-level page that you go to when you type in the domain name, e.g. techforluddites.com, regardless of what type of content you have on it. However, WordPress calls this your "front page." You'll see this when you go to Settings > Reading in your WP dashboard, which is where you set whether you want it to be a static page or a blog page (which they call a Posts page). (By default, it's the latter.)

To use a static page, you first have to create and publish one in the WordPress Pages panel. Then you will be able to select it from the Front Page dropdown list. You can call this page anything you want, but a lot of people will simply call it Home. (If you're going to have a blog page as well, you would then need to create a blank Page called Blog, or whatever you want to call it, and set that as your Posts page.)

The Thesis confusion arises when you get to the Thesis Options > Navigation Menu panel. The list of pages you can add to your menu will include your new static page called Home.

However, there's also a separate box for having your "Home Link" show in the nav menu. This refers to your front page, whichever type you're using.

If your home page is a blog page, then it's pretty straightforward. You would have this single item checked off if you want a link to it in your navigation menu, because you wouldn't have a Home option in the other list. However, if you're using a static page called Home, you should only check one or the other; otherwise Home will appear twice in your menu. (I'm not sure it makes a difference which one you use, but if you're having difficulties, try the other one! :)

CUSTOMIZING YOUR HOME PAGE

Once you've decided on the general approach to your home page, there are several methods available to help you make it look exactly the way you want.

Custom styles: If your home page is a static page, WordPress automatically applies a class to the <body> tag that makes it easy to target styles to that specific page. You'll see this if you right-click on the page and choose View Source/View Page Source. For example, this snippet is from a static page called Home. If you were using a static page called Welcome as your home page, the tag would say <body class="custom welcome">.

Now, if you want to tailor a style for only that page, you would add that class when you define the style. For example, some people don't want a page headline to appear at all on their home page, in which case you would put the following in your custom.css file:

.custom.home .headline_area {
display: none;
}

Note that there's no space between .custom and .home because they're both in the same <body> tag.

If your home page is a blog page, WordPress does NOT apply a unique class to the body tag (which is beyond weird to me, considering it's probably the one page you're most likely to want to customize, but anyway...). Fortunately, you can easily add a class to the body tag by putting the following code in your custom_functions.php file.

function custom_body_class($classes) {
if (is_home()) {
$classes[] .= 'home';
}
return $classes;
}
add_filter('thesis_body_classes', 'custom_body_class');

Now you can make the same kind of style changes as with a static home page.

For more information about working with CSS, check out the February 16th issue of this newsletter.

Custom functions: I wrote a post earlier about adding content to specific pages using IF statements in your custom functions (and you can see it in action in the snippet above). The important thing to note is the difference between "if (is_home())" and "if (is_front_page())". The former statement will only work if your home page is a blog page. The latter works for both blog and static pages. (If you do have a static home page, then "is_home()" will apply to your blog page, even though it's not your home page—not confusing at all!)

Custom sidebars: Some people like to customize their sidebars so that certain content only appears on the home page. One way to do this is to write a custom function to create the content and plug it into either the thesis_hook_before_sidebars or thesis_hook_after_sidebars hook. (You can also replace "sidebars" with "sidebar_1" or "sidebar_2" if you're using both but only want the content to appear in one.)

The disadvantage of this approach is that you can only put your content at the very top or the very bottom of the sidebar and you can't take advantage of built-in widget functionality.

I'm sure there's a way to write a much more involved function to deal with those limitations, but I've found the easiest way is simply to use the Widget Logic plugin, which adds a field to the bottom of every widget where you can use a conditional tag to specify which page(s) it should appear on. For example, if you want to use the Killer Recent Entries widget to list posts from a category called Featured on your home page sidebar, this is what the widget would look like.

Custom page templates: Creating a custom page template from scratch is quite involved, so I'm not going to cover that here. However, Thesis has one template built into it that can be great for a unique home page look. It's called No Sidebars and it does exactly what you'd expect—it removes the sidebars from any page it's applied to.

You set this in the panel where you create or edit a static page, in the Attributes section at the right-hand side of the page.

Note that this only works if your home page is a static page. If your home page is a blog page and you wanted to not use sidebars on it, I think the easiest way to do that would be to use CSS to remove the sidebars and resize the main content area for that page, although I haven't tried this myself to see what else might be involved. I can't think of any examples of sites that use this approach, whereas there are plenty that have a static home page with no sidebars.

JUST THE CODE, PLEASE

Adding Content Between Home Page Posts
If your home page is a blog page, this code will display a static piece of content, like a banner ad or a social media widget, after x number of posts. This sample shows how the first content would appear after the first post and the second would appear after the third post. You can simply add in more ELSEIF statements for other placements.

The image at right shows an example of how it would work; I don't actually use this on my site at the moment.

In custom_functions.php

function insert_post_content($post_count) {
if (is_home()) {
if ($post_count == 1) {
?>
[ADD HTML CONTENT HERE]
<?php
}
elseif ($post_count == 3) {
?>
[ADD HTML CONTENT HERE]
<?php
}
}
}
add_action('thesis_hook_after_post_box', 'insert_post_content');

HOT SITE SPOTLIGHT

Hawk Ridge Furniture

I think the rich green background colors of this site, designed and developed by Gregg Banse at 7th Pixel, visually support the concept of a master craftsman's work really well. I also like the use of the sidebars that nicely frame the main content area while also providing links to a lot of useful information for visitors.

You can follow Gregg on Twitter at @greggbanse.