Advertisement
WordPress

Context Includes

by

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!

Final

You Also Might Like...

Leopard With jQuery


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

jQuery Dashboard


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


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

The Power of WordPress


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!

Continue Reading

  • Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.


Related Posts
  • Code
    Creative Coding
    Using a Custom Post Type to Create a Home Page BannerUsing a custom post type to create a home page banner
    Sometimes it's useful to have a nice obvious banner on your site's home page—for announcements, snippets that aren't long enough to merit a blog post, or links to new content within the site. But you don't want to be editing your homepage content every time you add a new piece of content, nor do you want to be delving into the code to add content.Read More…
  • Code
    Theme Development
    Custom Controls in the Theme CustomizerTheme customizer custom control 400
    In the last article, we explored the advanced controls available in the Theme Customizer, and how to implement them. We’re going to look at how to create our own custom control, allowing you to choose which Category of Posts are displayed on the home page. To get started, download version 0.6.0 of our Theme Customizer Example.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML: Creating an Archive TemplateCreating wordpress theme from html 400
    If you've been working your way through this series, you now have a functioning theme with two page templates. The steps I've demonstrated to this point are: preparing your markup for WordPress converting your HTML to PHP and splitting your file into template files editing the stylesheet and uploading your theme to WordPress adding a loop to your index file adding meta tags, the wp_head hook and the site title and description to your header file adding a navigation menu adding widget areas to the header and sidebar adding widget areas, a colophon and the wp_footer hook to the footer file creating template files for static pages. Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Adding a LoopCreating wordpress theme from html 400
    In the first three parts of this series, you learned how to prepare static HTML for WordPress and to create a theme by splitting your HTML file into a set of template files and editing the stylesheet. You then uploaded your theme to WordPress and activated it. The theme still isn't displaying any content you add via the WordPress admin however; to do that you need to add a loop to your template files.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Creating Template FilesCreating wordpress theme from html 400
    In the first part of this series, I showed you how to prepare your HTML and CSS files for WordPress, ensuring the structure would work, the code was valid and that the correct classes were being used. In this tutorial you'll learn how to take your index.html file and split it up into a set of template files for use by WordPress.Read More…
  • Web Design
    HTML/CSS
    The Truth About Multiple H1 Tags in the HTML5 EraH1 retina
    Whether you're a webmaster or a web designer, there's a question you've most likely either asked or answered many times over the years. That question is, "How many <h1> tags can I use per page, and how exactly should I implement them?"Read More…