1. Go to Skin Editor → HTML.
2. Make sure your Home template is displaying (if not, then click the name of the currently displayed template to access the Template Manager, and then click “Home” to select it).
3. Within the WP Loop box, locate the Post Box; hover over this box until the plus sign appears to its right, then click that to expand the box.
4. Click show tray ↓ to view the list of dependent Boxes.
5. Click Post Box → Excerpt to add it to the active area of the Post Box; then drag it into your preferred location within that Box.
6. Use shift+drag to remove Post Box → Content from the template (by dropping it into the gray box on the top right side of the screen).
7. Click Save Template to save your changes.

Install the Templates Listing Box ∞

1. Download tc_archives_page_listing.zip.
2. Upload the .zip file via Thesis > Boxes > Select Boxes > Upload Box.
3. Once the box has been uploaded and appears in the list of available boxes, select its checkbox and then click Save Boxes.

Create the Archives Page Template ∞

1. Go to Skin Editor > HTML.
2. Click Home (i.e., the name of the currently displayed template) to access the Template Manager (screenshot), then click Add New.
3. Enter “Archives Page” as the New Template Name, then click Create Template (you’ll be redirected to the new template after it’s been created).
4. Click Archives Page, then select Page in the Copy from Template drop down menu.
5. Click Copy Template, then click OK in the confirmation pop-up window.
6. Using shift+drag, add the Archives Page Listing box to the Archives template, so that it is located inside the Post Box (example screenshot).
7. Using shift+drag, remove the Post Box → Content box from the template.
8. Save the template.

Create the Archives Page ∞

1. Go to Pages > Add New.
2. Give a title to the Page (such as Archives).
3. Under Thesis Skin Custom Template, choose Archives Page from the drop down menu.
4. Publish the Page.

Using “teasers” was a popular configuration in earlier versions of the Thesis theme.

Teasers consist of several things: the title of a post, the author and date byline, an excerpt of the post, and a “thumbnail” image assigned to the post.

By default, Thesis teasers were “two across” — there were two teasers per horizontal row. CSS changes could also create “teasers one across” — one teaser per row.

While teasers are not a default display type in Thesis 2.0, they can be created using the flexibility and ease of the 2.0 interface — no PHP needed!

How? Let’s build some “teasers” in Thesis 2.0 — in fact, let’s get teasers in both one- and two-column formats, where the only difference is one line of basic CSS.

Two Different Teaser Layouts

Before we get too deep into this, let’s set a “before” and “after” goal. Before the addition of teasers, we’ll presume a single “full” post on the home page.

First we’ll build a set of teasers using the Thesis wp_query box, and then we’ll examine the differences between one-column and two-column teasers.

First up, the “before” picture — this is a Thesis 2.0 site running the “Classic” skin:

Below is a “one-across” teaser layout, complete with thumbnails. While “taller” vertically than a two-column teaser layout, usability studies suggest that “teasers” in a one-per-line format are minimally disruptive to eye-scanning down the page.

Finally, we have a two-column teaser layout. More compact than one-across, in part because the third teaser has been removed for reasons of space here, this format was extremely popular in the Thesis 1.x software.

Note, however, that a two-column layout for the content column is not ideal for most site designs — in short, skimming non-linear content is more difficult for your visitors.

To include teasers, this tutorial assumes a minimum of four (4) posts live on the site. This presumption allows for the current, full post — and then also the additional posts that will be pulled-in to create the “teaser” components — the post title, byline, thumbnail image, and excerpt.

Also, the posts we’ll be calling must have an assigned thumbnail image. We’ll use the Thesis thumbnail in this example, and the assigned thumbnails would be added via this process: WP Admin > Posts > Edit > Thesis Thumbnail > Browse.

Uploading a thumbnail image from your desktop is a simple click-and-go process:

With a set of “thumbnail assigned” posts to use in our teasers, it’s time to dig in!

Using the Thesis Skin Editor to Create a WP_Query Box

As with anything “2.0” there are various methods and approaches that can achieve a desired outcome.

For this tutorial, we’re going to use one method… the “Query Box” in the Thesis Skin Editor’s HTML tab. Here’s one way to get there:

WP Admin > Thesis > Skin Editor >

You should now be on the Home core template.

Optional. To change the number of posts that display on your home page, simply hover on the Home text, click the gear icon, in the pop-up, click the WP Loop and adjust the value of Number of Posts to Show. The images in this tutorial are based on a value of 1 in this area, but you can show as many “normal” posts as you like.

Still on the Home core template of the Skin Editor, look to the lower-right. In the Add Boxes section, click the dropdown, select Query Box, then name your box whatever makes sense to you, such as “My Teasers” in the below. Click the blue Add Box button.

You now have a Query Box — this will create the HTML and database interactions that make a “teaser” — but don’t worry, you won’t see a drop of PHP or HTML, because Thesis 2.0 does the heavy lifting for you.

Follow the next step carefully. Confirm that your “Teasers” Query Box is not inside the WP Loop Box. If you add a Query Box inside the WP Loop area, your teasers will cycle after each post in the WP Loop.

Now to shift+drag this Query Box into position. We’re going to demonstrate our teasers after the primary content — the WP Loop — so we’ll drag the My Teasers box into position in the container of the WP Loop area, and let go:

A second quick drag will get your Query Box under the main loop, ending here:

You can see the “gear” in the above. Click it, and you’ll get the following pop-up, where the image below shows “everything” you can do — but the primary areas of interest are denoted with arrows. More on those arrows and associated settings after (you can click to see a larger edition) you’ve had a chance to look this over:

Areas of note: you can change this to suit your needs, but we’re choosing “Posts” and “Recent Posts” as well as the number “3” — this will be how many “teasers” we plan to display.

For single-author blogs, the author and other filters are straightforward. A “div” tag is chosen, and — this is an important one — we manually add the following as our HTML class, or in this case, classes:

teasers_home post_box

One of these, teasers_home, will be used for CSS adjustments in a CSS Package we’ll create. The second class is pre-existing, and the use of post_box — it formats home page posts — reduces the CSS needed to make the teasers match the site.

Next, we’ll rearrange and add “green box” items from the tray to get the elements needed for teasers. We’ll want a headline, author, date, categories the post is assigned to, the Thesis thumbnail image, and the post excerpt.

Once everything is dragged into place, it should look like this. As indicated by the first arrow, begin clicking through each item to assign values, which we’ll review briefly after this image:

Headline “gear” icon settings: HTML tag: H3. And “Yes” you want to link the headline to the article page.

Author “gear” icon settings: The Intro text is up to you; in this example we used Written by... as our intro. The two checkboxes were checked. This is your choice, and selecting or not selecting these will have little impact for tutorial purposes.

Date “gear” icon settings: Intro text used was on... and this as well as other settings here is your choice.

Categories “gear” icon settings: HTML tag: span. Intro text used was in... and the rest is your choice.

The Thumbnail and Excerpt do not have settings worth mention for our purposes in this example.

CSS Packages for Teasers in Thesis 2.0

Guess what? Minus a bit of formatting, your teasers are done!

To get the final touches on making these look great, let’s visit the CSS section of the Skin Editor and add a Package.

In fact, let’s add three “Single Element Styles” to give absolute control over this teasers area — here’s one, where the dropdown was clicked, Single Element Styles was chosen, and the blue Add Package was clicked, bringing a pop-up of the Single Element Styles which will get some additional attention momentarily:

Package Number One — note the “reference” of teaser_title, as this will be added to the left area as &teaser_title along with the other two Packages we’ll create.

The above CSS Package is included here primarily as an enabler. It controls the headline font — the linked title of the teaser — and you can make adjustments to your taste using the central Options tab.

The only changes made to &teaser_title in order to attain the results in this tutorial were: Top Margin: 1px and Top Padding: 1px.

Package Number Two — same steps of Single Element Styles, click the blue Add Package, then work with Single Element Styles where the Package tab was assigned a Reference of thumb_link and the CSS Selector is .thumb_link.

The Options tab of the thumbnail Package were minimal: Top Margin 28px and Right Margin 18px and done.

Finally, the Additional CSS tab gets a single line of code so that our thumbnail “floats” into position to the left of the excerpt:

.thumb_link { float:left; }

To ensure our teasers and thumbnails are still on track, you should be ending in this tab, with this code, and remembering to save:

Package Number Three — last one! As before, same steps, where the “reference” is teaser_excerpt and the only adjustment for this tutorial’s purpose was to change, under Options, the Bottom Margin to 22px.

Final Steps in the CSS Tab — now to make sure our three Packages are compiled as active CSS code for the Home core template. Remember the “references” created when you made these Packages?

Simply add an ampersand — & — before the reference name and type these items into the Skin CSS, hit the green Save CSS button — and just like that, it’s all over:

These three Packages are shown “high up” in the image above for instructional purposes. However, it makes better sense to add these Packages farther down to maintain top to bottom ordering.

If you’ve been following this tutorial such that you have the exact same references, you’d add this to the Skin CSS area:

&teaser_title
&thumb_link
&teaser_excerpt

Save CSS, and at that point, you should have three “one across” teasers — a single post’s worth of thumbnail images and excerpts per row — live on your site:

But what about the “old” two-column teasers from Thesis 1.x series?

Teasers Two Across in Thesis 2.0

This, friends, is where a fundamental “oooh!” of Thesis 2.0 should be evident.

Yes, it took some work to get these custom teasers established.

But in doing so, you’ve set the stage for total control.

At this point, additional formatting changes are easy. Title font? Excerpt font size, color, background? Margins? All “interface easy” — simply adjust the three Packages.

And if you want Teasers “two across” — it will take only this one line of CSS:

.teasers_home { float:left; width:275px; margin:0px 16px; }

This code can be entered in several areas of the CSS tab in the Skin Editor.

In this tutorial, the CSS was added to an existing Package created earlier in this guide — the “Additional CSS” tab of the &teaser_title package, as shown below:

Done. Note that a width of 275px represents a value that you can adjust to get the desired look on your site.

Add one line of Additional CSS, and you’re rocking two-column teasers, with thumbnails!

Excellent!

As you’ve probably realized by now, the Thesis 2.0 Query Box — combined with CSS Packages — opens the door to far more than teasers.

So have some fun — it’s time to let your creativity take over!

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.

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

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

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
4. Navigate to Appearance > Themes and Switch to the child theme
5. Visit your home page. The background should be black.

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.

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, Pinky 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!

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

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.

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.