Using WordPress Custom Template to Create Layout with Different Sidebar

by in WordPress on 21st Feb 2011 · Comments

WordPress is one of the biggest blog platforms used on the web. With its growing popularity and huge flexibility, it is also getting more and more used as a CMS for many static websites.

Using WordPress Custom Template to Create Layout with Different Sidebar

Such websites are mainly built around the WordPress page functionality but it can sometimes make sense to be able to display posts from special categories, to create, for example a "news" or "blog" page. In this article, we will see how to use custom templates to create a blog page in our website, with a custom sidebar and some thumbnails.

To help follow this article you can download the files below.

What We Want to Create

Since an image is worth a thousand words, let's take a quick look at what we want to create.

WordPress Create

We will have two types of pages in our website:

The "normal pages". For our example we created two of them: "home" and "about". They will display :

  • the page content
  • a sidebar composed of a search box and a calendar

The blog (or news) page which will display:

  • The content of the page we will name "blog"
  • A list of latest posts, 3 posts per page, with some thumbnails
  • A custom sidebar related to our blog articles composed of an RSS link and the list of categories

Now that we see what we want, let's get started with the coding!

Creating the "Blog" WordPress Page Template

First, we will need to create our own page template for the blog to get full control over its layout. Here's the full code of the template, we will save the document under the name "blog.php":

<?php
/*  
Template Name: blog_in_blog
*/

get_header(); ?>
<div id="container">
<div id="content" role="main">

<!-- Get the content of the blog article  -->
<?php  // get the content of our "my blog page"
if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> 
    <h1 class="entry-title"><?php the_title(); ?></h1>
    <div class="entry-content">
        <?php the_content();  ?>
    </div><!-- entry-content -->
</div><!-- post--> 
<hr/> 

<?php endwhile; ?>

<?php  // get the articles of category 3 4 and 5 
query_posts('cat=3,4,5&posts_per_page=3');
rewind_posts();

get_template_part( 'loop', 'archive' );
 ?> 
</div><!-- content -->
</div><!-- container -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Now let's explain this code piece by piece.

The Template Name

The first lines give the template name.

/*  
Template Name: blog_in_blog 
*/

This name, blog_in_blog, will appear in the page dashboard under attributes » Template (but we will come back to that later) .

Getting the Page Content

The next piece of code is here to get our "welcome" message page content:

<!-- Get the content of the blog article  -->
<?php  // get the content of our "my blog page"
if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?> > 
        <h1 class="entry-title"><?php the_title(); ?></h1>
        <div class="entry-content">
            <?php the_content();  ?>
        </div><!-- entry-content -->
    </div><!-- post -->
    <hr/>
<?php endwhile; ?>

This is basically the same code as the one you will find in page.php.

Getting Our Posts

Let's now move to the most interesting and important part of our page template and get our post with the following piece of code:

<?php  // get the articles of category 3 4 and 5
query_posts('cat=3,4,5&posts_per_page=3');
rewind_posts();
get_template_part( 'loop', 'archive' );
?>

The query_posts() here has two parameters: the categories IDs of the posts we will display and the number of posts per page. In plain text, this would be something like "get all the posts from categories 3, 4 and 5, in the default chronologic order, and display 3 of them per page". Of course the category IDs will depend on the WordPress installation itself. We can change the different query_posts parameters, but for this example, 3 posts per page will be fine.

To display those posts, we will use the default archive part of the loop with the get_template_part. This will display an excerpt of 55 characters with a Continue reading → link.

Assigning the Template to the Blog Page

The next step is to assign our freshly created template, to our blog page. First we will create the page, give it the title blog. We will write a nice welcome message.

Then we will go the right side, under the attributes panel, and select blog_in_blog under the Template dropdown list.

Assigning The Template

We save the page, now our blog page should look something like this.

Result No Thumbnails

It's a little bit sad; we will enhance the view and make it more attractive by adding post thumbnails.

Adding Post Thumbnails to the Blog Page

Enabling Support for Post-Thumbnails

With WordPress 3.0+, post thumbnails have never been so easy. For those using twenty-ten default theme, post thumbnails are already enabled. To make sure that the feature exists, we have to open the function.php file and look for the following code:

add_theme_support( 'post-thumbnails' ); 

If the code does not exist in the function.php, we will add it, as simple as that.

Adding an Image from the Post Admin Area

By default, once the thumbnail is supported by the theme, we will find a feature Image in the right panel of the post area.

Set Feature Image

We have to click on Set featured image , then select the file, and instead of the traditional insert into post, we will click the Use as featured image link, then save all changes and quit the media part. If every thing worked properly, we should now see our image in the featured image panel. All we have to do now, is enable the image to display in our template.

Adding the Thumbnail in the Blog Theme

First a little look back at our blog.php file, to see that we used the archive template part of the loop, to display our posts. So we will have to add our thumbnails in the loop.php file.

We will be looking for the lines concerning the archive, so we search for the lines which start with

<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>

We will be using the_post_thumbnail() to add our thumbnails before the posts excerpts like this :

<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>

<div class="entry-summary">
<?php 
// thumbnails function 
if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { 
    the_post_thumbnail(
    array(80,80), array(
        'class' => 'alignleft post_thumbnail',
        'alt'	=> trim(strip_tags( $attachment->post_excerpt )))); 
} ?>
<?php the_excerpt(); ?>
</div><!-- entry-summary -->

The first array gives us the size of our image 80 x 80 px. The second array will use some default attributes we can use in this function: the class for the image and the alt attribute (see codex for more attributes).

Setting Up The Sidebars

We’ve got our posts, we’ve got our thumbnails, and all we need to do now is customize the sidebar. As mentioned in the intro, we want two different sidebars: one for the normal pages of the website, and one for our blog posts.

Setting up the widget areas in admin

The twenty-ten theme comes with 3 sidebar widget areas and 4 footers. In the administration under Appearances » Widgets, we will be using two areas to create the sidebars. The primary default widget area will be used for static pages. We will add the search and calendar widgets. The secondary widget area will be used for blog page, archives and posts. We will add the feed text link widget to display an RSS link, and the category widget.

Sidebar

Using Conditional Tags to Display the Sidebar on the Page

We want to do something quite simple, telling WordPress that if the post uses the blog.php template, we want it to display the second widget area, if not we want to display the first one. Since the categories are linked to the posts, we will also display the second widget area on categories, and of course, on our posts.

Let's take a look at the code we will use first:

<?php

wp_reset_query();
if ( (is_page_template('blog.php'))OR(is_category(3,4,5))OR(is_single())) {
if ( is_active_sidebar( 'secondary-widget-area' ) ) : ?>
<div id="secondary" class="widget-area" role="complementary">
    <ul class="xoxo">
        <?php dynamic_sidebar( 'secondary-widget-area' ); ?>
    </ul>
</div><!-- secondary widget-area -->
<?php endif; ?>
<?php } 

else {
// A second sidebar for widgets, just because.
if ( is_active_sidebar( 'primary-widget-area' ) ) : ?>
<div id="primary" class="widget-area" role="complementary">
    <ul class="xoxo">
        <?php dynamic_sidebar( 'primary-widget-area' ); ?>
    </ul>
</div><!-- secondary widget-area -->
<?php endif;
} ?>

First the wp_reset_query(); : this will bring the query back to its original state (when the page was called) that we call before conditional tags to avoid conflicts between templates.

Let's move to the core of our sidebar, the conditional tags. We will first use is_page_template('blog.php'), to detect if we are on the blog page which uses the blog.php template. The is_page_template() conditional tag requires the use of the file name WITH the .php extension, or it will not work. We then say that we also want the second sidebar to display on categories and on the is_category(3,4,5) and is_single() to check this. We then simply add the code to get the secondary widget area.

The first widget area will be used on every other page, so we will add the code in the else part of the condition. As simple as that it should look something like this :

Final

Conclusion

Well that's it, now you know how to use WordPress custom templates to create a basic website with static pages and a blog page with its own custom sidebar. Of course the code can be improved, and has to be adapted to the theme used.

For those who want something simpler and don't need custom sidebars, a specific page can be used as front page to display all posts. This can be easily done in Settings » Readings, by checking a static page and a specific page as the front page for posts. Another simple solution is the interesting plugin blog-in-blog.

Stéphanie Walter is a Graphic and Web Designer. She's a Pixel and CSS lover who also enjoys working on UI and UX design for Mobile and Web Apps. She considers CSS as a design tool to create great interactive websites and share on different blogs what she learns daily.