The great thing about WordPress is that it doesn't limit how content is displayed, but provides a 'framework' of ways to do so. Even better, it's possible to change the display according to the content. When writing this tutorial it was hard to explain what's going on... But the best way is this: the post will be displayed within the loop according to its content - or contextual differences. Either way, it's including specific files that match up to the category of the post.

Preface

This tutorial assumes that you have a WordPress engine running on a server that you have access to upload files, download files and browse to. If you want to run a local server on your computer with a wordpress installation, there is a tutorial on that here for Windows, and here for OS X.

Let me describe a little further in depth what we'll be doing. Many WordPress sites are more than just a blog these days. For those that integrate a Blog, a News System, and a Portfolio, there are many ways to distinguish between each of these posts. For a start, the amount of meta information WordPress attaches to each post is monumental. Dates, Categories, Custom Fields, Options, Tags, amount of tags, etc. It goes on. By picking on one of these, you can manipulate WordPress to display certain things even when the context changes (I.e. different category name, different tag, etc). The method I'm about to teach figures out when a certain category is attached to a certain post, and then bring in a different file accordingly. Contextually! If the context is of a blog, display it like a blog post! If the context is of a portfolio item, display it like a portfolio item! So on, so forth. You get it. Let's go!

Step 1 - Basic Theme Necessities

I've prepared a couple of files; style.css, index.php and some images (thanks TUTs sites!). We'll be building off these to create our final product. Download them, and place the folder in the wp-content/themes folder. Now go to the WordPress Dashboard, click 'design' or 'presentation' if you're still living in the stone age, and select the 'Context Files' theme. Great! Now it's activated we can dive into editing the files and getting on with the tutorial.

Step 2 - the WordPress Posts

For the method to work, a group of posts need to have a certain category. For this, I gave a few of them the category 'Blog', some 'theirNews', and left the rest to be the portfolio group, without any specific category. Make sure to do this, or your results wont be too varied. So make sure your posts (for this tutorial at least) are grouped in some way. It's vital!

Step 3 - WordPress Code

The functional way to describe what happens, is depending on the category, a specific file is included for the loop's code. The heirarchy looks like this:

A Blog post will end up looking like this:

A News item will display like this:

And all other posts, or portfolio items will resemble this:

Notice the little watermarks in the top right of each post? That's proof our system will work!

Anyway. Between the body tags, we need a header and a loop. Add this:

<div id="header">
    <h1><a href="<?php bloginfo('url'); ?>" title="Home"><?php bloginfo('name'); ?></a></h1>
    <p class="description"><?php bloginfo('description'); ?></p>
</div>
<div id="content">
    <?php if(have_posts()) : while(have_posts()) : the_post();
    	
    	//Getting the category and checking it against certain
    	//values to include the correct file goes here...
    	
    endwhile;
    endif; ?>
</div>

Next up, we need to get the category for each post. This uses some Custom WordPress/PHP syntax. Usually you could use get_the_category for the value, but you can get ANY category information via this method (goes under or replaces the comment in PHP):

foreach((get_the_category()) as $category){
    $categoryName = $category->cat_name.'';
}

Now with that, we need to check this value against a value. If you named your categories 'Blog' or 'theirNews', we can now check the $categoryName variable against exactly those names/values. Remember this is in the loop, so this check is made for each individual post.

if($categoryName == 'Blog'){ include(TEMPLATEPATH.'/blogTemplate.php'); }
elseif($categoryName == 'theirNews'){ include(TEMPLATEPATH.'/newsTemplate.php'); }
else(include(TEMPLATEPATH.'/portfolioTemplate.php'));

Each line of the 3 above is relatively the same. The PHP '==' means 'is equal to'. It's two ='s because when using only one = defines a variable. Not what we want. If, elseif, and else are a few conditional PHP tags. You can use multiple elseif statements if you wish to have more than three files!

With the PHP done, we can now create the actual files that are included above. What's interesting about this template is that you can keep the entire loop, category, and includes all within one set of PHP tags. Efficiency!

blogTemplate.php

These files are basically what goes in the loop, consisting of loop template tags. So we can assign each category with the top right watermark, a different class is applied to each different category file. Otherwise, this is all basic WordPress stuff. Create a new file called 'blogTemplate.php' in the theme folder, and fill it up with some PHP goodness!

<div class="post blog">
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<p class="postInfo">Posted by <?php the_author(); ?> | Filed under <?php the_category(' & '); ?></p>
<?php the_content(''); ?>
<p class="postMetaData">
	<a href="<?php the_permalink(); ?>">Read More</a> |
	<?php comments_popup_link('Comments(0)','Comments(1)','Comments(%)'); ?> | 
	<?php the_time('F d, Y'); ?>
</p>
</div>

Just one thing to note. I know it's very bad practice for SEO reasons, but the_content('') has the 2 's so that no 'read more' is displayed. The 'Read More' link in the postMetaData makes up for this!

newsTemplate.php

This is pretty minimalistic. The header is smaller too!

<div class="post news">
<h3><?php the_title(); ?></h3>
<?php the_content(''); ?>
<p class="postMetaData"><a href="#">Visit Source</a> | <?php the_time('F d, Y'); ?></p>
</div>

portFolio.php

Finally, the last sub template file.

<div class="post portfolio">
<img src="<?php bloginfo('template_directory'); ?>/images/portfolio.png" alt="" />
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<?php the_content(''); ?>
<p class="postMetaData"><a href="<?php the_permalink(); ?>">View Project</a></p>
</div>

And that's all the PHP/HTML you'll be needing! If you load your WordPress page, it'll now resemble something like below:

Note you can already see the differences in each post!

Step 4 - CSS

Now to make it pretty! We'll start off with some defaulting code. This is to set it to a base look, get rid of stuff we don't want and style general tags (i.e. headers, etc).

a{
	text-decoration: none;
	color: #b93a00;
}

*{
	margin: 0;
	padding: 0;
}

body{
	background: #000;
	color: #5b5b5b;
	font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
	font-size: 75%;
}

h1, h2, h3, h1 a, h2 a, h3 a{
	font-family:"Trebuchet MS", Arial, Helvetica;
	color: #fff;
	letter-spacing: -2px;
	text-decoration: none;
}

h1 a:hover, h2 a:hover, h3 a:hover{
	color: #8b8b8b;
}

h2{
	font-size: 35px;
	margin-bottom: 10px;
}

h3{
	font-size: 20px;
	color: #a8a8a8;
	letter-spacing: -1px;
	padding-bottom: 20px;
}

Now we need some structure to our page.

#wrapper{
	margin: 0 auto;
	width: 500px;
	font-size: 11px;
}

#header{
	height: 150px;
	font-family: Georgia, 'Times New Roman', Times, serif;
	border-bottom: 1px solid;
	border-color: #222;
}

#content{
	padding-top: 20px;
}

.post{
	margin-bottom: 40px;
	min-height: 150px;
}

Next we'll add the little blackground watermarks in:

.blog{
	background: url(images/blogbg.png) no-repeat top right;
}

.portfolio{
	background: url(images/portfoliobg.png) no-repeat top right;
	min-height: 150px;
}

.news{
	background: url(images/newsbg.png) no-repeat top right;
	padding-right: 100px;
}

Our theme is taking shape! All that's left is some image styling and the styling of the postMetaData!

#header h1{
	font-size: 50px;
	padding-top: 30px;
}

#header p.description{
	font-style: italic;
	font-size: 16px;
}

.post img{
	float: left;
	padding-right: 10px;
	padding-bottom: 20px;
	
}

.post p{
	padding-bottom: 15px;
}

.postInfo{
	padding: 10px;
}

.postMetaData{
	padding: 10px;
	background: #141414;
	margin: 10px 0;
	width: 480px;
	display: block;
	clear: both;
}

.postMetaData a{
	color: #06f;
}

The last section of code needed, your theme should now look complete! This tutorial teaches you a couple of things. A versitile way to get category info, how to use this in conjunction with conditional tags, and grouping PHP!

You Also Might Like...

Adding to Our Leopard Desktop with jQuery

in Javascript / AJAX by Harley

Last Week I got you all to create a neat looking Dashboard/Desktop. You guys are gonna totally FLIP when you hear what’s in this jam packed tutorial! More focus on the Dashboard (I swear it’s cooler than it sounds, and requires a lot of code), and I’ll even go into how to create a stack (seperate from the dock, sorry jqDock doesn’t like nestled <ul>s), and some extra little bits to make it all click.

Continue Reading

Leopard Desktop with jQuery using jqDock

in Javascript / AJAX by Harley

jQuery adds a whole lot of cool functionality to your websites. It can do a range of things, from animation to AJAX. It’s usually frowned upon to rely heavily on jQuery to design your sites, but it’s fun to go wild every now and then. In this tutorial I’ll teach you how to use jQuery to create a completely coded Dashboard, just like Leopard! This can be handy in hiding a whole lot of gadgets or widgets you don’t have space for!

Continue Reading

5 Time Saving CSSEdit Tips

in HTML / CSS by Harley

CSSEdit is another fantastic web dev app, which takes Apple’s WebKit by the reigns to deliver a fantastic real-time visual CSS editing experience. But that’s just it! People only know it as a visual CSS editor, when it is actually much more! I use these 5 fantastic tips to keep my work flow fast and smooth.

Continue Reading