In part 1, I covered the code necessary to provide my home page functionality. In this segment, I’ll cover how I created the functionality for the single.php page and the category pages. The code for the single.php page closely mirrors the code for the index.php page with the addition of the comment code. Again, the process for creating these pages closely followed that of the index page–I created a prototype sketch, I fleshed it out in Photoshop and then I opened my text editor and started coding.

First, I wanted the single page to have roughly the same appearance as the index.php minus the additional posts below the “featured” post. I wanted the image to carry over into the post and I wanted the text to be the main emphasis on the page because that’s what a blog is all about in my opinion. I’ve seen lots of designs I like that had asides to the left or right of the post but in this incarnation, I wanted the reader to focus solely on the text of the post when clicking through.

1. Single.php Code

1
2
3
4
5
6
7
8
9
10

<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
// THIS IS WHERE MY META AND OTHER POST CONTENT GOES
<?php endwhile; else: ?>
// THIS IS WHERE I PUT SOME SORT OF MESSAGE TELLING THE READER THEY'VE NOT FOUND WHAT THEY'RE LOOKING FOR
<?php endif; ?>
// SOME MORE OF MY OWN CSS LAYOUT CODE
<?php comments_template(); ?>
// I CLOSE UP ALL MY OPEN DIV'S
<?php get_footer(); ?>

As you can see, there are no custom loops or queries. The only “custom” code on this page is my CSS and the code I need to bring in the image from the custom field, which was covered in part 1. The real “exciting” stuff, actually takes place within the category pages so I’ll go over that in more detail next.

2. Category Pages and the Template Hierarchy

When visiting the WordPress Codex, I’ve often see the phrase “Template Hierarchy” but until this design, I’d never really read about it. What I learned was that if I wanted a different look or custom loops, I could use the hierarchy. The Template Hierarchy works like this; let’s say I have 5 categories and I want them each to have their own page. I can achieve this by creating a category page for each separate category and WordPress will look for a specific page for the category if I name the file the following way: category-5.php. The number in the file name is the actual number of the category so when a visitor clicks on, for example, Design and Design is category 5 in the database, WordPress will serve that page using category-5.php instead of just category.php or archives.php. It’s a simple way to create unique pages per category without the hassle of really having to creating template files.

3. Custom Loop for Category Pages

The first thing you’ll see on each category page is the heading for that page. For example, in the business category, you’ll see “Business Articles.” That is handled dynamically by using the following code:

<h2><?php single_cat_title(); ?> Articles</h2>

The PHP tells the database to spit out the category name or title.

The next thing you’ll see is the posts with excerpts. This is handled using a custom WordPress Query.

1
2
3
4
5
6
7

<?php
$temp = $wp_query;
$wp_query= null;
$wp_query = new WP_Query();
$wp_query->query('showposts=16&cat=3,9'.'&paged='.$paged);
?>
<?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>

A very important part of this custom query is telling WordPress that this page will be…paged; meaning there is more than one page. In order to use a custom query, you must use that bit of PHP code or else your paging, whether you use a plugin or the built-in navigation of older or newer entries, won’t work.

The next important part of this query is indicating how many posts per page should be displayed and what categories to display. Since I have sub-categories set-up under the main categories, I want to make sure those show up as well.

Styling My Category Pages

An important part of the next piece of custom code was styling the most recent post differently (do you notice a trend?). I wanted that post to stand out from all the others for two reasons. It gives the reader a point of reference as to what’s important on the page and it helps break up the design a little.

I decided when planning my redesign that I didn’t want the typical archives. I wanted to display past articles in a different way starting with making the most recent article be prominent on the category page. I did this with a simple bit of code that I discovered through the WordPress forums with the help of pshero. He too was looking for a way to style the most recent post differently than the rest and came up with the PHP code that would do the trick. Here is what I used to make the most recent post stand out on the category page.

8
9
10
11
12

<?php if (is_paged()) : ?>
<?php $postclass = ('archivelist'); ?>
<?php else : ?>
<?php $postclass = ($post == $posts[0]) ? 'archivelist-featured' : 'archivelist'; ?>
<?php endif; ?>

Then the above is applied to your div class the following way:

13

<div class="<?php echo $postclass; ?>">

Basically, what this piece of code does is create a way to assign two classes to the posts on the page dynamically. If it’s the most recent post, then it is assigend “archivelist-featured” and any subsequent post is then tagged with “archivelist.” If you click on the link above, it will take you to the thread and explain in more detail different usage.

4. Crossing the Finish Line

After I make things pretty, we need to add some of the basic WordPress code to show the date, post title and the excerpt.

14
15
16
17
18

<h3 class="meta"><?php the_date('m-d-y'); ?> &#8249;&#8250; <?php the_category(', ') ?></h3>
  <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
  <?php the_excerpt(''); ?>   
   </div><!-- // END ARCHIVE LIST -->    
   <?php endwhile; ?>

We’re getting there. The last thing you may notice on the page, other than the footer, is the paged navigation. In order for that to work properly, you have to code it the following way:

19
20
21
22

<div class="navigation">
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>  
</div><!-- // END NAVIGATION -->
<?php $wp_query = null; $wp_query = $temp;?>

You’ll notice that we close the custom WordPress query after we call for the paged navigation. If you don’t do that, you’ll have your pagination showing up on every page, most likely not showing a correct page count.

The End is Nigh

In this post I covered using PHP to dynamically pass CSS classes to differentiate posts, I covered template hierarchy and its purpose and I covered paging and custom queries. I hope this is useful to folks and expanding on your WordPress coding foundation.

In part three, a much shorter article by far, I’ll cover what plug-in’s I’m using and why and the benefits of automated content.

6 hi-res wood textures | highresolutiontextures.com - 6 high quality images of various sorts of wood or bark.

Lost and Taken - Lost and Taken - A Little Dirty: 8 Subtle Grunge Textures - A Little Dirty: 8 Subtle Grunge Textures

Photoshop Light brushes | Qbrushes - Photoshop Brushes - Blurry light Brushes (Bokeh), 3 shapes (circle, hexagon, octagon), 9 brushes total.

Photoshop Skyline Brushes | Qbrushes - Photoshop Brushes - A set of 9 wonderful city skyline brushes for Photoshop 7 and up. Sizes range from 1000px to 1300px.

Grungy Brushes from QBrushes - Valley of the Dry Bones is a set of grunge brushes by seudavi with an average size of 1500px/

When I thought about the redesign of my blog, I wanted something that had a magazine feel to it but not the full functionality of a magazine theme. I didn’t need to display sections for different categories because I still wanted to run a blog and not a magazine–though in the future I could see myself actually adding that sort of functionality and turn my blog into a magazine.

I looked at all the available magazine layout themes, both paid and free, to get a feel for what it is that I like about them. The recurring theme that I liked about magazine layouts is the grid system. So I put pencil to paper and began sketching box after box attempting to get a simple grid layout that would satisfy my desire to have a magazine-esque layout. After a prototype or ten I had my creative juices flowing pretty well. I fired up Photoshop and played with color and layout until I came close to the design you see now. Just a side note, when it comes to my own sites, I often deviate from my Photoshop concepts after I start coding. For example, in my design concept, my footer was part of the five regular posts (limiting my posts to 4 on the front page). After playing about a bit with widths and other CSS styles, I decided to actually create a footer and use that space for additional posts.

After getting a close approximation of what I wanted it to look like, I started to think about how it would function. I wasn’t wild about the idea of having to create a “featured” category just to have a featured post. If I had a featured category, did I want to link to it and if I didn’t, what was the point of having a featured category to begin with. After deciding that a featured category was not an option, I looked for plugin’s but I didn’t want to use theme to achieve that option either. I decided not to allow my limited PHP knowledge hold me back from what I knew WordPress can do.

I set about researching my options and custom loops, finally figuring out a way to mix CSS and PHP to get what I wanted on the front page. I know there are probably ways that accomplish this with less code or more complex functions but I’m working within my abilities of PHP coding and learning as I go.

Without further ado, here’s how I accomplished my front page layout.

1. Featured Post Custom Loop Code

1
2
3
4
5
6
7
8

<?php get_header(); ?>
<?php
	$featured = new WP_Query();
	$featured->query('posts_per_page=1');
	while($featured->have_posts()) : $featured->the_post();
?>
// THIS IS WHERE MY META AND OTHER POST CONTENT GOES
<?php endwhile; ?>

The third line of code starts the loop. It tells WordPress that there’s a new database query about to happen. The fourth line of code tells the database to give us one post and the most recent one at that. The fifth line tells the database that the loop begins now if there is a post. The area of greatest interest for my needs is posts_per_page. Since my newest post was going to be “featured” I only wanted to show one and stop. Once I had that working, I went on the implement the second custom loop to display the additional posts on the front page.

2. Regular Posts Custom Loop Code

9
10
11
12
13
14
15

<?php
	$asides = new WP_Query();
	$asides->query('posts_per_page=5&offset=1');
	while($asides->have_posts()) : $asides->the_post();
?>
// THIS IS WHERE I PUT MY CODE FOR THE ADDITIONAL POST TITLES AND EXCERPTS
<?php endwhile; ?>

On line #11 I have similar code as the original query but I go a bit further in telling the database what I’m looking for. I want to display 5 posts now but I don’t want to show the “featured” or first post, so I tell the database to retrieve 5 posts but to ignore the first or newest one, which is what offset=1 does. If I were displaying 3 featured posts, I would set the offset at offset=3.

Another bit of custom coding I did was to use custom fields to display an image in my featured post. The nice part of this code, is that if I don’t want to attach an image to the post, I don’t end up getting any errors because of a missing image. First, I went into the Add New Post screen and created a custom field called featuredImage. Then I put the following code in my index.php and category.php templates.

3. Custom Fields for Featured Images

1
2
3
4
5
6
7
8

<?php
$values = get_post_custom_values("featuredImage");
	if (isset($values[0])) {
?>
<div class="featured-img">
<img src="<?php $values = get_post_custom_values("featuredImage"); echo $values[0]; ?>" alt="<?php the_title(); ?> Image" />
</div>
<?php } ?>

The second line of code is the variable that the third line of code works with to see if there is a value to display. If the value isn’t null, then my div class gets printed. If the value is null, then nothing gets printed at all, i.e., if you look at the source code, there is no image because I didn’t specify one in my post.

Wrapping Up Part 1

If you’re reading this article, you know the power of WordPress and are probably trying to harness that power to customize your site. What I’ve posted is how I handled having a “featured” post and not having to have a “featured” category in order to have a different style for my first post. I hope this post helps some folks because I wasn’t able to find a tutorial (or code) that showed how to accomplish this.

In the next part of this three part series, I’ll talk about how I accomplished the layout of my category pages–and in my case my archives as well, since they serve the same purpose. After coding my index.php page, I discovered another way that is much cleaner code to achieve having the first post having a different look than the rest. I used that method on the category pages so stay tuned to part two to learn how to use a custom loop and PHP to call specific CSS for your first post.

Function Web Design & Development [ Blog ] » How to Spot Quality within Web Design: Examples & Tips - Tips from the folks at Function Web Design & Development on what constitutes quality web design. I don't agree with everything written but there are some things that they bring up that make a whole lot of sense. Especially the whole "attention to details" part. It's the minutiae in design that takes it to the next level.

Versions - Mac Subversion Client (SVN) - Versions, as the title says is a Mac Subversion client. However, that's not why I bookmarked this site. The simplicity of the design astounds me yet it's so well done and has quite an impact. You're to notice their brand, and boy, do you.

Of course, it's also a useful piece of software for those of us Mac users who want to use version control.

For whatever reason, the div (which is actually an h1 tag, didn’t want to center in IE7 and when I finally got it to center, then it wouldn’t go the whole way across the screen. It stopped at the edges of the #wrapper container… which is odd because the branding graphic isn’t even inside the #wrapper container. I’m sure I’m missing something simple but I’m too tired to find it right now.

I plan on writing about my experience with the coding of the site and what I had to do as far as custom loops and such to “bend” WordPress to my will. Of course, I was pretty sure a few times WordPress was bending me to its will.

If you come across anything out of place in IE7 or 8, please let me know. I don’t have access to anything but IE7 and though I tried some of the free browser services online they can only help so much. Funny enough, after I decided that I wasn’t going to support IE 6, I had to create a special stylesheet just for IE7 because the navigation was 1 pixel off in Explorer. Gotta love it.

The Redesign

In the redesign I am trying something new for me that will, hopefully, help with some IE6 issues off the bat. First, I’m employing a modified version of Eric Meyer’s reset.css–I’m going to zero everything out and start from scratch. Second, I’m going to use the strict XHTML doc type opposed to transitional–IE6 is quirky enough without putting it in quirks mode. Third, I’m going to attempt to make the layout as semantic as possible–my goal is to use less div’s. Finally, I’m wading into the position:relative and position:absolute waters. I’m using some shadow effects for my design and instead of using a lot of drop-shadowed graphics, I figure if I layer things, I need two graphics instead of ten (not a real number, just tossing it out there). Another thing I’m going to attempt to do is change the way I name things. I read a great article written by Andy Clarke called “More on developing naming conventions, Microformats and HTML5” and am going to attempt to use his model for my mark-up.

The redesign will be a learning process for me and that is a good thing in my mind. I’d say I have a fair handle on CSS, except for the matters I stated above, and it’s about time I master those as well. It’s been an interesting proposition thus far and I’m enjoying and frustrated by it in equal parts. Hopefully, things will work fairly well in IE6 (except for the PNG graphics that allow the transparency I’ll need) without creating a separate stylesheet or hacking my way to get an eight year old browser to behave as current browsers do.

Just place the following code where you would normally place your custom field code:

1
2
3
4
5
6
7
8

<? php
$values = get_post_custom_values("Your-Custom-Field-Value");
if (isset($values[0])) {
?>
 
<img src="<?php bloginfo('site_url'); ?>/wp-content/uploads/>?php $values = get_post_custom_values("Your-Custom-Field-Value"); echo $values[0]; ?>" alt="<?php the_title(); ?>" />
 
<? php } ?>

If you write a post that doesn’t have an image, you won’t get any of those pesky errors. Thanks goes to authors on the WordPress forums for their efforts in helping folks who aren’t as well-versed in PHP coding as we’d like to be.

Then I came across this very old post and it seems to have solved my woes and the gray boxes are now a thing of the past (finger’s crossed). Here’s the technique:

In your WordPress theme folder–wp-content/themes/–upload the following two files (from the link above)–blank.gif and pngbehavior.htc

Then add the following code to your stylesheet:

/* Fix for PNG alpha channel display in IE6 */
img {
 behavior: url("/wp-content/themes/pngbehavior.htc");
}

How I’ve decided to solve one of the issues is to use this bit of code I spied in Nike’s CSS code.

1. body { background:#fff url(images/your-image-name.jpg) fixed no-repeat;

It’s the fixed part that makes this beautiful and so very smart. The content will scroll but the background stays in place. I love it when a solution to a problem falls into my lap like this. Now I can get rid of the sliding panel JavaScript that I was going to use and just have sections that are linked via an anchor.

Captify adds semi-transparent captions that appear on top of images when the user’s mouse rolls over them. It offers a simple way to add captions to images in a manner that doesn’t add clutter to a design. Tested in IE, Firefox, Safari, and Chrome.

You can view examples of how this works here.