Categories
24 Days of WordPress Tutorials

Day 19: Creating a Blog Within a WordPress Site

One of the great advantages of working with WordPress is that it has a blogging platform built right in. Some would argue that this is because WordPress is a blogging platform but I disagree. WordPress is a content management system that in its past used to be a blogging platform. But that’s and argument that is a total waste of time. The only thing that really matters is this: You can use WordPress to build a site with multiple posts, categories and other content and still have a blog inside it. And on this 19th Day of WordPress I’ll show you how.

What do you mean “a blog inside it”?

Let me explain myself here so it’s clear what I’m talking about. Imagine you are building a site for an illustrator. The site has four static pages (front page, about page, CV, and contact) and she also has a series of posts stored under categories including portfolio, articles and tutorials, each with sub-categories. But in addition to these non-blog posts she wants a section on her site called “blog” where she can post all the stuff that doesn’t fit anywhere else.

To get all this to work we need to set up a new category called “Blog” with however many sub-categories she wants, create a page called “Blog” on which to display the blog index page and finally limit the posts displayed on the blog page to only posts listed under the Blog category or its children. So let’s get started.

Setting it up

Logged into WordPress create a new page called Blog. Don’t put any content in the page as it will be used as the blog index page.

With the new Blog page published go to Settings -> Reading, set Front page displays to A static page and select your home page (whatever it is) as your Front page and the Blog page as the Posts page (remember to hit Save Changes).
Changing the front page of a WordPress site

Displaying only posts from the Blog category

To get WordPress to only display posts from the Blog category on the blog index page you need to add a query to the index.php file. The query first checks if this is indeed the blog page (is_home) and then restricts the posts displayed only to those posts in the Blog category (using the slug “blog”) or its children:


If you want to use the category ID instead you can do so by changing the variable in the query like this (assuming the category ID in question is 3):


The query_posts() function has a lot of varialbes and there are tons of cool things you can do with it so I recommend checking out the WordPress Codex page for the function as a way to expand your coding horizons.

This tutorial is part of the 24 Days of WordPress series. If you want to learn more about WordPress and Expression Web check out the Sams Teach Yourself Microsoft Expression Web in 24 Hours series (version 2, 3 and 4), Lynda.com’s WordPress 3.0 Essential Training course and Microsoft Expression Web 4 LiveLessons.

Categories
24 Days of WordPress Tutorials

Day 17: Using custom category templates and query_posts

Custom queryRight now I’m working on a site for a local video production company called Reeltime Videoworks. As part of the spec for the site was the ability for the owners Sue and Don to add testimonials to the site that would be featured on a testimonials page as well as in short version on the front page. There are many ways of doing this, and it can be done for a lot of topics, not just testimonials, but I chose to use a custom category template plus some nifty coding on the front page to make it all work. On this 17th Day of WordPress I’ll give you a preview of how it all fits together and some tips along the way to get you going on your own custom categories.

Mapping it out

Before starting on a project it’s a good idea to think through what is going to happen. That way you get a clear idea of how you want to store the information and where you want to display it. In this case I had three major components that needed to be addressed:

  1. The owners want to be able to add and manage testimonials easily
  2. All the testimonials should be displayed on a page as a list
  3. The front page should have a box where excerpts of testimonials appear, different each time the page is loaded

To make this all work I decided to go the easiest way possible: Make a category called Testimonials, create a custom category template for the Testimonials category and create a small query that pulls the excerpt from a random post within the Testimonials category and displays it on the front page.

Creating a custom category template

Custom Category TemplateI’m going to assume you know how to make posts and categories so I’ll jump right to creating a custom category template. Custom category templates are one of those well kept secrets of WordPress. Most people just ignore them completely and rely just on the main category template, but you can do a lot of fun stuff with the custom versions.

When it comes to what template to use when displaying a category list WordPress operates with a strict hierarchy:

  1. category-slug.php
  2. category-ID.php
  3. category.php
  4. archive.php
  5. index.php

This means to create a custom category template for a category called “Testimonials” all you have to do is create a copy of the category.php file and name it either category-testimonials.php or category-ID.php (where ID is the numerical ID of that category) and you’re ready to start customizing.

Now the whole point of creating a custom category template is that it displays differently than other categories. In the case of this project I wanted a picture of the quoted person with his or her name and company affiliation displayed on the right with the actual quote displayed on the left in a stylized form. To make things as easy as possible for the Reeltime crew I set it up as follows:

  • The post title is the name of the person
  • The post body is the quote itself
  • The post excerpt is the best part of the quote to be displayed on the front page
  • A custom field is added with the key companyTitle that is filled with the company title and affiliation info
  • The photo of the person or a company logo is added as the Featured Image

The custom category template in turn calls the information and puts it in the page in the order I want it. For your reading pleasure (or confusion?), here is the actual loop from the template:


<?php while ( have_posts() ) : the_post() ?>
	<div class="testimonialPost group">
		<div class="testimonialThumbnail">
			<?php if ( has_post_thumbnail() ) {
				the_post_thumbnail('thumbnail');	// the current post has a thumbnail
			} else {
				get_thumbnail($post->ID, 'thumbnail', 'alt="' . $post->post_title . '"');
			}
			?>
			<div class="label">
				<div class="name">
					<?php the_title(); ?>	
				</div>
				<div class="company">
					<?php echo get_post_meta($post->ID, 'companyTitle', true); ?>
				</div>
			</div><!-- END .label -->
		</div><!-- END .testimonialThumbnail -->
		<div class="bigBubble">
			<?php the_content(); ?>
		</div><!-- END #bigBubble -->
	</div><!-- #testimonialPost -->
<?php endwhile ?>

The result is the display you see above. Note how none of the items contain a link to the actual post for that quote. The only way anyone will ever land on a single post view of the item is if they get there through a search engine or a lucky guess with a URL. And if they do they land on a custom post template, but that’s a whole different tutorial.

Displaying the excerpt from a random post on the front page

A testimonialNow that the custom category template is in place and there are testimonials, the next step is to display the excerpt and the name and company affiliation of one person on the front page, and display a random one each time the page is loaded. For this we need to make a custom query on the front page. And for that we use the very useful query_post() function.

The query_posts() function allows you to dictate exactly what posts WordPress should poll when a certain action happens. In this case I created a query to go in a custom page template for the front page that did three things at once: Tell WordPress to only call one post, make that a random post, and call it from the testimonials category. Once the post is called I could run a standard loop on it. And when the loop is finished the code wraps up by resetting the query. You’ll notice in the code below that though the loop is different it is displaying roughly the same content as the previous code example:


<?php
query_posts('showposts=1&orderby=rand&category_name=testimonials'); 
	
	if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
		<div id="bubble" class="group">
			<div id="bubbleCenter" class="group">
				<?php the_excerpt(); ?>
			</div><!-- END #bubbleCenter -->
			<div id="bubbleBottom" class="group">
				<div class="name">
					<?php the_title(); ?>
			        </div>
				<div class="company">
					<?php echo get_post_meta($post->ID, 'companyTitle', true); ?>
				</div>
			</div><!-- END #bubbleBottom -->
		</div><!-- END #bubble -->
	<?php endwhile; endif;
 
wp_reset_query();
?>

The proverbial tip of the iceberg is right here

What I’ve done here is just a small taste of what you can do with some creative uses of custom category templates and queries. Using similar setups I’ve created photo galleries that poll Flickr sets, video galleries that show videos in lightboxes and even post galleries that show up as photo galleries using the Featured Image function. This is one of those times when the only limitation really is your imagination.

This tutorial is part of the 24 Days of WordPress series. If you want to learn more about WordPress and Expression Web check out the Sams Teach Yourself Microsoft Expression Web in 24 Hours series (version 2, 3 and 4), Lynda.com’s WordPress 3.0 Essential Training course and Microsoft Expression Web 4 LiveLessons.