Using WordPress Custom Template to Create Layout with Different Sidebar

Using WordPress Custom Template to Create Layout with Different Sidebar

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.

[tut download=”http://cdn.onextrapixel.com/wp-content/uploads/2011/02/wp-custom-template.zip”]

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.

Comments

  1. / Reply

    Makes for interesting reading as am contemplating converting my WordPress installation into more of a CMS for commercial use as it makes more sense than blogging in some cases… will have a think how to extend this for some of my own websites!

  2. / Reply

    Thanks a lot for the clear explanation, much appreciated. I’ve seen a few simliar posts but they’ve tried to include so much in them they’ve completely confused me.

    Like Jonathan, I’m interested in using WordPress as a CMS and one thing I’m unclear on is how to order posts in the wordpress loop. They’re normally in date order which is what you want for a blog, but for a CMS you want to sort them differently on different pages (sticky posts doesn’t work as they’re sticky for everything). Do you know if there are specific order by parameters you can use on the wordpress loop? Maybe using a custom field to determine priority? Or any other suggestions how best to do this?

    Once I’ve figured out a way to do this it can really change WordPress from a blog into a proper CMS where you have complete control over what appears where, so any ideas much appreciated.

    Many thanks

    • Rana Mukherjee,
    • February 22, 2011
    / Reply

    Nice article,thank’s Stéphanie.

  3. / Reply

    Hi everyone and thanks a lot for the feebacks on the article.

    @Vickie Tricky question ^^ When I use wordpress as a cms, I usually use pages instead of posts for content that will not change too often, that is not related to a specific date. With the pages, you can give an order, give them parents etc so that you can create a complex herarchy. That was also a little bit the purpose of this article, when using quite only pages, the “blog” functionnality tend to get a little bit more complicated.
    If you really want to use posts, and you don’t care about the date, you could just “cheat” by giving factice dates to your posts to order them the way you want them to appear, sort of fake chronology. But this means that you will not be able to use the date of publication.
    I also saw a nice wordpress template that used the tags to achieve this sort of thing. They where using tags like “home” to post specific articles on the homepage, and “featured” to create a featured sticky post then in the loop just using query_posts( ‘tag=featured’ ); . If you don’t need tags in your template, maybe this could work.
    The whole list of order parameters for the loop can be found here : http://codex.wordpress.org/Function_Reference/query_posts#Order_.26_Orderby_Parameters. There’s a “meta_value_num”, I never tried this one, but maybe combining it with a custom field could work.

    1. / Reply

      Thanks for the ideas Stephanie.

      Unfortunately most of them won’t work as I use the date/tags etc already. But am going to have more of a look at the order by parameters in the codex you mentioned. It sounds like perhaps using this with custom fields might work.

      I know this is a bit off the topic of your post, so apologies. It has been really helpful for me in understanding why I’m having such a problem trying to use WordPress as a CMS. Thank you :)

    • Mauro,
    • March 30, 2011
    / Reply

    Thank you for this, very well encapsulated and clear! However, I like most, am using the posts for my blog and pages, well…. for website pages.

    Does your code and instructions carry over for reconfiguring the main blog page as opposed to the website page side? I’m essentially looking to reconfigure my main blog landing page on twenty-ten and am using posts.

    Merci beaucoup!

  4. / Reply

    I’m early in the process of building a 75 page site with WordPress. When I started building out my pages I noticed that the Manage->Pages interface does not have ‘categories’ like Manage->Posts. My navigation is going to be custom/fixed so I don’t have to worry about articles/content fading over time. I also want my pages to have url.com/category/pagename which it doesn’t seem like Pages can do since there’s no category. Might I want to just use Posts for all my pages so I can categorize them?

  5. / Reply

    Thank you so much for writing this, it was very helpful.

    I can’t seem to get it to work with the Buddypress Plugin activated though (single site not MU or MS). Any help on getting this to work would be greatly appreciated. Thanks!

  6. / Reply

    This is verry helpful for me….Thanxxxx.!!!!

    • Rafi,
    • August 30, 2011
    / Reply

    Thanks for giving this information…

    • Kurt,
    • November 5, 2011
    / Reply

    Thanks for writing this article. I think it contains some very useful information. One thing I can’t figure out is where to put the conditional code – the code that determines whethere the current page was created with the blog.php template. I’ve re-read the article multiple times and I still can’t figure out where to put it. Does it go in page.php? I don’t think it goes in blog.php does it?

    1. / Reply

      Thanks…great read and great informations…

    • Isaac,
    • December 20, 2011
    / Reply

    Thanks for this info :)

    • Jayms,
    • March 6, 2012
    / Reply

    What if I do not want to use TwentyTen?

  7. / Reply

    Really nice tutorial, help people to create custome blog page and costume side bar on each page.
    Thanks :P

  8. / Reply

    you cantry this http://www.wordpressguide.in/want-different-sidebar-for-different-category.html

    its easy and simple way

    • Glenn,
    • September 20, 2012
    / Reply

    Superb tutorial!! Clear, complete for the purpose, easy to implement. It brings together a lot of info for which I had been searching in various places.

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.