In addition to generating default classes for your site’s “front-end” (public-facing) pages, WordPress also employs a default set of CSS attributes for the Admin, or “back-end” pages. If you’ve ever delved into the convoluted CSS stylings of the WordPress Admin, you will understand why we focus exclusively on front-end attributes in this article. The goal is to include all classes and IDs generated for database content, theme template files, and default widget items.

Fortunately, most (if not all) of your WP CSS work happens at the “theme” or “post” level. And when you do need to style the Admin, it’s usually easiest to just do it en bloc via plugin. You can also do it the old-fashioned way.

Different Types of Default WordPress Styles

In this DiW post, we assemble and dissect as many of the default front-end WordPress CSS attributes that we could find. It turns out there are many more automatically generated classes and IDs than you probably realize, including those for more commonly styled elements such as the following:

• Images included via WordPress’ WYSIWYG Post Editor
• Image captions and galleries included via the WYSIWYG Post Editor
• The body_class() and post_class() template tags
• WordPress’ automatic “smilies”
• WordPress’ default widgets

Some of these features are used quite frequently, while others not so much. It’s a good idea to cover your bases for these items, especially when producing publicly available themes. By including some basic styles for key CSS attributes, you ensure a more complete and rewarding experience for your theme’s users (and their users as well).

Fortunately, not all of WordPress’ default CSS attributes require explicit styling. Many default classes and IDs are generated and included as a matter of convenience. Conversely, there some core styles that are essential for public themes. So to organize things, we have two somewhat arbitrary types of default attributes, “essential” or “optional” – and here they are now:

Essential WordPress Styles

These are default WordPress attributes that should be styled with CSS:

• Default styles applied by WordPress’ WYSIWYG editor
• Default styles generated by WordPress’ default widgets
• Comment styles – threaded comments, specific comment styles, et al.
• Miscellaneous WordPress styles

Optional WordPress Styles

These are default WordPress attributes that should be styled only when needed:

• WordPress Page Listings
• CSS attributes generated by body_class()
• CSS attributes generated by post_class()
• Miscellaneous WordPress styles

For each of these sections, we’ll review the associated functionality and then present the default CSS styles generated and output by WordPress. It is ultimately up to you to decide the best approach for dealing with these default styles. If nothing else, it is wise to provide styles for WordPress’ WYSIWYG Editor items and perhaps widgets, if enabled. This is functionality that users typically employ while working with their site.

For all of these CSS attributes, we are merely presenting the selectors devoid of any preset styles. Only the styles for the WYSIWYG Editor are included, mostly because they are styled according to the WordPress Codex. Everything else is entirely up to you.

[ ^ ] WordPress CSS – WYSIWYG Editor Styles

When you are working with WordPress’ WYSIWYG Editor in the Edit Post screen, WordPress applies context-specific CSS attributes to certain elements when they are included in your post. For example, when inserting images, you can specify whether the images are floated left, right, or even centered. To do this, WordPress applies classes such as alignleft, alignright, or aligncenter. Without defining styles for WordPress’ default hooks, images and other elements may not display as intended.

Thus, at a bare minimum, if you are building a theme that will be used by the general public, it is wise to include the following basic styles for the items attributed via the WYSIWYG Editor:

/* == WordPress WYSIWYG Editor Styles == */

.entry-content img {
	margin: 0 0 1.5em 0;
	}
.alignleft, img.alignleft {
	margin-right: 1.5em;
	display: inline;
	float: left;
	}
.alignright, img.alignright {
	margin-left: 1.5em;
	display: inline;
	float: right;
	}
.aligncenter, img.aligncenter {
	margin-right: auto;
	margin-left: auto;
	display: block;
	clear: both;
	}
.alignnone, img.alignnone {
	/* not sure about this one */
	}
.wp-caption {
	margin-bottom: 1.5em;
	text-align: center;
	padding-top: 5px;
	}
.wp-caption img {
	border: 0 none;
	padding: 0;
	margin: 0;
	}
.wp-caption p.wp-caption-text {
	line-height: 1.5;
	font-size: 10px;
	margin: 0;
	}
.wp-smiley {
	margin: 0 !important;
	max-height: 1em;
	}
blockquote.left {
	margin-right: 20px;
	text-align: right;
	margin-left: 0;
	width: 33%;
	float: left;
	}
blockquote.right {
	margin-left: 20px;
	text-align: left;
	margin-right: 0;
	width: 33%;
	float: right;
	}
.gallery dl {}
.gallery dt {}
.gallery dd {}
.gallery dl a {}
.gallery dl img {}
.gallery-caption {}

.size-full {}
.size-large {}
.size-medium {}
.size-thumbnail {}

Lots of good stuff there, but no predefined styles for some of the Gallery items, such as .gallery dl and .size-thumbnail, as seen near the end of the list. Also, if you are using reset styles for margins and padding, you can strip out quite a few rules from this default set.

Quick Tip: an easy way to ensure that everything is looking great is to simply create a test post in which you include each of the WYSIWYG items. Then include this set of default styles and fine-tune as desired.

As with most everything else WordPress-related, for more information on these default WordPress styles, check out the Codex. The default selectors above basically define CSS styles for images, captions, galleries, blockquotes, and smilies &ndash: in other words, all of the items that you can include using WordPress’ built-in WYSIWYG Editor.

[ ^ ] WordPress CSS – Miscellaneous Styles

After styling the essentials, you may also want to keep an eye out for these miscellaneous WordPress classes:

/* == WordPress CSS - Miscellaneous Styles == */

/* category links */
 li.categories {}  
 li.cat-item {}
 li.cat-item-{id} {}
 li.current-cat {}
 li.current-cat-parent {}
 ul.children {}

/* blogroll links */
.linkcat {}
.blogroll {}

/* read-more links */
.more-link {}

Not all of them are going to be used in every theme, but they are used quite commonly, especially the .read-more class, which is frequently used for archive, category and tag pages. It may be wise to anticipate their presence to ensure that nothing is going to break your theme’s design. Also, for more information on the category-links template tag, visit the WP Codex: wp_list_categories.

[ ^ ] WP CSS – Page Listings

If you are using WordPress’ built-in page-listing functionality provided by the wp_list_pages() and wp_page_menu() template tags, there are a variety of items that should be styled. These may look like a lot of work, but once you get the pattern down, it goes pretty quickly. Hopefully the following list will prove a useful reference during your next page-list styling session:

/* == WP CSS - Page Listings == */

.pagenav {}               /* outermost list item */
.page_item {}             /* any page item */
.page-item-{id} {}        /* specific page id */
.current_page_item {}     /* current page */
.current_page_parent {}   /* parent of current page */
.current_page_ancestor {} /* any ancestor of current page */

.pagenav ul,
.pagenav .current_page_item ul,
.pagenav .current_page_ancestor ul,
.pagenav .current_page_ancestor .current_page_item ul,
.pagenav .current_page_ancestor .current_page_ancestor ul,
.pagenav .current_page_ancestor .current_page_ancestor .current_page_item ul,
.pagenav .current_page_ancestor .current_page_ancestor .current_page_ancestor ul {}

.pagenav  ul ul,
.pagenav .current_page_item ul ul,
.pagenav .current_page_ancestor ul ul,
.pagenav .current_page_ancestor .current_page_item ul ul,
.pagenav .current_page_ancestor .current_page_ancestor ul ul {}
.pagenav .current_page_ancestor .current_page_ancestor .current_page_item ul ul, 
.pagenav .current_page_ancestor .current_page_ancestor .current_page_ancestor ul ul {}

Again, the easiest way to understand this spaghetti is to create a list by including wp_list_pages() in a theme template file, and define a big red border (or whatever) for each declaration block. Check the results and you should quickly recognize the pattern. For more information on the template tags used to generate these rules, go to Codex:

• wp_list_pages()
• wp_page_menu()

You may also want to check out some delicious recipes for WordPress page navigation, which provide everything you need to create the perfect page navigation menus for your website. </hype>

[ ^ ] WordPress CSS – Default WordPress Widgets

There are literally thousands of widgets available to WordPress users, but there is a handful of very common widgets that are frequently used with widgetized themes. If you are planning on widgetizing your theme, you should include some styles for some of the more popular widgets. Many of the widgets included with the retiring Kubrick theme have become very common, if not expected:

As the theme designer, you will decide which (if any) widgets to include in your theme, so you will know exactly which styles to apply. Here are the generic rules for some of the more common WordPress widgets:

/* == WordPress CSS - Default WordPress Widgets == */

.widget {}

/* links widget */
.widget_links {}
.widget_links ul {}
.widget_links ul li {}
.widget_links ul li a {}

/* meta widget */
.widget_meta {}
.widget_meta ul {}
.widget_meta ul li {}
.widget_meta ul li a {}

/* pages widget */
.widget_pages {}
.widget_pages ul {}
.widget_pages ul li {}
.widget_pages ul li a {}

/* recent-posts widget */
.widget_recent_entries {}
.widget_recent_entries ul {}
.widget_recent_entries ul li {}
.widget_recent_entries ul li a {}

/* archives widget */
.widget_archive {}
.widget_archive ul {}
.widget_archive ul li {} 
.widget_archive ul li a {}
.widget_archive select {}
.widget_archive option {}

/* tag-cloud widget */
.widget_links {}
.widget_links li:after {}
.widget_links li:before {}
.widget_tag_cloud {}
.widget_tag_cloud a {}
.widget_tag_cloud a:after {}
.widget_tag_cloud a:before {}

/* calendar widget */
.widget_calendar {}
#calendar_wrap {}
#calendar_wrap th {}
#calendar_wrap td {}
#wp-calendar tr td {}
#wp-calendar caption {}
#wp-calendar a {}
#wp-calendar #today {}
#wp-calendar #prev {}
#wp-calendar #next {}
#wp-calendar #next a {}
#wp-calendar #prev a {}

/* category widget */
.widget_categories {}
.widget_categories ul {}
.widget_categories ul li {} 
.widget_categories ul ul.children {}
.widget_categories a {}
.widget_categories select{}
.widget_categories select#cat {}
.widget_categories select.postform {}
.widget_categories option {}
.widget_categories .level-0 {}
.widget_categories .level-1 {}
.widget_categories .level-2 {}
.widget_categories .level-3 {}

/* recent-comments widget */
.recentcomments {}
#recentcomments {}
#recentcomments li {}
#recentcomments li a {}
.widget_recent_comments {}

/* search widget */
#searchform {}
.widget_search {}
.screen-reader-text {}

/* text widget */
.textwidget {}
.widget_text {}
.textwidget p {}

That’s obviously a lot of work for any designer, but there are many similar elements that would probably look best with matching styles. For example, instead of multiple declarations for list elements such as .widget_archive ul li, .widget_pages ul li, and .widget_recent_entries ul li, we can simplify by combining them into a single declaration, for example:

.widget_pages ul li,
.widget_archive ul li,
.widget_recent_entries ul li {}

In other words, when it comes to styling widgets, there’s a lot of repetition that may be consolidated and streamlined in your stylesheet. As you apply styles for WordPress’ default widgets, keep an eye out for exploitable selector patterns and similar styles that may be combined to save time and effort.

[ ^ ] WordPress CSS – Comment Styles

Styling comments is the bane of WordPress theme designers, especially when threaded/nested comments are enabled. The deeper they go, the more time you’re going to spend with them, but thankfully WordPress makes things a little easier by providing plenty of precise CSS hooks. Of course, if threaded comments are disabled, there is no need to bother with most of these classes. But when they are used, many of the following selectors should define style:

/* == WP CSS - Comment Styles == */

.commentlist .reply {}
.commentlist .reply a {}

.commentlist .alt {}
.commentlist .odd {}
.commentlist .even {}
.commentlist .thread-alt {}
.commentlist .thread-odd {}
.commentlist .thread-even {}
.commentlist li ul.children .alt {}
.commentlist li ul.children .odd {}
.commentlist li ul.children .even {}

.commentlist .vcard {}
.commentlist .vcard cite.fn {}
.commentlist .vcard span.says {}
.commentlist .vcard img.photo {}
.commentlist .vcard img.avatar {}
.commentlist .vcard cite.fn a.url {}

.commentlist .comment-meta {} 
.commentlist .comment-meta a {}
.commentlist .commentmetadata {}
.commentlist .commentmetadata a {}

.commentlist .parent {}
.commentlist .comment {}
.commentlist .children {}
.commentlist .pingback {}
.commentlist .bypostauthor {}
.commentlist .comment-author {}
.commentlist .comment-author-admin {}

.commentlist {}
.commentlist li {}
.commentlist li p {}
.commentlist li ul {}
.commentlist li ul.children li {}
.commentlist li ul.children li.alt {}
.commentlist li ul.children li.byuser {}
.commentlist li ul.children li.comment {}
.commentlist li ul.children li.depth-{id} {}
.commentlist li ul.children li.bypostauthor {}
.commentlist li ul.children li.comment-author-admin {}

#cancel-comment-reply {}
#cancel-comment-reply a {}

These are all of the classes and IDs that I could find, and they all seem to be pretty self-explanatory, especially after using them a few times. Even so, consider the collection a work in progress. As new information is discovered, the list will continue to improve (hypothetically speaking). Many of these selectors target markup elements generated via WordPress’ built-in wp_list_comments() template tag. Even when using a custom callback function for your comments loop, many of these CSS classes will be available for your styling convenience.

[ ^ ] WordPress CSS – body_class()

As of version 2.5, WordPress provides the body_class() template tag, which is included in the <body> element of your theme’s markup. When included, this tag outputs a variety of context-dependent class names that facilitate styling different types of page views. We talk more about body_class() here and here, but for now, let’s look at the different classes WordPress generates for this powerful tag:

/* == WP CSS - body_class() == */

.rtl {}
.home {}
.blog {}
.archive {}
.date {}
.search {}
.paged {}
.attachment {}
.error404 {}
.single postid-(id) {}
.attachmentid-(id) {}
.attachment-(mime-type) {}
.author {}
.author-(user_nicename) {}
.category {}
.category-(slug) {}
.tag {}
.tag-(slug) {}
.page-parent {}
.page-child parent-pageid-(id) {}
.page-template page-template-(template file name) {}
.search-results {}
.search-no-results {}
.logged-in {}
.paged-(page number) {}
.single-paged-(page number) {}
.page-paged-(page number) {}
.category-paged-(page number) {}
.tag-paged-(page number) {}
.date-paged-(page number) {}
.author-paged-(page number) {}
.search-paged-(page number) {}

As you can see, these classes enable us to easily target elements on any specific type of page. For example, if you want to customize the presentation of your search results, you could define your styles using the .search-results class. This flexibility offers greater control over the granular construction of your WordPress theme. For more information on the body_class() tag, check out the WordPress Codex.

[ ^ ] WordPress CSS – post_class()

As with body_class(), the post_class() template tag outputs a variety of context-dependent class names for your posts. The post_class() tag makes it easy to target and style specific posts and post-types, as well as posts from specific categories or tags. Here are the different class names automatically generated by post_class():

/* == WP CSS - post_class() == */

.post-id {}
.post {}
.page {}
.attachment {}
.sticky {}
.hentry {}
.category-misc {}
.category-example {}
.tag-news {}
.tag-wordpress {}
.tag-markup {}

Again, these classes seem pretty self-explanatory, but if anyone happens to know the definition of the .hentry class, it would be nice to know – I couldn’t find anything, and sadly didn’t take time to test. Basically, these classes enable you to define styles for specific types of posts, attachments, stickies, categories and tags. You can also include your own classes to post_class(), and even include current category IDs. For more information on the post_class() tag, check out the WordPress Codex.

Call for updates

So what’s missing? Notice any errors? I did my best to research everything and organize everything as accurately as possible, but this turned out to be a bit more insane than I had planned, and so there is definitely room for improvement. If you see anything that is inaccurate or incomplete, please advise in the comments. It would be great to fine-tune a complete reference for all of WordPress’ default CSS styles and hooks all in one place.

© 2010 Digging into WordPress | Permalink | 27 comments | Add to del.icio.us | Post tags: CSS, stylesheets

1. Using CSS3 and progressive enhancement
2. Multiple columns by filtering the_content
3. More flexible multiple columns
4. Multiple loops displayed in multiple columns
5. Display your posts in horizontal display order with two columns
6. Bonus: Display your category list in two columns

1. Using CSS3 and progressive enhancement

I think the easiest way to display your content in multiple columns is to apply a little CSS3 in progressively enhancing fashion. Let’s say you have the following markup:

<div class="content">
	<p>Lorem ipsum..</p>
	<p>Lorem ipsum..</p>
	<p>Lorem ipsum..</p>
</div>

We can add the following CSS to display the content in multiple columns:

.content {
	  -moz-column-count: 3;
	  -moz-column-gap: 10px;
	  -moz-column-rule: none;
	  -webkit-column-count: 3;
	  -webkit-column-gap: 10px;
	  -webkit-column-rule: none;
	column-count: 3;
	column-gap: 10px;
	column-rule: none;
	}

This will display your content in three columns with a 10px gap between each. This technique is a great way to enhance the display of your content for people running cool modern browsers like Safari and Firefox. What about folks visiting with Internet Exploder or older browsers? They will see your content displayed in a single column, just like they would have before you applied the multiple columns. Note that you can specify any number of coulmns and any width for the gap.

2. Multiple columns by filtering the_content

If you need something a little more “universal” than what is currently available with CSS3, we can always dig into our template files, modify things at the PHP/(X)HTML level, and then style accordingly. Here is the technique provided by Kriesi.at:

function my_multi_col($content) {

	$columns = explode('<h2>', $content);
	$i = 0;

	foreach ($columns as $column) {
		if (($i % 2) == 0) {
			$return .= '<div class="content_left">'."\n";
			if ($i > 1) {
				$return .= "<h2>";
			} else {
				$return .= '<div class="content_right">'."\n <h2>";
			}
			$return .= $column;
			$return .= '</p></div>';
			$i++;
		}
		if(isset($columns[1])) {
	    		$content = wpautop($return);
		} else {
	    		$content = wpautop($content);
		}
		echo $content;
	}
}
add_filter('the_content', 'my_multi_col');

Just place that into your active theme’s functions.php file and then apply the following CSS:

.content_right, .content_left{
	float: left;
	width: 45%;
	}
.content_left{
	padding-right: 5%;
	}

Once implemented, this multi-column technique creates a a column for each instance of <h2> found within the post content. Thus, be sure to limit the number of <h2> elements to two in order to avoid layout breakage. Note that you could also modify the code to use a different element if the <h2> tag isn’t good for you. Multiple columns doesn’t get much easier, but just in case you need an alternate method for whatever reason, read on for some more great techniques.

3. More flexible multiple columns

The previous method works nice for two columns and no fuss, but for three or more columns we’re going to need something a little more robust. fortunately, Rob Searles shares a technique that allows any number of columns with completely different content in each. This technique creates columns based on multiple instances of the <!--more--> tag. There are several caveats, so check the orginal article for all the details.

Here are the steps involved in implementing this technique:

1. Add the my_multi_col_v2 function to your functions.php file
2. Add another snippet to your theme template file, for example page.php
3. Add some CSS to format the markup into columns
4. Add a couple of <!--more--> tags in your post or page to create the three columns

1. Let’s go through these steps, beginning with the main function that you should place into your theme’s functions.php file:

function my_multi_col_v2($content){
	// run through a couple of essential tasks to prepare the content
	$content = apply_filters('the_content', $content);
	$content = str_replace(']]>', ']]>', $content);
 
	// the first "more" is converted to a span with ID
	$columns = preg_split('/(<span id="more-\d+"><\/span>)|(<!--more-->)<\/p>/', $content);
	$col_count = count($columns);
 
	if($col_count > 1) {
		for($i=0; $i<$col_count; $i++) {
			// check to see if there is a final </p>, if not add it
			if(!preg_match('/<\/p>\s?$/', $columns[$i]) )  {
				$columns[$i] .= '</p>';
			}
			// check to see if there is an appending </p>, if there is, remove
			$columns[$i] = preg_replace('/^\s?<\/p>/', '', $columns[$i]);
			// now add the div wrapper
			$columns[$i] = '<div class="dynamic-col-'.($i+1).'">'.$columns[$i].'</div>';
		}
		$content = join($columns, "\n").'<div class="clear"></div>';
	}
	else {
		// this page does not have dynamic columns
		$content = wpautop($content);
	}
	// remove any left over empty <p> tags
	$content = str_replace('<p></p>', '', $content);
	return $content;
}

2. Once that’s in place, replace your the_content() tag with the following code:

$content = get_the_content('',FALSE,''); // arguments remove 'more' text
echo my_multi_col_v2($content);

3. The last bit of code that we need to setup is the CSS to make it all sweet:

/* dynamic columns */
div.dynamic-col-1 { float: left; width: 38%; padding-right: 2%;}
div.dynamic-col-2 { float: left; width: 38%;padding-right: 2%;}
div.dynamic-col-3 { float: left; width: 20%;}
div.clear { clear: both; }

4. And last but not least, remember to add the two <!--more--> tags in your post/page content to create the three columns.

That’s all there is to it. Pretty good stuff, but even so, there are even more alternatives available. next we’ll look at a technique for displaying multiple loops in multiple columns.

4. Multiple loops displayed in multiple columns

Not too long ago, I wrote a post at Perishable Press explaining how to display multiple loops with multiple columns. The final product will look display something like this:

• First column, first loop: display posts #1-5
• Second column, second loop: display posts #6-10
• Third column, third loop: display posts #11-15

Using WordPress and a little CSS, this configuration is relatively easy to accomplish. Let’s cut right to the chase..

Step 1: Setup the multiple loops

The first thing we want to do is replace the standard WordPress loop with the following code:

// FIRST LOOP: display posts 1 thru 5
<?php query_posts('showposts=5'); ?>
<?php $posts = get_posts('numberposts=5&offset=0'); foreach ($posts as $post) : start_wp(); ?>
<?php static $count1 = 0; if ($count1 == "5") { break; } else { ?>

<?php the_title(); ?>
<?php the_content(); ?>

<?php $count1++; } ?>
<?php endforeach; ?>


// SECOND LOOP: display posts 6 thru 10
<?php query_posts('showposts=5'); ?>
<?php $posts = get_posts('numberposts=5&offset=5'); foreach ($posts as $post) : start_wp(); ?>
<?php static $count2 = 0; if ($count2 == "5") { break; } else { ?>

<?php the_title(); ?>
<?php the_content(); ?>

<?php $count2++; } ?>
<?php endforeach; ?>


// THIRD LOOP: display posts 11 thru 15
<?php query_posts('showposts=5'); ?>
<?php $posts = get_posts('numberposts=5&offset=10'); foreach ($posts as $post) : start_wp(); ?>
<?php static $count3 = 0; if ($count3 == "5") { break; } else { ?>

<?php the_title(); ?>
<?php the_content(); ?>

<?php $count3++; } ?>
<?php endforeach; ?>

That’s the juice right there. We have three loops, each displaying five posts. The first loop displays the first five posts, the second loop displays the next five posts, and the third loop displays the next five posts. Thus, this multiple-loop configuration displays the most recent 15 posts, each of which being unique. See the original post for more information, options and details.

Step 2: Markup your theme template file(s)

Now that we have the PHP in place, we are ready to add the (X)HTML markup required for the final three-column configuration. There are many ways to accomplish this, this is merely one of them:

<div id="column_01">

	<!-- FIRST LOOP -->

</div>

<div id="column_wrap">

	<div id="column_02">

		<!-- SECOND LOOP -->

	</div>
	<div id="column_03">

		<!-- THIRD LOOP -->
	
	</div>

</div>

Here, each of the three loops will be placed into its own div, which then will be styled with a little CSS to transform it into one of the three columns. Note that you may want to change the id names of the divisions to better represent the particular semantics of your document. Now let’s move on to the CSS..

Step 3: Styling the columns with CSS

The final step in the tutorial is to style the markup with CSS. Nothing too fancy, really. Creating the columns is merely a matter of floating the individual divs and applying a width to each of them:

/* three column layout */
div#column_01 {
	float: left;
	clear: none;
	width: 30%;
	}
div#column_wrap {
	float: right;
	clear: none;
	width: 60%;
	}
	div#column_02 {
		float: left;
		clear: none;
		width: 45%;
		}
	div#column_03 {
		float: right;
		clear: none;
		width: 45%;
		}

The trick here is to use width values that will create the correct column widths. The values used in the example produce three columns of approximately equal width. Again, for more information on the details of this technique, see the original post.

Once you get everything setup, your posts should display your multiple-loop content in multiple columns, with each column showing the contents of a different loop. This is a great way to customize your theme, making it possible to present lots of disparate information within an easy-to-understand layout. Even so, this technique may not do it for you either. If so, we’ve got a couple more WordPress tricks up our sleeve!

5. Display your posts in horizontal display order with two columns

That’s a mouthful, isn’t it? What we’re doing in this section is changing the order in which your two-column posts appear on the page. Typically, your two-column layout displays posts like this:

Post #1   |   Post #4
Post #2   |   Post #5
Post #3   |   Post #6
 .        |    .
 .        |    .
 .        |    .

All of the multi-column methods we’ve discussed so far result in this sort of post-display order. So now we want to change things up a bit and display our two-column posts in horizontal display order, like so:

Post #1   |   Post #2
Post #3   |   Post #4
Post #5   |   Post #6
 .        |    .
 .        |    .
 .        |    .

How is this accomplished? As explained in my horizontal-display tutorial, this is easily accomplished using two default loops and the rewind_posts() function. The first loop will display the posts in the first column, while the second loop will display the posts in the second column. To do this, we use PHP’s modulus operator to filter out every other post from the first loop, which will display posts in horizontal order.

To make this happen, first replace your default WordPress loop with the following code:

<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) == 0) : $wp_query->next_post(); else : the_post(); ?>

<div id="left-column">
<h1><?php the_permalink(); ?></h1>
<?php the_content(); ?>
</div>

<?php endif; endwhile; else: ?>
<div>Alternate content</div>
<?php endif; ?>

<?php $i = 0; rewind_posts(); ?>

<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); ?>

<div id="right-column">
<h1><?php the_permalink(); ?></h1>
<?php the_content(); ?>
</div>

<?php endif; endwhile; else: ?>
<div>Alternate content</div>
<?php endif; ?>

With that code in place, oddly numbered posts will appear within a division identified with an attribute of id="left-column". Likewise, even-numbered posts will appear within a division identified with an attribute of id="right-column". Thus, we may apply the following CSS to position the divisions as two adjacent columns:

div#left-column {
	width: 333px;
	float: left;
	clear: none;
	}
div#right-column {
	width: 333px;
	float: right;
	clear: none;
	}

Of course, when it comes to configuring the WordPress loop and styling your page with CSS,
anything is possible. Feel free to experiment and adapt this technique to suit your own diabolical purposes ;) As with the other methods described in this DiW post, much more information is available for this technique at the original article, including a nice, CSS-only method that is sure to leave you breathless.

6. Bonus: Display your category list in two columns

Using a little PHP magic, we can get WordPress’ wp_list_categories() to display our categories in two columns. As Blog Oh Blog explains, all you need is the following code placed in your theme file:

<?php // display categories in two columns
$cats = explode('<br />', wp_list_categories('title_li=&echo=0&depth=1&style=none'));
$cat_n = count($cats) - 1;
for ($i = 0; $i < $cat_n; $i++):
	if ($i < $cat_n/2):
		$cat_left = $cat_left.'<li>'.$cats[$i].'</li>';
	elseif ($i >= $cat_n/2):
		$cat_right = $cat_right.'<li>'.$cats[$i].'</li>';
	endif;
endfor; ?>

<ul class="left">
	<?php echo $cat_left; ?>
</ul>
<ul class="right">
	<?php echo $cat_right; ?>
</ul>

Just use that code where you would like the categories to appear and enjoy the results.

Wrapping it up

Hopefully these techniques will inspire and enable you to break out of the “single-column” mindset and explore some multi-column possibilities. Using multiple columns for your content is a great way to enhance the visual appeal of your design and readability of your content.

There is SO much you can do with WordPress, PHP, (X)HTML, and CSS. The possibilities are endless indeed. The multiple-column techniques presented in this article provide a great starting point for creating more elaborate and sophisticated page layouts. So experiment, have fun, and be safe!!

© 2010 Digging into WordPress | Permalink | 30 comments | Add to del.icio.us | Post tags: CSS, loop, PHP, posts

I have a “blank” WordPress theme for myself, because I make a lot of WordPress themes. Starting from Kubrick, or any other pre-made theme, would be absurd. There is to much stuff there that would to be stripped out or fought against to be useful. So, I have my own. It’s been in a folder called BLANK-theme on my computer for a while, so I’m going to call it BLANK. And now I’m making it available for you. Read on to find out the scoop on it and you can decide if it would be of any use to you.

UPDATE: Please take a look at the WordPress Theme that is a part of the HTML5 Reset. It is based on this and far more up-to-date with modern standards. Ultimately I’ll be replacing the theme here with that.

What is BLANK?

It is a WordPress theme with all the functionality of a typical WordPress theme but almost none of the styling. The idea is that when starting a new theme, it is far easier to use this as a base then a theme that is already finished and styled.

What are some of it’s “features”?

• Things are as semantically marked up as can be for a starter theme.
• It’s XHTML 1.0 STRICT and validates. Maybe it will go HTML5 soon. We’re at that point where there isn’t a whole ton of advantages to going to HTML5 yet, but there aren’t many downsides either and it’s definitely the future.
• The sidebar is widget-ready.
• Page titles are optimized for best SEO and readability/usability.
• Functions.php file does a number of things: Sets up RSS <link>’s in the head automatically, loads jQuery, removes the weird header links like rsd_link, wlw manifest, and generator info that I’ve never once needed, and registers the sidebar widget area.
• Has some starter CSS ready to go, more about that below.

Uses includes for some key things, like under-title meta data and forward/back navigation, that are very common places for redundant code in themes.

About the CSS

As you can see from the screenshot above, the CSS is pretty barren, but not entirely! Here are some things the CSS is set up for:

• Uses a basic star-selector reset.
• Includes a .group selector for the new clearfix
• Has basic toolbox and WordPress-standard CSS classes, including .screen-reader-text for hiding things.
• Standard typography-related sectors are there but generally without any attributes.
• CSS for threaded comments is in there, but light on actual styling.
• Both screen and print styles included in single stylesheet. Print styles optimized for generic nice printing.

Demo and Download

If you want to take a peek at it live, you can view it in our Theme Playground. You can also download it from there, or directly right here.

© 2010 Digging into WordPress | Permalink | 58 comments | Add to del.icio.us | Post tags: CSS, free, Theme

As it turns out, there is a major problem with the art direction plugin. Using it with any caching plugin will result in a crazy epic meltdown of your site. Without too much gory detail, in trying to cache my blog CSS-Tricks, I tried all the major caching plugins (DB Cache, WP Super Cache, W3 Total Cache) and ultimately it would trash my WordPress database and serve up white pages. Very not good. The happy ending is that Frederick Townes from W3 Edge and creator of the W3 Total Cache plugin helped me out by patching the art direction plugin and getting CSS-Tricks cached with W3 Total Cache. I would love to release the updated code, but it’s not my code to release. We managed to get in touch with the original author, who said he planed to eventually update it but didn’t sound too particularly interested in the patch.

SO, with that extensive backstory, what is a poor fellow to do if they want to apply custom CSS to pages TODAY? Couple ideas, read on.

style-XXXX.css

One of my “WordPress Wishes” was that you could drop an appropriately named CSS file into a theme and it would recognize it and apply itself to the proper post. For example, /art-direction/style-XXXX.css, where XXXX is the ID of the post.

Reader Hassan commented with a cool idea for the functions.php file:

function artStyle() {
    global $post;
    if (is_single()) {
        $currentID = $post->ID;
        $serverfilepath = TEMPLATEPATH.'/art-direction/style-'.$currentID.'.css';
        $publicfilepath = get_bloginfo('template_url');
        $publicfilepath .= '/art-direction/style-'.$currentID.'.css';
        if (file_exists($serverfilepath)) {
            echo "<link rel='stylesheet' type='text/css' href='$publicfilepath' media='screen' />"."\n";
        }
    }
}
add_action('wp_head', 'artStyle');

I tested it out and it works great. To use it, simply create a new folder called “art-direction” in your theme. Then to style any particular Post or Page, just drop a file in that folder named style-XXXX.css where XXXX is the ID of the Post or Page. When that Post or Page loads, WordPress will look for a file of that name. If it exists, it will load in in the head section.

Custom Panel

Reader Kerrick Long commented another cool solution. Similar to the Art Direction plugin, this adds an input area below the main content writing area. For the functions.php file:

//Custom CSS Widget
add_action('admin_menu', 'custom_css_hooks');
add_action('save_post', 'save_custom_css');
add_action('wp_head','insert_custom_css');
function custom_css_hooks() {
	add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high');
	add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'page', 'normal', 'high');
}
function custom_css_input() {
	global $post;
	echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';
	echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>';
}
function save_custom_css($post_id) {
	if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;
	if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
	$custom_css = $_POST['custom_css'];
	update_post_meta($post_id, '_custom_css', $custom_css);
}
function insert_custom_css() {
	if (is_page() || is_single()) {
		if (have_posts()) : while (have_posts()) : the_post();
			echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_custom_css', true).'</style>';
		endwhile; endif;
		rewind_posts();
	}
}

Custom CSS Write Panel

As written, it’s more limiting than the Art Direction plugin as it is for CSS only rather than “anything” (e.g. JavaScript), although that would be a fairly trivial adjustment to what gets echoed out. The Art Direction plugin also allowed the CSS to be applied in other places the post might be output, for example, archives pages, whereas this does not. But to be honest, I never used that anyway.

And so…

Two pretty sweet and totally function solutions by Digging Into WordPress readers. Awesome. Huge thanks to Hassan and Kerrick! I would also love to see the Art Direction plugin updated as well, if nothing else, because I’m sure people download that plugin every single day from the plugin repository and have caching going on their blogs and end up in the same sore spot I was.

© 2010 Digging into WordPress | Permalink | 29 comments | Add to del.icio.us | Post tags: CSS, Design, functions, header

• page-parent
• search-results
• logged-in
• author
• paged

Plus just about everything else except for category ID information. It gives some good category-specific class names, but nothing to represent the category ID. For example, including the post_class function like this in your markup:

<div <?php post_class(); ?>>

Will output something like this in your HTML source code:

<div class="post-5 post hentry category-uncategorized tag-demo tag-site tag-test tag-themes tag-typography">

So if you happen to know the actual names of the categories then it’s not really needed, but for theme development, it’s useful to be able to generalize category distinctions and have them available as class names. Why? Because then the theme designer can apply category-specific styles very easily, and without having to mess with using actual category names.

For example, if we had the first category name for each post available to us as a class name, we could do something fun like this with our CSS:

div[class$="0"] selector { color: red; }
div[class$="1"] selector { color: blue; }
div[class$="2"] selector { color: green; }
div[class$="3"] selector { color: brown; }
div[class$="4"] selector { color: orange; }
div[class$="5"] selector { color: yellow; }
div[class$="6"] selector { color: purple; }
div[class$="7"] selector { color: white; }
div[class$="8"] selector { color: black; }
div[class$="9"] selector { color: gold; }

Generalized category-specific selectivity enables us to diversify and enhance our design without making any assumptions or requiring the theme user to fuss with overly complicated settings.

So to include each post’s first category ID in the post_class output, we first need the category IDs as an array, which we can get from this tag:

get_the_category();

Then we need to pluck out the first ID from the array:

$category[0]->cat_ID;

..and then make it a function and add to your theme’s functions.php file:

// get the first category id
function get_first_category_ID() {
	$category = get_the_category();
	return $category[0]->cat_ID;
}

Note the category IDs are sequenced numerically in the array, and that we can get at any position within the sequence by changing the “0” (which returns the first ID) to any number.

Now to include our first category ID within the output of the post_class, we can do something like this in our theme template files:

<div <?php post_class('cat-'.get_first_category_ID()); ?>>

This code will now include the category ID in the output like so:

<div class="post-5 post hentry category-uncategorized tag-demo tag-site tag-test tag-themes tag-typography cat-3">

Notice the additional “cat-3” class name? That’s going to correspond to the post’s first category ID, enabling you to define category-specific design properties without dealing with category names.

© 2010 Digging into WordPress | Permalink | 8 comments | Add to del.icio.us | Post tags: categories, CSS, Theme, tips, tricks

WordPress also employs various template tags that may, in certain situations, result in empty HTML elements such as paragraphs tags:

<p></p>
<p><!-- --></p>

Other cases where empty elements are generated by WordPress involve images, line breaks, nested lists and other complex markup scenarios.

Besides invalid markup, the problem with this is that your CSS may be applying styles to the empty elements, potentially breaking your layout or disrupting the presentational harmony of your design.

For specifically targeted elements, such as paragraph elements for navigational template tags, dealing with this issue is as simple as this:

#nav {
	display: none;
	}

Either that or you could get all “Google-homepage” and use nothing but style-neutral spans and divs to markup your content. Unfortunately neither of these solutions is effective at alleviating the occasional, unpredictable WordPress-generated empty paragraph elements.

Fortunately, the new :empty pseudo-selector of CSS 3 is the perfect solution for neutralizing all empty HTML elements. Here are some examples..

To neutralize all empty paragraphs (and only empty paragraphs), throw down the following slice of CSS goodness:

p:empty {
	display: none;
	}

Or, to cover your bases and hide all empty elements, add this bad boy to your stylesheet and enjoy complete satisfaction:

*:empty {
	display: none;
	}

In my opinion, this declaration should be included in all CSS reset stylesheets, but I will leave that decision up to you.

But..

Note that, for now, this technique only works in supportive browsers, which seems to be anything based on Mozilla. Unfortunately, Safari applies the rule to all elements of the specified element type. Hopefully this will be addressed in an upcoming version. And of course, Internet Explorer has absolutely no idea what we’re talking about here.

© 2009 Digging into WordPress | Permalink | 13 comments | Add to del.icio.us | Post tags: CSS, tips, tricks

Strengths and shortcomings of the body_class() tag

For the uninitiated, here is a quick review of the body_class() tag. When used as follows:

<body <?php body_class(); ?>>

The body_class() tag will output the following class names depending on current page type:

• .home — class name output for the home page
• .archive — class name output for any archive page
• .category — class name output for any category page
• .search — class name output for any search page
• .tag — class name output for any tag archive page
• Plus many more..

So, for example, when you are logged in to WordPress and viewing your blog’s home page, the body_class() tag will result in something like this:

<body class="home blog logged-in">

Or, if you were logged out and visiting your “Asides” category archive, your source code would include this:

<body class="archive category category-asides">

This functionality enables you to, say, apply styles to the <h1> heading elements on all of your search pages:

body.search h1 {
	border-bottom: 1px solid #ffff99;
	color: #ffff99;
	}

Likewise, the class names output by the body_class() tag make it possible to target conditionally any element on any type of page, thereby greatly increasing the stylistic flexibility of WordPress. Yet despite its awesomeness, body_class() is essentially an “all-or-nothing” proposition. We can apply styles to all category pages, all search pages, all page pages, and so on. We can even use CSS chaining to target all category views when the user is logged in:

.home.logged-in { border: 100px solid red; }

This is powerful, yes, but what if we want to target, say, all categories that include the term “services” in the category slug? Sure, we could declare each of them individually, like this:

.category-coffee-service { color: red; }
.category-brunch-services { color: red; }
.category-dinner-services { color: red; }
.category-snacks-services { color: red; }
.category-drinks-services { color: red; }
.category-inside-services { color: red; }
.category-design-services { color: red; }
.category-health-services { color: red; }
.category-services-info { color: red; }
.category-services-data { color: red; }
.category-services-cost { color: red; }

But that’s pretty inefficient. Plus, what if the user/client needed to create new “services-related” categories? Have fun explaining to them how edit the CSS file with the appropriate rules.

We could, I suppose, use CSS-3’s wildcard substring-matching attribute-selector:

body[class*="services"] { color: red; }

Definitely cleaner, but there a significant number of browsers that do not support CSS 3, so this is less than an ideal solution.

A better solution would be to add pattern-matching functionality to the body_class() tag. After all, body_class() keeps track of just about every possible type of page-view available on your site. So why not filter the output of body_class() for any instances of “services” and output a specific class-attribute for all matching pages. This would allow us to target and apply styles to virtually any subset of page-views, including those new “services-related” categories for our client site. Say “goodbye” to manual code updating and say “hello” to automated advanced targeting with body_class_plus().

Advanced targeting with body_class_plus()

The body_class_plus() tag extends the functionality of body_class() by using PHP’s output buffering to conditionally evaluate its contents. This functionality enables us to pattern-match for specific phrases, and execute conditional operations based on the contents of body_class().

Here is the body_class_plus() function that may be placed in your functions.php file:

Update: There is a new & improved version of this code available via plugin!

<?php // http://digwp.com/2009/08/wordpress-body-class-plus/
function body_class_plus() { 
	if(function_exists('body_class')) { 
		ob_start(); body_class(); 
		$class = ob_get_contents(); 
		ob_end_clean(); 
		if($class) {
			if(preg_match("/services/i", $class)) { 
				echo 'class="services"';
			} elseif(preg_match("/products/i", $class)) {
				echo 'class="products"';
			} elseif(preg_match("/business/i", $class)) {
				echo 'class="business"';
			} elseif(preg_match("/pleasure/i", $class)) {
				echo 'class="pleasure"';
			} else {
				echo 'class="no-body-class-matches"';
			}
		} else { 
			echo 'class="body-class-not-available"'; 
		} 
	}
} ?>

To call this function in your theme template, include the following tag in the element of your choice (e.g., within the <body> element):

<?php if(function_exists('body_class_plus')) { body_class_plus(); } ?>

This is a exemplified version of the body_class_plus() function that enables us to target and apply specific class attributes to any page or category containing the following terms in the URL/page-slug:

• “services” — will apply class="services"
• “products” — will apply class="products"
• “business” — will apply class="business"
• “pleasure” — will apply class="pleasure"

This makes it easy to match specific groups of categories, pages, posts, or any combination thereof. Even better, the body_class_plus() function makes it possible to do more than apply classes to targeted page types. In addition to, or instead of, applying classes to specific groups of pages, you can implement any type of functionality desired. For example, you could display template tags, echo content, or execute custom scripts depending on page type. The possibilities are endless.

Download the plugin

If custom functions aren’t your thang, and you would rather implement this functionality via plugin, you can grab it here:

• body-class-plus_v02.zip (latest version)
• body-class-plus_v01.zip (original release)

Thanks to Peter Kahoun for contributing his expertise and improving the functionality of this plugin.

Take-home message

The take-home message is that the body_class_plus() function extends the functionality of the body_class() tag to target and apply styles to any particular subset or combination of page types. Further, the body_class_plus() function takes body_class() beyond the realm of CSS, making it possible to apply template tags, PHP, and other scripts to virtually any custom-defined set of pages and page types.

Complete list of body_class() attribute values

Here is a complete list of the available classes for the body_class() tag:

• rtl
• home
• blog
• archive
• date
• search
• paged
• attachment
• error404
• single postid-(id)
• attachmentid-(id)
• attachment-(mime-type)
• author
• author-(user_nicename)
• category
• category-(slug)
• tag
• tag-(slug)
• page-parent
• page-child parent-pageid-(id)
• page-template page-template-(template file name)
• search-results
• search-no-results
• logged-in
• paged-(page number)
• single-paged-(page number)
• page-paged-(page number)
• category-paged-(page number)
• tag-paged-(page number)
• date-paged-(page number)
• author-paged-(page number)
• search-paged-(page number)

For more ways to dynamically set body IDs, check out my article, 9 Ways to Set Dynamic Body IDs via PHP and WordPress.

© 2009 Digging into WordPress | Permalink | 16 comments | Add to del.icio.us | Post tags: body, CSS, functions, PHP, plugin, tags

About the ‘H5’ WordPress Theme Template

The H5 Theme Template provides everything you need to create beautiful themes with HTML 5 right now. H5 contains a complete set of theme files and folders, and each file has been meticulously crafted with all of the latest and greatest WordPress functionality. As a template theme, H5 is designed with easy customization and personalization in mind, serving as a solid starting point for your next HTML-5-based theme.

Unlike other frameworks, H5 works great as a basic theme right out of the box. Of course, this is a template theme we’re talking about here, so you will inevitably feel “inspired” to begin tweaking and styling its minimalistic appearance to get the design looking exactly how you want it. And that is entirely the point: H5 makes it quick and easy to begin designing themes with HTML 5. And best of all, H5 is completely free. Sound good? Great, let’s dig into the specifics..

‘H5’ Specifications

First, thanks for your interest in the H5 Theme Template. I am very excited to be sharing this theme with the WordPress community and hope that you will put it to good use. Next, three important points that I would like to emphasize:

• H5 is completely free and licensed under GPL
• H5 is a template used to build HTML-5 themes
• H5 is built entirely with WordPress, HTML 5, and CSS 2.1

About the markup

• Uses as few tags and attributes as possible
• Contains no <div>s, <span>s, classes, or ids!
• Built with semantically sound and fully valid HTML 5
• Outputs clean, well-formatted source-code (although WordPress botches most of it)

About the CSS

• Just enough CSS to target key elements, provide some structure, and make it “look” like a basic theme
• Built with well-formatted and fully valid CSS 2.1 (current spec)
• Uses child, adjacent, and attribute selectors to target elements without ids or classes

About the JavaScript

• Uses only unobtrusive JavaScript
• Uses createElement() to specify block elements for Internet Explorer
• Includes WordPress’ jQuery script the right way

About the design

• Includes minimal markup and styles for easy customization
• Features a full set of theme template files and common folders
• Very minimal, meant to do just the basics and serve as a starting point
• Uses default and/or standard WordPress template tags, loops, and other functions
• Looks and works great out of the box in (almost) all modern browsers (see next section)
• Designed to be as lightweight and fast as possible — only essential tags are included

Browser compatibility

H5 looks and works great in the following browsers (and most likely others as well):

• Firefox 3
• Opera 8*
• Opera 9
• Chrome 1 & 2
• Safari 2, 3, & 4
• Internet Explorer 7*
• Internet Explorer 8

* Denotes slight inconsistencies in these browsers.

For Firefox 2, Camino 1.6, and IE 6, the HTML seems to work great, it’s just some of the “advanced” CSS selectors that some browsers don’t understand. This is easily handled by simply adding a few choice id or class attributes to key elements (none are used by default).

Download and Demo

For a “live” demo of the H5 Template Theme, check out our newly revamped DiW Theme Playground, where we will be hosting any themes that we release here at Digging into WordPress.

At the DiW Theme Playground you will find a dropdown menu at the top of the browser window that enables you to preview any of our themes, as well as a download link for whichever theme happens to be active (Chris’ excellent WP Typo is the default active theme).

© 2009 Digging into WordPress | Permalink | 40 comments | Add to del.icio.us | Post tags: CSS, free, HTML, template

h3 { color: blue; }
body#about h3 { color: red; }

But how do you get that ID on the About page, but not on any other page? If you have your permalinks set up to show the page name, like http://yoursite.com/about/, you can use PHP to extract the “about” part of that URL.

Here is the magic:

<?php
	$url = explode('/',$_SERVER['REQUEST_URI']);
	$dir = $url[1] ? $url[1] : 'home';
?>

<body id="<?php echo $dir ?>">

© 2009 Digging into WordPress | Permalink | 5 comments | Add to del.icio.us | Post tags: body, CSS, header, permalink