Art of Blog

Introduction to Custom CSS in Thesis

Adam Baird — Fri, 05 Feb 2010 02:24:38 +0000

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.

Thesis Hooks 101: An Introduction to Thesis Hooks

Adam Baird — Fri, 05 Feb 2010 02:22:24 +0000

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:

Write a Wordpress function in custom_functions.php
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() { ?>
	Get Smart with the Thesis Theme from DIY Themes!
 }

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!

Installing and Optimizing Thesis Theme for Wordpress

Adam Baird — Thu, 04 Feb 2010 22:59:34 +0000

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.

Creating A Squeeze Page With Thesis – Part Two

Adam Baird — Thu, 28 Jan 2010 18:42:35 +0000

Complete the first part of this tutorial before doing this part.

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')) { ?>
		
	 }
	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')) { ?>
		If you don't sign up I will rickroll you...seriously...you think I'm playin?
	 }
	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 1a>li>
	<li class="tab"><a href="[HYPERLINK]">Link 2a>li>
	<li class="tab"><a href="[HYPERLINK]">Link 3a>li>
	<li class="tab"><a href="[HYPERLINK]">Link 4a>li>
	<li class="tab"><a href="[HYPERLINK]">Link 5a>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')) { ?>
		
			Link 1
			Link 2
			Link 3
			Link 4
			Link 5
		
	 }
	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!

Creating A Squeeze Page With Thesis – Part One

Adam Baird — Wed, 27 Jan 2010 18:27:07 +0000

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')) {
		?>

} } // 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.

Continue on to part two of the Thesis Squeeze Page Tutorial

How To Set Up Numbered Page Navigation In Thesis

Adam Baird — Fri, 22 Jan 2010 21:19:50 +0000

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 "Page $paged of $max_page";
			if ($paged >= ($pages_to_show-2)) {
				echo '1
... ';
			}
			for($i = $paged - $custom_range; $i <= $paged + $custom_range; $i++) {
				if ($i >= 1 && $i <= $max_page) {
					if($i == $paged) {
						echo "$i";
					}
					else {
						echo ' '.$i.' ';
					}
				}
			}
			if (($paged+$custom_range) < ($max_page)) {
				echo ' ...
'.$max_page.'';
			}
			echo "";
		}
	}
}
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 "Page $paged of $max_page";
	if ($paged >= ($pages_to_show-2)) {
		echo '1
... ';
	}

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 "$i";
		}
		else {
			echo ' '.$i.' ';
		}
	}
}

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 ' ...
'.$max_page.'';
}
echo "";

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; }

Classy Photo Display Made Easy with Jquery and Thickbox

Nick Reese — Thu, 14 Jan 2010 12:58:47 +0000

Though the Web is comprised mostly of text, images make the web interesting. Pictures not only help engage your audience but it also helps break up your content to make it more approachable. No one likes reading one long block of text. :) Today we are looking at adding a Jquery and Thickbox integration which allows users to click on an image and make it larger for better viewing.

Example:

This photo was used with permission via Visual Photo Guide.

How to Use Thickbox:

Once we get Thickbox installed on our site all you have to do is add “class="thickbox"” class to any link and that content will be displayed in the window. The tutorial below will show you how to integrate this into Wordpress 2.9+.

How to Use Jquery and Lightbox to Display Images

Today we will be using the Jquery JavaScript library that is built into wordpress. Along with a plugin for Javascript known as Thick Box. Since these are already included with Wordpress Core we just need to access them. To do this we will be using the Wordpress function known as wp_enqueue_script(). Now this may sound complex but it really isn’t.

Thanks to the astute comments of Nathan Rice and Justin Tadlock this tutorial has been made easier. Make sure to check the update below.

Understanding wp_enqueue_script

Basically what this function does is take a known script and make sure it isn’t called more than once. Since some plugins out there call Jquery, we want to make sure our tweaks don’t cause any errors by calling it twice.

Now wp_enqueue_script has a ton of functionality but we are only looking at using the built in stuff. The built in functionality lets you call most of the common Javascript libraries such as jquery and scriptaculous along with some of their super useful plugins such as Thickbox.

Jquery plugins work just like Wordpress plugins. The simply augment the functionality of the framework allowing you to do cool things. They are no more complex than that.

To use wp_enqueue_script() we simply need to know the name of library we want to call and where we want to call it. For example take the following function:


function jquery_enqueue() {
wp_enqueue_script('jquery');
}
add_action('wp_head', 'jquery_enqueue', 1);
?>

Explanation – In plain English:

The function named jquery_enqueue() simply calls the jquery library to be displayed using the built in Wordpress function wp_enqueue_script().
The add_action() function simply states where we want the code to be put on the page. In this case we chose wp_head which is located in the page header.

Putting It All Together

Now that we understand how the wp_enqueue_script() function works, lets add in everything we need to get the thickbox plugin integrated and ready to run.

For standard Wordpress users this code goes in your functions.php for Thesis Theme users this code goes in your custom_functions.php.


function thickbox_enqueue() {
	wp_enqueue_script('jquery');
	wp_enqueue_script('thickbox');
        wp_enqueue_style('thickbox');
}
add_action('wp_head', 'thickbox_enqueue', 1);

Explanation: In Plain English

The first function in the code above known as thickbox_enqueue simply calls the jquery library, the thickbox plugin, along with the required CSS and adds it to the header.

Advanced Options

Now everyone loves quick loading pages, so it is good practice to not include extra javascript code on pages where it isn’t needed. For example we here at Art of Blog only use this script for our actual post pages, so we make sure that Jquery and Thickbox are only loaded on the “single.php” pages. This is will help cut down on your page load speeds which will soon be factored into Google’s ranking algorithm. Here is the code we used to implement this tactic. Simply copy and paste this into either your functions.php file or for Thesis users your custom_functions.php file.

function thickbox_enqueue() {
	if (is_single()){
		wp_enqueue_script('jquery');
		wp_enqueue_script('thickbox');
                wp_enqueue_style('thickbox');
	}
}
add_action('wp_head', 'thickbox_enqueue', 1);

Updated: Add Jquery / Thickbox / CSS with One Line of Code:

Thanks to the advice in the comments on this post we can add Thickbox to Wordpress by simply adding this code to your functions.php file.

add_thickbox();

Questions / Comments

If you have any questions or comments about this tutorial we would love to hear them. If you think you know a better way, we are open to suggestions as well. ;)

Understanding Favicons: How to Add a Favicon to Wordpress, Thesis, or Your Website

Nick Reese — Mon, 11 Jan 2010 18:56:45 +0000

So its now 2010 and I am still seeing tons of websites without favicons. Favicons are definitely on the lower end of the importance scale but they really add polish to a website design. So if your website is still sitting out there showing the standard “white page” icon in Firefox, then this overview is for you.

Now most of this information isn’t necessarily new but lets just say if you want me to take your website seriously you should have a favicon. Lets face it I’m ADD and browse with too many tabs open and your Favicon helps me identify your website.

Now lets get started.

What are Favicons?

Favicons simply put is a “favorites” icon. Favicons are the small icons that you see next to the URL in your browser. Look for the one up top. It should look like this:

Favicons are also displayed in the “tab” area of many browsers such as Firefox and Internet Explorer.

How are Favicons Used?

Favicons help users identify what website they are visting. Favicons are used by nearly all modern browsers and are often used by other services such as RSS Readers and Bookmark Applications.

Why does my site need a Favicon?

This really is a personal question, but considering how easy they are to implement, I would highly suggest you add one. Plus, it helps make your website feel more polished.

How do I make a Favicon?

To make an favicon start by opening your favorite image editing software such as Photoshop or GIMP and create a new 16×16 file. Once you have a new file open, work your magic and create the Favicon of your dreams.

Once you are done save the file as a .png .

Conversion Time:

Before we can add the favicon to your website we need to convert it into a “.ico” format. To do this visit you will want to use the converter found at Faviconr.

Detailed Instructions:

Simply upload your .png file to faviconr.com
Faviconr will then convert your file into a .ico file. (you might have to hit Generate Favicon twice).
Once your favicon is generated simply click “Download Favicon.” Remember where you saved it.

How do I add a Favicon?

Once you have your .ico file saved. It is time to upload it to your website. Make sure you put it in the root directory. This means if you visit http://www.yourwebsite.com/favicon.ico you will get your favicon.

Once you have your Favicon uploaded simply add this line of code within your tags.

If you are using Wordpress this tag will be found within your “header.php” file.

Add a Favicon to Thesis

If you are using Thesis Theme to mange your website the process of adding a favicon couldn’t be easier.

Start by uploading your icon to your website “root.” Again, this means if you visit http://www.yourwebsite.com/favicon.ico you will get your favicon.
Next login to Wordpress and visit your Thesis Options Panel and paste the code you see above into the “Header Scripts” box.
Once you are done click the save button and visit your home page to see your new Favicon.

One Week Challenge Wrapup

Markus Urban — Sat, 09 Jan 2010 15:46:11 +0000

Click here to view the embedded video.

This is my wrapup video for the One Week Blog Challenge with my thoughts about what it took to create, my experience in the process, and some next steps you can take to launch your site (if you’ve been following the series).

Some of the additional resources I mentioned in the video (and some additional ones) are:

Shoemoney’s 6 basic ways of making money online – the much anticipated shoemoney system is coming out Jan 2010 – he’s one of my earliest influences in getting started in affiliate marketing)
Problogger – one of the originals and masters all about making money online with your blog with tons of quality resources
Copyblogger – all about writing compelling copy, great headlines, what works for social media, etc.
Income Diary – great information for
Source Control – a great example of an informational product put out by Muse Life Why informational products rock
Quick Sprout – all about enterpreneurship by Neil Patel, someone I really respect in online business
Stuck in Customs camera reviews - a great example of affiliate marketing done well in the photography industry that fits well with the personal blog and brand of Trey Ratcliff of Stuck in Customs photo blog.

Here’s to your success in 2010!

Art of Blog

Top 25 Tutorials for Thesis Newbies

Installation and Optimization

Thesis Hooks

Thesis Custom CSS

Thesis Design Tutorials

Introduction to Custom CSS in Thesis

Understanding CSS

The Basics of CSS

Custom.CSS

Clickable Custom Logo

Adding a Background Image to the Body

Thesis Hooks 101: An Introduction to Thesis Hooks

Creating a Simple Wordpress Function

Hooking Our Function

Installing and Optimizing Thesis Theme for Wordpress

Installation

The Easy Way

The Hard Preferred Way

Uploading

Setting File Permissions

Activation

Optimization

General Thesis Options

Title Tags

Homepage Meta Information

Post and Page Options

1. Custom Title Tag

2. Meta Description

3. Meta Keywords

Wrappin it Up

Creating A Squeeze Page With Thesis – Part Two

Stripping the Squeeze Page

Adding Custom Content

The Header

The Footer

The Styles

The Finished Product

A Few Extra Goodies

Get After It!!!

Creating A Squeeze Page With Thesis – Part One

What is a Squeeze Page?

How Can I Make A Squeeze Page?

Getting Started

Setting The Parameters

The Squeeze Page Content

Playing Hooky

Myles of Style

The Finished Product

How To Set Up Numbered Page Navigation In Thesis

What is Numbered Page Navigation?

How Can I Setup Numbered Page Navigation On My Blog?

The Code

The Breakdown

1. Setting the Parameters

2. How Big is Your Blog?

3. Where are We?

4. The Meat

5. The End

6. Thesis Implementation

Styling the Navigation

Classy Photo Display Made Easy with Jquery and Thickbox

Example:

How to Use Thickbox:

How to Use Jquery and Lightbox to Display Images

Understanding wp_enqueue_script

Explanation – In plain English:

Putting It All Together

Explanation: In Plain English

Advanced Options

Updated: Add Jquery / Thickbox / CSS with One Line of Code:

Questions / Comments

Understanding Favicons: How to Add a Favicon to Wordpress, Thesis, or Your Website

What are Favicons?

How are Favicons Used?

Why does my site need a Favicon?

How do I make a Favicon?

Conversion Time:

Detailed Instructions:

How do I add a Favicon?