Theme Big

Adding The WordPress body_class() Function To The Thesis Tag

Adam Baird — Tue, 08 Mar 2011 15:54:21 +0000

The Thesis body class filter allows you to add classes to the tag in order to customize posts, pages, or groups of posts and pages on your website.

I’ve written about this a couple of times before, but I’ve taken it a step further here.

The following function adds a variety of classes to the tag while keeping the “custom” class intact and accommodating Thesis post and page custom classes which are set on each respective post/page edit page.

function big_body_classes() {
	// Ensure the "custom" class remains
	$classes[] = 'custom';

	// Add the body_class() function
	$bodyclasses = get_body_class();
	foreach ($bodyclasses as $bodyclass) {
	    $classes[] .= $bodyclass;
	}

	// Accommodate Thesis post classes
	if(is_page() || is_single()) {
		global $post;
		$custom_slug = get_post_meta($post->ID, 'thesis_slug', true);
		$deprecated_custom_slug = get_post_meta($post->ID, thesis_get_custom_field_key('slug'), true);
		if ($custom_slug) {
			$classes[] = $custom_slug;
		}
		elseif ($deprecated_custom_slug) {
			$classes[] = $deprecated_custom_slug;
		}
	}
	return $classes;
}
add_filter('thesis_body_classes', 'big_body_classes');

Traffic and Trust Review and Practical Web Design Application

Adam Baird — Wed, 02 Feb 2011 17:18:48 +0000

Yesterday, my buddy Nick Reese launched How to Turn Traffic and Trust into Sales, an e-book focused on helping you get started with affiliate marketing. Sugarrae wrote a great review, and offered a couple free copies to two random people who re-tweeted the article. I re-tweeted and I won a free copy. Sweet! Here are my thoughts after my first time through the book:

The Basic Premise

Traffic and Trust is billed as a guide to getting started with affiliate marketing. It does fulfill that promise, but to say that’s what the book is about is seriously under-selling it. Nick gives you an in-depth guide to doing what most big time affiliates do. That is creating websites centered around things they are passionate about, and building a profitable business around that website.

I’m not saying you won’t learn about the affiliate industry. Nick tells you the ins and outs of the affiliate industry. He tells you exactly what affiliate marketing is, how affiliate marketing fits into our financial eco-system, and how to find and gain access to affiliate programs.

With that said, the main premise of the book is to teach you how reputation, traffic, and trust come together to form your website’s brand, and how to build a business around your passion using those components. Nick really does do a great job of simplifying the process and presenting it in a fashion that anyone with the desire to learn will be able to understand.

The Best Part

I’m a creative at heart. I like tinkering and seeing what I can build. I also like writing about building websites. Thus, I write on this here web design blog on a regular basis.

With that said, I’m not an SEO or marketing guy. I’ve gained basic knowledge of both out of necessity, but I don’t exactly gain a copious amount of fulfillment from either one. I can write some pretty good stuff, but I’m not the best at getting traffic or building a brand around what I write.

Nick gives some great pointers for marketing your content, but the thing that really got my juices flowing was his list of “profitable content” suggestions. He outlines six sure-fire ways to target readers who are ready to buy. As he tells you in the book, this is the kind of traffic that will make you some bank!

Nick wouldn’t let me list these for you, but he did give me permission to post the introductory paragraph for this section of the book. If this doesn’t make you excited, I don’t know what will:

Thus far in this book there has been a lot of discussion regarding getting your website up and running, but if you take one gem away from this entire book it should be found in this section. Let

How To Move Genesis Breadcrumbs Below The Header

Adam Baird — Mon, 29 Nov 2010 12:58:01 +0000

One of the great things about Genesis is that it offers you the option to display breadcrumbs by default. You can also choose to display them specifically on the front page (or blog home page), on single posts, on pages, on your 404 error page, and on archive (tag, category, date, etc. pages).

Depending on your design, you may want to move the breadcrumbs around a bit. You can move them below the header using the following code.

// Move Breadcrumbs Below Main Nav
remove_action('genesis_before_loop', 'genesis_do_breadcrumbs');
add_action('genesis_after_header', 'genesis_do_breadcrumbs');

If you would like to move the breadcrumbs to a different location, you can do that. Just substitute the appropriate Genesis hook in place of genesis_after_header.

Also, in order for this to work correctly, the above code should appear in your child theme’s functions.php after this code:

require_once(TEMPLATEPATH.'/lib/init.php');

Pretty simple, huh? If you have any questions, don’t hesitate to ask in the comments!

Color Scheme Designer Is Awesome!

Adam Baird — Mon, 22 Nov 2010 20:48:01 +0000

Some people have an ability to create stunning color schemes and designs with very little effort. I am not one of those people. Recently, I wrote a post for the design-impaired about using the color wheel to create color schemes that look good. Today, I stumbled upon this tool which streamlines the process, and makes things uber simple. Check it out!

Add Popular Posts To Thesis Sidebars Using WordPress Post Thumbnails

Adam Baird — Fri, 12 Nov 2010 18:36:40 +0000

Recently, I posted a tutorial explaining how to replace Thesis post images with WordPress post thumbnails. One of the nice things about WP post thumbnails is that you can define an unlimited number of sizes for images which you can crop and use in your theme.

One of the best uses I’ve found is creating thumbnails for lists of popular, favorite, or recent posts in your blog’s sidebar.

Enabling The Thumbnails

The first item we need to address is actually setting up the thumbnails. If you read the first tutorial, I explained how to enable thumbnails in your theme (in this case Thesis). Here is that code:

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 610, 9999, true );
add_image_size( 'teaser', 150, 150, true );

That adds a default, full sized post image, and a cropped teaser image for use with Thesis teasers. In order to add an additional size for post thumbnails, we need to add this code to custom_functions.php:

add_image_size( 'thumb', 50, 50, true );

That’s just the name of the image, the width of the image in pixels, and the height of the image in pixels. The addition of true specifies that the image is hard cropped (crucial) to the specified width and height.

Creating The List Of Popular Posts

Next, we need to use get_posts() to create a list of posts with thumbnails. We’ll throw in a comment count as an added bonus cuz we’re cool like that ;)

I’ll just give you the code in one big lump and then explain it piece by piece. If you want to take the shortcut, just slap this in custom_functions.php and add some CSS. Otherwise, read on! Here’s the code:

function pop_posts_with_thumbs() { ?>

There are several things involved here:

Creating a function
Creating an
to fit with Thesis’ sidebar widget code and inherit the proper CSS
Creating an
to be used as the heading for the widget
Creating an
- Using get_posts() to grab the list of your most popular posts, and arrange the title, thumbnail, and comment count accordingly
- Using thesis_hook_before_sidebar_1 to place this list of posts in your blog’s sidebar.
Getting Started

The first thing we need to do is open all of our items. This code initiates the function,
,
- so that the items will appear in a list. That code looks like this:
```
foreach($popular as $post) {
	setup_postdata($post); ?>
	
		
			
		
	
```
  Accounting For #$%@ Old Browsers
  
  We’re going to add some CSS here in just a minute, and the overflow parameter will work to keep our floating images nice and cleared on modern browsers, but for IE6 (a.k.a. the bane of my existence), we’re going to add a
  that we’ll use to clear the floats through CSS. Here’s that code:
  Hooked Up
  
  The last thing we need to do is hook the function on the appropriate hook to place the list in the sidebar. We do that use a simple add_action():
```
add_action('thesis_hook_before_sidebar_1', 'pop_posts_with_thumbs');
```
  Adding Style
  
  Now that we’ve got an ugly list in our sidebar, let’s add some styling to spruce it up a bit! This will vary quite a bit depending on any custom CSS you’ve already applied, but here is a good starting point:
```
.custom ul.sidebar_list ul li a { padding: .7em 0; display: block; border-bottom: 1px dashed #ddd; text-decoration: none; color: #111; overflow: hidden; }
.custom ul.sidebar_list ul li a:hover { color: #777; }
.custom ul.sidebar_list ul li a img { float: right; margin-left: .7em; }
.custom ul.sidebar_list ul li a span.comment_number { font-weight: bold; color: #f3802b; }
.clear { clear: both; }
```
  Wrapping Up
  
  Popular posts are great for increasing page views and for getting the eyes of your visitors on your best content. Don’t be afraid to play around with get_posts(). You can grab all sorts of lists of posts. Recent posts, your favorites, random posts, and similar posts are just a few. Use your imagination!

How To Add WordPress Post Thumbnails To Thesis

Adam Baird — Tue, 02 Nov 2010 21:42:28 +0000

Thesis is an absolutely fantastic framework for WordPress. One of the things that is sorely lacking to date is integration of WordPress post thumbnails.

Post thumbnails have been available for use for quite some time now, and they provide a simple way of placing post images, teaser thumbnails, featured post images, thumbnail for lists of posts in your blog’s sidebar, and any other use of post images you can think of. Its not quite as efficient as the current Thesis system, but it works quite well, and the small sacrifice in terms of efficiency is well worth it for the time you’ll save if you ask me.

Setting Up Post Thumbnails

Thumbnails aren’t enabled by default, so you need to enable them manually. What you’ll need to do is place this code in custom_functions.php:

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 610, 9999, true );
add_image_size( 'teaser', 150, 150, true );

There are three things involved here:

Post thumbnails are activated using add_theme_support( 'post-thumbnails' );
The default size is established using set_post_thumbnail_size( 610, 9999, true );
An additional thumbnail size is established using add_image_size( 'teaser', 150, 150, true );

To add additional sizes, you’ll need to add add_image_size( 'image_name', [image width in pixels], [image height in pixels], true ); to the end of that snippet.

In order to call the thumbnails for use within your theme you’ll need to use . That will call the default size. To call a size other than the default, you need to insert the name of the image used in establishing that particular size of thumbnail within the parenthesis. For the teaser image established above, it would look like .

Using The Post Thumbnails

You can use these post thumbnails in any loop on your blog for just about any purpose you can think of. For the purposes of this post, I’m just going to show you how to set up post images and teaser images like you would normally see in a Thesis installation.

Setting Up Post Images

Thesis allows you to place post images above or below the post headline, and floated to the left or right. I’m not going to show you how to create post options to allow for that kind of differential (though its certainly possible). For this post, I’m going to show you how to hard code the post image in any of those locations.

First, you need to call the post image in a function. The image should be linked to the single post if it is appearing in a list of posts. If it is appearing on the single post, it should not be linked. That code looks like this:

function post_image() {
	if(has_post_thumbnail()) {
		if(is_single()) { ?>
			
				
			
		
			
				
			
		
We’ve also added a conditional (if( has_post_thumbnail() )) to make sure the post image is set.  If its not, then this code won’t be applied.  
Second, you need to use a Thesis hook to apply the post image below or above the headline.  To place it above, use add_action( 'thesis_hook_before_headline', 'post_image' );.
To place it below, use add_action( 'thesis_hook_before_post', 'post_image' );.
Next, we need to write some CSS so that the post image fits with your design and the location in which you’ve placed it.  You’ll probably need to add to this depending on your particular design, but here’s a starting point.
.post_image { margin-bottom: 1em; margin-left: 1em; float: right; }
Of course, if you don’t want to float your image to the right, you’ll want to remove margin-left: 1em; float: right;.  If you want to float left, you’ll need to use margin-right: 1em; float: left; in its place.  
You may also want to make use of the margin, padding, background, and border properties.  That, however, is largely dependent upon your design.
Setting Up Teaser Images
Like post images, you need to start with a function to setup the post image.  The one main difference is that teaser images will always be linked to the single post because they will never show up on the actual single post.  That function looks like this:
function teaser_image() {
	if(has_post_thumbnail()) { ?>
		
			
		
	
Again, we’re using a conditional to dictate that if their is no post thumbnail set, then the code is not applied.  In order to add this to our teaser, we need to use add_action( 'thesis_hook_before_teaser_headline', 'teaser_image' ); or add_action( 'thesis_hook_after_teaser_headline', 'teaser_image' );.  Those should be fairly self explanatory ;)
Once again, you’ll need to add CSS to make this fit with your design.  A good starting point is the exact same as the post images.  Again, the CSS looks like:
.post_image { margin-bottom: 1em; margin-left: 1em; float: right; }
Again, depending on the specifics of your design, you’ll probably want to make use of margin, padding, background, and border in your CSS code.
Other Uses
You can use WP post thumbnails for featured posts, related posts in your post footer, popular or favorite posts in your sidebar, and the list goes on.  If you’ve got any questions, please let me know in the comments!

The Theme Big Design

Adam Baird — Wed, 27 Oct 2010 16:37:53 +0000

I’ve finally gotten around to getting a decent design done for this blog. With a bit of content and traffic I felt like I needed to get something up that looked good, and fit with the brand I’m attempting to create here.

Check out the video to see the features of the new design. There’s some work to be done, but that’s something I’ll tackle once the blog has a serious amount of content.

One thing I didn’t mention in the video is that the rounded corners are totally CSS unless you’re using internet explorer. If you’re using IE, extra markup is served to account for the corners. Its not perfect, but neither is IE and its certainly a marked improvement over javascript rounded corners.

I’d love to know what you think of the design! Let me know in the comments.

How To Use The Color Wheel To Choose An Effective Color Scheme

Adam Baird — Mon, 25 Oct 2010 02:29:05 +0000

One of my biggest faults as a designer is my “design eye.” I’ve gotten better with experience, but its difficult for me to come up with color schemes and design concepts that look good and are reader-friendly. I’ve gotten better with experience, but its still something I struggle with. Fortunately, if you’re aesthetically challenged like I am, there’s any easy way to jump start the process.

If you’ve ever taken an art class, you’re probably familiar with the concept of the color wheel. Its basically just a collection of colors beginning with red, blue, and yellow. From there, the three primary colors are combined with each other as well as shades of white and black to create every color known to man.

Primary, Secondary, Tertiary, and Intermediate Colors

The color wheel starts with three primary colors. Those are combined to add 3 secondary colors to the wheel. That total of 6 colors is combined to create an additional 6 tertiary colors.

As you can see, the primary colors are red, blue, and yellow. The secondary colors are green, orange, and purple. The tertiary colors are red-orange, red-purple, blue-purple, blue-green, yellow-green, and yellow-orange. Essentially, these colors are accomplished by mixing colors that appear side by side in each step. You can continue this process an infinite number of times and create an infinite number of colors. These colors that are further into the wheel are known as “intermediate” colors.

Neutral Colors

Well, these are pretty simple. Neutral colors are just white, black, and any combination of the two. In other words, black plus white equals shades of grey. These colors go well with pretty much everything and provide a base for your color scheme. Almost every design will include white, black, and some shade of grey.

Tints and Shades

Obviously there are a vast array of other colors that are visible to the human eye. These are created using tints and shades. What are tints and shades? A tint is any color you can grab from the color wheel plus white. A shade is just the opposite – any color you can grab from the wheel plus black. The saturation of the color just depends on how much white or black you mix the color with.

Selecting a Color Scheme

So now that you have all of this color knowledge, its time for some practical application.

Its always a good idea to start with white. I would almost always keep my main content column white or something very close to it. Its the easiest background color for the human eye to digest information from, and it coordinates well with just about every color on the wheel. The text in your main content column should almost always be black or something very close to it. It contrasts well with white backgrounds, and, because its also a neutral color, it too coordinates well with just about every color on the wheel.

From there, you can use the color wheel in a variety of ways to come up with visually pleasing combinations.

Monochromatic

A monochromatic scheme is comprised of one selected color from the wheel. From there, you add shades and tints of that color to create a usable color scheme. It looks something like this:

Analogous

Think of an analogous color scheme as a neighborly one. Its a simple matter of selecting two or more connected tertiary colors on the wheel. It looks like this:

Complementary

A complementary color scheme consists of two tertiary colors located directly across from one another on the wheel. It looks like this:

Split Complementary

A split complementary scheme is similar to a complementary scheme, but you’re selecting one color on one side of the wheel, and two colors on the other side of the wheel – one to the left and one to the right of the color directly opposite our first color. It looks like this:

Triadic

A triadic scheme is comprised of three colors equally spaced on the wheel. It looks like this:

Get creative!

These techniques are just intended to get you started and get the creative juices flowing. From here, you can add tint and shade, and you can come up with some beautiful color schemes if you spend some time with it. Generally I would recommend using neutral colors or heavily tinted and shaded colors for large color-filled areas. I would use brighter colors for accents, headlines, logos, etc. Have fun!

Adam Baird — Mon, 11 Oct 2010 20:44:52 +0000

Thesis also allows you to use post meta options to add custom body classes on a per page and/or per post basis. Thesis also has a sweet body class filter that allows you to easily add classes to the tag on a mass scale.

I recently wrote an article over on Art of Blog detailing different ways to add classes to the body tag using PHP conditionals. I’ve expanded upon that a bit and come up with a function that will provide several body classes for each and every page on your blog based on location, page name, whether or not a user is logged in, etc. It should give you nearly complete freedom to designate styles for any page or group of pages on your blog. It’s certainly not all inclusive (I may add to this eventually), but unless you are doing something extraordinarily unique this should do the job!

The Code

I’ll go ahead and give you the code in one big lump, and then I’ll break it down piece by piece. Here’s what you’ll need to copy and paste in custom_functions.php:

function big_body_classes() {
    $classes[] = 'custom';
    if(is_single()) {
        global $post;
        $classes[] = 'single';
        $classes[] = $post->post_name;
    }
    if(is_page()) {
        global $post;
        $classes[] = 'page';
        $classes[] = $post->post_name;
    }
    if(is_archive()) {
        $classes[] = 'archive';
    }
    if(is_category()) {
        global $wp_query;
        $classes[] = 'category';
        $classes[] = 'cat_' . $wp_query->query_vars['category_name'];
    }
    if(is_tag()) {
        global $wp_query;
        $classes[] = 'tag';
        $classes[] = 'tag_' . $wp_query->query_vars['tag'];
    }
    if(is_author()) {
        global $wp_query;
        $author = $wp_query->get_queried_object();
        $classes[] = 'author';
        $classes[] = 'author_' . $author->user_nicename;
    }
    if(is_date()) {
        $classes[] = 'date';
    }
    if (is_day()) {
        $classes[] = 'day';
        $classes[] = 'day_' . strtolower(get_the_time('M_d_Y'));
    }
    if (is_month()) {
        $classes[] = 'month';
        $classes[] = 'month_' . strtolower(get_the_time('M_Y'));
    }
    if (is_year()) {
        $classes[] = 'year';
        $classes[] = 'year_' . strtolower(get_the_time('Y'));
    }
    if(is_404()) {
        $classes[] = 'four-zero-four';
    }
    if(is_search()) {
        $classes[] = 'search';
    }
    if(is_front_page()) {
        $classes[] = 'front_page';
    }
    if(is_home()) {
        $classes[] = 'home';
    }
    if(is_user_logged_in()) {
        $classes[] = 'logged_in';
    } else {
        $classes[] = 'logged_out';
    }
    return $classes;
}
add_filter('thesis_body_classes', 'big_body_classes');

Let’s look at this beast one piece at a time.

Universally Applied Classes

The function applies the custom class to all pages regardless of type or location. Its important to note that this class is the first one to be added. That’s done with this piece of code:

$classes[] = 'custom';

Conversely, the last class added to each page is the user status. It applies either logged_in or logged_out depending obviously upon whether the visitor is logged in or logged out. This is accomplished with this code:

if(is_user_logged_in()) {
    $classes[] = 'logged_in';
} else {
    $classes[] = 'logged_out';
}

Single Post Classes

Single posts receive single and post-slug classes. If you don’t know, the “post-slug” is just the last part of the URL. For example, if your permalinks look like:

http://www.example.com/2010/title-of-your-post/

Then your post slug would be “title-of-your-post”

Here’s how we accomplish that:

if(is_single()) {
	global $post;
	$classes[] = 'single';
	$classes[] = $post->post_name;
}

Page Classes

Pages receive page and page-slug classes. Its accomplished with this code:

if(is_page()) {
	global $post;
	$classes[] = 'page';
	$classes[] = $post->post_name;
}

Archive Area Classes

WordPress archives include category, tag, author, and date (day, month, and year) pages. Basically, all archive pages receive the archive class. All date pages receive the date class. Then, each individual page receives its archive type (category, tag, author, day, month, year).

Additionally, each individual page receives its archive type followed by and underscore and the individual page slug. That may sound a bit confusing, but as an example, a category page would receive cat_category-slug.

if(is_archive()) {
    $classes[] = 'archive';
}
if(is_category()) {
    global $wp_query;
    $classes[] = 'category';
    $classes[] = 'cat_' . $wp_query->query_vars['category_name'];
}
if(is_tag()) {
    global $wp_query;
    $classes[] = 'tag';
    $classes[] = 'tag_' . $wp_query->query_vars['tag'];
}
if(is_author()) {
    global $wp_query;
    $author = $wp_query->get_queried_object();
    $classes[] = 'author';
    $classes[] = 'author_' . $author->user_nicename;
}
if(is_date()) {
    $classes[] = 'date';
}
if (is_day()) {
    $classes[] = 'day';
    $classes[] = 'day_' . strtolower(get_the_time('M_d_Y'));
}
if (is_month()) {
    $classes[] = 'month';
    $classes[] = 'month_' . strtolower(get_the_time('M_Y'));
}
if (is_year()) {
    $classes[] = 'year';
    $classes[] = 'year_' . strtolower(get_the_time('Y'));
}

The Cleanup Work

That’s all of the major stuff! We’ll wrap up the code by adding four-zero-four to 404 error pages, search to search query pages, front_page to the front page, and home to the home (blog) page. If the front page happens to also be the blog home page, both classes will be applied.

Finally, we add the appropriate filter action to actually apply all of these classes.

if(is_404()) {
	$classes[] = 'four-zero-four';
}
if(is_search()) {
	$classes[] = 'search';
}
if(is_front_page()) {
	$classes[] = 'front_page';
}
if(is_home()) {
	$classes[] = 'home';
}

Using the Classes

Now that all of these classes are applied, you need to understand how to apply style to the classes. Typically, when applying custom styles to Thesis you add .custom prior to each CSS command. To use any of these classes, you simple apply body.[your class]. Pretty simple right?

Want to add style to category pages, and add separate style for one particular category page? Now you can. Want to add style to all single posts? Do it! You can add specific styles to almost every page on your blog using this filter.

The Simplest WordPress URL Shortener Ever

Adam Baird — Fri, 08 Oct 2010 16:05:00 +0000

As the WordPress Universe becomes more and more “twitterfied”, URL shorteners become more and more relevant. Its important to present links to your post in a fashion that are easy to share.

You can use dependable services like bit.ly or goo.gl. You can also create your own URL shortener using YOURLS. However, if you have a short domain name – such as http://themebig.com – there is a very simple alternative that allows you to create short URLs on your own domain!

The Code

This is extremely simple. All you need to do is create a function that houses your site’s URL followed by the post ID. Here’s the code:

function shortened_url() { ?>
    http://yoururl.com/

This should give you a permalink structure that looks like http://yoururl.com/123.  In order to place this URL anywhere within the loop, just use 
This URL structure may not be valid on some server set-ups or permalink structures.  Be sure to test prior to implementing this.  If you see a 404 error, you won’t be able to use this code.

A Simple Guide to CSS Selectors

Adam Baird — Thu, 07 Oct 2010 22:05:31 +0000

CSS selectors are an absolutely crucial tool in your quest to present a speedy, semantic markup for your server and search engines like Google to digest. They allow you to separate style from content, and to go much further in terms of what you can do with your blog’s design. This is one of the most basic web design concepts in existence, but if you’re just getting started it can be confusing!

Separating CSS from HTML

If you look at the back-end of many websites (more than you would think) you will find style mixed with HTML. Let’s say someone wanted to make a link red. It would look a little something like this:

Link Text

What’s wrong with this picture? The problem is that style="color: #dd0000;" is mixed in with the HTML when we can clearly accomplish the same thing without mixing the two.

What are CSS Selectors?

In simplified terms, css selectors are a way of referencing the classes and ID’s that are added to a given HTML element and adding style accordingly. Let’s use our anchor tag example from above, but this time let’s remove the style and add a selector. Let’s look at an example using a class and one using an ID:

class="red_link">Link Text

id="red_link">Link Text

As you can see, you just add class="red_link" or id="red_link" in place of the style code. This allows you to target the links accordingly using your theme’s style sheet (if you’re a Thesis user, that would be custom.css). You can give the class or ID whatever name you like.

To reference these classes and ID’s on your stylesheet you would use .red_link for a class or #red_link for an ID. Adding style to a link with a class or ID is simple! If we were to change the color of the link to red, it would look like this (for class and style accordingly):

.red_link { color: #dd0000; }

#red_link { color: #dd0000; }

You can add other parameters such as background, font-weight, or text-transform. Those are just a few.

The Specificity of CSS

Now that you know how to reference and style different HTML elements using CSS, its important that you begin to understand the specificity of CSS. What does that mean? Let’s look at our example above. We used .red_link to access the class. That works, but we need to be a bit more specific. Why? Because .red_link will reference and add style to every HTML element on your blog with that particular class. Have a

with the same class? It will receive the same styles.

How can we solve this problem? Place the HTML tag before the class or ID. While .red_link or #red_link will reference all HTML elements with that class or ID, a.red_links or a#red_link will only reference anchor tags with that class or ID.

Also, let’s say that we only want to target anchor tags within a particular

. Let’s also assume that its

. In that case we would use div.blue_box a.red_link as our string of selectors. You can go as many levels deep with this as you like.

This is a simple look at specificity. For something more in depth, check this out!

Class or ID?

When should you use classes and when should you use ID’s? Generally I try to use classes for everything. However, ID’s are linkable and should be used whenever you are dealing with an HTML element that represents progress moving down the page. Examples of good places to use ID’s rather than classes include things like the header and footer div’s, the sidebar div, post headline, etc. For example, if you wanted to place a link in your footer that takes a visitor back to the top of the page, it might look like this:

Go back to the top!

For the record, you can add both a class and an ID to the same HTML element as they are separate parameters

Handling Multiple Classes

It is possible to use multiple classes for one HTML element. They should simple be separated by a space like so:

You may specify styles for each class. The further a class is to the right, the more specific it is. In other words, if you apply different backgrounds to .widget and .recent_posts_widget, the latter will take precedent and be displayed.

You are most likely to use this in a scenario where you have HTML elements that share the same style with slight variations. In other words, you would apply the majority of your styles to .widget and the small variations specific to one particular widget to .recent_posts_widget.

You should not add more than one ID to an HTML element.

Wrapping Up

This stuff is a bit confusing at first. I certainly understand that, and I hope this all makes sense. If you have questions, please ask in the comments and I’ll be happy to answer!

180+ Free Social Media Icon Sets

Adam Baird — Fri, 01 Oct 2010 19:36:33 +0000

Regardless of the size of your blog you should absolutely have links to your RSS feed as well as your Twitter profile, Facebook page, YouTube channel and any other social media you may choose to use.

I’ve accumulated a list of more than 180 sets of social media icons! Check ‘em out and find some that work for you! Want something custom to set your brand apart? Check out a site like 99Designs.com. If you know of other sets that aren’t listed here, let me know and I’ll add to the list! Anyways…enough jibber jabber. Here are the icons.

These icon sets have been created by a broad slice of the design community. As such, they are released under many different licenses. If you use any of these, it is your responsibility to read the license and comply with its terms.

The Icons

Set of Social Icons Social Media Mini Icon Pack Handycons Socialize Icon Set Dellifeed Heart The Leaves Fall Set of Social Icons Hand Drawn Social Icons Six Free Social Icons Free Hand Drawn Doodle Icon Set for Bloggers Social Media Icons Pack Web 2.0 Origami Web 2.0 Icons Social Icons Made of Wood Chrome Social Media Icons Social.me Circular Social Media Icons Aquaticus.Social Page Peel Social Media Icons Function Social Media Icon Pack Woodgrain webtoolkit4.me Free Icon Set for Bloggers Free Glossy Social Icons Nurture Icon Set Circular Social Media Icons Icon Dock Vector Icons Web 2.0 Icons Social Media 3D Icons Pack Grunge Peeling Sticker Social Media Icon Set Bevel Dark Social Media Icons Cheers RSS Feed Icons TurboMilk Icons Pixel Perfect Social Media Icons Social Balls Free Vector Icons More Free Vector Icons Social Network Icon Pack Polaroid Icon Set Forty Free Social Icons Jeans Icon Pack Extreme Grunge Garments Icons Black Paint Splatter Icons Free Vector Social Bookmark Icons 3D Social Media Icons for Bloggers Social Bookmark Sketchy Icons Webfruits Blog Icons Set One Webfruits Blog Icons Set Two Webfruits Blog Icons Set Three Hearts Stamps Drink Web 2.0 Icons Pricetag Social Media Icons Wild Twist Social Media Icon Pack Beeker Social Media Icons Rivet Social Media Icons Sleek Social Network Tabs Free Hand Color Stroked Icon Set Wood Social Media Icons PC Social Media Icons Lego Social Media Icons Social Media Buttons Social 2 Duo Christmas Social Icon Pack 65 Social Icons Free Social Bookmarking Icons Free Vector Social Media Icons Panda Social Network Icons Social Sketches Old Bottle Crowns Social Icon Set Large Social Icons Grunge Circular Social Icons Stars Social Icons Set Free Social Media Icon Set Splatter Social Media Icons Premium Peel Over Icon Set Elegant Themes Social Icons Sleek Social Icon Pack Social Truck Icon Set Social Buzz Icon Pack Social Network Icon Set Free Social Icon Sticker Set Vector Social Media Icons Free Social Media Icons for Your Blog Networking and Bookmarking Icon Set Hand Drawn Social Media Icons Vintage Icon Set for Bloggers Puzzle Social Network Icons Scribble Social Media Icon Set Social Web Buttons WebDev Social Bookmarks Website Icons IconTexto Web 2.0 User Icons Apollo Icons Social Post Stamps Web Social Icons Social Grunge Icons Social PNG Icons Furry Cushion Social Icons Grass Textured Icons Vintage Stamp Icons Amazing 3D Social Icons Free Social Icons by IconShock Koidesign Social Icon Pack Pumpkin Halloween Social Icons Free Social Media Bird Icons High Detail Social Icons Lontar Social Icons Shiny Hearts Starry Site Icons Beer Cap Social Icons Blue Jeans Social Icons Amazing Social Icons Matte White Square Icons Magic Marker Icons Simple Black Square Icons Simple Red Square Icons Glowing Green Neon Icons 3D Glossy Orange Orb Icons Crumpled Paper Icons Whitewashed Star Patterned Icons 3D Glossy Pink Orb Icons 3D Glossy Blue Orb Icons 3D Transparent Glass Icons Abstract Red and Gold Paint Splatter Icons Amber Glossy Chrome Icons Antique Glowing Copper Orbs Icons Black Ink Grunge Stamps Textures Icons Black Inlay Crystal Clear Bubble Icons Black Inlay Steel Squares Icons Black Paint Splatter Icons Blue Jelly Icons Blue Chrome Rain Icons Black White Pearl Icons Blue Metallic Orbs Icons Blue Retro Rusted Grunge Icons Blue Tiedyed Cloth Icons Flat Gray Floral Icons Firey Orange Jelly Icons Blue White Pearls Icons Glossy Black 3D Buttons Icons Glossy Black Comment Bubbles Icons Glossy Black Icons Glossy Silver Icons Glossy Space Icons Glossy Wood Icons Green Checkered Retro Grunge Icons Green Grunge Clipart Icons Green Jelly Icons Green Metallic Orb Icons Grunge Brushed Metal Pewter Icons Grunge Icons Dark Blue Denim Jeans Icons Lime Green White Pearls Icons Orange Fiesta Icons Orange Grunge Stickers Icons Orange White Pearls Icons Pink Black Cherry Blossom Festival Icons Pink Jelly Icons Pink Metallic Orbs Icons Purple White Pearl Icons Quilted Floral Icons Red White Pearl Icons Retro Green Floral Icons Rounded Glossy Black Icons Silver Inlay Square Metal Icons Simple Red Glossy Icons Sky Blue White Pearl Icons Stitched Denim Blue Jeans Icons Striped Retro Grunge Icons Ultra Glossy Silver Button Icons Vibrant Pattern Icons Yellow Black Striped Grunge Construction Icons Yellow Comment Bubbles Icons Yellow Road Sign Icons Matte Blue and White Square Icons Matte Grey Square Icons Glowing Purple Neon Icons

New And Improved Thesis Numbered Page Navigation

Adam Baird — Tue, 28 Sep 2010 23:40:20 +0000

A while back I wrote a tutorial over at Art of Blog explaining how to set up numbered page navigation for Thesis without using a plugin. While the code in that post is serviceable, it needs to be updated. If you are filtering any posts from your homepage, using custom templates, or using any custom taxonomy pages then the numbered nav gets a bit buggy.

Why use Numbered Page Navigation?

The main reason to use numbered page navigation is to improve the navigation of your blog. Anything you can do to up your page views will contribute to your blogging goals whether that’s gaining RSS subscribers, newsletter subscribers, selling ads or whatever else.

The New Code

This new code is compatible with every post index on your website! Blog index? Done. Search page? Check. Archive (tag, category, and author) pages? Yup. Custom taxonomies? Yessir! Got a custom loop? Filtering posts from any loop? You’re covered. This code is written to be incredibly flexible, and uses the same pagination method as Thesis itself!

Here’s the code to copy and paste into custom_functions.php.

function numbered_page_nav($prelabel = '', $nxtlabel = '', $pages_to_show = 8) {
    global $wp_query, $paged;
    $custom_range = round( $pages_to_show/2 );
    $max_page = $wp_query->max_num_pages;
    if( is_home() || is_archive() || is_search() || is_tax() ) {
        if(!$paged) {
            $paged = 1;
        }
        if($max_page > 1) { ?>
            Page  of 
            = ( $pages_to_show-2) ) { ?>
                1
...
            = 1 && $i <= $max_page ) {
                    if( $i == $paged ) { ?>
                        
                    
                        
                    
                ...

            
            
        
Adding Style
The CSS for this code will vary quite a bit, but here is the CSS I’m using here on Theme Big.  
.numbered_nav { list-style-type: none; font-size: 10pt; margin: 0 0 2em; padding-right: 2em; overflow: hidden; color: #7e572e; text-shadow: 0px 1px #fff; font-weight: bold; }
.numbered_nav li { float: left; margin-right: .4em; overflow: hidden; }
.numbered_nav li a { display: block; padding: .5em .7em; color: #7e572e; background: #fefee8; }
.numbered_nav li a:hover { color: #cc661d; }
.numbered_nav li.number a:hover { background: #fefee8; color: #7e572e; text-shadow: 0px 1px #fff; border-bottom: .3em solid #4e973f; }
.numbered_nav li.intro { margin-right: 1.5em; background: #cc661d; color: #fefee8; text-shadow: 0px 1px #0c3144; padding: .5em .7em; }
.numbered_nav li.current_number { padding: .5em .7em; border-bottom: .3em solid #4e973f; background: #fefee8; }
.numbered_nav li.ellipsis { border: 0; padding: .3em 0; }
You’ll need to tweak this to match up to your own design, but this should give you a pretty good starting point.  If you have any questions give me a shout in the comments and I’ll do my best to help you out!

Two Useful Edits For Thesis Excerpts

Adam Baird — Sat, 01 May 2010 15:22:20 +0000

Thesis offers you a ton of options for using excerpts. The problem is, you can’t control the length and this ugly “[...]” shows up at the end. Let’s get that under control.

Removing The Elipses

This is pretty simple. All we are going to do is use a filter that singles out the “[...]” and replaces it with nothing. Just copy and paste this code into custom_functions.php:

function no_ellipsis($text) {
	return str_replace('[...]', '', $text);
}
add_filter('the_excerpt', 'no_ellipsis');

Adjusing The Excerpt Length

Well, this is about as simple as it gets. We insert the parameter $length into the function title. Then, we return the length in number of words contained in the excerpt. The default is 55. I’ve set it to 30 here, but you can set it to whatever you like.

function excerpt_length($length) {
	return 30;
}
add_filter('excerpt_length', 'excerpt_length');

Advanced Excerpt Length Control

You can take this a step further using conditional tags. Let’s say you want different excerpt lengths for your homepage and archive pages. Let’s say you also have a list of posts from a specific category on your homepage and you need a really short excerpt for that. Your code would look like this.

function excerpt_length($length) {
	if( is_home() && in_category('featured') ) {
		return 10;
	} elseif( is_home() && !in_category('featured') ) {
		return 70;
	} else {
		return 40;
	}
}
add_filter('the_excerpt', 'excerpt_length');

Once you learn to be creative with conditional tags, you open up a world of possibilities when it comes to serving content dynamically. This is just one example.

How to Create a WordPress Function

Adam Baird — Mon, 29 Mar 2010 12:44:47 +0000

I’ve seen a ton of tutorials for creating WordPress functions. The thing is, most of them are over-complicated garbage that are really only understandable to people who already know how to write functions. What’s the point in that? Let me show you a simple 4 step process to get this crap under control.

What is a WordPress Function?

Actually, functions aren’t anything unique to WordPress. In reality, functions are a basic core component of PHP (the coding language WordPress is built on). However, since you (and I) are unlikely to ever need to code anything outside of WordPress, we’ll just talk about it in that context.

Think of a WordPress function as a simple, effective way to shorten your code. It allows you to add one line of code to your markup rather than how ever many lines your function is. I’ve written functions that are hundreds of lines long, so these functions are pretty handy.

The Process

As I said, I’m going to lay out a simple 4 step process for creating a function. Here we go:

1. Name Your Function

Think you can handle that? I certainly hope so. I would just choose something simple that defines what the function does and fits with the overall theme of your website. For example, if I had a website about cats, and I was writing a function for an excerpt about mittens, I might call the function “kitten_mittens”…

2. Create Your Function’s Structure

All functions require the same basic structure. They need the word “function” to appear at the beginning, the name of your function, and content enclosed in brackets. It looks like this:

function kitten_mittens() {
	// example content
}

Oh yeah, those pesky little parentheses after the function name are important too. Since we’re keeping this simple, let’s save that for another post. You don’t need to do anything with them, you just have to include them in your function.

3. Add Content, Let Simmer

So now we have a name for our function and we’ve created our structure. Where to? Oh, that’s right, our function is useless without content. Let’s add a paragraph about kitten mittens.

function kitten_mittens() {
	Does your cat making toooooo much noise all the time?  Is your cat constantly stomping around, driving you crazy?!?  Think there's no answer?  Try Kitten Mittens!!!
}

You can add whatever you want here. It can be a list, a group of ads, an about the author box…whatever you want!

4. Add HTML/PHP Switches

HTML and PHP aren’t friends. They don’t play well with each other. Sooooo, we have to seperate them. We have to tell WordPress when we’re using PHP and when we’re using HTML. Luckily, this is extremely easy. All we have to do is add ?> to switch from PHP to HTML, and to switch from HTML to PHP.


function kitten_mittens() { ?>
	Does your cat making toooooo much noise all the time?  Is your cat constantly stomping around, driving you crazy?!?  Think there's no answer?  Try Kitten Mittens!!!
 }

And there you have it.  That’s a completed WordPress function ladies and gents.
Using Your Function
Now for the easy part…using your function in your WordPress theme.  You just need to place  where ever you want your excerpt about kitten mittens to appear in your theme.
If you’re using Thesis, you’ll need to attach the function to a hook in custom_functions.php in order for it to appear in your theme.  That looks like this:
add_action('thesis_hook', 'kitten_mittens');
Obviously, you’ll need to use whichever Thesis hook is appropriate for your situation.



The Obligatory Plugin Rant
Adam Baird — Wed, 17 Mar 2010 21:28:14 +0000
Not all WordPress plugins are created equal.  There are some plugins, loved and used by many, that are absolutely horrific in terms of your site’s performance.  Conversely, there are plugins that virtually no one uses that are absolutely fan-damn-tastic.  With that said, unfortunately most plugins fall into the former category rather than the latter.
The Down Low on Plugins
So, here a few golden rules of using WordPress plugins:
1. Only use a plugin if three things are true:
Note: The third point is especially important!

You absolutely must have the functionality offered by this plugin
You can’t easily accomplish the same functionality without a plugin
The damage done to your site’s performance by activating this plugin does not outweigh what you gain by using this plugin.

I constantly see people using plugins that possess absolutely zero benefit to their site.  Actually think about what a plugin is going to do for your site before you install it.
2. If you are using more than 10 plugins you’re probably using WAY too many
If you’re using 5 plugins to create thumbnail images for your recent, popular, and similar blog post lists, there is something seriously wrong.  With a relatively small amount of research, and a very small amount of php/html/css knowledge, you can create something similar with zero plugins.  The same can be said for so many of the popular plugins in existence right now.
3. Only use plugins that are routinely updated
This is very important.  You don’t want your website depending on something that was last updated in 2007.  Seriously.  Would you let your car go three years without an oil change?  C’mon now.  Think about this…if your plugin hasn’t been updated in years, it probably won’t be ever again.  What does that mean?  Eventually it will break because of a WordPress update and you’ll be up poop creek without a paddle.
Conversely, if you find a way to do something without a plugin, you’ll have the solution and, most likely, the knowledge to fix that solution if a WordPress update ever breaks it.
The Bright Spots
Alright, enough gloom and doom.  Let me point you in the direction of some really amazing plugins that are lightweight, clean, fast, and…useful!
Akismet
Akismet is the best comment spam control on the market.  You’ll never have to worry about approving comments again (unless you have a very large blog).  The best part is, there’s no strain on your server since it runs completely on WordPress’s servers.  Additionally, because it was created and is developed by WP, you know its not going anywhere.
Login Lockdown
One of the bad things about WordPress is that there is no way to protect against brute force attacks.  If you don’t know, that’s when a hacker sets up a program to enter your username along with every conceivable password until one works and they gain access to your site.  Obviously, if you run a popular website, its likely that someone will try to hack it at some point.  Login Lockdown isn’t a foolproof solution (I’m not sure there is one), but its pretty good.  Check it out.
WP Total Cache
WP Total Cache is used by major WordPress blogs such as Mashable, and John Chow.  It has the capability to speed up your site by caching just about anything running on your site.
The Rub
In the end, there are a lot of plugins that are really great and can do you a ton of good.  Besides the ones in this article, I can think of at least 10 more that are very useful for the right site.  With that said, be vigilant, do your research, and make sure you find what’s right for you.



Create An HTML Link
Adam Baird — Wed, 17 Mar 2010 02:11:36 +0000
Creating html links, known as “hyperlinks”, is one of the most basic elements of web design.  It is extremely simple.  Just use the basic code below and fill in the link URL and the text of your link in the indicated:
[ LINK TEXT ]



The Cheap Bastard’s Guide to WordPress Design
Adam Baird — Tue, 16 Mar 2010 13:41:51 +0000
I design websites for a living. A friend of mine recently wondered about getting started in web design.  He noted that I had spent a decent sum of money on the current suite of tools I work with.  Fortunately, that doesn’t have to be the case if you’re just getting started.
I’ve invested in a decent laptop that set me back about $1500 3 years ago, perhaps another $1,000 in software/training materials, and I’m in the market for a new computer that will probably set me back $3,000 or so.  With that said, keep in mind, this is what I do for a living.  I spend 50-60 hours per week in front of my computer.  If a faster computer, more efficient software, and improved skills from training can save me just a few hours a week, they’ll pay for themselves VERY quickly.
However, if you’re just starting out, you have no portfolio, and you don’t really know if you’ll ever be able to get paid to do web design…let alone “go pro.”  Again, that’s ok!  I’ve got a list of 9 tools to make a beginning WordPress designer’s life easier…and they are all FREE!
FileZilla
Filezilla is the best free FTP program on the market.  For that matter, its one of the most beginner friendly programs out there period.  It allows you to drag and drop files where you want them, open multiple ftp connections at one time, and much much more!
NetRenderer
NetRenderer is a web based engine that will allow you to view a printscreen snapshot of a given web page in just about every relevant web browser in existence.  While its not perfect (snapshot doesn’t extend below the fold), it is a pretty good starting point, and its free.
The Gimp
The Gimp is an open source Photoshop clone.  While it works a bit differently, there are a lot of similarities and the gimp’s functionality has come to rival that of its expensive step brother.  I definitely recommend Photoshop if you have the means, but if not, the gimp will do quite nicely for the time being…especially if you’re not doing any complicated graphic design.
Color Picker
Color Picker is an extremely simple web based tool that will allow you to choose a color and get the hex and/or RGB code for that color for use in CSS or whatever else you need it for.
CSS Compressor
The CSS Compressor is another web based tool that will allow you to compress CSS files.  Your theme has at least one CSS file, and many themes also come with extra CSS files (for example, Thesis has 3 CSS stylesheets).  Many plugins also come with CSS files included. Compressing CSS files will probably knock at least 5% off of your page load time and possibly as much as 10% if you’re using a large number of CSS files.  I know it doesn’t sound like much, but little things like this add up.
Hint: Always keep uncompressed versions of your CSS files.  Edit the uncompressed version, save it as a back up, compress, and upload to your server.  Repeat this process whenever you edit your CSS.  This will save you some serious headaches.
Image Omptimizer
The Image Optimizer is a free web based tool that will drastically reduce the size of your image files.  This is HUGE for reducing your page load time.  If you’re using a lot of images in your design (or your content) this could cut your page load time in half.  Seriously.  This is a big deal…and its free!  They also have a version for download, but it may or may not work on your machine.
Hint: Keep an eye on the quality of your images.  Making them smaller is great, but don’t sacrifice their visual appeal or you’ve defeated the entire purpose of having images in the first place.
Web Page Analyzer
The Web Page Analyzer is yet another web based tool that will calculate how long it takes to load any given page on your website.  It will also break down all the elements of your page and tell you what you can do to make your page faster.  Some of the advice is a bit outdated, but this is an amazing starting point for anyone looking to learn a thing or two about web performance (which any designer/developer worth his salt should do).
Snipplr
Snipplr is a repository of code snippets to help you do just about anything.  Anytime you’re stumped, its a good place to look for a solution.  Keep in mind that you should always test anything you find here before using it on an actual live site.
HTMLizer
The HTMLizer will allow you to convert HTML/PHP code into a form that will not actually create any output.  It does this by changing special characters (like <, or >) into long code that will be read by web browsers by not by anything trying to create any sort of output from that HTML code.
Why is this useful you ask?  When posting in a blog, blog comment, or forum post, the blog or forum software will often take your code and just show the output rather than the actual code.  This can be very frustrating when trying to find an answer to a question.
It appears the HTMLizer is no longer operational :(  You can find a good replacement here!
Google
You’re probably thinking I’m kind of a jerk for putting Google on the list of tools, but I’m serious.  Google is absolutely the beginning (and experienced) web designer’s best friend.  If you don’t know how to do something, there is probably a great tutorial just waiting for you.  You just gotta go find it.  There’s no excuse.
The Rub
So, that’s the list.  If you’re just getting started, it can be a bit daunting to try and digest all of the information that is available to you.  Be persistent, stay motivated, and you’ll probably land on your feet.  Hopefully these tools making it easier for you to do so.



Adding Detailed Breadcrumbs to the Thesis Theme
Adam Baird — Sat, 13 Mar 2010 06:09:44 +0000
Adding a breadcrumb navigation menu is a great way to increase your page views and help your visitors find their way around your site.

Theme Big

Adding The WordPress body_class() Function To The Thesis Tag

Traffic and Trust Review and Practical Web Design Application

The Basic Premise

The Best Part

How To Move Genesis Breadcrumbs Below The Header

Color Scheme Designer Is Awesome!

Add Popular Posts To Thesis Sidebars Using WordPress Post Thumbnails

Enabling The Thumbnails

Creating The List Of Popular Posts

Popular Posts

to be used as the heading for the widget

Getting Started

: function pop_posts_with_thumbs() { ?> Popular Posts

Popular Posts

Setting Up Arguments For get_posts()

Getting The Posts

Accounting For #$%@ Old Browsers

Hooked Up

Adding Style

Wrapping Up

How To Add WordPress Post Thumbnails To Thesis

Setting Up Post Thumbnails

Using The Post Thumbnails

Setting Up Post Images

Setting Up Teaser Images

Other Uses

The Theme Big Design

How To Use The Color Wheel To Choose An Effective Color Scheme

Primary, Secondary, Tertiary, and Intermediate Colors

Neutral Colors

Tints and Shades

Selecting a Color Scheme

Monochromatic

Analogous

Complementary

Split Complementary

Triadic

Get creative!

The Complete List Of Thesis Fonts In Action

American Typewriter

Andale Mono

Arial

Arial Black

Arial Narrow

Baskerville

Bookman Old Style

Calibri

Cambria

Candara

Cantarell

Cardo

Century Gothic

Century Schoolbook

Consolas

Constantia

Corbel

Courier New

Crimson Text

Droid Sans

Droid Sans Mono

Droid Serif

Franklin Gothic Medium

Garamond

Georgia

Gill Sans

Helvetica

Hoefler Text

IM Fell DW Pica

IM Fell DW Pica SC

IM Fell Double Pica

IM Fell Double Pica SC

IM Fell English

IM Fell English SC

IM Fell French Canon

IM Fell French Canon SC

IM Fell Great Primer

IM Fell Great Primer SC

Inconsolata

Josefin Sans Std Light

:

function pop_posts_with_thumbs() { ?>

Popular Posts