Tag Archives: WordPress

Grabbing The Right People — Targeting Your Ads With Thesis And WordPress

One of the most annoying experiences on the Web today is being delivered the wrong ad at the wrong time. It doesn’t ruin my experience, but I’m always shaking my head, wondering why the programmers didn’t do a better job.

I was thinking about that during some redesign around here, then decided to solve a problem: deliver my Thesis affiliate image ads only to people that were reading posts related to the Thesis framework. Personally, I don’t like my site cluttered with ads, but at the right time, in the right place, to the right person, I want the flexibility of including an advertisement.

There are probably many other ways to do this, so if you have something interesting to share, please write a comment below. Now I’m going to show you how I did it.

First, you’ll need to have all your Thesis posts slapped with the same tag. You could do the same thing with categories, but I didn’t. I use the tag “thesis”. That’s how I target the right audience.

We’re going to drop some code into either the custom_functions.php file, or using the time saving plugin Thesis OpenHook, at thesis_hook_after_post. I’ll show you how to do this with OpenHook, but using the custom_functions.php file can be done too, with a little more effort.

Using Thesis OpenHook, look for thesis_hook_after_post and drop the following code in there:


<?php if (has_tag('thesis')) { ?>
<p style="text-align: center;">
<a href="http://www.shareasale.com/r.cfm?b=202503&amp;u=520806&amp;m=24570&amp;urllink=&amp;afftrack=">
<img src="http://www.shareasale.com/image/24570/468x60.png" alt="Thesis Theme for WordPress:  Options Galore and a Helpful Support Community" border="0" />
</a></p>
<?php } ?>
thesis-openhook
screenshot of Thesis OpenHook interface
See that first WordPress conditional tag there, has_tag('thesis') — well, some people might have tried using the more common, is_tag(), but they would have been wrong. The difference between the two conditions is that one looks for a binary condition — yes or no — while the other, has_tag is looking for a positive result among many possibilities. Trust me, this is the way you want to do it.

After the beginning — <?php if (has_tag('thesis')) { ?> — you can drop in your affiliate code, what ever it may be. Of course, this method doesn’t only work with Thesis affiliate links. You could use Amazon code in their for book reviews, for example. I’m sure you can think of many other applications.

And you don’t have to put the affiliate code at the end of a post. Using Thesis hooks you can drop it many other places, at the right time, for the right person.

Do you have any other suggestions on how to target ads using Thesis? Drop a comment below.

Photograph by Hans Splinter and republished here under a Creative Commons license.

If You Don’t Fix This WordPress Problem Now, You’ll Hate Yourself Later

In 2006, Darren Rowse at the ProBlogger site wrote that more than 200,000 people were still using the default page text that appears when a WordPress blog is first installed. Do you know the words I’m talking about?

“This is an example of a WordPress page, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many pages like this one or sub-pages as you like and manage all of your content inside of WordPress.”

That was in 2006. Today a Google search will pull more than 13 million results for those words. Sad. On my search, on the first page of results, I found a friend’s site listed. I’m embarrassed enough for them, it’s hard to mention what I found.

Part of the problem is that when people start their blogs, write new pages, then never delete the default page that’s created at installation. One other issue seems to be that some people don’t understand the difference between a page and a post, then write posts that should be pages, and never look at the Pages administration tab to delete the default page.

If you’ve installed a WordPress blog lately, double check your default page situation. Please.

Discover why I’m going fixed width on all my Thesis sites (and why you might want too)

I’m going fixed width (pixel based) on all my Thesis sites because I don’t want them looking like just another apple in the Thesis barrel. Now, please read the argument and rationale.

I was having a conversation with another Thesis developer last week, talking about what we liked most and least about Thesis, when I realized that one of the things that bothered me the most had nothing to do with Thesis itself, but the people who used it.  No, the problem isn’t that I personally dislike people who use Thesis.

Many people who use Thesis never get radical and make highly customized Web sites. Look at 100 random Web sites built with Thesis and you’ll probably find 80 of them very “Thesisy”; that is, the sites all have a common look or pattern to them because most of the default design options haven’t been changed very much. To change-up the common Thesis look, people need to learn some new tricks or hire the people that know the tricks. (I’m not going to link to examples of Thesisy sites because that wouldn’t be fair.)

Why is this Thesis pattern of Web design propagating across the Web? There’s a simple explanation, I think. People have the misperception that Thesis is a theme, though it does have some theme features (the design options). Thesis is really a framework (Wikipedia entry for framework). The Wikipedia entry details 4 elements of a framework:

  1. inversion of control
  2. default behavior
  3. extensibility
  4. non-modifiable framework code

By that criteria, Thesis is a framework; however, in addition to a default behavior, Thesis includes default design elements that are too irresistible not to use. If there was a framework purity test, the design options in Thesis would probably be out.

This is why I’m going with fixed width (pixel based) Thesis sites: because I can. And hardly anybody else it doing it. Thesis is a framework; I’ll do the design, thank you.

What do you think? Get it off your chest. Leave a comment below.

Photo by *Kicki* and republished here under a Creative Commons license.

How I wrangled Thesis for WordPress in 5 minutes and got a static CSS layout

This brief tutorial will show you how to customize your Thesis theme, changing it from an em based layout (flexible) to a pixel based one (fixed).

If you look at 100 Web sites built with the Thesis theme and WordPress, I would estimate that 98 of them are using the em based layout (the default). That is, the layout is flexible, not pixel based and fixed. I like flexible layouts, whether they’re em or percentage based, but sometimes that’s not the most appropriate design solution for a given project.

It’s pretty easy to build a fixed width Thesis site if you know what CSS rules to change in your custom.css file. There are four steps to change your layout from flexible to fixed:

  1. Set up your column layout in Thesis > Design Options
  2. Copy the “core layout elements” from the layout.css file
  3. Paste the core layout elements into custom.css, adding “.custom” before each rule
  4. Change appropriate em based definitions to px

Those are the basic steps we’re going to take. Let’s get into the details.

Column layout in Thesis

column preferences for billweye.com

The first thing you’ll need to do is set up your layout preferences in Thesis > Design Options.

First, here’s my obligatory rant about how these preferences are labeled. As of Thesis 1.7, the labels for column widths in the preferences are defined as “pixels”. In fact, you are not entering the pixel width you want, but rather a number that’s then translated into ems using a formula. I’m not going to go on any further, except to say that I explain this problem with more detail in my tutorial, creating a flexible header in Thesis.

Back from my rant … define the column order and widths you want. At this point, the column widths aren’t too important, but you might as well give them the pixel widths you want. The number of columns and the order you want is very important. Define these preferences and save your work.

Copying the “core layout elements”

Now you need to copy the CSS rules that define the layout of your site. There are any number of ways to get these CSS rules; I’ll briefly show you one tool that I use, Web Developer add-on for Firefox. Using that tool you can easily open up all the CSS files. Look under layout.css and find the core layout elements section, then copy all the rules under that block. These are the layout rules for this site in that block (don’t copy these! yours may differ):

 

/*---:[ core layout elements ]:---*/
#container { width: 87.1em; margin: 0 auto; }
#page { padding: 1em; }
#header, #footer
       { padding-right: 1em; padding-left: 1em; }
#content_box { width: 100%; }
   .no_sidebars { background: none !important; }
#content { width: 58.1em; float: left; }
    .no_sidebars #content { width: 100%; }
    .post_box, .teasers_box, .full_width #content_box .page
           { margin: 0 2.1em 0 1em; }
    .full_width #content_box .page { width: auto; }
    .no_sidebars .post_box { margin: 0 1em; }
    .teasers_box { width: 55em; }
       .teaser { width: 26.5em; }
#archive_info, .prev_next
     { padding-right: 2.1em; padding-left: 1em; }
#sidebars { width: 27em; border: 0; float: right; }
    .sidebar { width: 100%; }
#sidebar_1 { border: 0; }
    .sidebar ul.sidebar_list
        { padding-right: 1em; padding-left: 1em; }

 

[Beware that the formating of the CSS code on this page will look different from what you’ll find in the layout.css file. It’s just the word wrapping that’s different, otherwise the code is correct.]

Did you find your CSS code? Great, copy it and we’re onto the next step.

Paste core layout elements into custom.css

Now that you’ve copied the core layout elements, we’re going to paste those into custom.css and add “.custom” before every rule, like this:

 

/*---:[ core layout elements ]:---*/
.custom #container { width: 87.1em; margin: 0 auto; }
.custom #page { padding: 1em; }
.custom #header,.custom  #footer
       { padding-right: 1em; padding-left: 1em; }
.custom #content_box { width: 100%; }
   .custom .no_sidebars { background: none !important; }
.custom #content { width: 58.1em; float: left; }
    .custom .no_sidebars #content { width: 100%; }
    .custom .post_box, .custom .teasers_box,
    .custom .full_width #content_box .page
           { margin: 0 2.1em 0 1em; }
    .custom .full_width #content_box .page { width: auto; }
    .custom .no_sidebars .post_box { margin: 0 1em; }
    .custom .teasers_box { width: 55em; }
       .custom .teaser { width: 26.5em; }
.custom #archive_info,.custom  .prev_next
     { padding-right: 2.1em; padding-left: 1em; }
.custom #sidebars { width: 27em; border: 0; float: right; }
    .custom .sidebar { width: 100%; }
.custom #sidebar_1 { border: 0; }
    .custom .sidebar ul.sidebar_list
        { padding-right: 1em; padding-left: 1em; }

 

Pretty simple. Now we move onto the heavy lifting in creating a fixed width layout.

Making changes to em based definitions

We’ve pasted our code into custom.css, added “.custom” to all the rules, and now we need to change most of the “em” definitions to pixel definitions. A couple of notes here: 1) I’m using this site as an example, so what you’ll need to change will differ; and 2) always test your site on multiple browsers and operating systems.

Let me show you the changes I made to the above code for this site, then I’ll explain those changes to you. Here are the fixed width CSS rules for this site:

 

/*---:[ core layout elements ]:---*/
.custom #container { width: 930px; margin: 0 auto; }
.custom #page { padding: 10px 0; }
.custom #header,.custom  #footer
       { padding-right: 0; padding-left: 0; }
.custom #content_box { width: 100%; }
   .custom .no_sidebars { background: none !important; }
.custom #content { width: 550px; float: left; }
    .custom .no_sidebars #content { width: 100%; }
    .custom .post_box, .custom .teasers_box,
    .custom .full_width #content_box .page
           { margin: 0 10px 0 0; }
    .custom .full_width #content_box .page { width: auto; }
    .custom .no_sidebars .post_box { margin: 0 1em; }
    .custom .teasers_box { width: 545px; }
       .custom .teaser { width: 270px; }
.custom #archive_info,.custom  .prev_next
     { padding-right: 2.1em; padding-left: 1em; }
.custom #sidebars { width: 360px; border: 0; float: right; }
    .custom .sidebar { width: 100%; }
.custom #sidebar_1
   { border: 0; background-color:#f5f5f5;
border: 1px solid #ddd; margin-top: 2em; }
    .custom .sidebar ul.sidebar_list
        { padding-right: 10px; padding-left: 10px; }

 

First, note that I didn’t change all of the rules (the rule changes are highlighted in red). For example, I didn’t change any of .no_sidebars rules — it wasn’t necessary because at this time I don’t have any such pages, but when and if I do, I can easily make those changes in my custom.css file. Also, there are some rules that weren’t necessary to change, but they were in the same block of code so for the sake of simplicity I grabbed it all.

The trickiest change to make is the first, the #container width. That number is the product of the addition of either 2 or 3 numbers (in this example 3 numbers are added). #container is the width of your page with all the content inside, so we’ll need to add the width of your main post section and the sidebars, plus (!) any additional margins we add. In this example I added

#content (550px) + #sidebars (360px) + ul.sidebar_list (20px) = #container (930px)

The last number I added, ul.sidebar_list, is the left and right margin of the sidebar list, which pulls it away from the background and border I styled.

I’m not going to cover all the changes I made above, but let me draw your attention to a few details. On the #content_box .page I needed to take out all the margin space except for the right margin, which gives me space next to the sidebar. For the .teasers_box, that should either be the same or a little less than the #content (mine is 5 pixels less, just in case); and the .teaser should be half or less than the .teasers_box.

Otherwise, the changes should be self explanatory. If you have any questions, please leave them in the comments and I’ll try my best to answer them.

I hope you found this tutorial useful. If you have any improvements to suggest, please leave them in the comments.

Photo by ctankcycles and republished here under a Creative Commons license.

Get the most out of Google Analytics and Thesis for WordPress

There are many things you can do with Google Analytics, WordPress, and a little Thesis theme magic, but really the tips I’ll go over here don’t require Thesis. Most of what you’ll learn here can also be applied to just about any WordPress theme with a bit of customization.

Before I lay the tips on you, let me point out that there’s a useful plugin called WordPress.com Stats. Don’t let the name fool you, the plugin is for self hosted (WordPress.org) blogs. In addition, you might also want to use WordPress.com Popular Posts (you need Stats for this plugin); the Popular Posts plugin gives me that widget on the sidebar of billweye.com. I like using the Stats plugin because it provides a quick, rough idea in real-time of my blog traffic, which isn’t Google Analytics’ strong suit.

Tools you’ll need

There aren’t many things you’ll need to improve the data collection from your blog using Google Analytics. Start with these plugins:

This tutorial assumes that you have a Google Analytics account, have it set up, and have some very basic understanding of how it works. This isn’t a tutorial about how to use Analytics, it’s to show you how to capture customized blog traffic and action data with Analytics if you’re using a Thesis theme (or not).

Tip 1: Installing your Analytics code

We have to start with this one if you’re using the Thesis theme: under Thesis > Site Options > Stats Software/Scripts never add your Google Analytics code here (I don’t know anything about Mint or other stats software). Never. I know what the fine folks at DIY Themes say; still, don’t install your Analytics code using their method. If you do, then Analytics will also be tracking page views of your traffic on the site, which doesn’t make much sense. To get the most accurate site traffic data, you shouldn’t be tracking any of the administrators, editors, or authors on the site (or at least segment that traffic, which you can do with a Analytics plugin). This is one reason you’re going to install the Google Analyticator plugin, to cut out all of undesirable traffic from your stats.

Tip 2: Getting the most out of your Google Analytics plugin

Before we start customizing the theme, let’s get the most we can out of our Analytics plugin. I’m going to reference Google Analyticator, but for the most part all of the WordPress Analytics plugins have the same features.

As I said above, you do not want to track logged-in users, so make sure that feature is turned off. There are now more granular options in the plugin for logging specific user roles, such as premium subscriber or subscribers. This is a nice feature.

Enable both “event tracking” and “outbound link tracking”. When visitors click on outbound links or downloads, those are events that should be tracked.

If Google Adsense ads are on your site, you should definitely enter your account ID (make sure your Adsense and Analytics accounts are linked). This is going to give you much more information in Analytics, such as what pages are generating the most ad clicks. If you have one page that’s outperforming all the others, you can study the page for the reasons the ads are performing well and try to replicated that formula on other pages.

Tip 3: Using tracking codes for site visitor behavior

Links good for event tracking

Tracking the behavior of visitors to your site might be important. For example, wouldn’t you like to know every time someone subscribes to your RSS feed? That’s an event to be tracked. If you’re using the Thesis theme that may be tricky, depending on what you’re looking to track. In this example, I’ve developed a RSS subscribing widget that fits my needs, that includes other things like a YouTube, Flickr, and LinkedIn links (in another tutorial I’ll go over my “stay in touch” widget). I can go in there and manually edit all those links. First, the code you’ll need:

<a href="http://yourdomain.com"
onClick="pageTracker._trackEvent('category', 'action', 'optional label');">Anchor Text</a>

What you need to do now is customize the variables of the event: category, action, and optional label. For example this is how I might track people clicking on my LinkedIn profile link:

<a href="http://yourdomain.com"
onClick="pageTracker._trackEvent('intouch', 'followlink', 'linkedin');">Anchor Text</a>

Many people get confused about what variables that can or should use when tracking events. The short answer is, there is no wrong answer; it’s totally up to you and what kind of data that you want to gather. With that said, you want to be smart. In this example, my logic was pretty simple. For the category I used the name of the area where I’m tracking links; any tracking code under Stay In Touch will have the category of “intouch”. The action I was tracking was following links, thus I used “followlink” (note: I will probably use this action with other links on the page because it isn’t category dependent). Lastly, the label is “linkedin”, which is self explanatory; this label should be the one unique variable that you use.

These variables are important because they’ll help you create some great reports in Analytics. In this example, I can create reports that tell me all about the Stay In Touch area (category), or create reports about one specific action on my site (followlink), or I can combine “followlink” and the label “linkedin” (imagine I was tracking multiple “linkedin” links on my site) and see in total how many people were clicking on my LinkedIn profile link. You could go wild creating customized reports if you capture the right data.

Tip 4: Advanced data capture

Let’s continue with the same example, my “stay in touch” widget. But now I want see how effective that widget is on my home page, compared any other page on my site. I’m thinking that even though my home page gets the most traffic, for some reason the widget’s not performing as well as when it’s on a single entry page. That’s the premise for this tip.

"stay in touch" with widget logic

Given this problem, what I need to do is create two “stay in touch” widgets that are the same except for the tracking code, then serve these different widgets onto the appropriate pages (home page, then all other pages).

To begin, we need to install the Widget Logic plugin I mention above. There are similar plugins that purport to be simpler, but I don’t find them such because their user interfaces are convoluted. With the Widget Logic plugin and a little knowledge about WordPress conditional tags, you can do some clever things.

If you look at the image to the left you’ll see my “stay in touch” widget with the Widget Logic field highlighted. That’s where you enter the conditional tags (this example is simple; using PHP you can get pretty elaborate). We’re going to create two of these widgets, one that has is_front_page() (is the front page) and the other with !is_front_page() (is not the front page) in the Widget Logic field.

Next we want to make changes to our tracking code, leaving everything else untouched for our experiment. For the home page (is_front_page()) I’ll use this as the tracking code:

onClick="pageTracker._trackEvent('intouchhome', 'followlink', 'linkedin');"

and for all other pages (!is_front_page()) I’ll use this tracking:

onClick="pageTracker._trackEvent('intouchothers', 'followlink', 'linkedin');"

Notice how I changed up the category? Now in Analytics I can create reports comparing the two.

Of course, this is a simple example of what you could do using Widget Logic. If you’ve done some other cool things, please drop a note in the comments.

I’ve got many other ideas for Thesis/Analytics tutorials. What do you think would be most useful?

Give birth to 10 WordPress blogs in 30 minutes

If you need to roll out multiple WordPress blogs, this article is for you. I’m going to show you how to set up 10 blogs in 30 minutes, or I’ll eat my hat! Not only that, but we’ll set them up with a standard group of plugins, extra search engine optimization, and security hardening to prevent hacking of your blog.

Here are the 4 basic steps:

  1. prepare the WordPress and plugins upload
  2. set-up your databases
  3. configure your wp-config.php file
  4. WordPress install process

Let’s get started.

Preparing a WordPress installation archive

First, download the latest version of WordPress (WP). Here’s the clever part of this step: because of the WordPress automatic update, you’ll never have to do this again. As I write this WP is at version 2.9.2, but when the next version is released and I want to install a new blog, I’m going to upload the older version (that I’m going to customize) from my computer. After I upload version 2.9.2 I’ll upgrade by going to Tools > Upgrade.

Now that you’ve downloaded and opened the zip file to your computer, let’s customize a couple of things. You’re going to need a plain text editor like Notepad (Windows) or TextEdit (Mac) to create four files. Make sure it’s a plain text editor that can create asci text files, otherwise you might have problems.

The first text file you create is named robots.txt. This file is where you’ll include the rules for search engines that index your site; if you restrict the search engine bots from indexing extraneous files on your site, it’s better for the good content on your site. These are the rules for your robots.txt file:

 

User-agent: *
Disallow: /cgi-bin
Disallow: /wp-admin
Disallow: /wp-includes
Disallow: /wp-content
Disallow: /trackback
Disallow: /feed
Disallow: /comments
Disallow: /category/*/*
Disallow: */trackback
Disallow: */feed
Disallow: */comments
Disallow: /*?*
Disallow: /*?

Sitemap: http://www.yoursite.com/sitemap.xml.gz

 

See that last line? That tells search engine bots where you’re site map is; we’ll get to that in a moment, but for now just change the domain to yours. Save the robots.txt file into the WP directory that you unzipped.

Next we’re going to create the .htaccess file. This file can do many things, among them it includes the rules for your permanent link structure (found under Settings > Permalinks). Add the following rules to your .htaccess file and save it into the WP directory.

 

Options All -Indexes

# protect wp-config.php
<files wp-config.php>
Order deny,allow
deny from all
</files>

RewriteEngine On
RewriteCond %{HTTP_HOST} !^www\.
RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L]

 

wordpress directory
Highlighted files we'll be working with

First, note that depending on how the preferences are defined on your personal computer (Mac or Windows), you may or may not be able to see any file that begins with a period, as in “.htaccess”. Because of this, it’s probably best to not include the period when you save the file into your unzipped WP directory; you can add the period (don’t forget) after all the files in the WP directory are uploaded to your server using FTP (or better, SFTP). Also, after uploading  the file, removed the “.txt” so that the file’s name is “.htaccess”.

Looking back at the code I gave you for the .htaccess file, let’s review it from the top. To begin with, the first rule tells the server NOT to display the contents of any directory that doesn’t include any type of index file, such as index.php or index.html. This is for the security of WordPress and your server.

The next rule is also for security, and depending on your server may be redundant, but nevertheless won’t hurt anything. The rule allows access to your WP configuration file only from your server.

The last rule in the .htaccess file is for better tracking of statistics if you’re using something like Google Analytics. Did you know that “www.yourdomain.com” and “yourdomain.com” are two different things for search engines and site stats applications like Analytics? True. That means if you don’t force all your site visitors to one or the other domain URL, you may only be tracking some people. So, that last rule forces the server to always add “www” to your domain URL.

The last two text files you’ll create are “sitemap.xml” and “sitemap.xml.gz“. These are empty files that’ll be used by a plugin we’ll talk about soon. Don’t worry about them, though note that you might have to change their permissions using your FTP program in the future, depending on how the server is configured. The plugin will throw an error and tell you if that’s the case. No worries!

Gathering your WordPress plugins

Part of what makes the process I’m showing you so efficient is that you’re doing preparation that doesn’t have to be repeated in the future. So, gathering your plugins first and putting them into the ‘wp-content/plugins’ directory (unzip the plugins and delete the .zip files) will make your life easier. It makes sense because, at least for me, with minor exceptions, I generally always use the same plugins across many different WP Web sites.

You can develop your own set of go-to plugins (favorites), but here are the ones I recommend:

Again, this is the set of plugins I commonly use. Your set might be different. But, as with the easy updating of WordPress, the same is true with the plugins. If after uploading the WP directory you see that some of the plugins need updating, no problem: go to Tools > Upgrade and update all the plugins in one shot. Finished.

Set-up your databases

Because there are so many variations on how to set-up your database, depending on your server, I’m not going to get too deep into the details. I will note one thing: use strong passwords and unique database and user names. Make them a little weird, for security sake. Other than that, copy down the database info and let’s move on.

Configuring the wp-config.php file

This is straight forward, though let me recommend two things you should do. Under “Authentication Unique Keys” always make the effort to get your keys from https://api.wordpress.org/secret-key/1.1/ and copy them into your wp-config file. Always.

Second, under “WordPress Database Table prefix” always change the default “wp_”. This is for the security of your database. Never use the default. I always throw some random numbers in there like this: “w865p_”. It’s another small step for security, not using default or easily guessed values in your blog configuration.

Installing 10 Blogs Process

You’re ready. You’ve created a customized WordPress directory that you can upload multiple times. Look at that image above of the directory; does yours look like that? It should.

With your first database set-up and the wp-config file squared away, start uploading to your server. While that’s happening, on your other domains create your the WP databases, copying down the corresponding information. After the first upload is finished, move onto the second domain by editing the wp-config file again with the new information, then save. Upload to the second domain. And so on.

See how easy it is to roll out many WordPress blogs once you have a customized directory set up?

If you have any other tips that should be included in this tutorial, leave them in the comments. I can always learn something new.

Photo by Scott Beale (Laughing Squid) and republished here under a Creative Commons license.

Creating a flexible header using Thesis and WordPress

The following is a tutorial on how to create a full-width image header using the em based layout in the Thesis theme for WordPress.

Increasingly I’ve been using the WordPress framework Thesis to develop Web sites. Some call Thesis a theme, others a framework. I think it’s more of a framework because there’s too much design work to do after installing Thesis, if you really want to customize it.

One of the aspects of Thesis I see people struggle with is the em based design, which is in contrast to the pixel based design so often found on the Web (here are some em resources: Wikipedia definition and history; pixel to em conversion table; general information about using ems in CSS; and using ems to create an elastic layout with css). Out of the box Thesis uses ems to measure just about everything you can think of, including font and column sizes. In general, that’s a good thing expect for the fact sometimes it can cause layout problems with images.

Bird Language site in Safari
Bird Language site in Safari

Depending on the browser or operating system, ems may scale differently; plus the pixel to em conversion isn’t an exact science. Yes, despite all these issues I still think em based design is often the way to go. For visitors to your sites, ems are more flexible.

I want to show you how to create a full-width header for your site that has an em based layout. This technique isn’t really Thesis dependent; you could apply the same technique on any Web site with an em based layout. Onward!

First, let’s look at the problem. The screenshot to the left is of a site using the Firefox Web browser for Mac OS X. You’ll find similar design reproduction in Safari for the Mac too. Notice that header image? It doesn’t span the entire header because the image is measured in pixels, but the layout is defined in ems. Mark this: even though in Thesis preferences you’re defining the column widths in pixels, the CSS is produced in ems. That is my biggest complaint about Thesis because most people don’t understand what this means.

Eagle Hill School site in Firefox
Eagle Hill School site in Firefox

Think of it like this: you bring plans to a cabinetmaker measured in inches, but when the cabinets are delivered they were produced based on centimeters. You could do that using a conversion, but the finished product might not be exactly what you were expecting.

Let me help you create a full-width image header that solves this problem (and retains the search engine optimization Thesis gives your site).

The two example sites I’m using are the Eagle Hill School Teacher Training (that I designed) and the Bird Language site someone pointed me towards. I’ll be showing you how to create a header like the Eagle Hill School site.

background image
#header background image

First, start with your image design. Your final design will actually be broken into either 2 or 3 different images (all PNG files). With the example at hand I used 2 different images, but I’ll show you why you might want to use a third image.

Take a look at that #header image on the left. The image is much wider than the design would ever require (1840 pixels), but we do that just in case. This image is for the background of the header ID, which is defined thus:

.custom #header {
position: relative;
height: 199px;
padding: 0;
border:none;
margin: 0 0 1em 0;
background: url(images/grass_wide.png) 100% 100% no-repeat;
}

That CSS defines the height of the header (no more than the image height), give a margin if you like, hooks up the background image (which you put into your custom directory in Thesis), and ensure that the image spans both 100% of the height and width without repeating. Notice that I used a PNG file here even though it wasn’t absolutely necessary (it’s not a transparency). I could have used a JPG image, however if I used a JPG for the background and a PNG file for the floating logo, there would have been a problem with color reproduction and matching. Better to make all images PNG.

background image 2
background image for the #logo

The next image I need is for the logo ID in CSS. This is a transparent image that floats over the background. When you’re designing the header create your background and logo together, then export each image individually. Also, this is important: depending on where you plan on positioning the logo, give your background plenty of space to put it. Notice the tractor in the background is on the right of the image, but the left side (where my logo will be) is clear of distracting information.

Let’s look at the CSS code that produces the logo:

.custom #logo {
text-indent:-9999px;
width:694px;
height:199px;
margin: 85px 0  0 15px;
position: absolute;
padding:0;
}
.custom #logo a {
display:block;
text-decoration:none;
height:119px;
background:transparent url(images/headertext_trans.png) 0 0 no-repeat;
}

We’ve got two things going on here: a definition for the logo (positions where the logo will be) and the link inside the logo property (where we put the image). One important note: the width and height of the #logo is the width and height of your image. That’s it, except for one more thing …

In the Thesis header there’s also the tagline ID. There’s a couple of different ways to handle the tagline: you can do like I did in this example and hide it using CSS (it will still be available for indexing by search engines), or you can create another image (the third image) and float it opposite from your logo. Here’s the code I used for hiding the tagline:

.custom #header #tagline {
text-indent:-9999px;
width:1px;
height:1px;
display:hidden;
}

That’s pretty straightforward, but what about using a background image for the tagline and hiding the text? I can help you with that. Just look at the header of this site. While I don’t use a background image for the header, I do replace the tagline text with an image (the image of people in the header is actually the tagline). Here’s the CSS code that will make that happen:

.custom #header #tagline {
text-indent:-9999px;
width:363px;
height:77px;
position: absolute;
top: 10px;
right: 0.6em;
background:transparent url(images/people.jpg) 0 0 no-repeat;
}

The trick here is positioning the image. Depending on your site, you’ll have to play around with that. Looking back at the example we started with, I could have made that tractor a third image to replace the tagline text, instead of hiding the text.

I hope this tutorial can help in your Thesis development. If you have any suggestions please drop it in the comments below.

Upgrade your blog to Greymatter!

Greymatter Metamorfigure
Creative Commons License credit: Laughing Squid

With the release of WordPress 2.5 there was an interesting post by Anil Dash asking people to consider upgrading their blogs to Movable Type.

Well, as long as Mr. Dash is getting all old school on us, I want to recommend that people upgrade their blogs to Greymatter, the blogging tool that I was using back in 2000. No, I don’t use it anymore, but it was a hell of a tool back then. Static pages? Yup, Greymatter has those. Plugins? Nope, don’t need those. Just go into the base code and hack the shit out of it. Shrinking developer community? Yup! I don’t know of any blog currently running on Greymatter. And, since Mr. Dash so hot about raising the flag to cite Movable Type as being first to use various technologies, I want it to be recognized that Greymatter was around before MT, so it must be better, damn it!

I don’t need to write 1500 words like Mr. Dash to prove my case that Greymatter is the best, you be the judge.