If you are running the W3 Total Cache plugin, then start with Step 1. If you are not running the W3 Total Cache plugin, then start with Step 2.

1. Disable Object Cache in W3 Total Cache’s configuration settings.
2. Go to Thesis > Design Options and note all of the current settings there (you’ll need to refer to them in Step 4).
3. Go to Thesis > Manage Options and click “Restore Default Design Options”.
4. Go back to Thesis > Design Options, and manually reconfigure the settings you noted from Step 2 (remember to click the SAVE button).

Going Forward

• Be sure to periodically download backups of your Thesis Options — that way, if this issue comes up again, you can use “Upload Options” to restore the last “clean” (i.e., non-corrupted) Design Options backup file you have (in lieu of Steps 3 and 4 above).
• Make sure you’re using the latest version of Thesis — changes were made as of 1.8.4 in an attempt to reduce the chances for this issue to recur.

Finishing a really long post?

Does it feel “too long” in terms of the scrolling your visitors will need to do?

You may want to consider “paginating” that 5,000 word monster article.

Pagination breaks posts into shorter segments using the <!--nextpage--> quicktag.

To avoid confusion, note that the <!--more--> quicktag is a related concept — but the more quicktag can only be used once on a given post, and “more” tends to be used as a lead-in for a post manually excerpted on the home page.

The <!--nextpage--> quicktag, by contrast, separates a post into as many URL units — as many “pages” — as you, the author, want.

Using “NextPage” also creates a visible set of numbers at the bottom of the content area.  If you have seven sections of a post, by using six <!--nextpage--> quicktags, you’d see pagination at the bottom of your post like so:

If your permalink looked like this: http://yoursite.com/my-post-name/ prior to pagination, it will still appear this way on the first section of the article.

However, each “nextpage” of your post will create an additional permalink extension.

Your fourth “next page” would look like this: http://yoursite.com/my-post-name/4/ — notice the /4/ makes this a unique URL.

Paginated links are “dofollow” by default.  However, excessive use of pagination is an SEO consideration — the same <title> is repeated on each paginated URL of your post — and links such as “2″ are not considered a prime use of anchor text.

In other words, while using the <!--nextpage--> quicktag can improve readability and increase average page view figures, pagination should be used with restraint to avoid dilution of PageRank — in other words, to maintain optimal SEO power.

As an additional note for Thesis users, if you a Thesis “post image” and <!--nextpage--> are used for the same post, your post image will appear at the top of each “paged post” URL.

The repetition of your post image is not necessarily a bad thing, and can help tie the paginated post together — but it’s a useful detail to know in advance.

Customizing and Styling the NextPage “Post Pagination”

You’ve got the concept of “splitting a post into multiple pages” (URLs) down.  But what if you want to change the text of “Pages:” to something else?

Maybe you’d like to add a solid CSS target for this area, which makes it easier to apply custom styles to paginated posts?

Let’s see if we can go from the look of the first “default nextpage quicktags” in the screen capture above to the following:

Above, the “2″ represents the current “page number” of the segmented post — this is the section the visitor is actively viewing.

The red “5″ demonstrates what your paginated “nextpage” quicktag links will do when a visitor hovers over the paginated links.

To format the “nextpage” section of text and numbers (as links) we can use a PHP filter.

In our filter below, the “Pages:” text will be replaced with “Sections –” instead. You can use your own preferred text, of course.  In this filter, we’ll also wrap the entire area in a class-defined div for CSS purposes.

To begin your nextpage “paginated links” makeover, add the following to your custom_functions.php file contents:

function custom_nextpage_links($defaults) {
$args = array(
'before' => '<div class="my-paginated-posts"><p>' . __('Sections &#151;'),
'after' => '</p></div>',
);
$r = wp_parse_args($args, $defaults);
return $r;
}
add_filter('wp_link_pages_args','custom_nextpage_links');

For the color and style, add this to your custom.css file contents:

.custom .my-paginated-posts {
font-size:10px; font-weight:normal; font-family:arial; }

.custom .my-paginated-posts p { font-size:1.4em; }

.custom .my-paginated-posts p a {
background:#E8E8E8; color:#000; margin-left:0.6em; margin-right:0.6em;
padding:0.5em 0.7em; text-decoration:none; }

.custom .my-paginated-posts a:hover { color:#fff; background:#7F1315; }

The combination of filter and CSS formatting takes the paginated “next page” navigational structure from this:

To the more refined “nextpage” look shown below:

The selectors established can be used to further modify the design to your taste.

Now you know how to create multi-page posts — splitting longer posts into bite-sized units — and you know how to make the “nextpage” links look great, too!

Thesis makes building unique, custom designs easier than ever. This tutorial will show you just how simple it is. Before we get started, however, please familiarize yourself with the basic concepts of the Thesis Custom Loop API.

Basic Template

Let’s start with a very basic example.

The first file you see is the one line of CSS for our basic example. We’ll be changing the body background to #000 (black). That is primarily there so we can see that we have successfully forced Thesis to regenerate the CSS.

The next file is the barebones custom_functions.php file. This is a skeleton class that will force Thesis to regenerate the CSS when the skin is initially installed. It is important to point out that this will only happen once.

1. Copy/paste custom.css and custom_functions.php to your files in the custom folder (or you can download the tar ball here)
2. Once you’ve installed everything, visit any page on the admin side.
3. Look at your site. The body background should have changed to black.

/*---:[ body ]:---*/
body.custom { background: #000; }

<?php
// deny direct access
if (! defined('ABSPATH'))
	die('Please do not directly access this file');

class thesis_skin_example extends thesis_custom_loop {
	public function __construct() {
		parent::__construct(); // this "activates" the Custom Loop API
		add_action('init', array($this, 'init'));
	}
	public function init() {
		$this->actions();
		$this->filters();
		$this->switch_skin();
	}
	public function actions() {
		// add and remove actions here
	}
	public function filters() {
		// add and remove filters here
	}
	private function switch_skin() {
		//	Since after_switch_theme won't run, let's make sure that we generate the CSS
		if (is_admin() && ! get_option(__CLASS__ . '_generate')) {
			thesis_generate_css();
			update_option(__CLASS__ . '_generate', 1);
			wp_cache_flush(); // flush the cache so things don't break!
		}
		else return null;
	}

	// below this line, use methods from the Custom Loop API.
	public function home() {
		thesis_loop::home(); // remove this line and put your own home loop here
	}
	public function archive() {
		thesis_loop::archive(); // remove this line and put your own archive loop here
	}
}
new thesis_skin_example;

Advanced Template

Obviously, a barebones skin class doesn’t really do much for the imagination. So, let’s take a look at a more advanced customization. Please read the notes in the code!

1. Copy/paste custom.css and custom_functions.php to your files in the custom folder (or download the tar ball here)
2. Once everything is installed, visit any page on the admin side.

This class does a few things:

• strips the container from the nav menu
• removes the default Thesis style.css
• excludes the default “uncategorized” category from the home page
• filters out some of the css related to the nav colors
• applies a simple CSS reset ($this->css_reset) that is now a default part of the thesis_custom_loop class

/*---:[ body ]:---*/
body { background: #000; }

/*---:[ menu ]:---*/
.menu { list-style: none; }
	.menu li { float: left; }
		.menu li a { text-decoration: none; display: block; }

/*---:[ post image fix from @kristarella ]:---*/
.post_image { max-width: 100%; height: auto; }

/*---:[ widget lists ]:---*/
.sidebar_list { list-style: none; }

/*---:[ clearfixes ]---*/
#content_box:after, .menu:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; }

<?php
// Initial sanity check
if (! defined('ABSPATH'))
	die('Please do not directly access this file');

// classes are a VERY important part of 2.0, so you need to be familiar with them.

class thesis_skin_example extends thesis_custom_loop {

	public function __construct() {
		// run the parent constructor so we can access the thesis custom loop api
		parent::__construct();

		// run the main init
		add_action('init', array($this, 'init'));
	}

	public function init() {
		// actions and filters that will run on init. you could put other things here if you need.
		$this->actions();
		$this->filters();
		$this->switch_skin();
	}

	public function actions() {
		// add and remove actions here

		// modify the nav menu to exclude the div wrapper that WP defaults to
		remove_action('thesis_hook_before_header', 'thesis_nav_menu');
		add_action('thesis_hook_before_header', array($this, 'nav'));
	}

	public function filters() {
		// add and remove filters here

		/* 
		*	Filter out the standard thesis style.css. 
		*	Run this with a priority of 11 if you want to make sure the gravity forms css gets added.
		*/
		add_filter('thesis_css', array($this, 'css'), 11, 4);
	}

	public function css($contents, $thesis_css, $style, $multisite) {

		// filter the Thesis generated css. in this example we're removing all the nav styles related to color
		$generated_css = $this->filter_css($thesis_css->css);

		/* 
		*	You can access the thesis_css object, which contains a variety of settings. 
		*	As an example, I'll show you how to access nav text color.
		*	Remember that you can always do this in custom.css if you don't care about users having control over the colors 
		*/
		$my_css = "n/*---:[ my nav menu styles ]:---*/n" // it's always a good idea to add in comments as to what you're adding
			. ".menu li a { color: #{$thesis_css->nav['link']['color']} }n"
			. ".menu li a:hover { color: #{$thesis_css->nav['link']['hover']} }nn";

		// put in everything except the main thesis style.css. also add an initial css reset
		$css = $thesis_css->fonts_to_import . $this->css_reset . $generated_css . $my_css;

		// return it
		return $css;
	}

	public function filter_css($css) {
		if (! empty($css)) {

			// remove the nav colors
			if (preg_match('|/*---:[ nav colors ]:---*/|i', $css))
				$css = preg_replace('|/*---:[ nav colors ]:---*/(n.+){7}|i', '', $css);

			// you could add more filtering here
		}
		return $css;
	}

	public function nav() {
		// we're doing this so we can remove the default container div output by WordPress
		global $thesis_site;
		if (function_exists('wp_nav_menu') && $thesis_site->nav['type'] == 'wp') { #wp
			$args = array(
				'theme_location' => 'primary',
				'container' => '',
				'fallback_cb' => 'thesis_nav_default'
			);
			wp_nav_menu($args); #wp
			echo "n";
		}
		else
			thesis_nav_default();
	}

	public function switch_skin() {
		//	Since after_switch_theme won't run, let's make sure that we generate the CSS
		if (is_admin() && ! get_option(__CLASS__ . '_generate')) {
			thesis_generate_css();
			update_option(__CLASS__ . '_generate', 1);
			wp_cache_flush();
		}
		else return null;
	}

	public function home() {
		// this is really just what thesis normally does, except we are excluding posts in "uncategorized"

		$post_count = 1;
		$teaser_count = 1;

		$args = array(
			'category__not_in' => array(1) // pass an array of cat ids you DON'T want
		);
		$home_query = new WP_Query($args); // stick that in the WP_Query class

		while ($home_query->have_posts()) { // I do my while loops in brackets cuz I'm a rebel like that
			$home_query->the_post();

			if (apply_filters('thesis_is_teaser', thesis_is_teaser($post_count))) {
				if (($teaser_count % 2) == 1) {
					$top = ($post_count == 1) ? ' top' : '';
					$open_box = '<div class="teasers_box$top">';
					$close_box = '';
					$right = false;
				}
				else {
					$open_box = '';
					$close_box = "</div>";
					$right = true;
				}

				if ($open_box != '') {
					echo $open_box;
					thesis_hook_before_teasers_box($post_count);
				}

				thesis_teaser($classes, $post_count, $right);

				if ($close_box != '') {
					echo $close_box;
					thesis_hook_after_teasers_box($post_count);
				}

				$teaser_count++;
			}
			else {
				$classes = 'post_box';

				if ($post_count == 1)
					$classes .= ' top';

				thesis_post_box($classes, $post_count);
			}

			$post_count++;
		}

		if ((($teaser_count - 1) % 2) == 1)
			echo "</div>";
	}
}

new thesis_skin_example;

Does Thesis support child themes? That is a question many users have. The answer is definitively “yes”.

This tutorial will show you the best way to make a child theme for Thesis. We’ll start with a barebones class, then add in some flair to show you the possibilities. I think you’ll be delighted by how simple making a child theme with Thesis really is.

If you aren’t familiar with the Thesis Custom Loop API, quickly run over it as it is the foundation for what we’ll cover here.

The Basics

Every child theme needs to have, at the very least, a style.css. In theory, your whole child theme could simply be that one file. The basic example includes the necessary header information and one line of CSS.

The functions.php file, though not required by WordPress, is where all of your Thesis child theme customizations should occur. Do not include a custom folder with child themes! Thesis custom folders belong to Thesis, not the child theme.

It is important to point out that WordPress treats child themes in an interesting way. The child theme’s functions.php file is actually included before the parent theme’s. That means that each Thesis child theme must first include Thesis’ functions.php file in order to access the yummy Thesis goodness contained within.

You may also notice that we are using a class instead of a bunch of disparate functions. This is for a few reasons:

1. To use the Custom Loop API
2. Better organization
3. Classes are how you will interact with Thesis 2.0, so you need to understand them

To use the child theme:

1. Create a folder in the themes directory
2. Create a style.css file and a functions.php file
3. Copy/paste the code below to the relevant file (or just download the tar ball here)
4. Navigate to Appearance > Themes and Switch to the child theme
5. Visit your home page. The background should be black.

<?php
// Iinitial sanity check
if (! defined('ABSPATH'))
	die('Please do not directly access this file');

// Bring in the main functions file so we have access to all the yummy Thesis goodness
include_once(TEMPLATEPATH . '/functions.php');

// we encourage you to set up a class. classes are a VERY important part of 2.0, so you need to be familiar with them.

class thesis_child_theme_example extends thesis_custom_loop {

	public function __construct() {
		// run the parent constructor so we can access the thesis custom loop api
		parent::__construct();

		// run the main init
		add_action('init', array($this, 'init'));
	}

	public function init() {
		// actions and filters that will run on init. you could put other things here if you need.
		$this->actions();
		$this->filters();
	}

	public function actions() {
		// add and remove actions here

		// this will force thesis to generate CSS when the user switches to the child
		add_action('after_switch_theme', 'thesis_generate_css');
	}

	public function filters() {
		// add and remove filters here
	}

	public function home() {
		thesis_loop::home(); // remove this line and enter your custom loop
	}

	public function archive() {
		thesis_loop::archive(); // remove this line and enter your custom loop
	}
}

new thesis_child_theme_example;

/*
Theme Name:     Thesis Theme Example Child
Theme URI:      http://diythemes.com/plans/
Description:    Child theme for the Thesis
Author:         DIYthemes - Matt Gross
Author URI:     http://diythemes.com
Template:       thesis_184
Version:        1.0
*/

/*---:[ body ]:---*/
body { background: #000; }

Advanced Customization

Now that we’ve covered the basics, lets dive into some real customization. Basically, what we’re doing here is:

• forcing Thesis to regenerate CSS
• exclude the Thesis style.css and include the child’s style.css
• filter out styles related to the nav coloring, then adding our own back int
• remove the containing div from around the nav menu

Be sure to copy/paste the code below to the correct files, or you can download the tar ball here.

<?php

if (! defined('ABSPATH'))
	die('Please do not directly access this file');

include_once(TEMPLATEPATH . '/functions.php');

class thesis_child_theme_example extends thesis_custom_loop {

	public function __construct() {
		parent::__construct();
		add_action('init', array($this, 'init'));
	}

	public function init() {
		// actions and filters that will run on init. you could put other things here if you need.
		$this->actions();
		$this->filters();
	}

	public function actions() {
		// add and remove actions here

		// this will force thesis to generate CSS when the user switches to the child
		add_action('after_switch_theme', 'thesis_generate_css');

		// modify the nav menu to exclude the div wrapper that WP defaults to
		remove_action('thesis_hook_before_header', 'thesis_nav_menu');
		add_action('thesis_hook_before_header', array($this, 'nav'));
	}

	public function filters() {
		// add and remove filters here

		/* 
		*	Filter out the standard thesis style.css. 
		*	Run this with a priority of 11 if you want to make sure the gravity forms css gets added.
		*/
		add_filter('thesis_css', array($this, 'css'), 11, 5);
	}

	public function css($contents, $thesis_css, $style, $multisite, $child) {

		// filter the Thesis generated css. in this example we're removing all the nav styles related to color
		$generated_css = $this->filter_css($thesis_css->css);

		/* 
		*	You can access the thesis_css object, which contains a variety of settings. 
		*	As an example, I'll show you how to access nav text color.
		*	Remember that you can always do this in style.css if you don't care about users having control over the colors 
		*/
		$my_css = "n/*---:[ my nav menu styles ]:---*/n" // it's always a good idea to add in comments as to what you're adding
				. ".menu li a { color: #{$thesis_css->nav['link']['color']} }n"
				. ".menu li a:hover { color: #{$thesis_css->nav['link']['hover']} }nn";

		// put in everything except the main thesis style.css. also add an initial css reset
		$css = $thesis_css->fonts_to_import . $this->css_reset . $generated_css . $my_css . $child;

		// return it
		return $css;
	}

	public function filter_css($css) {
		if (! empty($css)) {

			// remove the nav colors
			if (preg_match('|/*---:[ nav colors ]:---*/(n.+){7}|i', $css))
				$css = preg_replace('|/*---:[ nav colors ]:---*/(n.+){7}|i', '', $css);

			// you could add more filtering here
		}		
		return $css;
	}

	public function nav() {
		global $thesis_site;
		if (function_exists('wp_nav_menu') && $thesis_site->nav['type'] == 'wp') { #wp
			$args = array(
				'theme_location' => 'primary',
				'container' => '',
				'fallback_cb' => 'thesis_nav_default'
			);
			wp_nav_menu($args); #wp
			echo "n";
		}
		else
			thesis_nav_default();
	}

	public function home() {
		$post_count = 1;
		$teaser_count = 1;

		$args = array(
			'category__not_in' => array(1)
		);

		$home_query = new WP_Query($args);

		while ($home_query->have_posts()) {
			$home_query->the_post();

			if (apply_filters('thesis_is_teaser', thesis_is_teaser($post_count))) {
				if (($teaser_count % 2) == 1) {
					$top = ($post_count == 1) ? ' top' : '';
					$open_box = "ttt<div class="teasers_box$top">nn";
					$close_box = '';
					$right = false;
				}
				else {
					$open_box = '';
					$close_box = "ttt</div>nn";
					$right = true;
				}

				if ($open_box != '') {
					echo $open_box;
					thesis_hook_before_teasers_box($post_count);
				}

				thesis_teaser($classes, $post_count, $right);

				if ($close_box != '') {
					echo $close_box;
					thesis_hook_after_teasers_box($post_count);
				}

				$teaser_count++;
			}
			else {
				$classes = 'post_box';

				if ($post_count == 1)
					$classes .= ' top';

				thesis_post_box($classes, $post_count);
			}

			$post_count++;
		}

		if ((($teaser_count - 1) % 2) == 1)
			echo "ttt</div>nn";
	}
}

new thesis_child_theme_example;

/*
Theme Name:     Thesis Theme Example Child
Theme URI:      http://diythemes.com/plans/
Description:    Child theme for the Thesis
Author:         DIYthemes - Matt Gross
Author URI:     http://diythemes.com
Template:       thesis_184
Version:        1.0
*/

/*---:[ body ]:---*/
body { background: #000; }

/*---:[ menu ]:---*/
.menu { list-style: none; }
	.menu li { float: left; }
		.menu li a { text-decoration: none; display: block; }

/*---:[ post image fix from @kristarella ]:---*/
.post_image { max-width: 100%; height: auto; }

/*---:[ widget lists ]:---*/
.sidebar_list { list-style: none; }

/*---:[ clearfixes ]---*/
#content_box:after, .menu:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; }

Thesis Search Widget

This page needs further editing.

WordPress 3.1.3 provides an image editor in your WP administration dashboard.

Great — but say you’re looking at a photograph you took over the weekend.  How to go from a large, unedited image located on your computer to a cropped, resized, and — there if you need it — flipped or rotated final image to use in your pages and posts?

The “how to” of WordPress image editing is the focus of this tutorial.

First, the image on your computer needs to be available as an image on your remote host server.  In other words, WordPress needs server-side access to the image so it can make and save changes.

Uploading an image — or images — is easier than ever in recent versions of WordPress.

Presuming you are logged into WordPress, navigate to: Media > Add New.

You should see a screen like this one:

Uploading new media — for this guide, an image — can be done in various ways.

If you know your image is larger than 2MB, or if a set of images, combined, will exceed the maximum filesize allowed, you’ll need to use an alternative to the “Drop File Here” drag-and-drop method.

We’ll assume your original image is under 2MB, which means you can simply drag the image from your desktop directly into the dotted-border area of the WordPress Media Uploader.

Large uploads may take a while to reach the server, but there’s a progress indicator to keep you informed as to your image’s progress.

Once your image is uploaded, you’ll see a screen like this in WordPress:

Because the focus of this entry is on using the WP image editing controls, we’ll gloss over — arrows 1 and 2 — adding a title, alt text, description, and captions.

Add these as desired and save them — for our purposes, we’ll eventually click “Edit Image” as marked by arrow 3 above.

Clicking the “Edit Image” button produces an overlay screen; this is the heart of the WordPress image editing software.

With an image uploaded, your WP image editor interface will look like this initially:

There are four primary actions near the top — crop, rotate left or right, flip (mirror), and the ever-important undo/redo pair of commands.

To the right are commands related to scaling, aspect ratios, and application of the edits you make — effectively, these options dictate whether your editing applies to the thumbnail version of your image, the non-thumbnail version(s) of your image, or to all versions of the image.

Note that in this context, the “thumbnail” is the WordPress thumbnail, which is not the same as the thumbnail images used (default) by Thesis.

Image Editing in WordPress — Selecting & Cropping

Making a “selection” — a rectangular area on the image that is smaller than the full image — is a common way to adjust the aspect ratio (skyscraper, square, wide rectangle) by eye.

In most cases, once you’ve made a selection, the next step is to crop to the selection, reducing both the image size in pixels and kilobytes.

A left-click with your input device, followed by a “dragging” movement while holding down the left-click button or equivalent, will result in a rectangle of the size and shape that is determined by when and where you release of the input button.

Once you’ve made a rectangle, your image will have a selected area such as this:

Because the original image of this tutorial’s example is quite large at 3456px wide, the selection — while only about half the size of the visible area — remains fairly large.

The value of the selection in pixels (1693 x 1140) can be seen at right — this is the “Selection” value pair.

While some WordPress site owners may wish to have large images for use in a lightbox, attachment gallery pop-ups, infographics, or other specialized purposes, for the most part, if you’re using an image in the context of a typical “content column” post or page, then 800px or less would be a typical width.

For comparative purposes, this tutorial’s content column is 616 pixels wide.  Our image selection is therefore currently almost three times larger than we’d need it to be if this image were intended for use in this User Guide content column.

Because the size of desired image is often less than that of the original image size, cropping is a common “next step” once a selection has been made.

In our example, the vantage from which the image was captured moves downhill and to the left, and contains a large grassy foreground and a walking path — we’ll say goodbye to that.

The selection rectangle, once it is visible as in the above screen capture, can be dragged and manipulated.

As a result, being “off” by a few pixels when you release the mouse is no problem.  Simply grab the brighter-toned selection rectangle, and drag it around to move it into a desired position on your original image.

Among the icons along the top of the WordPress image editing panel, the “crop” icon is the first.

With our image reduced to a selection of 1693:1140, clicking the “crop” icon results in the same WordPress tools and image editing appearance we had initially, but our image has been trimmed to size by the cropping action.

Not shown as an image in this tutorial is an “are you sure?” save or cancel step.  Saving your edited image brings (you) the WordPress user back to the “Upload New Media” screen.  There, you can again click “Edit Image” to continue image modification.

Clicking “Edit Image” after our cropping action, we now see this:

What was previously our selection is now the whole image.  If the Save/Cancel step wasn’t a deterrent to an image accident, there’s a link (arrow above) to restore the original image.

Image Editing in WordPress — Aspect Ratios

Every image has an aspect ratio.

All an aspect ratio really is, in WordPress, graphics programs — even on your television — is the image width divided by the image height.

The aspect ratio tool within the WordPress Image Editor is useful in quickly adjusting your image to optimize your use of whitespace, and helps calculate a natural feel for text-wrapping interactions of the image, as well as other spatial concepts of this kind.

Sound hard?

Let’s do some math to prove it’s okay.

A square is the same on all sides, so pretending we have a square that is 500×500 pixels, the aspect of the square is 1:1 — wonderful, simple baby math, not some horrible flashback to cramming for trig finals.

Common “wide not tall” rectangles might be a 2:1 or 3:1 aspect ratio.  Many “widescreen” televisions and computer monitors are 4:3 or 8:5 aspect ratio, for example.

Rotate the “widescreen” rectangle on its side, and you have a “skyscraper” image — an image taller than it is wide — where common aspect ratios for “tall” images are 1:4, 1:3, 1:2 — etc.

The point in discussing aspect ratios abstractly is that you may discover you like a handful of specific ones for use in your posts.

As a Thesis user, let’s say you like your “post images” at an aspect ratio of 5:1, every time, where an example would be 500px wide by 100px high.

But in your post content, left- or right-aligned images look better to you as either squares (1:1) or mini-skyscrapers (1:2) most of the time.

Your preferred ratios may come from experience, examining the relational widths of your columns, the size and face of your font, various margin and padding settings, split-testing results, focus groups — or maybe you just like it that way, back off already!

Whatever your reasons for aspect ratio preferences, The WordPress image editor takes the annoyance of “I think it looks okay” aspect ratio guesswork on an image-by-image basis, making it very easy to get the precise ratio you want for your images time after time.

We’ve already cropped our image once “by eye” to remove unwanted portions of the image.

By selecting some or all of the remaining image — effectively preparing another cropping action — and then typing “2″ and “1″ into the right-side “Aspect Ratio” area, as seen below, the WP image editor works its instant image magic:

No guessing. No finger-counting math.

You’ve got an aspect of 2:1 (easily changed if desired) — and you can drag that aspect ratio “box” around on your image to decide the best area for the image crop.

The values in pixels of your “Selection” will also appear once you’ve made a selection and establish a desired aspect ratio — remember, it’s important to keep your image wide enough in pixels to fill the ultimate destination.

In the screen capture below, the selection area is 114 pixels wide by 457 pixels tall — a “skyscraper” with an aspect ratio of 1:4.

This is wide enough to work within the content of a post, provided there’s enough text to wrap around and exceed the height of this fairly “tall” image.

Using an aspect ratio to get close to the desired width-height relationship for your image, you can then dial-in your exact values with the “Selection” numbers if needed.

For example, say you want an image that is exactly 100 pixels wide.

By choosing the aspect ratio of 1:4 and going from our original “mouse dragging” selection, our image is now 114 x 457 px — however, you can change the “Selection” number to “100″ instead of “114″ — and then simply save the changes.

The aspect ratio will not dynamically reflect a manual adjustment of the “Selection” height or width, and vice-versa.

In other words, if you set a 1:4 aspect ratio, then change the image “Selection” width value from 114px to 100px, the aspect ratio will not reflect this change.  But here’s a tip — if you move the “selection area” slightly, these fields will update!

As with cropping, if you’re done choosing an aspect ratio and/or entering a custom “selection” value, save your image.

While Thesis thumbnails are not equivalent to the “thumbnail settings” in the WordPress Image Editing panel, if you use WP thumbnails through plugins or custom code, ensure that your actions do not fall short of the minimum desired thumbnail dimensions while cropping images to a selected area.

Image Editing in WordPress — Rotation & Flips

For various reasons, some features of the WordPress Image Editor may not be available on all servers and hosts. In creating this User Guide entry, rotation was not an available action. Apparently the function imagerotate() was on unscheduled vacation.

Assuming these functions all work on your host, knowing the difference between rotation and flips, in the context of image editing, is probably self-explanatory, but as it’s important to know, let’s take a deeper look.

Each of these four icons represents a calculation of a line turned around an axis.

That sounds much harder than it truly is; let’s talk through the basic idea.

The axis for image rotation is a point in the center of the image — as a thought exercise, imagine jabbing a sharp pencil into the center of a sheet of (physical) paper.  You could then rotate that piece of paper like a wheel around the pencil’s point.

Flipping, on the other hand, uses an invisible line — this is the axis — directly through the center of the image.  It then “flips” a reflection along that axis (a flip can also be called a “fold-down” or a mirror action).

Rotation, which is simplified in the WP image editor compared to most offline image editors, is limited to adjustments of 90 degrees — right angles. Rotations can be made to the left or the right, i.e. clockwise or counter-clockwise.

A common use of rotation would be to change a photograph of a person “lying on its side” (landscape) to be oriented as a “right side up” (portrait) image.

Horizontal Flip is a reflection of your image along an invisible, vertical axis or line in the center of the image.

If you begin with an image of an arrow pointing right, then applying a horizontal flip will make the arrow point left.

Vertical Flip is a reflection of your image along an invisible, horizontal axis or line in the center of the image.

If you have an image of an arrow that’s pointing up, applying a vertical flip will make the arrow in your image image point down.

When and why would you flip an image?

Taking the same mountainside image we’ve used throughout, and presuming a reversion (Undo action) such that we start from this:

Notice that the slope of this image runs downhill from the right to the left.

The human eye follows image contours of this kind, often subconsciously.

If this image were placed in the content of a post — and if you want your visitor’s eyes to track down and to the right — then as the image stands now, your visitors scanning from top to bottom will “run their eyes right off the page” thanks to this image.

Do images make a difference in conversions and user behavior? Science says yes.

While your visitors will quickly adjust and recover from “off-roading” of this sort, once back on course, the visitors’ eye is less likely to swing to your intended actions.

So in our example, had the image been “pointing” to another on-page section — a call to action, a button, a link, etc — conversions would rise slightly if the image were flipped.

Using one of the functions examined above — a horizontal “flip” — corrects the direction of the eye-tracking.

While you can select a section of the image, flipping is an “all or nothing” action — the whole image is reflected, regardless of your selected area.

Assuming that everything else is as you want it, your image has now been cropped, cropped again to an aspect ratio that will be harmonious within the greater context of your site, flipped to “point” the user’s eye in subtle ways to content or actions of your choosing, and you’re ready to insert the image into your posts or pages.

While the WordPress Image Editor is not equal to programs such as Adobe PhotoShop, it provides a clean, simple interface to perform the basic actions most commonly needed to work with WordPress images.

Enjoy taking the WP image editor for a spin!

Pinterest is a fun, image-based social network that currently boasts an astronomical growth curve, long user sessions, and presents a demographic skewed female that runs through higher age brackets than most new sharing platforms.

As you might guess, interacting with Pinterest users — and learning a little Pinterest lingo… pins, re-pins, boards, followers — will expand your reach and influence.

In short, engaging with Pinterest, effectively, can put a “pin” right through the seat of your site’s traffic!

Here’s an example of a Thesis site with a Pinterest “Pin It” icon waiting to be clicked:

But… how to go from knowing you need a Pinterest presence to making your site the darling of Pinterest user boards?

First, you’ll have to get yourself out there in order for Pinterest users to pin you down.

Yes, we went there.  Pin you down.  Groan!  Won’t happen again, Plinky promise.  Oops.  Okay, now it won’t.

As with most social networks, Pinterest offers a button-based share feature for site owners.  These should look familiar in a generic way:

The call to “Pin it!” involves buttons and counters (intentionally) similar to ones you’ve seen for Facebook, Twitter, Google Plus, and so on.

However, while other social sharing revolves around distributing the text-based content of your site, Pinterest focuses on images.

When Pinterest users “pin” an image, source attribution is automatically added as a link to your site, similar to many text-based sharing methods.

And, as with Twitter retweets, your images can also get re-pinned to different “boards” — as many times as the millions of Pinterest users decide to grab a given image for their own collections.

Pin-Up Your Pinterest Buttons!

Clearly, providing one-click simplicity in the form of a button that gives Pinterest users the ability to “pin” your images is critical.

To capitalize on this opportunity, all you need to do is paste a code snippet to facilitate the viral sharing Pinterest naturally encourages.

For this Pinterest tutorial, we’ll use Thesis “post images” as our “Pin” target.

In other words, your post image will appear when Pinterest users click the “Pin It” button that we’ll be adding to your site.

Add a Pinterest Button to Thesis “Feature” Posts in WordPress

Let’s keep it simple, agreed?

For Pinterest to grab the Thesis post image from your pages and posts, all you need is a brief PHP entry.

Remember the three buttons from earlier?

If you want the first button — the simple Pinterest “Pin It” with no counter — add this to custom_functions.php:

function pinterest_post_page_pin_no_count() {
global $post;
/* HORIZONTAL NO-COUNTER PINTEREST BUTTON */
printf( '<div class="pinterest-posts"><a href="http://pinterest.com/pin/create/button/?url=%s&media=%s" class="pin-it-button" count-layout="none">Pin It</a><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script></div>', urlencode(get_permalink()), urlencode( get_post_meta($post->ID, 'thesis_post_image', true) ) );
}
add_action( 'thesis_hook_before_post_box', 'pinterest_post_page_pin_no_count' );

For the second button — “Pin It” with a visible “number of times pinned on Pinterest” numerical call-out counter — add this to custom_functions.php:

function pinterest_post_page_pin_horiz() {
global $post;
/* HORIZONTAL PINTEREST BUTTON WITH COUNTER */
printf( '<div class="pinterest-posts"><a href="http://pinterest.com/pin/create/button/?url=%s&media=%s" class="pin-it-button" count-layout="horizontal">Pin It</a><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script></div>', urlencode(get_permalink()), urlencode( get_post_meta($post->ID, 'thesis_post_image', true) ) );
}
add_action( 'thesis_hook_before_post_box', 'pinterest_post_page_pin_horiz' );

Finally, if you prefer the vertically-oriented “Pin It” button, with a counter — this works nicely if teamed with the visual style of our prior social media icon tutorial — then you’d add this to custom_functions.php:

function pinterest_post_page_pin_vert() {
global $post;
/* VERTICAL PINTEREST BUTTON WITH COUNTER */
printf( '<div class="pinterest-posts"><a href="http://pinterest.com/pin/create/button/?url=%s&media=%s" class="pin-it-button" count-layout="vertical">Pin It</a><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script></div>', urlencode(get_permalink()), urlencode( get_post_meta($post->ID, 'thesis_post_image', true) ) );
}
add_action( 'thesis_hook_before_post_box', 'pinterest_post_page_pin_vert' );

Where you want your “Pins” to show may vary — in the above, we configured Pinterest such that the “Pin It” shows directly before each full post’s contents.

To change the location of this Pinterest Pin output, you can adjust the final line in these functions, changing your Pinterest location using the appropriate Thesis hooks.

For fine-tuning of the Pinterest area, note that, in each of the three example PHP functions above, a unique class was assigned to a containing “div” element.

This class gives you precise formatting controls. While its use is optional, it’s there, and you can use this “pinterest-posts” class to fine-tune the position of your “Pin” link.

As a starter on potential Pinterest-area formatting, you can — optionally — add this to your Thesis custom.css file contents:

.custom .pinterest-posts { margin-top:2.4em; margin-left:3em; }

Okay, smooth sailing there — a Pinterest “Pin” should now appear on your site for all posts and pages.

Add a Pinterest Button to Thesis “Teaser” Posts in WordPress

Want your Thesis teasers to have Pinterest buttons? Same basic idea, different hook!

The Pinterest button will look something like this when you’re done:

The “Pin It” button is the horizontal “with counter” kind, but the counter does not display “0 pins” — it’ll show numbers once you’ve received at least one click-through to Pinterest for a given teaser.

To help with formatting, the below uses a custom class as before, where this div surrounds the Pinterest button used in the teaser posts.

function pinterest_teaser_pin() {
global $post;
printf( '<div class="pinterest-thumbs"><a href="http://pinterest.com/pin/create/button/?url=%s&media=%s" class="pin-it-button" count-layout="horizontal">Pin It</a><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script></div>', urlencode(get_permalink()), urlencode( get_post_meta($post->ID, 'thesis_post_image', true) ) );
}
add_action( 'thesis_hook_before_teaser_headline', 'pinterest_teaser_pin' );

The hook, thesis_hook_before_teaser_headline, is the only difference of note to achieve a Pinterest button on teasers.

Again as an option, you can add code such as this to your Thesis custom.css file contents for additional control over the Pinterest area in teasers only:

.custom .pinterest-thumbs { float:right; margin-bottom:0.6em; }

Because we’re calling the Thesis post image in all of these examples, Pinterest will display the post image — not the post thumbnail — even if the Pinterest “Pin It” button is clicked among your teasers.

Which leads us to an interesting question…

How Does All This Look to a Pinterest User?

If you don’t have a Pinterest account — and don’t feel like standing in virtual line to get one — it’s still important to know what happens when a Pinterest user clicks your new “Pin It” button on feature and teaser posts.

Assuming your site visitor is logged into their Pinterest user account, when they click the teaser “Pin It” button, seen earlier above, a window like this will pop into view:

The post image associated with your teaser — remember, the thumbnail isn’t used, the post image is — is displayed on the left side.

Don’t worry if your image doesn’t fill all of the available space seen above; Pinterest crops and sizes images extremely well.

The “Awesome Eyes” is a selection from a user-specific dropdown.  It represents a board (imagine a hanging cork-board covered in sticky notes pinned items; you’ll get the core idea) that the user had previously made in their Pinterest account admin.

Similarly, “Describe your pin…” is user-controlled, and this text can run short or fairly long. Using more (and more advanced) PHP than we used in this tutorial, the Pinterest description field can be pre-populated by the site owner.  However, the Pinterest user has the final say, and they can quickly change the description — blank or not.

The red “Pin It” button, assuming everything goes fine on the Pinterest side, results in the next screen the Pinterest user sees:

Yup, a very typical confirmation page.  However, the “Tweet your Pin” and “Share on Facebook” options are notable, and just as notable is the non-integration of Pinterest with Google+ or other potential share-through candidates — at least for now.

Here, potentially, the Pinterest user can share your content — not only with their fellow Pinterest searchers and followers, but also on up to two other social networks.

At this point, the Pinterest user is done.  If they decide to visit their personalized Pinterest dashboard, this would be the end result:

The “yoursite.com” attribution is a nofollow link, for those who might be curious.

The “pinmarklet” is a reference to the “Pin It” button you created. As you can see, Pinterest says “pinmarklet” twice in short order.

In this tutorial, we went with “Pin it” instead of referring to your “pinmarklets” a million times — learning about Pinterest shouldn’t be painful.

Because a Pinterest User successfully pinmarkleted pinned your teaser’s post image, your site will now increment the pin-count for the post in question.

Once past a goose egg — if its value is zero, the counter does not display — the Pin It counter will begin to show numbers:

You’re all done!

Quite possibly, you’re wondering enough about Pinterest to check it out from the other side of the fence, the Pinterest user side — and you should.

Compared to “old” social sharing sites, at least for now, Pinterest has the feel of a low-pressure, friendly gathering.  Unless you ask it to be, Pinterest isn’t just an endless, scrolling wall of information, nor is there a strong sense of follower-count “high score!” guilt.

Pinterest might become the next Twitter.  And it might not.

Whatever Pinterest’s future, one thing’s a certainty — if you climb on board, you’ll see lots of pretty pictures!

When you password protect a post in WordPress, a form is displayed prompting the reader to enter the password to view the post:

Default Password Form on Protected Post

Using the WordPress filter the_password_form along with some custom code in your Thesis custom_functions.php file, you can modify various text elements in the password form. You can change the explanatory prompt message, the label of the password field, the text on the submit button — or all three of these at once.

Note that, in each of the following examples, the $after variable is what determines the replacement text — simply replace the example text contained inside each pair of single quotes with your own desired text (be sure to retain the single quotes themselves to avoid triggering a PHP syntax error).

Change Prompt Message ∞

function custom_password_prompt($content) {
	$before = 'This post is password protected. To view it please enter your password below:';
	$after = 'Enter your password to view this post:';
	$content = str_replace($before, $after, $content);
	return $content;
}
add_filter('the_password_form', 'custom_password_prompt');

Change “Password” Text ∞

function custom_password_text($content) {
	$before = 'Password:';
	$after = 'Custom Password Text:';
	$content = str_replace($before, $after, $content);
	return $content;
}
add_filter('the_password_form', 'custom_password_text');

Change Submit Button Text ∞

function custom_submit_text($content) {
	$before = 'Submit';
	$after = 'Custom Submit Text';
	$content = str_replace($before, $after, $content);
	return $content;
}
add_filter('the_password_form', 'custom_submit_text');

Change All Three of the Above at Once ∞

function custom_password_form($content) {
	$before = array('This post is password protected. To view it please enter your password below:','Password:','Submit');
	$after = array('Enter your password to view this post:','Custom Password Text:','Custom Submit Text');
	$content = str_replace($before,$after,$content);
	return $content;
}
add_filter('the_password_form', 'custom_password_form');

Customized Password Form on Protected Post

The WordPress SEO section discusses applied SEO strategies.

As you know, Thesis provides numerous SEO settings and options in the administration interface.

Familiarity with these Thesis SEO interface options will help you make the most of the WordPress SEO articles’ concepts and advice.

SEO is a large topic — where it begins and ends is a gray area.

Shake the magical dust from SEO, however, and you’re left with a very simple “my site” goal — optimizing your content for search engines.

Fundamentally, optimization means clarifying what your site, and individual pages of content within your site, are all about. That’s it!

In the real world, imagine a book without a title.

Would you buy such a book?

Probably not.  Unless you find more information about the unknown content, you’ll leave it on the shelf.

Whether you imagine books in a library or a list of search results (sites) to choose among, information is everything.

With millions of options out there, selecting your reading at random is an inefficient way to make decisions on how to spend your time.

That’s why we often do judge books (and sites) by their covers.

A book with a confusing title — or no title at all — reduces “first glance” comprehension by an onlooker.

Your site is no different. Books — where this is especially true for nonfiction — need a clear and descriptive title that gives a potential reader at least some understanding of what they can expect to find inside.

All the parts and pages of your web site?  Exactly the same deal.

Along with a title, your site also needs descriptive text and other “what’s this all about?” information to give your potential visitors the ability to confirm your content matches what they search to find. Online, finding typically means using a search engine like Google or Bing.

Basic SEO, therefore, is about offering “first glance” information about your site.  To add this, let’s examine the relevant areas of SEO within the Thesis 1.8.2 interface.

The focus here is on the how and where of the Thesis interface SEO options. With a grasp on how and where, you’ll be able to maximize your search engine rankings, as well as more easily digest the WordPress SEO series.

The following are the main SEO-related content areas in Thesis: global or site-wide SEO, home page SEO, category-specific SEO, and individual SEO settings on posts and pages.

All this SEO stuff, at a basic, on-site level, is easier than it sounds — we’ll take each section in turn, step-by-step.

In this one tutorial, you’ll quickly see that SEO basics are extremely powerful — and they’re not scary whatsoever.

Global SEO Settings in the Thesis Interface

A global setting simply means that the options selected apply “everywhere” on your site — home, pages, posts, categories, tags — everywhere.

There’s only one global SEO setting of major significance, and that’s whether or not to have “Append site name to page titles” selected.

Here is where we are in the Thesis interface:

WP Admin > Thesis > Site Options > Document Head > [ here ]

Which appears visually like this:

Except in very rare cases, it’s usually low, no, or a negative to your site SEO to append the site name to your page titles.

If your site title is only a word or two, it can make sense. But even then — usually not.

The reason you don’t need to append your site title to every page is that your site flows with Yoda calls it the Force PageRank.

In other words, search engines move through your site in a way that creates a series of relationships.  From these relationships, an understanding of the site’s context and influences is created.

A page, therefore, is not an isolated blip on the radar.  Each page — using “page” in the sense of any URL — inherits traits from other pages.  The verbiage and links, to and from other pages — including the (relatively) powerful home page — are influential.

As a result, even if your site name appears only on the home page, that’s usually sufficient.

Once Google knows your site name, everything else is seasoned within the context of the site name and other global factors — not all of which are on your site, or even within your full control.

Adding the site name globally therefore often does little more than dilute the SEO value of non-home <title> markup.  Any gains from site-wide appending (repetition) seldom offset this dilution.

With a strong brand, especially a short one — Sony, Asus, IBM, Apple — appending the site name to your <title> globally can be a rational decision.

However, if you’re just getting started — especially if your “brand” is relatively unknown — it’s recommended you do not append the site name globally.

Home Page SEO Settings in the Thesis Interface

Out of the box, in Thesis the home page SEO is controlled in the following area:

WP Admin > Thesis > Site Options > Home Page SEO > [ here ]

In this section are the Home Page SEO controls for the <title> of your home page, the description for the home page, its meta keywords, and checkboxes that determine whether your home page is indexed, followed, and/or archived. These can be seen in the below:

Note that this Home Page SEO control applies only if you are using the default “blog home” — if you are using a static home page, the SEO controls for your “Home” page will be located in the settings for the individual page used as the static front page. We’ll cover page-specific SEO later.

Home Page SEO — the <title> — this one’s a big deal.

The <title> carries a ton of SEO power, and on your home page it carries more than it will anywhere else. As you can see in the image above, there’s a character counter in Thesis to help you limit this field to the number of characters traditionally shown by Google in a “SERP” or “search engine results page” — but you don’t have to “fill it up” — in this setting, less is often more.

While true of other SEO-related content, in the <title> especially, every word should be chosen with care.

Let’s say your first thought for a Home Page <title> is:

Welcome to SuperTreeExpertPeople.com — If You Have Trees, Plants, Bushes, Shrubs, or Grass You Need Worked On, We Can Do Anything! Call us Now if You Need Tree-Related Services in Fargo, North Dakota!

Clearly, that’s too long. It’s also using numerous terms that are unlikely to help your site, even if you did rank for them — “Welcome” being an example.

Search Engines are good at inferring specific place names, so “North Dakota” is unnecessary, especially if you include your address (as text) on a contact page or in your footer or header.

For your Home Page <title>, focus on what you already do — and do well.  If you’re new to the market, focus on what you expect or want to do more often. For example, if you get most of your net profits from tree-related “stuff” — but very little from shrubs — then stick to what works.

This would be a shorter, more powerful example:

Fargo Tree Services | Trimming – Stump Removal – Fertilizing

While this is better than the previous example, it’s important to realize SEO is not about instant perfection, and SEO done well is not just “set and forget” — installing monitoring code such as Google Analytics can help you determine what’s working, what’s not — and this will help you make informed changes to your SEO tactics over time.

Home Page SEO — the meta description — the “SEO” factor that does not have a direct SEO impact. That’s right. Your meta description does not influence the “rank” or position of your site in search engines. It’s not SEO!

Okay — so if the meta description isn’t a technical SEO factor, why worry about it?

The answer is that your meta description is an influence, and to ignore it is to miss the point of SEO in a larger context.  You’re optimizing and defining your content, right? You’ve seen search results many times, and while the eye is drawn to the “title” first, the description is the convincing blurb right below the title.

That makes your meta description “SEO that isn’t SEO” — because while the description is not an SEO ranking factor, a good description is still a “call to action” — and it will often be the difference between visitors clicking your site… or clicking on a competitor’s link!

Also, any terms used in a query to find your site that match the meta description’s content will be bold in search results, another reason a good description is useful as an “SEO” factor.

Taking an example, a search for “Thesis Documentation” in Google returns a SERP — a search engine results page — like this, where the arrow indicates the meta description:

It’s obvious that your meta description should be created with care. Unlike the brief <title> recommended earlier, it’s best to make your meta description close to the maximum length that will be displayed by Google.

Why go long?

Short meta descriptions are often replaced by “rich snippets” — pieces of your content stitched together by a search engine like Google, using text from the page rather than the meta description you added manually.

Because the meta description is a good conversion tool, representing a call to action (click!) — write a good one, and make it long enough that your meta description is more likely to be chosen as the content Google displays to potential visitors.

In the Thesis interface, the meta description for the Home Page is one down from <title> like so:

As a rule of thumb, add about 150 characters of quality “I’d click that!” content to your meta description.

Remember, this is your home page, so target your prospects broadly.  Be sure to provide solid reasons to click on your site!

You could include a list of your services, your solutions to common client problems, FAQ or trust-building information such as being “insured” or “licensed” or a member of the “BBB” — anything to generate (legitimate, of course) trust and authority in your area of specialization.

Home Page SEO — the meta keywords — like the meta description, meta keywords are of no SEO benefit. Unlike the meta description, meta keywords do not offer any other benefit for the vast majority of sites — and they aren’t visible in the search results listings.

About the only thing to say about meta keywords is to avoid “stuffing” more than a few key terms or words into this field. The tactic of “keyword stuffing” — adding dozens or even hundreds of key terms — was the primary reason why meta keywords became worth little (if anything) many years ago.

As you might guess, leaving the meta keywords blank is fine.

Home Page SEO — nofollow, noindex, noarchive — because these checkboxes are included in the interface, a quick word on them.

Do not click nofollow or noindex in your Home Page SEO options.

Simplifying for clarity, using nofollow/noindex on your Home Page tells search engines — like Google — not to include your site in search results. Ever. Ouch!

Unlike nofollow and noindex, noarchive is less of an SEO-related decision. Noarchive is a choice to tell various web sites, including search engines, whether or not they should maintain a history — a saved cache — of your site’s home page.

From an SEO standpoint, noarchive is unlikely to have an impact on your site. But unless you have a full understanding of what it does, there’s no harm in leaving it unchecked.

In summary, leave the checkboxes for nofollow, noindex, and noarchive alone — meaning, not checked — on your Home Page SEO settings.

Category SEO Settings in the Thesis Interface

If you use categories for your posts and include categories in your site architecture as an SEO device — most Thesis users do — then you’ll benefit from applying the same principles of SEO discussed in the Home Page section on your categories.

In short, populate your categories’ <title> and meta description, with the contents adjusted to fit each of your categories.

Here is where we are in the WordPress (contains additions from Thesis) interface:

WP Admin > Posts > Categories > [ here ]

There are two ways to add your SEO details to categories — you can either create a new category, or you can edit an existing category. The layouts are slightly different, but they’re close enough it’s assumed explaining one explains both as regards the SEO sections.

Category SEO Settings — Part I

Taking the “add a new category” option for a visual example, the first area related to SEO looks like this — the two sections are one on top of the other, but for discussion purposes, they’re split into two images below:

The SEO fields above are blank when creating a new category. They’re shown with populated data to serve as a quick summary of what a completed — individual — category’s SEO content might look like when finished.

Above you’ll again notice the <title> and like the Home Page SEO, this field should be under 70 characters — shorter is fine — and very succinct. Remove filler words, but remember that real visitors will see this content — make sure it reads fluently and conveys the basic idea of the category’s contents.

The meta description also returns, and again it’s not an SEO factor — but it remains a “convincer” — the time spent on a quality meta description is worth extra effort if your categories are common landing points for visitors.

Finally, adding or editing a category’s meta keywords can be skipped — or at most, keep the meta keywords to a minimum.

Category SEO Settings — Part II

Again as seen in the Home Page SEO setting, if you’re using categories as part of your optimization strategy, they need to be followed and indexed. Archived or not is up to you — it’s not an SEO factor.

Compared to the Home Page SEO settings, your categories get two additional SEO-relevant sections.  These fields are similar to the visible H1 “title” and content of individual posts and pages.

The Introductory Headline field contents will appear as text on your category landing page — it will be wrapped in H1 tags. The Header One or <h1> tag is a second-tier SEO device — important, but not as important as the <title> you created in Part I.

As a rule of thumb, make your Introductory Headline relevant to the category’s posts. If you’re working with a category about evergreen trees, you’d probably include the word “evergreen” in the Introductory Headline.

The Introductory Content has no more SEO value than any other “paragraph” of content. However, because category pages are otherwise “a list of posts” the content here is potentially more “important” than pages or posts — because post and pages often have many paragraphs of unique content.

What you write for Introductory Content is not only useful to your visitors, it can help individual categories stand on their own legs from an SEO perspective — thus making your categories more than just a temporary dumping zone for assigned posts.

How much Introductory Content you add is up to you — describing the category’s posts should offer natural opportunities for using key terms throughout this section.

Individual Post & Page SEO Settings in the Thesis Interface

First off, it’s worth noting that Thesis will “create” a <title> and meta description for your posts and pages automatically, in the event you do not create manual SEO data for individual posts and pages.

For sites with high volumes of low-quality content, that’s probably good enough. But for unique, high-quality content, leaving your <title> and meta description to automation is the SEO equivalent of using a rubber stamp to sign birthday cards.

If you cared enough to write that page or post, spend a minute or two on the SEO.  Again, the meta description won’t climb the ranks for you, but an automatic excerpt for a meta description is not as convincing — convincing to visitors you want to click-through from a search results page — as a hand-crafted description.

If you’re still not convinced, again, with Thesis you don’t have to write SEO details for every last page and post. But you should.

Here is where we are in the Thesis interface:

WP Admin > Posts > Add New > SEO Details and Additional Style > [ here ]

WP Admin > Pages > Add New > SEO Details and Additional Style > [ here ]

The difference is — almost nothing. Pages and posts, for SEO purposes, are very similar URL types. Thus, whether you’re adding or editing a page or a post, visually you’ll see this underneath your WordPress text editor:

Remember, way back, when SEO was declared not-scary? If you’ve already read the Global, Home, and Category portions of this tutorial, how bored scared are you right now?

For SEO purposes, add a <title>, then add a meta description. The meta keywords remain of low or no value. Do not check noindex or nofollow for an individual page/post unless you have a good reason to do so — an isolated or very temporary landing page could be an example.

How easy was that? You’re practically an SEO rock star!

Notable at this point is that our Thesis SEO walk-through has gone from top to bottom.

At a very high level were the Global and Home Page SEO settings. A step down — because presumably you have more than one — were the categories, where SEO details for categories should be more specific than the Global or Home sections.

Finally, you’re down to a single unit of content, a page or post. Here, it’s all in the details. Really specific ones!

Taking the <title> as an example of the progression from broad to focused, your Home Page SEO was all-inclusive. Remember the example of a tree service? Here it is again:

Fargo Tree Services | Trimming – Stump Removal – Fertilizing

That’s an SEO shotgun. However, one of your categories would drill-down into a more specific area, such as “Trimming” — and a sub-category to “Trimming” like “Hedge Trimming” would become more detailed yet.  The <title> and meta description would “zoom in” more for a category than the Home Page SEO choices.

For example, if you had a category on “Hedge Trimming” then the same SEO component used on the Home Page — the <title> — might go like this:

Hedge Trimming | Evergreen Health and Maintenance

And now, with a post in the “Hedge Trimming” category, you’ll dig even deeper into SEO detail.

Composing a post that offers free advice to potential customers? Your SEO for a single post’s <title>, within the category of Hedge Trimming, might look like this:

How to Winterize a Cedar Windbreak Using Electric Shears

With careful top-down SEO — where the Home Page feeds into a Category that feeds into a single Post — you’re all set.

Heads-up, Fargo Tree People!  There’s a new player in the SERPs — one with a solid grasp on basic WordPress SEO.

Some images look better with a “picture frame” — and some look better standalone.

When Should You Use A Frame On Your Images examined the when and why of using image frames.

But you may be wondering how to work with framed images on a one-by-one basis.

To illustrate what is meant by framing an image, the graphic below shows three versions of an image that is presumed to be in-context in a post or page.

On the left is the image without an image frame.

In the middle, the same image appears with the default “frame” class.

On the right, a unique class has been added — where CSS values have been created in custom.css to differentiate this frame from the gray defaults of the “frame” class.

Let’s examine various scenarios to get either a default or unique image “picture frame” on individual images.

Image Frames in the WordPress Visual Tab

Inserting images in the Visual tab is simple, and adding a class for your frame to one or more images can be done at least two different ways.

1. How to Add Single Image Frames Using “Advanced Settings”

We’ll assume you already know how to add an image using the Upload/Insert method in the Visual tab.

Once you have an image visible in your post or page, classes such as class="framed-image" or the predefined class="frame" can be added to individual images by right-clicking the image in the post editor.

Next, click the small “picture” icon that appears over the left-top of your image, and finally, click “Advanced Settings” at the top of the light-boxed area’s tabs.

In the Advanced Settings you should see a field labeled “CSS Class” — an existing class such as “alignnone” may already be there.

Add a space after any existing classes, then add your code, where again the options used in this tutorial are framed-image or frame — then click “Update” such that the lightbox disappears.

The single image addressed will now have a frame. While the frame might not appear in the Visual Editor, it can be viewed on your site either by clicking “Preview” or “Update” within the admin interface.

Using a class such as “framed-image” instead of the predefined “frame” class presumes “framed-image” has been defined in the custom.css file contents like so:

.custom .framed-image {
padding:0.692em;
background:#F7EFDB;
border-color: #E0D5BB;
border-width:0.077em;
border-style:solid;
}

The above is similar to the values used by the default “frame” class, but applies non-default values for a unique background and border color. These unique values produce the image frame seen in the right-side illustration at the top of this tutorial.

For a unique class such as framed-image to make sense, the CSS should contain differences relative to the default “frame” CSS — otherwise, additional steps result in no visible gain.

2. How to Add Multi-Image Frames Using a CSS Body Class

The other option for assigning frames to images in the Visual editor is to add a custom CSS class to the entire post or page. By doing so, multiple images can be addressed with your custom image frame — all at the same time.

This option is possible by scrolling down the post being edited, moving beyond the post/page content editor to the fields below.

The CSS Class option can be used if you wish to add an image frame to all images in the post or page being edited. In the below, the class all-framed has been added:

This will apply a body-level class, so to target only images in your post or page contents — not images in the header, sidebars, comments, etc — provide additional targeting via selector in your custom.css:

.custom.all-framed .format_text img {
padding:0.692em;
background:#ccc;
border-color: #111;
border-width:0.077em;
border-style:solid;
}

Notice the class used here is neither “framed” nor “framed-image” — these were used in previous examples. The all-framed class lets you apply a global frame to images on one post/page — but you can still override this with the previous classes to achieve specific exceptions within the given post or page.

Image Frames in the WordPress HTML Tab

Adding a special class to images in the WordPress HTML tab of the page/post editor is not difficult. If you are editing a post or page, there are two methods in the HTML tab to add an image. Either reaches a similar conclusion.

1. Add a Frame Class to Images in the HTML Tab — Upload/Insert.

The first option is to use the Upload/Insert icon in the HTML editor tab to insert an image.

This method is very similar to the Visual Tab method discussed previously. To begin, an image can be dragged into a media box when the Upload/Insert icon is clicked — other options include selecting images from your media library or URL.

As an aside, note that images with captions get a frame by default. While the captioned frame can also be uniquely styled — it has CSS values similar to the “frame” class — modifications to captioned images fall beyond the scope of this tutorial.

With a “no caption” image added via your HTML editor, you should see code like this:

<img alt="xxxxx" src="http://YOUR_DOMAIN.com/IMAGE_FILENAME.png"
title="xxxxxx" class="alignnone" width="xxxxx" height="xxxxx" />

Areas with “xxxxx” placeholders would contain values, of course.

To apply an existing class to the image above — to apply the default “gray” frame — simply add class="frame" to the code in your HTML editor pane, as shown below:

<img alt="xxxxx" src="http://YOUR_DOMAIN.com/IMAGE_FILENAME.png"
title="xxxxxx" class="alignnone frame" width="xxxxx" height="xxxxx" />

To add a custom class to this single image, type class="framed-image" as shown, giving your image code a unique CSS class:

<img alt="xxxxx" src="http://YOUR_DOMAIN.com/IMAGE_FILENAME.png"
title="xxxxxx" class="alignnone framed-image" width="xxxxx" height="xxxxx" />

Again, the difference between these two classes is that using a unique class — it doesn’t need to be named “framed-image” — you can redefine the image frame’s values. This allows visual modifications that are unlike the gray, default class of frame.

As mentioned in the Visual tab methods, using a unique CSS class requires CSS values be added to your custom.css file contents.

2. Add a Frame Class to Images in the HTML Tab — IMG icon.

The second option is to click the “img” icon in the HTML tab’s interface.

Once “img” is clicked, you’ll be asked in a sequence of pop-ups for the URL of the image and a “Description” — the description field will be the image “alt” or alternate text.

The result is succinct HTML code, to which you can add the same class="framed-image" or class="frame" values as was described in the Upload/Insert method.

Beginning with the unmodified code, you’ll see a line like this:

<img src="http://YOUR_DOMAIN.com/IMAGE_FILENAME.png" alt="" />

To use the default “gray frame” class here, add class="frame" to the code:

<img class="frame" src="http://YOUR_DOMAIN.com/IMAGE_FILENAME.png" alt="" />

To apply a custom class, add class="framed-image" like so:

<img class="framed-image" src="http://YOUR_DOMAIN.com/IMAGE_FILENAME.png" alt="" />

That’s all there is to it!

In the end, adding a class to apply one or more “picture frames” to your images on a one-by-one basis provides a flexible, simple way to make the most of the images used in your site’s posts and pages.