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.
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!
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.
Build a Newspaper Theme With WP_Query and the 960 CSS Framework
in Working with CMS's by Harley
WP_Query is a powerful tool to control what comes out of your loop. Today I’m going to teach you all how to use it to make a 3 columned newspaper theme that has all your main blog posts in the main column, and off to the side a set of posts with a certain category. We’ll be using the 960 CSS framework for the basic layout and reset of our theme, it will chop a lot of work off what’s needed!
- Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post
