• You have to upload an image, then copy the image’s URL, close the upload window, then paste the URL in a text box on the post page. It’s not very intuitive for non-technical people to use.
• It displays the full-size image on the featured posts and single post pages. A lot of times a client will upload an image that’s too large, thinking Thesis will just resize it. It resizes all the thumbnails but leaves the original on the main post.

WordPress has a great new featured called WordPress Post Thumbnails. When activated, you’ll see a “Set Featured Image” button in the post editor (see the image at the top). You click this, are taken to the upload screen to upload your image, and then you press “Use as Featured”. That’s all you have to do – no copying and pasting of URL’s.

There is a downside to this solution though. You have to manually code in the dimensions you want the thumbnails to be in your custom_functions.php file. If you add a new image size in the future, you’ll have to use the Regenerate Thumbnails plugin to go through all your images and make new thumbnails (it makes the thumbnails when the image is uploaded, so if you change the thumbnail dimensions all uploaded images will be wrong).

None of these issues are a big deal if you’re doing a project for a client, since you’ll be setting up the post images for them and they won’t need to resize them in the future (and if they do, they can hire you to install the plugin and click “Regenerate”).

So, here’s how you add WordPress Post Image support to Thesis. I’m going to post all the code, then walk you through what it’s doing.

/* Image Sizes */
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 500, 400 );
add_image_size( 'teaser-image', 250, 115, true);

add_action('thesis_hook_before_post','add_thumbnail');
function add_thumbnail() {
if(has_post_thumbnail() && is_single()):
echo '<p>'.get_the_post_thumbnail().'</p>';
elseif(has_post_thumbnail()):
echo '<p><a href="'.get_permalink().'">'.get_the_post_thumbnail().'</a></p>';
endif;
}

add_action('thesis_hook_before_teaser','teaser_thumbnail');
function teaser_thumbnail() {
if(has_post_thumbnail()):
echo '<p><a href="'.get_permalink().'">';	the_post_thumbnail('teaser-image');
echo '</a></p>';
endif;
}

• The first line, add_theme_support( 'post-thumbnails' ) , tells WordPress that this theme supports Post Thumbnails, so the post editor should have the featured image box. This is why you don’t already see it in Thesis.
• The next line defines the default size of a post thumbnail. If you just use ( number , number ) then it will use “Box resize mode” which will scale the image to fit within a box of that dimensions (no cropping). Note that you should set this to whatever you want. I have it set for a maximum of 500px wide and 400px tall.
• The next line defines a new image size (this one is for teasers). By adding “true” to the conditions it switches it to hard-crop mode, where it will always make a thumbnail of exactly those dimensions. Set this to whatever you’d like. I have it set to crop the image to 250px wide by 115px tall.
• The next block of code is the function that adds the post thumbnail to the beginning of the post. It basically says “if this post has a thumbnail and we’re on a single page, just show the image. If we’re anywhere else (like the homepage) make the image a link to the single post.”
• The next block of code is the function that adds the post thumbnail to teasers. It just says “if this post has a thumbnail, stick the teaser version of the image at the top and make it click through to the full post.” Since it uses the hook thesis_hook_before_teaser, it will only execute on teaser posts.

The following code should be placed in your custom_functions.php file if you’re using Thesis, or your functions.php file if you’re using any other theme:

This is what it’s doing:
- We created a filter called add_nofollow() which takes in the content of something, looks for <a>‘s and uses the wp_rel_nofollow_callback() function to add rel="nofollow" to it.
- The function the_category() outputs links with rel="category tag" already, and we don’t want to rel’s in the code. So we wrote a filter add_nofollow_cat() that first finds and removes the rel="category tag", then runs the filter add_nofollow().
- We ran the filter add_nofollow() on the function wp_list_categories(), and ran the filter add_nofollow_cat() on the function the_category().

Note: I don’t provide SEO advice to clients beyond my post Search Engine Optimization for WordPress, so don’t ask me if this is right for you.

Using the hooks thesis_hook_before_header and thesis_hook_after_header won’t work, since they’ll put the navigation outside of #header but still inside #header_area (the full-width wrapper for #header). Here’s how you can stick it before or after the #header_area, in its own full-width wrapper.

Navigation before the header

We’ll remove the default navigation, add our new navigation function to the hook thesis_hook_before_html, then actually define the function.

remove_action('thesis_hook_before_header','thesis_nav_menu');
add_action('thesis_hook_before_html','custom_nav');

function custom_nav() { ?>
<div id="nav_area" class="full_width">	 <div class="page">	 <?php thesis_nav_menu();?>	 </div>	</div>
<?php }

Navigation after the header

We’re going to do the same as above, but use the hook thesis_hook_before_content_area instead of thesis_hook_before_html.

remove_action('thesis_hook_before_header','thesis_nav_menu');
add_action('thesis_hook_before_content_area','custom_nav');

function custom_nav() { ?>
<div id="nav_area" class="full_width">		<div class="page">			<?php thesis_nav_menu();?>		</div>	</div>
<?php }

Sticking code between the posts can be used to stick ads in the middle of the site, or anything else. If you want something to show up after certain posts, but not all, then follow this technique.

As a review, there’s three conditions for hooks, with the third one being optional (and needed for this example). It goes:
add_action('hook_name','function_name',position)
On the site in question, we have 1 featured post followed by 10 teasers. So I’m going to use:

add_action('thesis_hook_post_box_bottom','homepage_widgets',1);
I then put all the code I wanted to show up after the first post in the function homepage_widgets().

Note that this will stick your function at the end of the first post box on every post, page and post aggregates (search, category, tag…). To limit it to just the homepage, your function should begin with if(is_home()): and end with endif;.

If you ever change a page’s name and URL, you should use this so visitors to the old URL will automatically be redirected to the new one. For this example, we’ll be moving “mydomain.net/old-page” to “mydomain.net/new-page”.

If you’re using an older version of Thesis, or a different theme, you can use a 301 Redirect plugin.

• Go to Pages > Edit, click on Old Page, and change the page’s title and slug (right below the title it shows you the permalink; click the “Edit” button next to this) to New Page.
• Go to Pages > Add New and create a page called Old Page.
• Scroll down to the section called “SEO Details and Additional Style” and put the URL to the New Page (http://mydomain.net/new-page) in the box called 301 Redirect.

Now any time someone visits mydomain.com/old-page, they will automatically be redirected to New Page. This also tells search engines that the page has moved and apply all the link popularity that was going to Old Page to New Page. This means that there will be little change in your search engine rankings.

One final thing I’d like to point out is changing category slugs. A lot of times your URL for posts might contain the category. If you change the category name and slug, WordPress will automatically set up redirects for any link that contained the old category name. So if you changed “old-category” to “new-category”, http://mydomain.net/old-category/hello-world-post would automatically redirect to http://mydomain.net/new-category/hello-world-post.

• Work natively in Thesis (all built in custom_functions.php – no plugins)
• Allow the author to easily edit his information from the WordPress administration area.
• Lots of information (and almost all optional): Avatar, bio written in HTML, email author link, author’s address and map…and links to any social networks the author uses (we have about 35 built into the system)

If you click on my name under this post’s title, you can see the end result.

While I can’t provide you with the exact code we used, I can show you the tutorials I’ve written that accomplish each part of this.

First, there’s two custom options pages:a site-wide one for the Google Maps API key,  and an author-specific one that contains all the author’s profile information. Each person who logs in will see their own version of this page.

Here is my tutorial on Custom Options Pages. This tutorial actually walks you through setting up a site-wide one. To make a user-specific one, there’s a few things you’ll have to do differently:

• The add submenu page line should be changed to
  add_submenu_page('users.php', 'Author Details', 'Author Details', 'edit_posts', 'author-details', 'author_details_admin');
  As the Codex explains, this adds it as a submenu to the Users menu and gives access to anyone who has permission to edit posts (so Authors).
• Instead of using update_option(), which updates a site-wide variable, you’ll use update_usermeta(), which links the variable to the user. That way, the field “Twitter ID” is linked to the user who inputs it, and doesn’t show up on other users’ profiles. See update_usermeta page in the Codex for information on how to use it.
• Likewise, when retrieving the variables to display on the custom author page, you’ll use get_usermeta() rather than get_option().

So, you’ve created two options pages: Author Details and Google Maps API Key. Now you need to code the actual author page that uses these pages. Some helpful hints:

• To stick something on the author page, use the hook thesis_hook_archive_info().
• If you had multiple fields for the address in the options page like I did (Address Line 1, Address Line 2, City…) combine them all into one variable like this:
  $fullAddress = $address . ' ' . $address2 . ' ' . $city . ', ' . $state . ' ' . $zip;
• Use the Gravatar tutorial to add the author’s avatar.
• Use the Google Maps tutorial to add a map (use the $fullAddress variable you made above)
• For the HTML bio, we originally had a box on the Author Details option page that allowed the author to write it. The client then requested we use an actual WordPress post so that the authors would have at least one post, and they’d be able to use the Visual editor to write their profile. So now in the option page we ask for the Post ID they want to use as their profile. Pick whichever method you prefer.

I’m sorry I can’t be more helpful and provide the actual code, but my client hopes to sell this solution. Hopefully you’ll be able to hack your own custom author page together.

If you do, please share it in the comments!

If you use thesis_hook_after_post, your function appears AFTER the Comments link. So what we need to do is remove the comments link, write a new function that contains Add This, Related Posts, and the Comments link function, and stick that at the end of the post. For the Related Posts, I’m using this plugin.

/* Add This, Related Posts, and Comments */
remove_action('thesis_hook_after_post','thesis_comments_link');
function custom_related_posts() {
if(is_single() || is_front_page()): ?>
[your AddThis.com code]
<?php wp_related_posts();
thesis_comments_link();
endif;
}
add_action('thesis_hook_after_post','custom_related_posts');

Note that the hooks I use here is specific to Thesis. If you’re using Genesis you should be able to replace the hooks with genesis ones ( genesis_before_post_title instead of thesis_hook_before_headline …). If you’re not using a framework, you can skip the functions/hooks and drop the code directly in your theme.

Displaying an author’s gravatar next to posts
If you have multiple authors on your blog, you might like to display their picture next to posts. We’ll use the WordPress function get_author() (more information on this in the WordPress Codex).

First Function – Displays gravatar next to Features on homepage and individual post pages.

Second Function – This adds the gravatar next to the teasers (if you’re using them).

Adding your own default Gravatar

If your commenters don’t have a Gravatar, WordPress will show a default one. You can set your own default Gravatar (like your logo), by adding the following code to your functions.php file.

—

You can add introductory text to the top of your category page by using the thesis_hook_archive_info hook.

For the following example, we’re assuming you have two categories for which you’d like intros, with the category slugs of category-1 and category-2. You can use category names, id’s or slugs for this. See The Codex and scroll down to is_category for more information on usage.

In custom_functions.php:

function category_intro() {
if(is_category('category-1')) { ?>
<p>This is the intro text for Category 1</p>
<?php }else if(is_category('category-2')) { ?>
<p>This is the intro text for Category 2</p>
<?php }
}
add_action('thesis_hook_archive_info','category_intro');

This will add the block of text above all the posts, but below the archive_info div (the part that says “From the Category Archives”) . You also might want to hide the archive_info div by putting this in your custom.css file:
.custom #archive_info {display:none;}

—

One of the most common modifications to the Thesis theme is replacing the header text with your own custom logo or image. What a lot of people forget to do is add a bit more code to make that logo clickable.

1. First, upload your logo to the  /custom/images folder.
2. Go to Thesis Options, and click “Header” under Display Options. Make sure “Show site name in header” is selected (it is by default).
3. Open custom.css, and paste the following code. Make sure you change the height and width to match your logo’s dimensions:

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


That second line is what a lot of people forget. If you don’t include it, you’ll have the logo up there but it won’t be clickable. Now, when someone clicks it they are sent to the homepage.

And that’s it!