The Thesis Theme from DIY Themes is hands down the most versatile Wordpress theme on the market. There’s really no arguing that point. However, it can be a bit of a daunting task for newbies to get started. There’s a ton of information out there. Let me point you in the right direction!

I have a list of the top 25 tutorials for all of you Thesis newbies. They cover topics ranging from the basics to specific, commonly used blog design elements in Thesis. Let’s get started!

Installation and Optimization

Installing and Optimizing the Thesis Theme for Wordpress – The first thing you need to do is install Thesis. This guide will help you install and opimize Thesis for the best possible performance in terms of your blog’s speed and search engine optimization.

Thesis SEO for Everyone – This is another guide to optimizing your blog for search engines. It speaks in-depth on both homepage and general blog optimization as well as optimization for individual posts.

Restoring Thesis to Default Settings – If you ever need to reset your Thesis options, we got ya covered!

What is the Thesis Full Width framework? – What’s the difference between the page framework and the full width framework? Which one should you use? This video tutorial has the answers.

Thesis Hooks

Thesis Hooks 101: An Introduction to Thesis Hooks – This is the Art of Blog guide to Thesis Hooks. If you’re a complete beginner with hooks, this is the place to start.

Hooks for Dummies – Another great beginner tutorial for Thesis Hooks.

Thesis Hook Reference List – This is a complete list of available hooks for Thesis with descriptions from the DIY Themes website. This is absolutely crucial for finding the right hook to place content where you want.

A Quick Introduction to the Thesis OpenHook Plugin – If hooks are a bit overwhelming for you, check out this tutorial. OpenHook lets place content just like you would with hooks, but without having to know any PHP. For the long term health of your blog, I don’t recommend using this, but in a pinch its a great solution.

Thesis Custom CSS

Customizing Thesis With Custom.css – This is a simple guide from the DIY Themes website to help you get started with Custom CSS in Thesis.

Introduction to Custom CSS in Thesis – This is another Tutorial you can find here on Art of Blog. It takes you through the basics of CSS, using custom CSS in Thesis, and offers a couple of very simple example tutorials.

Thesis Design Tutorials

Clickable Logo in Header – Want to replace that boring title and tagline with your flashy logo? Its as simple as a few lines of CSS.

Adding a Banner Ad to Your Thesis Header – You’ve got the logo, now ad the 468×60 ad to monetize your blog!

– Need to keep a certain category off of your homepage? Here is the solution!

10 Useful Answers to Common Thesis Questions – A collection of simple solutions to mostly simple Thesis problems. This one is also from Art of Blog.

Creating New Widgetized Areas – This tutorial will show you how to widgetize areas of your Thesis installation. You can apply the principles learned here to widgetize virtually any area of your blog.

Take Thesis from Standard to Unique in 6 Easy Steps – Need to make your blog unique? This tutorial offers 6 very easy ways to do so. You won’t need much coding knowledge to get these done.

How to Make a JQuery Image Slideshow in Thesis – This tutorial will show you how to create a slideshow in Thesis using JQuery. If you’re intimidated by javascript code, don’t worry. This is easy!

How To Add a Carousel To Your Thesis Blog – Have you seen those blogs with the post images and captions accross the top before the content? Pretty sweet for bumping your page views up a bit. See how!

How to Add Breadcrumbs Without a Plugin – Add simple breadcrumbs to Thesis. This is great for your blog’s SEO performance, and it cuts down on the plug-ins you’ll use.

Using the Thesis Feature Box – There’s not as much out there about the Thesis feature box as there should be. Its an extremely useful tool, and this will get you started.

Creating Useful 404 Error Pages in Thesis – You need to have a solid 404 page to direct visitors who find broken links on your site. Another Art of Blog tutorial has you covered!

How to Make a Cool Social Media Box for Thesis – Want to add links to your social media profiles to your the bottom of your posts? Its usually a good idea, and this tutorial will show you how to do it.

How to Set Up Numbered Page Navigation in Thesis – Adding numbered page navigation will increase your page views which is always a good thing! This tutorial makes it as simple as copy and pasting!

Custom “After the Post” Box – Another tutorial for adding elements below your posts on single post pages.

How to Use Wordpress Conditional Tags in Thesis – Conditional tags allow you to specify that certain elements of your design only appear on certain posts/pages of your blog. This tutorial will show you how its done.

Multiple Custom Page Templates in Thesis – Thesis allows you to create custom page templates to do just about anything you want. This takes a bit of imagination and a bit of coding knowledge, but this tutorial will get you started.

So that’s it! Thesis will let you do just about anything. The only thing holding you back is a lack of knowledge. Now you don’t have that excuse, so get after it!

So, we’ve installed Thesis, and we’ve figured out how to add custom elements to our layout. Now, its time to kick the customization into high gear. Let’s take a look at some custom styling.

Obviously, Thesis ships with some pretty amazing customization tools. You can change colors, add and remove borders, change sidebar layouts, and more. Before you ever get your hands dirty with any CSS/HTML/PHP code, check this video for help with basic customizations using Thesis options.

Click here to view the embedded video.

Understanding CSS

To help give you a clear idea of what HTML and CSS are we’ve broken it down.

• HTML is what web browsers (like Firefox or Internet Explorer) read to find out what is on each page. This is purely the text and images shown on a page.
• CSS is the design aspect of a web page. Browsers use CSS to determine how the text/images in the HTML should be displayed.

In a nutshell HTML is “what you see”, and CSS is “how you see it.”

You can use the standard Thesis design options to create a professional looking blog in perhaps 15 minutes if you’ve got the design sense to do so. However, to make your design really stand out, you’ll need to go above and beyond the scope of the default Thesis controls and dive into some of this “scary code stuff.” Luckily, Thesis makes it easy (notice a developing trend?) to manage all of this stuff.

Thesis comes with a built in editor for your custom.css file and your custom_functions.php file. You can access this via the Thesis Options tab in your Wordpress admin. Your custom.css file is where you will make all of your style edits to your Thesis design.

The Basics of CSS

If you’re new to this whole CSS thing, you need to understand a couple things. Elements of your website are given classes and/or id’s. You set styles for specific classes and id’s in your Wordpress theme’s style.css file (every wordpress theme has one). We use “.” for classes and “#” for id’s. So if an object is classified as “red_button”, we would refer to it in style.css as “.red_button {}”. If an object was given the id “white_box”, we would refer to it as “#white_box {}”.

CSS is based on specificity. If an element is contained by another element, we can specify styles for the child element that will only affect it when it is contained by the parent element. For example, if our red button is contained by our white box, we could refer to it as “#white_box .red_button {}”. If we had another element with the same red_button class that was outside of the white box, it would not be affected by this since we specified that it would only refer to the red_button inside the white_box. Make sense?

Keep in mind that CSS will always display your most specific code. So, if you have code for “.red_button” and “#white_box .red_button”, the latter is the code that will control the display of the red button within the white box.

For more info on CSS basics, check the w3schools website.

Custom.CSS

So, how in the world does this whole custom.css file work? All of the default styles for Thesis are contained in style.css and layout.css. The < body > tag controls all of the HTML content of your blog from the top of the header down through the bottom of the footer. Thesis adds a “custom” class to the body tag making it body.custom. Therefore, if you add “.custom” before any CSS code in the custom.CSS file in the custom folder, it will be more specific than the CSS code in the default style sheets and will override anything written in style.css or layout.css that would refer to the same object.

For example, if we add the following code to custom.CSS:

.custom a { color: #cc0000; }

All of the links will turn red. We’re going to use this to demonstrate a couple of css customizations that can be accomplished with the Thesis theme. You’ll need some basic CSS knowledge, the rest should be straight forward. This really is an amazing way of doing this. Its not unique to Thesis, but it certainly is a great feature.

Note: Make sure you’ve enabled your custom.CSS stylesheet in the Thesis Design Options panel or none of this will work.

Clickable Custom Logo

In order to add a custom logo to the header, we’re going to cast the blog name and tagline out to the far left. Unless someone has an absolutely enormous resolution computer monitor, they will never know its there. Next, remember the FTP skills we learned in the first part of this guide? We need to upload our logo image (logo.jpg) to the images folder in our Thesis custom folder. Typically this is found at “home/wp-content/thesis(version#)/custom/images”.

We also need to set height and width properties for both the logo area and the hyperlink itself. This will ensure that that full logo is shown in the proper location. Here is the CSS code:

.custom #logo {background-image: url('images/logo.jpg') no-repeat; width: 300px; height: 150px; text-indent: -9999px; }
.custom #logo a {width: 300px; height: 150px; display: block; }

Height and width obviously just set the size of the logo. “Text-indent” is the property that casts the title and tagline out to the far left.

Adding a Background Image to the Body

This one is easy! First, we upload our background image to the images folder in our Thesis custom folder. Then, we need to specify that we are referring to the body, so we use “body.custom” and it really is just one line of CSS code to get this done:

body.custom { background: #fff url(images/body_bg.gif) repeat-x; }

That should get you off to a good start! I really hope this tutorial has helped to get you started. If you have any questions just fire away in the comments and I’ll be glad to answer. Also, if any of this seems intimidating, don’t worry! Thesis has one of the best support forums in the business. The community there is amazing and if you have problems, just ask questions and you’ll get great answers.

So, you’ve got the installation done, and you’re ready to start with the customization process. The first thing you need to do is familiarize yourself with Thesis hooks.

Thesis uses a vast array of hooks to allow you to place content just about anywhere you want on your blog. You can also remove a lot of the default thesis elements if you want to.

Adding an element to your Thesis design is very simple. It is basically a two step process:

1. Write a Wordpress function in custom_functions.php
2. Attach that function to a hook

Before, you scream and run for the hills, let me take you through this. Its actually very simple. There is a bit of a learning curve, but once you figure it out, you’ll never want to do things any other way.

Click here to view the embedded video.

Creating a Simple Wordpress Function

Wordpress functions are extraordinarily simple to write. Here is what an empty one looks like:

function NAME() { ?> 
<? }

The word “function” allows wordpress to identify this as a function. “NAME” is just the name of this particular function. We can name it whatever we want. Finally, “{ ?>

Now, let’s go ahead and add a bit of code to the function we just created and we’ll actually give the function a name other than “NAME”:

function affiliate_link() { ?>
	<p>Get Smart with the <a href="http://www.diythemes.com/your-affiliate-link">Thesis Theme</a> from DIY Themes!</p>
<? }

And that’s it! You’re done creating the function. That wasn’t too painful was it? We named the function and added the content we wanted (in this case, an affiliate link). Obviously, you can get quite a bit more creative, but for the purposes of this guide, we’ll keep it simple.

Hooking Our Function

This is where you need to learn a bit about hooks. Its not that complicated, but it can be confusing. Basically, if you add a function to a hook, the content contained in that function will appear at the location of that hook. If you add more than one function to a given hook, the content from the function added first will appear first. Make sense? Here is a list of hooks that are available to you. If you are more of a visual person, you can see the hooks mapped out here.

In order to remove a function from a hook you use this:

remove_action('thesis_hook_we_are_using', 'name_of_function_we_are_removing');

In order to add a function to a hook you use this:

add_action('thesis_hook_we_are_using', 'name_of_function_we_are_adding');

So, let’s add our affiliate link in place of the standard thesis footer attribution link. The text is virtually the same, but we want to make some $ for all of customers we are sending Mr. Pearson’s way! Our function we just wrote includes our affiliate link. The standard Thesis attribution does not. Let’s replace it.

In order to replace it, we first need to remove the default attribution. That looks like this:

remove_action('thesis_hook_footer', 'thesis_attribution');

Thesis_hook_footer is the name of the hook we are using, and thesis_attribution is the function we are removing. Now, let’s replace it with our affiliate link!

add_action('thesis_hook_footer', 'affiliate_link');

Any of this code we use is placed in custom_functions.php in our Thesis custom folder. In the end this is what we’ve accomplished:

You can apply this concept to virtually any idea you have. You can add anything almost anywhere to your blog design. That really is the freedom that Thesis grants you.

Also, keep in mind, you can add your own functions without removing the default Thesis functions. Rather than removing the default Thesis attribution, we could have just added another paragraph below it. All we would have done differently is leave out the remove_action code.

On the same token, you can remove anything you like, and you don’t have to replace it. The choice is yours. For a list of removable Thesis objects, click here. That is by no means an exhaustive list, but it should get you started nicely.

I understand this is somewhat complicated stuff, and I’m more than willing to answer questions and/or clarify in the comments!

Thesis is absolutely, positively, hands down the best Wordpress theme on the market. If you can dream it up, its very likely that you’ll be able to create it with Thesis. Let me help you get started!

Click here to view the embedded video.

Installation

Once you’ve obtained your copy of Thesis from DIY Themes, the first thing you’ll need to do is install and activate it as the theme for your Wordpress installation. There are a couple ways to do this.

The Easy Way

If you’d like to do things the easy way, sign into your wordpress admin (www.yoursite.com/wp-admin). Under the appearances tab, click “add new themes.” Next, click the upload tab on the page you just arrived at. Browse to the location of the zipped Thesis folder you just downloaded from DIY Themes, and upload it. When this process finishes, it should give you the option to activate. Do so, and you’re done. Just keep in mind that you’ll be missing out on some pretty sweet features of Thesis if you go this route.

The Hard Preferred Way

Now, if you want to get the most out of Thesis, and you don’t mind getting your hands dirty, follow me. Its a bit more involved, but I’ll walk you through it and I promise it won’t be that bad.

You’ll need a few things in order to do the deed:

• A solid FTP client. An FTP client allows you to manage files on your web server. I recommend FileZilla. Its free, open source (which ensures it will constantly be updated with new features), easy to use, and compatible with both pc and mac.
• FTP login information (address, username, and password) for the server where Wordpress is installed
• The zipped Thesis folder you downloaded from DIY themes

Uploading

Ready? Let’s get to it. First, go ahead and sign into your FTP client. You should see a listing of all the folders in the root level of your domain. If you need help getting started with FTP, click here.

Now that you’re signed into your server via FTP, we need to upload the Thesis files. Navigate to your Wordpress themes folder on your server. Typically, this is found at “home/wp-content/themes.” Next, unzip the Thesis folder you downloaded from DIY Themes to your desktop. Depending on which FTP client you’re using, you should be able to drag and drop the entire unzipped folder from your desktop into the “themes” directory you’ve navigated to in your FTP client.

Setting File Permissions

There are a few steps we need to take here to really get Thesis rockin! We need to setup the correct file permissions to allow Thesis to interact with the rest of your website properly, and we need to do some renaming in order to make Thesis easily customizable.

Let’s go ahead and do the renaming now. Find the “custom-sample” folder in your Thesis folder. It is typically found at “home/wp-content/themes/thesis(version#)/custom-sample.” Right-click on this file and select “rename” or something similar. Rename the folder “custom”. This is extremely important as Thesis will now recognize the files in this folder which will allow us to make customizations.

Before we go any further, let me explain a couple of things about file permissions. These permissions allow certain groups to read, write to, and execute (or some combination of the three) the file in question. The first number refers to the permission level allowed to the user to whom the file belongs. The second number refers to the permission level of the group, and the third refers to the permission given to the general public.

This probably seems a bit complicated. You don’t need to have a rock solid understanding to accomplish this installation (you really just need to be able to copy and paste some numbers), but it would be helpful for you going forward. For more info on file permissions, click here.

So, let’s make a few necessary file permission changes. Go ahead and navigate to your Thesis custom folder.

In your custom folder, find the layout.css file. Right-click on it. Depending on your FTP client, one of the options in that appears will be “file permissions” or something to that effect. Set the numerical value to “666″. This will allow everyone read and write access to the file.

Next, find the “cache” folder in your “custom” folder. Follow the same process, and set its permission to 775. When you set up dimensions for your post images, this will allow Thesis to automatically crop the images you upload to fit the size you have set.

Activation

Our installation won’t be complete until we activate Thesis in our Wordpress admin. This is the easiest part! Just click “themes” under the “appearance” tab in your Wordpress admin, and click activate under Thesis. That’s it! You’re ready to rock!

Optimization

With most themes, you’d be done right now. With Thesis, the party is just getting started. One of the most important features that Thesis offers is its search engine optimization options. You can control the most important SEO elements on every page and post on your blog including the homepage. First, I’ll walk you through the SEO options that are found in the Thesis Options panel in your Wordpress admin. Once we’ve got that covered we’ll hit the specific page options.

If you are fairly new to Wordpress definitely check out our guide on how to optimize wordpress which includes instructions on setting permalinks and other miscellaneous settings which will help your blog to rank better.

General Thesis Options

Now that you’ve installed Thesis, you’ll see an extra panel in your Wordpress admin. Toward the bottom, you should see “Thesis Options.” Click on this and you should be taken to a page with several expandable option boxes. We’ll start here. Please note, there are no absolute rules with these options. The settings I’m suggesting will be optimal in most cases, but its impossible to apply a cookie cutter set of options to everyone. I’d recommend doing your own research. This is certainly a great starting point though!

Title Tags

Title tags are the text that appears on the top bar of your browser when you’re on any given web page. They are probably the single most important element of search engine optimization. Its one of the first places most search engines look in order to rank content. Generally, the title tag should take the following forms depending on where you are:

• For the homepage – [Blog Name]
• For blog posts – [Single Post Title]
• For single pages – [Single Page Name] – [Blog Name]

Therefore, under homepage options under the title options, you’ll want to check “Show site name in title” under the homepage options under Title Tags. You’ll also want to uncheck “Show site tagline in title.” Under all other pages you’ll want to check “Append site name to page titles” and enter “-” as your character separator. This will ensure the structure we just listed. Single posts automatically display only the post title in the title tag.

Homepage Meta Information

At the top of the center column of the Thesis Options page, you should find an options box entitled “Homepage Meta.” Go ahead and expand it. You should see a meta description box and a meta keyword box for the homepage.

Meta keywords are just basically a way for search engines to categorize your content. They don’t have much affect on your actual rankings, but its still a good idea to add them. It doesn’t take much time, and there are search engines out there where having good meta keywords will affect you posively. Generally, you should have no more than three keywords for one page. Also, be sure not to use more than two or three keywords in your meta keywords. Doing so may result in a penalty from some search engines.

Meta descriptions are where you can really make some strides. Just like meta keywords, most search engines don’t pay much attention to this in terms of ranking, but it is VERY important that you do this.

As you can see, the meta description is what Google uses to display a description of the page. If you don’t do this, you’ll often end up with text from random places (such as sidebar links) as your description. Often, this will have nothing to do with your actual page content. Now, this doesn’t affect your rank at all, but it does affect your click through rate significantly.

So, be sure to add meta keywords and a meta description to the homepage.

That’s it for the Thesis Options panel. Obviously there are a TON of other options, but these are the most important in terms of optimization. The other options you should set to suit your fancy. Obviously, this will be different for every blog.

Post and Page Options

Another great feature of Thesis is the extra options it gives you for every post and page. Go ahead and edit your most recent post in your Wordpress admin. There are three extremely important things you should take note of:

1. Custom Title Tag

That’s right, you can specify a custom title tag for your post. This is awesome, because it allows you to write the catchy titles that your readers love. You see, search engines love boring titles. They love a title that looks like “How to XYZ.” Readers don’t love those titles. They love titles like “Totally Rad Awesome XYZ Widgets!!!” Ok, maybe they don’t love that title in particular, but you get the idea. You can use descriptive, catchy titles that your readers will see on your blog and in your feed, but you can use the custom title tag to designate something boring that the search engine will like. Its the best of both worlds!

2. Meta Description

This is basically the exact same idea as the homepage. Add the meta description for EVERY post and page on your blog. If you don’t, you’re throwing away traffic. Its as simple as that. And, for search engines that penalize your ranking if you don’t maintain a high clickthrough rate, it will eventually kill your ranking which will really impact your traffic.

3. Meta Keywords

Again, these are not a huge deal, but its a good idea to add them for every post on your blog. It can only help you as I’ve never heard of a search engine penalizing someone for specifying meta keywords.

Wrappin it Up

This is just the first part of this guide. I hope you’ve learned quite a bit, and I hope this gets you off to a great start with Thesis! In part two, we’ll look into using Thesis hooks to customize our layout.

So, in part one we built an efficient, customized Thesis template to house our squeeze page content. In part two, we’re gonna do it ninja style and completely customize the layout of our squeeze page. Ready? Let’s go!

Right now, we are here (if you didn’t read part one, now would be a great time to do it!):

We are displaying the default header, nav menu, and footer. The only thing we’ve really changed at this point is the page content itself. We’ve removed the default content and sidebar areas, and we’ve inserted our squeeze page content. Now, you might want to stop right there. Depending on your situation, this might be the best solution for you. It all depends on your readers, your blog’s brand, and the default content of your header and footer. However, in most cases, it would be a good idea to customize things a bit more.

Click here to view the embedded video.

Stripping the Squeeze Page

Caution: This does get slightly more complicated and may require a small degree of creativity on your part. Just follow the instructions and we’ll all live to tell the tale!

To start, let’s get rid of all of the header, nav, and footer content on our squeeze page. In order to do that, we need to write three functions. Basically, we’re going to specify that the default header, nav menu and footer should appear everywhere but the squeeze page. Then, we’re going to replace the standard functions with our new functions using hooks. Here’s the code:

function squeeze_nav() {
	if (is_page('Squeeze')) {}
	else { thesis_nav_menu(); }
}
remove_action('thesis_hook_before_header', 'thesis_nav_menu'); // remove default nav menu
add_action('thesis_hook_before_header', 'squeeze_nav'); // replace with custom nav menu on squeeze page and default nav menu everywhere else
 
function squeeze_header() {
	if (is_page('Squeeze')) {}
	else { thesis_default_header(); }
}
remove_action('thesis_hook_header', 'thesis_default_header'); // remove default header
add_action('thesis_hook_header', 'squeeze_header'); // replace with custom header on squeeze page and default header everywhere else
 
function squeeze_footer() {
	if (is_page('Squeeze')) {}
	else { thesis_attribution(); }	
}
remove_action('thesis_hook_footer', 'thesis_attribution'); // remove default footer (including attribution)
add_action('thesis_hook_footer', 'squeeze_footer'); // replace with custom footer on squeeze page and default nav menu everywhere else

Just copy and paste that into custom_functions.php below the squeeze page code we’ve already inserted there. For now, we’ve designated that the header, nav, and footer are empty on the squeeze page. You should just end up with your squeeze content and a bunch of white space.

For the record, you can do this with CSS, but that method is not quite as effective, and it doesn’t allow us to replace the white space we’ve created with our own custom content. Thus, we’ll leave that out of this tutorial.

Adding Custom Content

Now, you may want to stop here. Again, depending on the content of your squeeze page, you might not want to add custom content to your header or footer. However, let’s assume you do.

The Header

First, let’s add a custom header image. In order to do this, we’ll just add the content into our “squeeze_header” function like so:

function squeeze_header() {
	if (is_page('Squeeze')) { ?>
		<div id="banner"><img src="[HEADER IMAGE URL]" alt="Don't Get Rickrolled!" /></div>
	<?php }
	else { thesis_default_header(); }
}

This just displays a header image where the default Thesis header used to reside. Obviously, you can insert any image you like here.

The Footer

Finally, let’s add some text to the footer. Again, all we’re doing is working with the function we’ve already created, and adding a bit of content for the squeeze page only.

function squeeze_footer() {
	if (is_page('Squeeze')) { ?>
		<div class="squeeze-footer"><p>If you don't sign up I will rickroll you...seriously...you think I'm playin?</p>
	<?php }
	else { thesis_attribution(); }	
}

Note: Threatening your readers may not be optimal…but its fun for demonstration purposes :)

The Styles

This one is pretty easy. We just add a couple lines of code to our custom.css file to ensure that everything is properly centered up:

.banner { text-align: center; }
.squeeze-footer { text-align: center; color: #cc0000; font-weight: bold; font-size: 1.3em; }

The Finished Product

If everything went according to plan, you should end up with something similar to this:

A Few Extra Goodies

Caution: This is complicated stuff! If this is too confusing, you might just want to stick with what we have done already.

You might be thinking, “Hey, you said you were going to include the nav menu and you didn’t!!!” Well, observant friend, you are correct. The reason is that I wanted to keep this relatively straightforward, and adding a custom nav menu with separate styles from the rest of your blog is not exactly for the feint of heart (or the coding impaired). Its not the most complicated thing you could ever do, but its complicated.

If you want to do this, here is a starting point:

<ul class="menu">
	<li class="tab"><a href="[HYPERLINK]">Link 1</a></li>
	<li class="tab"><a href="[HYPERLINK]">Link 2</a></li>
	<li class="tab"><a href="[HYPERLINK]">Link 3</a></li>
	<li class="tab"><a href="[HYPERLINK]">Link 4</a></li>
	<li class="tab"><a href="[HYPERLINK]">Link 5</a></li>
</ul>

That will create an exact replica of the Thesis default nav menu in terms of style, but it will contain your own links. In order to display this on the squeeze page, you need to place it in the function we wrote for our custom squeeze nav menu:

function squeeze_nav() {
	if (is_page('Squeeze')) { ?>
		<ul class="menu">
			<li class="tab"><a href="[HYPERLINK]">Link 1</a></li>
			<li class="tab"><a href="[HYPERLINK]">Link 2</a></li>
			<li class="tab"><a href="[HYPERLINK]">Link 3</a></li>
			<li class="tab"><a href="[HYPERLINK]">Link 4</a></li>
			<li class="tab"><a href="[HYPERLINK]">Link 5</a></li>
		</ul>
	<?php }
	else { thesis_nav_menu(); }
}
remove_action('thesis_hook_before_header', 'thesis_nav_menu'); // remove default nav menu
add_action('thesis_hook_before_header', 'squeeze_nav'); // replace with custom nav menu on squeeze page and default nav menu everywhere else

That seems pretty straightforward, but here is the tricky part. Let’s assume that you’ll want to create different nav menu styles (background, link, hover colors, etc.). In that case, you will need to designate specific nav menu CSS stylings just for your squeeze page. Luckily, Thesis makes this much easier. You still have to write all of the custom css, but we can easily set it to apply only to the squeeze page.

In order to do this, go back into your Wordpress admin and edit the page we created at the beginning of this whole project. Scroll down to the “SEO Details and Additional Style” box for the page, and find “CSS Class.” In this box, enter “squeezepage”

This allows you to designate custom styles for just the squeeze page. You write them exactly as you would accept instead of “.custom” at the beginning of the css lines, you put “.squeezepage”

This will allow you to style the nav menu for just the squeeze page. For that matter, you could style anything you want for just the squeeze page. The level of sickness you can achieve here is really only limited by your imagination.

Note: We’re still only really touching the tip of the iceberg of the customization capabilities of Thesis…yep…its that awesome.

Finally, if you want to center the nav menu to match the rest of your squeeze page (assuming yours is centered like mine), that might be the trickiest part of all. I could probably write another 1,000 words on just that. Instead, I’ll refer you to a thread in Thesis forums. Godhammer has some pretty good ideas!

Get After It!!!

I don’t know about you, but I love being creative and blowing things out completely to see just how awesome I can make them. I guess you could say I’m driven by that. This is one of those projects where you really can do just about anything you want to. Let the creative juices flow and see what you can come up with!

Regardless of the business you’re in, whether its blogging or selling hot dogs on the corner, you can and should build an email list of your readers (or hot dog eaters as the case may be).  The single best way to do this is to use a squeeze page.

What is a Squeeze Page?

Defined, a squeeze page is simply a single page of your blog with the sole purpose of collecting contact information (typically first name and email) from your readers. That’s the short answer.

The long answer is that a squeeze page is a simple example of the law of reciprocity. What’s that? The law of reciprocity (loosely translated) says that if someone gives you something, you’ll be more likely to give something back. Normally, you give the reader extra content in the form of a newsletter or some sort of freebie such as an e-book detailing one aspect of your niche, and the reader gives you his or her name and email address in return. Pretty simple stuff right?

How Can I Make A Squeeze Page?

I could write a book on creating an effective, high-conversion-rate squeeze page, but that’s a whole article of a different color. For now, let’s just focus on building a simple squeeze page using a Thesis custom template.

I should mention that this is a two part article. In this first part, I’m just going to give you the basics. We’ll do the custom template thing (not as complicated as it sounds!) and put some content in there. In part two, I’ll venture far into Thesis ninja-dom and show you how to create a completely unique squeeze page with headers, nav menus, and footers (feet?) that are completely different from the rest of your blog.

Click here to view the embedded video.

Getting Started

You can put absolutely anything you like on your squeeze page. You are only limited by your imagination. However, for the sake of the sanity of the coding impaired, I’m going to keep it as simple as possible for this project. I’m just going to place a simple video and an email subscription form from AWeber.

The first thing you need to do is add a new, blank page to your blog. You should title it “Squeeze” and be sure to set the page template to “Custom.”

Got that done? Good…let’s take a look at the code for this project. If it looks intimidating don’t worry, I’ll walk you through it. From here, we just need to create a function to house our squeeze page content, and then we need to use Thesis hooks to place that content in our custom template for the squeeze page.

Note: the Thesis custom template can house multiple templates for multiple pages and/or groups of pages. We’re just creating a template for one page. For a more detailed explanation, I’ll let Berchman explain.

function squeeze_template() {
	if(is_page('Squeeze')) {
		?>
		<div class="squeeze">
			<div class="aweber">
				<script type="text/javascript" src="http://forms.aweber.com/form/01/1957545901.js"></script>
			</div><object width="600" height="350"><param name="movie" value="http://www.youtube.com/v/dQw4w9WgXcQ&hl=en_US&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/dQw4w9WgXcQ&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="600" height="350"></embed></object>
			</div>
		</div>
		<?php
	}
}
 
// ENABLE CUSTOM SQUEEZE PAGE TEMPLATE
remove_action('thesis_hook_custom_template', 'thesis_custom_template_sample'); // removes sample custom page template
add_action('thesis_hook_custom_template', 'squeeze_template'); // inserts custom page template for our squeeze page<

Setting The Parameters

function squeeze_template() {
	if(is_page('Squeeze')) {

This part is pretty simple. All we’re doing here is naming our template. We’re also designating that our template will be used on the squeeze page and only on the squeeze page.

The Squeeze Page Content

<div class="squeeze">
	<div class="aweber">
		<script type="text/javascript" src="http://forms.aweber.com/form/01/1957545901.js"></script>
	</div><object width="600" height="350"><param name="movie" value="http://www.youtube.com/v/dQw4w9WgXcQ&hl=en_US&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/dQw4w9WgXcQ&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="600" height="350"></embed></object>
	</div>
</div>

This is also pretty straightforward. Basically, we’re just inserting the video and our registration form. Should be pretty self explanatory. That’s it for the main components of the function.

Playing Hooky

Now that we have our function done, we need to place it in our custom page template. That way, when we create a page named “Squeeze” and set its template as “Custom” (we’ve already done both), our template with its content will appear. We’ll use the “thesis_hook_custom_template” to accomplish this. First, we remove the default sample template that ships with Thesis. Then we replace it with the function we’ve just created. Here’s the code:

remove_action('thesis_hook_custom_template', 'thesis_custom_template_sample'); // removes sample custom page template
add_action('thesis_hook_custom_template', 'squeeze_template'); // inserts custom page template for our squeeze page

Myles of Style

Finally, we need to insert some CSS in order to line up our elements and get them centered properly. Obviously, this will differ a great deal depending on your video and registration form (or any other content you add), but here’s a basic starting point.

.squeeze { margin: 1.5em auto; width: 900px; }
.aweber { float: right; width: 250px; }

The Finished Product

When you’re done, it should look a little something like this:

That’s it for the first part of this tutorial. In part two, we’ll create a completely different design for your squeeze page.

One of the most annoying things about most Wordpress themes, even an advanced one like Thesis, is the navigation system for blog, archive, and search pages. Typically, all you get at the bottom of a blog’s homepage is two links. One is for “newer posts” and one is for “older posts” or something similar. This is not exactly optimal. Fortunately, its possible to replace this native functionality with numbered page navigation.

Click here to view the embedded video.

What is Numbered Page Navigation?

Numbered page navigation is simply a list of links to a range of pages within a few pages of the page you are currently viewing. This list appears at the bottom of any area of your blog with multiple posts numbering greater than the amount of posts your blog is set to display on one page (this can be changed under the “Reading” options under the “Settings” tab in your WP admin). Your visitors will then be able to choose to visit any number of pages from one page rather than scrolling through them one at a time to find the desired page.

How Can I Setup Numbered Page Navigation On My Blog?

There are two ways you can do this. If you want to be boring, you can use a plugin called WP Pagenavi. Its actually a really nice plugin and I would recommend it if you don’t want to get your hands dirty.

However, as your blog grows, you’ll find yourself wanting to change things, add new features, etc. As this happens, you’ll find yourself using more and more plugins. The more plugins you use, the slower your blog will be. I don’t know about you, but I’m all about keeping my blog clean and fast, so I make every attempt to avoid plugins when I can.

The code we’ll be using to create our numbered page nav is actually based on the same code that WP Pagenavi utilizes. However, I’ve tailored it to a blogger’s needs and cleaned it up a bit to make this as painless as possible for the coding impaired. I know it looks like a lot to swallow, but don’t worry. I’ll walk you through it.

In order to work properly, we need to write a typical wordpress function. Then, we’ll call that function using a Thesis hook to place it directly below the last post on each page where page navigation is displayed. Finally, we’ll add CSS customizations to make it look good. It will take a bit of coding knowledge to understand what’s going on here, but if you can copy and paste, you can implement this!

The Code

/* NUMBERED NAV MENU */
function numbered_page_nav($prelabel = '', $nxtlabel = '', $pages_to_show = 8, $always_show = false) {
	global $request, $posts_per_page, $wpdb, $paged;

	$custom_range = round($pages_to_show/2);
	if (!is_single()) {
		if(!is_category()) {
			preg_match('#FROM\s(.*)\sORDER BY#siU', $request, $matches);
		}
		else {
			preg_match('#FROM\s(.*)\sGROUP BY#siU', $request, $matches);
		}
		$blog_post_count = $matches[1];
		$numposts = $wpdb->get_var("SELECT COUNT(DISTINCT ID) FROM $blog_post_count");
		$max_page = ceil($numposts /$posts_per_page);
		if(empty($paged)) {
			$paged = 1;
		}
		if($max_page > 1 || $always_show) {
			echo "<div class='page-nav'><div class='page-nav-intro'>Page $paged of $max_page</div>";
			if ($paged >= ($pages_to_show-2)) {
				echo '<div class="page-number"><a href="'.get_pagenum_link().'">1</a></div><div class="elipses">...</div> ';
			}
			for($i = $paged - $custom_range; $i <= $paged + $custom_range; $i++) {
				if ($i >= 1 && $i <= $max_page) {
					if($i == $paged) {
						echo "<div class='current-page-number'>$i</div>";
					}
					else {
						echo ' <div class="page-number"><a href="'.get_pagenum_link($i).'">'.$i.'</a></div> ';
					}
				}
			}
			if (($paged+$custom_range) < ($max_page)) {
				echo ' <div class="elipses">...</div><div class="page-number"><a href="'.get_pagenum_link($max_page).'">'.$max_page.'</a></div>';
			}
			echo "</div>";
		}
	}
}
remove_action('thesis_hook_after_content', 'thesis_post_navigation');
add_action('thesis_hook_after_content', 'numbered_page_nav');

The Breakdown

Worried? Don’t be. Its bark is worse than its bite. Let’s break it down piece by piece.

1. Setting the Parameters

function numbered_page_nav($prelabel = '', $nxtlabel = '', $pages_to_show = 8, $always_show = false) {
	global $request, $posts_per_page, $wpdb, $paged;
	$custom_range = round($pages_to_show/2);
	if (!is_single()) {
		if(!is_category()) {
			preg_match('#FROM\s(.*)\sORDER BY#siU', $request, $matches);
		}
		else {
			preg_match('#FROM\s(.*)\sGROUP BY#siU', $request, $matches);
		}

This section of code establishes the parameters of our function such as what Wordpress elements we need, how many posts will be in our list, and which areas of your blog will need the navigation.

The main thing you need to understand here is that “$pages_to_show = 8″ simply means we’re going to list 8 pages other than the current page we’re on. You can change “8″ to whatever number you please. I’d strongly suggest that you use an even number as that will keep an equal number of pages on either side of the current page in our list.

2. How Big is Your Blog?

$blog_post_count = $matches[1];
$numposts = $wpdb->get_var("SELECT COUNT(DISTINCT ID) FROM $blog_post_count");
$max_page = ceil($numposts /$posts_per_page);
if(empty($paged)) {
	$paged = 1;
}

Next, we determine how many posts your blog contains, how many posts you allow on each page, and use those two pieces of information to determine how many pages will be in our display. It also states that nothing will be displayed if the page doesn’t contain enough posts to need multiple pages in order to display all posts.

3. Where are We?

if($max_page > 1 || $always_show) {
	echo "<div class='page-nav'><div class='page-nav-intro'>Page $paged of $max_page</div>";
	if ($paged >= ($pages_to_show-2)) {
		echo '<div class="page-number"><a href="'.get_pagenum_link().'">1</a></div><div class="elipses">...</div> ';
	}

The next section contains the code that displays our navigation intro box that tells us which page we’re on and how many total pages there are. It also contains the code that displays the first page link once we move far enough from the first page that its not natively displayed in the list.

4. The Meat

for($i = $paged - $custom_range; $i <= $paged + $custom_range; $i++) {
	if ($i >= 1 && $i <= $max_page) {
		if($i == $paged) {
			echo "<div class='current-page-number'>$i</div>";
		}
		else {
			echo ' <div class="page-number"><a href="'.get_pagenum_link($i).'">'.$i.'</a></div> ';
		}
	}
}

This section is a bit complicated, but it basically just lists the number of pages that are to be displayed. Remember when we set that up in the parameters? It also sets up a seperate class for the current page. That way you can style it differently if that suits your fancy.

5. The End

if (($paged+$custom_range) < ($max_page)) {
	echo ' <div class="elipses">...</div><div class="page-number"><a href="'.get_pagenum_link($max_page).'">'.$max_page.'</a></div>';
}
echo "</div>";

Finally, if the last page does not appear in our list natively, we include a link to it at the end.

6. Thesis Implementation

remove_action('thesis_hook_after_content', 'thesis_post_navigation');
add_action('thesis_hook_after_content', 'numbered_page_nav');

This is the easy part. You just need two lines of code (yep, Thesis rocks!). “thesis_hook_after_content” is the hook we’ll be using. It simply means that the numbered page nav will be placed below the end of the last post on the page. First, we remove the standard Thesis page navigation. Then, we add our custom function. If you wanted to place it below all content (posts and sidebars), but above the footer, you would use the “thesis_hook_after_content_box” hook. “thesis_post_navigation” refers to the standard Thesis page navigation. “numbered_page_nav” just indicates the name of the function we want to place in our chosen location.

And that’s it. Just copy and paste the whole thing into your custom_functions.php file and we’re ready to style!

Styling the Navigation

Just copy and paste this into your custom.css file and you are all done. Of course, you’ll want make stylistic adjustments to match the look of your blog.

/* NUMBERED PAGE NAV */
.page-nav { font-size: 1.35em; font-weight: bold; margin: 1em 0; padding: 0; overflow: hidden; }
.page-nav-intro { float: left; padding: .3em .5em; margin: 0 1em 1em 0; background: #efefef; border: .1em solid #ccc; }
.page-number { float: left; padding: .3em .5em; margin: 0 .2em; background: #fff; border: .1em solid #ccc;  }
.current-page-number { float: left; padding: .3em .5em; margin: 0 .2em; background: #efefef; border: .1em solid #ccc; }
.elipses { float: left; padding: .3em .2em; }

Thesis Theme for Wordpress has become one of the most popular themes for Wordpress, especially among professional bloggers. It has grown leaps and bounds over the past year and is now powering some of the most popular websites out there including, Copyblogger, Chris Brogan, Matt Cutts and of course this website.

Amazing Thesis Customizations:

To honor Art of Blog’s brand spanking new design we present to you some of the best modifications of Thesis skins we have found online:

Comments Welcome:

• Drop a comment below if you think a site should be on here and it isn’t.
• Have a favorite site? Let us know why!

These aren’t ranked in any particular order, the numbers are just there to make it easier to reference. :)

If you’re like most users, there are so many options available in the Thesis administration panels that you haven’t actually tried out all of them – and you might not know what they all do. One option in particular has stumped many new Thesis users, as it’s not immediately obvious what it’s for. In fact, even if you change it, you probably won’t see anything visually change on your site at all. This simple option can make a world of difference in your choices for design. It’s found in the panel “Framework Options” under “Thesis Design Options” in the administration of your Wordpress installation. By default, when you install a fresh copy of Thesis, the Page Framework is selected. You may have been using Thesis already for some time and never realized you had another option! For this tutorial, we will assume that you’re already familiar with customizing Thesis in the Page Framework mode and are ready to learn how to customize your site using the Full-Width Framework.

When the default Page Framework is active, a rendered page consists of a single #container which contains a #page element which encompasses all of your page elements: header, content, and footer. That #container is a certain width, and outside of it is the body background. Visually, this results in a layout that looks like a single, cohesive page floating on a background (if they’ve been colored differently, of course). Any customizations of the header, content or footer are restrained within that #page element, and thus do not reach from edge to edge of the window. Most new users run up against this limitation when they first attempt to create a custom header or footer that spans the width of the screen. A quick search on the Thesis forums reveals the answer: “switch to the Full-Width Framework” – but that’s just the beginning. You need to understand how Thesis is generating the page elements to take advantage of the new layout possibilities.

Once you’ve switched your options to the Full-Width Framework, you may not see anything change visually at first – but a close inspection of the html code that Thesis has generated will reveal some new “zones” that didn’t exist before:

• #header_area
• #content_area
• #footer_area

All three of these also have the class .full_width as well. The #page element id has changed to a .page element class, and it has now been placed as a div inside of each of the three areas. Your page, in effect, has been sliced into 3 horizontal “zones”, which extend the full-width of the screen. Because these zones are stacked upon each other, your page probably still looks just like before – a single, cohesive page – but now you could in theory separate these regions (with padding or margins) and most of all, style them independently, creating the visual design that is so common these days of having headers and footers that span the entire window and are visually different from the middle “content” region.

In the Page Framework the elements were nested like this:

body > #container > .page > #header
body > #container > .page > #content_box
body > #container > .page > #footer

In the Full-Width Framework, they are nested like this:

body > #header_area > .page > #header
body > #content_area > .page > #content_box
body > #footer_area > .page > #footer

Thus, if you already had an image as the background of the #header, it will still only reach from edge to edge of the page (that’s why nothing seemed to change). In order to create a visual header graphic that spans the screen, you will want to target the #header_area instead. You can still apply formatting to the #header, but as it is nested within the .page, it will be limited in its size.

A note on “Outer Page Padding”: you may have noticed another option within the same “Framework Options” panel. This, as it states, applies extra padding to the .page element which contains the #header, #content_box, and #footer – which, as long as it is colored the same as the nested elements, will simply look like you’ve added a gap around the entire page edge. Style it differently, however, and you will notice that it is only visible if you set the “Outer Page Padding” to anything other than zero, *or* if its nested child elements have no background color or images of their own (being transparent, they will show the .page element “underneath”).

Now that you’ve learned how the Full-Width Framework modifies Thesis’ html output, you may already be tempted to jump right in with your new design. Something that many people prefer when designing massive full-width headers is to move the navigation menu out of the header entirely (so as not to be limited by the width of the #header, which is nested inside the .page. A popular mod was shared by Kristarella some time ago to move the navigation menu out of the header and into its own “zone” below the entire #header_area. Thanks to the powerful hook system of Thesis, you can rearrange the elements quite easily by adding the following code to your custom_functions.php file:

remove_action('thesis_hook_before_header', 'thesis_nav_menu');
function full_width_nav() { ?>
	<div id="nav_area" class="full_width">
		<div class="page">
			<?php thesis_nav_menu(); ?>
		</div>
	</div>
<?php }
add_action('thesis_hook_before_content_area', 'full_width_nav');

This function prevents Thesis from generating the nav menu where it usually would, then defines a new #nav_area, inserted between the #header_area and #content_area, with the .page class nested just like the other zones, and the nav menu gets generated within. Now you can style the #nav_area to look like the navbar fills the full width of the screen.

The following visual guide should help you see how it all comes together (click to enlarge):

Remember that the “nested” elements are actually drawn on top of their parent elements. This has been visualized above with shades of color. Darker colors are lower “layers”, with lighter ones overlaid on top – thus from bottom up you have #header_area, then #header_area .page, then #header. If you do not specify formatting for upper layers (or in some cases, if you remove the default thesis formatting, usually #fff backgrounds), they will transparently show whatever is specified for the layers below. It also helps to remember that each #[zone]_area always spans the whole width behind everything else, so if yours doesn’t appear to, it’s because something is overlaid on top and its formatting is blocking your view of the elements underneath.

This also explains how you can specify an image for #header_area .page that spans the full width of the “page”, but not the full “screen”, while maintaining the page padding which gives a nice margin for the content below. By doing so, you could have a repeating infinite background assigned to the #header_area, which would extend to the screen edges, and a single image assigned to #header_area .page that blends seamlessly with the #header_area background.

If it helps, you can recreate the above screenshot with your own clean install of Thesis by pasting the following code into your custom.css:

/* HEADER ZONE */
 
.custom #header_area { background: #213C63; }
 
.custom #header_area .page { background: #7a98c2; }
 
.custom #header { background: #cfe2ff; border-bottom: 0; }
 
/* NAVBAR ZONE */
 
.custom #nav_area { background: #589b4d; }
 
.custom #nav_area .page { background: #7fc874; }
 
.custom .menu { background: #c4e9be; border: 0; }
 
.custom .menu li.tab a, li.tab { border: 0; }
 
/* CONTENT ZONE */
 
.custom #content_area { background: #d8d86c; }
 
.custom #content_area .page { background: #efef8e; }
 
.custom #content_box { background: #ffffd3; }
 
/* FOOTER ZONE */
 
.custom #footer_area { background: #eba7b5; }
 
.custom #footer_area .page { background: #eccdd3; }
 
.custom #footer { border: 0; background: #fef; }
 
/* BEHIND EVERYTHING */
 
body.custom { background: #9b1f1f; }

Remember that any .page styling will only be visible extending around the edges if you have the “Outer Page Padding” set to something greater than zero. Otherwise, the .page element will still be there, but it won’t show past the edges and will most likely be obscured by the nested elements above it.

The Full-Width Framework is a very powerful layout within Thesis. I personally always enable it on every Thesis customization I do, even if I’m not designing anything visually that will appear from edge to edge of the screen. I like how it breaks up the page into three “zones”, which makes it really easy for me to insert custom code in between those zones. It also allows me to format the header and footer independently from the content section. It’s probably the most familiar layout system for most Wordpress tweakers (it’s comparable to other themes) even though the Page Framework is enabled by default. That’s exactly why people who have designed Wordpress sites from scratch often switch on the Full-Width Framework first (or bang their heads a few times before discovering the solution on the Forums) before they begin to customize Thesis.

We recently sat down with the Master of Thesis Theme, Chris Pearson to discuss his goals and aspirations for 2010. In this video he talks about what we can expect from him as he touches on the subjects of Thesis, celebrity rant videos, and twitter. He also talks about where he sees the future of web publishing going.

Click here to view the embedded video.

Join the Discussion – Win a Copy of Thesis

Now that you’ve got to see what Chris Pearson is up to in 2010. We want to know what you are up to in 2010. These can be personal goals, life goals, blog goals, business goals, you name it.  One lucky winner in the comments will receive a “Personal Version” of Chris Pearon’s Thesis Theme. The winner will be chosen by the Art of Blog team and announced via twitter so make sure you follow @artofblog.

Look forward to interacting with you in the comments.