by Adam Barber on June 9, 2010
Sorry for the radio silence! I’ve been hard at work on a bunch of new projects, one of which I’m announcing today! So without further delay, a few things…
- New Premium Skin Released! – It’s called Secret Agent, and I think it’s pretty awesome. You can visit the skins page to find out more. Also, if you buy before midnight on Friday, you save 20%, and get free professional installation. That whole package usually costs $100, and during launch week you get it for $40. That’s 60% off. Hurry, before the deal is over.
- I’ve got many more great tutorials in the works, so stay tuned for those. As always, if you have any suggestions for tutorials you would like to see, drop me a line.
Thanks!
by Adam Barber on May 4, 2010
Note – This is the first article in a series about using data-driven methodologies to improve your site. Want to learn more about how data collection and testing can improve your bottom line? Contact me!
I need better statistics. Now.
As any serious Thesis blogger knows – good statistics matter. A lot.
The problem is, for most people, Google Analytics provides too much data to be useful. Do you know which visitor

Clickheat Overlay of http://thesisready.com/skins.
segment is your most profitable? Least profitable? Odds are that while you have Google Analytics (or something similar) installed, you aren’t getting very much actionable intelligence from it. Knowing your monthly page views is cool, and can be fun to brag about, but it doesn’t help you get more readers. It’s a symptom of something, not the cause.
Shortly after the relaunch of ThesisReady, I got fed up with not having enough usable data available to help me improve my site. I needed something that would be able to quickly tell me what I was doing right, and what I was doing wrong.
The first thing I looked into were things called “heat maps.” There are a ton of companies offering heat map data collection as a paid service, but before I committed to anything, I needed a free alternative to test. After all, at that time I had no idea if using heat mapping software to track clicks would lead to a better experience for my website visitors.
For the record, I was dead wrong about that initial assumption.
Using ClickHeat
The free software I ended up using is called ClickHeat. Installation only took a few minutes. All you have to do is upload the ClickHeat folder to your website’s root directory, and hook the java script code it gives you into the “wp_footer” hook via the custom_functions.php file. At that point you’re up and running. Easy enough.
Once the software is installed, you can visit http://yourdomain.com/clickheat to log in and look at your data.
Understanding the Data

ClickHeat overlay of footer widget.
After a few days, depending on the amount of traffic your website gets everyday, you’ll begin to get accurate maps of where, and how often, visitors are clicking on your site.
One of the most interesting things I’ve discovered so far is that the “More Skins” widget in the footer is getting a lot more clicks than I had assumed. As you can see from the screen shot, so far today there have been quite a number of clicks. Now that I know this area of my site gets a lot of attention, I can focus future tests there to find out how best to optimize that space.
by Adam Barber on April 10, 2010
I was working on a project for a client the other day and the host they were using was fighting me at every turn, and causing all kinds of Thesis and skin problems. In order to make the ThesisReady skins as good as they can possibly be, for as many users as possible, I wanted to conduct a little research. Use the poll below to let me know which host you are currently using. If you’ve got other hosts that I haven’t included, be sure to let me know in the comments so I can add them.
Also – SUPER IMPORTANT: Please retweet this and encourage others to vote so I can get an accurate answer. Thanks!

Loading ...
by Adam Barber on April 8, 2010

Secret Agent Thesis Skin by ThesisReady
I’m working on a new Thesis skin this week, and I’d love some feedback. Thoughts so far? What features would you like to see included?
Thanks!
by Adam Barber on March 29, 2010
I spent a few days working on a client site this past week, and after spending a few days working through ways to increase conversions, I figured I would share one of the more interesting techniques I employed – displaying targeted content to visitors based on which site they visited from. There are a number of applications for this, one of which is showing Adsense blocks only to users who visited from a google search. To understand why this helps, you need to understand a little bit about how your visitors are thinking when they access your site.
In most cases, when someone visits your site via a Google search, they are in pursuit of very specific information. If you have what they want, their search ends and they’ll stick around to learn what they need to know. If not, the search continues on to the next site. This happens in one of two ways. 1. They hit the back button and return to the original search query. 2. They click on a link, or ad unit, that takes them to a new page which, they hope, will have the information they need. Users who aren’t in the process of a search act differently, and therefore are probably less likely to click an ad unit.
Therefore, showing ad units to all visitors, regardless of origin reduces your CTR, and over the long run, can devalue each individual ad-click on your site. That’s not a good thing.
To remedy this, we’ll improve upon the standard Thesis/Adsense integration.
function standard_adsense_function(){ if(is_single()) { ?>
<!-- Your Adsense Code Here --!>
<?php } }
add_action('thesis_hook_after_post', 'standard_adsense_function');
The above code is how most go about integrating Adsense into the space after a post in Thesis. Using a WordPress conditional tag, it checks to see if the page being viewed is a single post, and if it is, the Adsense block is dropped in after a post. Pretty standard stuff, but it makes no distinction between users visiting via a search, or via twitter or some other site where the chance of an ad click is lower.
Let’s do it the right way now.
function better_adsense_function() {
if(isset($_SERVER['HTTP_REFERER'])) {
$ref = $_SERVER['HTTP_REFERER'];
if(stristr($ref, 'google')) { ?>
<!-- Your Adsense Code Here --!>
<?php } } }
add_action('thesis_hook_after_post', 'better_adsense_function');
The second line of the function is where the magic happens.
if(isset($_SERVER['HTTP_REFERER'])) {
This checks the http header, which includes the source of the visit. The next line
$ref = $_SERVER['HTTP_REFERER'];
saves the referrer string to a php variable, which we can use to run a test on in the next line
if(stristr($ref, 'google')) {
You’ll notice the second part of that check is set to “google.” If any part of the referring url contains that string, the statement is true and will output anything in that block.
Bam – easy way to improve your Adsense CTR.
Next time – displaying different blocks to different referrers. Perfect for fine tuning your calls to action.
by Adam Barber on March 26, 2010
Here’s a quick tip to keep your custom_functions.php file organized, by using smarter hooks.
The Old Way
When most people add new functions to Thesis they create a new function, and use
add_action('thesis_hook_here','your_function_here');
This means works pretty well for a small number of hooks (say 10 or less, I find), but when developing custom skins, or complex sites for clients, I find I can end up with A LOT of functions that all need to go to different places and use a lot of conditional tags to set correct placement. Done the normal way, it looks like this
function custom_home_page_function() {
if(is_front_page()) {
echo 'This is only going on the front page.';
}
}
function custom_home_page_function2() {
if(is_front_page()) {
echo 'This is only going on the front page, but in a second spot.';
}
}
function custom_home_page_function3() {
if(is_front_page()) {
echo 'This is only going on the front page, but in a third spot.';
}
}
add_action('thesis_hook_here','custom_home_page_function');
add_action('thesis_hook2_here','custom_home_page_function2');
add_action('thesis_hook3_here','custom_home_page_function3');
The New Way
Seems easy enough, but if you look carefully, you’ll see that the “is_front_page” check is being repeated for each function. When possible, you should always try to avoid repeating yourself when writing code. This doesn’t do that. In fact, with the conditional tag in each function, you may end up repeating it dozens of times. Not good. Instead, we’ll do the following
function custom_home_page_function() { echo 'This is only going on the front page.';}
function custom_home_page_function2() { echo 'This is only going on the front page, but in a second spot.';}
function custom_home_page_function3() { echo 'This is only going on the front page, but in a third spot.';}
function front_page_functions() {
if(is_front_page()) {
add_action('thesis_hook_here','custom_home_page_function');
add_action('thesis_hook2_here','custom_home_page_function2');
add_action('thesis_hook3_here','custom_home_page_function3');
} }
add_action('wp', 'front_page_functions');
Now we only have one conditional tag (on front_page_functions), which cuts down on code duplication. Your code will be easier to manage as well. Now, to add a new add a new function to the front page, just add your “add_action” to the front page group. Everything is grouped together for easy adjustments down the road.
by Adam Barber on March 24, 2010
The bane of the Internet continues to be Internet Explorer. About a billion and one articles have been written about dealing with the problems that it creates and specific CSS level corrections to accommodate the weirdness, so I won’t discuss any of those. Instead, here’s a quick tip for adding a new IE only stylesheet to your Thesis blog. This is usually the last step I take when I’m done working on a Thesis Skin.
The Code
function ie_stylesheet() { ?>
<!--[if IE]>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory') ?>/custom/ie.css" type="text/css" media="screen" />
<![endif]-->
<?php }
add_action('wp_head', 'ie_stylesheet');
The code above will add a new stylesheet in of your blog when you add it to your custom_functions.php file. One note – make sure this is the last hook added to ‘wp_head’ to avoid css conflicts.
by Adam Barber on March 22, 2010
Today’s post is a quick one – add a custom favicon to your Thesis blog. A favicon is the little image you see in the url bar on some sites and also appears next to your site name when people bookmark your site. A good favicon can reenforce your brand and make it easy for people to find your website amongst a long list of others.
The code below will set your site’s favicon to the .ico file named “favicon” located in you /custom/images folder.
function custom_favicon() { ?>
<link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory'); ?>/custom/images/favicon.ico" />
<?php }
add_action('wp_head', 'custom_favicon');
For best results, use a .ico file that’s 16px by 16px. If you don’t already have that file, you can use the Dynamic Drive.com Favicon Maker.
by Adam Barber on March 19, 2010
When building for Thesis (or any WordPress theme, really) there is a lot to take into consideration in terms of “upgrade-a-bility.” Thesis handles this pretty well for the most part, by relegating any user changes to the /custom folder. From there, it’s just a matter of protecting you against yourself.
I’m here to help.
Images
When ever possible, I like to serve images via CSS replacement. CSS-Tricks has a good article covering the basic about it at http://css-tricks.com/css-image-replacement/ . I like to use this method of displaying images because not only does it shift images out of content (think about it. is the background of your widget headline that should be tied to your html, or controlled via an easily updateable stylesheet), it also means that you can use relative paths to define an image, rather than a full URL.
.custom #logo a
{
display: block;
width: 500px;
height: 100px;
background: url(images/logo.png);
}
Because the background image is relative to the stylesheet (/wp-content/themes/thesis_16/custom/) that same code will work when you upgrade to Thesis 1.7 which will have a path of /wp-content/themes/thesis_17/custom. No need to hunt down images to update later on.
Stylesheets and Scripts
So what about things that can’t be managed and linked to from the stylesheet? That’s where a bit of php magic comes into play. Let’s say, for example, you wanted to include a link to a a file called “myscripts.js” in your Thesis custom folder in your
to run some fancy jQuery widget that you absolutely need to have. There are two ways to do this.
1. Include the code with the full url to the file via the Thesis options panel. That’s not very php ninja of you, AND – you still set yourself up for failure when you upgrade because the url contains an exact theme name. Lame
2. Be a ninja and hook the script into the
and use a PHP variable to set the url, which is the smart way to go.
function add_script_to_head() { ?>
<script type="text/javascript"
href="<?php bloginfo('stylesheet_directory'); ?>/custom/myscripts.js">
</script>
<?php }
add_action('wp_head', 'add_script_to_head');
The code above is pretty standard for adding things to the
section of WordPress via hooks (which is to say, not anything unique to Thesis), with the addition of the
bloginfo variable. This is a pretty handy WordPress function with a lot of uses. In this case, it dynamically writes the url of the style.css file for the current theme. To it, I’ve appended “/custom/myscripts.js” to complete the url.
Two simple changes you can make on your next project so you don’t need to worry so much about future upgrades. If you want to see these techniques in action, check out the ThesisReadyskins.
Have any tips you want to share? Leave a comment below.