Displaying A Blog Format Within A Page Template In WordPress

September 11, 2010 / Wordpress / by Paul Robinson / 16 Comments

This post was published back on September 11, 2010 and may be outdated. Please use caution when following older tutorials or using older code. After reading be sure to check for newer procedures or updates to code.

WordPress works great as a CMS, even allowing you to display a page as the home page instead of the normal blog. However another feature some CMS users want is to use the main blog for their normal day to day work/postings & have a separate blog to post informal information. This can seem tricky at first, but with the new custom post types* available it’s quite simple.

*Please bare in mind that it is entirely possible to do this using categories, however using custom post types keeps thing organized a little better.

Setup A Custom Post Type

First let’s get the complicated bit out of way, adding in our custom post type. Let’s take a look at the code to register it. For reference we are going to call the post type ‘Blog Posts’ assuming that the normal posting system would be used for business posts.

add_action('init', 'add_blog_type');
function add_blog_type() 
{
  $labels = array(
    'name' => _x('Blog Posts', 'post type general name'),
    'singular_name' => _x('Blog Post', 'post type singular name'),
    'add_new' => _x('Add New', 'Post'),
    'add_new_item' => __('Add New Post'),
    'edit_item' => __('Edit Post'),
    'new_item' => __('New Post'),
    'view_item' => __('View Post'),
    'search_items' => __('Search Posts'),
    'not_found' =>  __('No posts found'),
    'not_found_in_trash' => __('No posts found in Trash'), 
    'parent_item_colon' => ''
  );
  $args = array(
    'labels' => $labels,
    'public' => true,
    'publicly_queryable' => true,
    'show_ui' => true, 
    'query_var' => true,
    'rewrite' => true,
    'capability_type' => 'post',
    'hierarchical' => false,
    'menu_position' => 5,
    'supports' => array('title','editor','author','thumbnail','excerpt','comments')
  ); 
  register_post_type('blog',$args);
}

add_action('init', 'add_blog_type');

function add_blog_type()

{

$labels = array(

'name' => _x('Blog Posts', 'post type general name'),

'singular_name' => _x('Blog Post', 'post type singular name'),

'add_new' => _x('Add New', 'Post'),

'add_new_item' => __('Add New Post'),

'edit_item' => __('Edit Post'),

'new_item' => __('New Post'),

'view_item' => __('View Post'),

'search_items' => __('Search Posts'),

'not_found' => __('No posts found'),

'not_found_in_trash' => __('No posts found in Trash'),

'parent_item_colon' => ''

);

$args = array(

'labels' => $labels,

'public' => true,

'publicly_queryable' => true,

'show_ui' => true,

'query_var' => true,

'rewrite' => true,

'capability_type' => 'post',

'hierarchical' => false,

'menu_position' => 5,

'supports' => array('title','editor','author','thumbnail','excerpt','comments')

);

register_post_type('blog',$args);

}

This code is best placed in your themes functions.php file. Most of the code is self explanatory like the labels are what to show in the various places within the WP admin for your post type. Let’s go through some of the other code though.

The add_action() tells WP to run our function (which adds our post type) on initialization, AKA init, of WordPress. Our function then defines our labels, and then some arguments (or options) for the register_post_type() function which actually creates the post type.

The arguments are where it can get complicated. I’m not going to go through them as that would take quite a while & the WordPress codex does a great job already. Feel free to ask in the comments if there is anything you are confused about though.

Add A Custom Taxonomy

Now if you are going to use that custom post type (blog posts) as a decent blog you are probably going to need categories. So let’s add a custom taxonomy to our new post type. Categories is already taken by WP so let’s call them subjects.

add_action( 'init', 'add_blog_taxonomy' );
function add_blog_taxonomy() {
  $labels = array(
    'name' => _x( 'Subjects', 'taxonomy general name' ),
    'singular_name' => _x( 'Subject', 'taxonomy singular name' ),
    'search_items' =>  __( 'Search Subjects' ),
    'all_items' => __( 'All Subject' ),
    'parent_item' => __( 'Parent Subject' ),
    'parent_item_colon' => __( 'Parent Subject:' ),
    'edit_item' => __( 'Edit Subject' ), 
    'update_item' => __( 'Update Subject' ),
    'add_new_item' => __( 'Add New Subject' ),
    'new_item_name' => __( 'New Genre Subject' ),
  ); 	

  register_taxonomy('Subject',array('blog'), array(
    'hierarchical' => true,
    'labels' => $labels,
    'show_ui' => true,
    'query_var' => true,
    'rewrite' => array( 'slug' => 'subject' ),
  ));
}

add_action( 'init', 'add_blog_taxonomy' );

function add_blog_taxonomy() {

$labels = array(

'name' => _x( 'Subjects', 'taxonomy general name' ),

'singular_name' => _x( 'Subject', 'taxonomy singular name' ),

'search_items' => __( 'Search Subjects' ),

'all_items' => __( 'All Subject' ),

'parent_item' => __( 'Parent Subject' ),

'parent_item_colon' => __( 'Parent Subject:' ),

'edit_item' => __( 'Edit Subject' ),

'update_item' => __( 'Update Subject' ),

'add_new_item' => __( 'Add New Subject' ),

'new_item_name' => __( 'New Genre Subject' ),

);

register_taxonomy('Subject',array('blog'), array(

'hierarchical' => true,

'labels' => $labels,

'show_ui' => true,

'query_var' => true,

'rewrite' => array( 'slug' => 'subject' ),

));

}

This code is very similar to the code that creates the custom post type. Again it would take me too long to go through all the options and the WordPress codex already does a great job. Just make sure you put the name you gave your custom post type in the second parameter of the register_taxonomy() function.

Setting Up The Page For Custom Posts

Okay now we have our post type & our custom taxonomy we can get to work adding it to our theme. I’ve decided adding some screenshots helps make tutorials a little more colorful so, for the purposes of this tutorial I will be using the excellent Obscure theme to help illustrate why you might use this tutorial.

As you can see this theme is a nice magazine style theme that you might use for a community based site, but you still probably want a blog for things like site updates or as it’s a community based theme the website owner may want their own personal blog to post things about the site. There are numerous reasons, but let’s get on it.

You may notice there is a blog link in the pages at the top. That is the page we are going to be putting the blog on. The easiest way to do this is to create a page template. To do this create a copy of your themes normal page template, normally page.php, and change it’s name to page-xxx.php where ‘xxx’ is the ID of the page you have created for the blog. You can also use the page slug, but I use the ID.

This part can be tricky. Depending upon your theme the following code may look different. If you want your blog posts to look the same as your normal blog then the easiest thing to do is copy the loop, that is the part that looks a little like:

if(have_posts()) :
    while(have_posts()) the_post();
        //other code here
    endwhile;
endif;

if(have_posts()) :

while(have_posts()) the_post();

//other code here

endwhile;

endif;

Copy that from your index.php file & replace the loop in your copied page-xxx.php file. The reason you are replacing it is because page contents are displayed completely differently to posts. If, however, you want these posts to look different you’ll have to put on your designer beret & design away.

Displaying The Custom Posts

Now we can display the custom posts. Remember the obscure theme I’m using as an example? Well let’s take a look at what I ended up with.

As you can see it works. Yipeee! So let’s get your theme to display them. Remember how you changed the loop before? Well we need to add a little bit of code just above it. So go back to your page-xxx.php file and find the line that says:

if(have_posts()) :

1	if(have_posts()) :

Then put the following before it.

query_posts(array('post_type' => 'blog', 'posts_per_page' => 3));

1	query_posts(array('post_type' => 'blog', 'posts_per_page' => 3));

Remember that you need to change ‘blog’ for the name you gave your custom post type & ‘3’ to how many posts you want to be shown.

Important Notes

Obviously you’ll have no archive pages to show older posts from your custom post type, but that is for a later tutorial. If you want to take a stab at it though I can tell you that you’ll need an if & the function get_post_type().

You will also have to change any the_category() calls (in your new page-xxx.php) to the_terms() passing the post ID, and name of the taxonomy. Like this:

//Normally
the_category(', ');
//custom taxonomy the_term($id, $taxonomy, $before, $sep, $after);
the_terms($post->ID, 'subject', 'Subjects: ', ', ', '');

//Normally

the_category(', ');

//custom taxonomy the_term($id, $taxonomy, $before, $sep, $after);

the_terms($post->ID, 'subject', 'Subjects: ', ', ', '');

Also when you have set up your custom post types please remember that if you are using fancy permalinks you will need to go to your permalink settings & save them. This resets the rewrite rules and allows your custom post type rewrite rules to be activated. If you don’t do this you will probably get 404 errors when trying to visit your posts.

Finally remember that when viewing a post it will use the single.php file to show them. To get around this you can use WordPress’ template system by making a template file named single-posttype.php where ‘posttype’ is the name of the post type. So in my example it would be single-blog.php.

Examples

I am unaware of any site that has used this exact method at the moment, but Lisa Marie Art & Illustration used the same technique but with categories to create their I Love It page. Check it out if you are confused about how the whole thing works as it uses the same principle just based on categories rather than custom post types.

I hope this tutorial has been helpful, and has made custom post types & custom taxonomies a little less daunting. They can be extremely useful for WordPress based sites using it as a CMS. Let me know if you have any questions or comments and I’ll get back to you as soon as I can.

Blog Custom Post Types Custom Taxonomies Page Taxonomy Templates Wordpress

Paul Robinson

WordPress plugin & theme developer, user of Laravel and learner of React.js. Can usually be found listening to Japanese, and Korean Pop or Vocaloid music while developing.

16 Comments

Some remarks on the guide.
First, one may add a simple archive page for posts of a custom post type, using this plugin –
http://wordpress.org/extend/plugins/simple-custom-post-type-archives/

So, no need to create a special page template, but a file named type-PostType.php to handle this.
Anyway, I read on WPDev blog, that they intend to solve this and add a built in archive page for Cusom Post Type s in template hierarchy on WP3.1.

Second, if you create this archive page, you may use this code I wrote for template file I use. This can be useful to sort of different post types:

$post_type = get_query_var(‘post_type’);
$post_type=get_post_type_object($post_type);
$post_type_slug = $post_type->rewrite[‘slug’];
$post_type_label = $post_type->label;

You may use the variables to reffer now to your post tpe label or link to its slug.

Second, in your query post function, you must add the $paged variable, to support paginatiom, otherwise you will get the first page always:

query_posts(array(‘post_type’ => ‘blog’, ‘posts_per_page’ => 3, ‘paged’ => ‘paged’));

author

Thanks. However your revised query_posts is incorrect. I believe it is 'paged' => $paged, but there is another way of doing it which is (said to be) preferred by the WP devs.

query_posts(
    array_merge(
         $wp_query->query,
         array(
             'post_type' => 'blog',
             'posts_per_page' => 3
         )
    )
);

query_posts(

array_merge(

$wp_query->query,

array(

'post_type' => 'blog',

'posts_per_page' => 3

)

);

That will merge the default query (with paging) onto the customized query.

As for the plugin. I prefer to code my own pages/menu items for custom post types for customization sake, but if you find it easier to use a plugin & you don’t require the customization, fair enough.

I’ll get round to making a tutorial for making other types of pages for custom post types eventually, but I’m trying to spread out tutorials between advanced & easy as to help everyone who needs the help.

About the query, I usually not using the assoc array format, thus the mistake.
The query I used is with query variables, like this for example (that query a custom field also)

query_posts(‘posts_per_page=12&paged=’.$paged.’&post_type=mivzakim&meta_key=miv-status&meta_value=on’);

About the pluging – it just let you have a custom Post Type archive page, and you name the file – type-{customType}.php

Put inside the type-….php file, any custom code you need, such as the query, custom loop and code etc. It is quite useless to edit a new page in the pages just to make it an archive page for a custom field.
If you build a site to customer, it will less confuse him, so no need to see that page in the pages editor admin, I think it’s better.

Of course I meant archive page for a Custom Post Type, not a custom field 🙂 typed too quickly and submitted…

author

Indeed, but as I said I prefer to do things like that manually (just as the plugin does) due to the customization I can have.

I generally use a plugin as a base for my code, if one already does what I am trying to achieve, but due to requests from clients a plugin generally doesn’t do the ‘exact’ job out of the box. Thus the need for customization.

I usually also prefer to write my code and less using plugins.
But, using a page template for Post Type archive is totally useless for my opinion.
Why won’t write a page template for regular archive? That’s the same, since you can have a archives.php or a categor-slug.php etc.
So, thus you can have a file named type-slug.php and put there all customization you want for the archive of that particular post type.

author

No, you misunderstand. I mean I would write in what the plugin does for customization sake. Allowing an archive page without the need to create a page in the back end, but using the plugin as a base to start from.

I tend to work on a lot of custom WordPress builds and therefore a plugin is great, but does not do everything I need so I sometimes use them as a base to build from.

Hello! This is excellent, thank you so much for the resource. This works great for what I’m trying to do, and looks great on the front end, except I keep getting the error message and am not sure where I went wrong:

Warning: Cannot modify header information – headers already sent by (output started at /home/content/75/7502075/html/wordpress/wp-content/themes/lysa/functions.php:34) in /home/content/75/7502075/html/wordpress/wp-admin/theme-editor.php on line 89

Here is the code I am using:

 _x('News Posts', 'post type general name'),
    'singular_name' =&gt; _x('News Post', 'post type singular name'),
    'add_new' =&gt; _x('Add New', 'Post'),
    'add_new_item' =&gt; __('Add New Post'),
    'edit_item' =&gt; __('Edit Post'),
    'new_item' =&gt; __('New Post'),
    'view_item' =&gt; __('View Post'),
    'search_items' =&gt; __('Search Posts'),
    'not_found' =&gt;  __('No posts found'),
    'not_found_in_trash' =&gt; __('No posts found in Trash'),
    'parent_item_colon' =&gt; ''
  );
  $args = array(
    'labels' =&gt; $labels,
    'public' =&gt; true,
    'publicly_queryable' =&gt; true,
    'show_ui' =&gt; true,
    'query_var' =&gt; true,
    'rewrite' =&gt; true,
    'capability_type' =&gt; 'post',
    'hierarchical' =&gt; false,
    'menu_position' =&gt; 5,
    'supports' =&gt; array('title','editor','author','thumbnail','excerpt','comments')
  );
  register_post_type('news',$args);
}
?&gt;

_x('News Posts', 'post type general name'),

'singular_name' => _x('News Post', 'post type singular name'),

'add_new' => _x('Add New', 'Post'),

'add_new_item' => __('Add New Post'),

'edit_item' => __('Edit Post'),

'new_item' => __('New Post'),

'view_item' => __('View Post'),

'search_items' => __('Search Posts'),

'not_found' => __('No posts found'),

'not_found_in_trash' => __('No posts found in Trash'),

'parent_item_colon' => ''

);

$args = array(

'labels' => $labels,

'public' => true,

'publicly_queryable' => true,

'show_ui' => true,

'query_var' => true,

'rewrite' => true,

'capability_type' => 'post',

'hierarchical' => false,

'menu_position' => 5,

'supports' => array('title','editor','author','thumbnail','excerpt','comments')

);

register_post_type('news',$args);

}

I know this is an old post, but if you happen to see any blinding errors, I would be very grateful!

author

Hi Holly,

The error you are getting would suggest that your functions.php page is outputting something to the browser. If you do that from the functions.php file you’ll get that error as WordPress hasn’t finished altering the page headers (which can’t be done once output is sent to the browser).

I can’t see anything in the code that would cause that though. My best guess would be to check out line 33/34 of functions.php and look for anything that would cause output like an echo or a print, or post it here & I’ll take a look.

If line 33/34 already is in the code above then I’m not sure what’s going on… 🙁

Hello, First of all thank you for tutorial… It’s perfectly clear but I have a question… You wrote :

“To do this create a copy of your themes normal page template, normally page.php, and change it’s name to page-xxx.php where ‘xxx’ is the ID of the page you have created for the blog.”

I don’t understand the “ID” part. Was the ID created before if so I don’t see where, or I have to create a new one. If it’s the case can use any ID?

Thank you in advance for your help.

author

Hi Frenchfries,

The ID is automatically created whenever you make a page/post by WordPress to help identify them in it’s database.

You need to place that ID in place of the ‘xxx’. To find the ID go to the page/post listing in the WP admin and hover over the link for the one you want. The ID will be shown like this post=1234 in your browser status bar.

Alternatively you can use the page/post slug instead. That is found just by visiting the page & looking at your browsers address bar.

Thank you Paul for your quick answer. I had figure it out on my own before you helped me. Sorry to bother you I’m still a newbie learning through the process.
I did copy your whole without changing a single line.However I still can’t display the custom posts…. Could please help me out and tell me where I messed up ?

// Step 1 : Setup A Custom Post Type//
–> Custom Post Type is named “soirées”
This step worked all fine because I can create new post but I just don’t see it maybe I’m doing the wrong thing in step 2.
// Step 2: Add A Custom Taxonomy//

add_action( 'init', 'add_blog_taxonomy' );
function add_blog_taxonomy() {
  $labels = array(
    'name' => _x( 'Subjects', 'taxonomy general name' ),
    'singular_name' => _x( 'Subject', 'taxonomy singular name' ),
    'search_items' =>  __( 'Search Subjects' ),
    'all_items' => __( 'All Subject' ),
    'parent_item' => __( 'Parent Subject' ),
    'parent_item_colon' => __( 'Parent Subject:' ),
    'edit_item' => __( 'Edit Subject' ),
    'update_item' => __( 'Update Subject' ),
    'add_new_item' => __( 'Add New Subject' ),
    'new_item_name' => __( 'New Genre Subject' ),
  ); 	

  register_taxonomy('Subject',array('Soirées'), array(
    'hierarchical' => true,
    'labels' => $labels,
    'show_ui' => true,
    'query_var' => true,
    'rewrite' => array( 'slug' => 'subject' ),
  ));
}

add_action( 'init', 'add_blog_taxonomy' );

function add_blog_taxonomy() {

$labels = array(

'name' => _x( 'Subjects', 'taxonomy general name' ),

'singular_name' => _x( 'Subject', 'taxonomy singular name' ),

'search_items' => __( 'Search Subjects' ),

'all_items' => __( 'All Subject' ),

'parent_item' => __( 'Parent Subject' ),

'parent_item_colon' => __( 'Parent Subject:' ),

'edit_item' => __( 'Edit Subject' ),

'update_item' => __( 'Update Subject' ),

'add_new_item' => __( 'Add New Subject' ),

'new_item_name' => __( 'New Genre Subject' ),

);

register_taxonomy('Subject',array('Soirées'), array(

'hierarchical' => true,

'labels' => $labels,

'show_ui' => true,

'query_var' => true,

'rewrite' => array( 'slug' => 'subject' ),

));

}

–> as you said “Just make sure you put the name you gave your custom post type in the second parameter of the register_taxonomy() function.” I did replace “blog” by “Soirees” which is the name of my custom post type

// Step 3: Setting Up The Page For Custom Posts//
The id of the post is 944 so I did create page-944 php
The template I wanted to keep was the category one so there is the code

<?php get_header();?>
<div class="main-container">
query_posts(array('post_type' => 'Soirées', 'posts_per_page' => 3));

<?php if(have_posts()):?><?php while(have_posts()):the_post();?>

<div class="extrait"><div class="post-title">
<a href="<?php the_permalink();?>" title="<?php the_title();?>">
<span class="stylish_title"><?php the_title();?></span>
</a>
</div><!--post-title-->
	<div class="miniature"><!--thumbnail-->
<?php if ( has_post_thumbnail() ) { ?>
	<a href="<?php the_permalink();?>" title="<?php the_title();?>">	
	<?php the_post_thumbnail('post-thumbnail', array('class' => 'thumbs-in-archive'));?>	
	</a>
<?php } elseif (get_post_meta($post->ID, 'image', true) ) {?>
	<a href="<?php the_permalink();?>" title="<?php the_title();?>">
	<img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, 'image', $single = true); ?>&h=65&w=195&zc=1&q=100" alt="<?php the_title(); ?>" class="thumbs-in-archive"/> 
	</a>
<?php } ?>
	</div>

<div class="post-excerpt">
<?php the_excerpt();?>
	<div class="plus">
	<a href="<?php the_permalink() ?>">Continuer</a>
	</div><!--fin de la suite-->
</div><!--post-excerpt-->
</div><!--fin du background extrait-->



<?php endwhile;?>

<?php if(function_exists('wp_pagenavi')){ 
wp_pagenavi();}else{?>
<div class="next-prev-links">
<?php posts_nav_link( ' ', '<img src="" />', '<img src="" />' ); ?>

</div>
<?php } ?>  

<?php endif;?>
</div><!--main-container-->
<?php get_sidebar();?>
<?php get_footer();?>

<?php get_header();?>

query_posts(array('post_type' => 'Soirées', 'posts_per_page' => 3));

<?php if(have_posts()):?><?php while(have_posts()):the_post();?>

<a href="<?php the_permalink();?>" title="<?php the_title();?>">

</a>

</div>

<?php if ( has_post_thumbnail() ) { ?>

<a href="<?php the_permalink();?>" title="<?php the_title();?>">

<?php the_post_thumbnail('post-thumbnail', array('class' => 'thumbs-in-archive'));?>

</a>

<?php } elseif (get_post_meta($post->ID, 'image', true) ) {?>

<a href="<?php the_permalink();?>" title="<?php the_title();?>">

<img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, 'image', $single = true); ?>&h=65&w=195&zc=1&q=100" alt="<?php the_title(); ?>" class="thumbs-in-archive"/>

</a>

<?php } ?>

</div>

<?php the_excerpt();?>

<a href="<?php the_permalink() ?>">Continuer</a>

</div>

</div>

</div>

<?php endwhile;?>

<?php if(function_exists('wp_pagenavi')){

wp_pagenavi();}else{?>

<?php posts_nav_link( ' ', '<img src="" />', '<img src="" />' ); ?>

</div>

<?php } ?>

<?php endif;?>

</div>

<?php get_sidebar();?>

<?php get_footer();?>

The url should be : http://mywebsite.com/blog/page-944.php but I can’t see that page
Thank you for your time and your help

Never mind Paul! It’s working …lol

author

No worries. Glad you’ve gotten it working.

Older Comments

Newer Comments

Displaying A Blog Format Within A Page Template In WordPress

Setup A Custom Post Type

Add A Custom Taxonomy

Setting Up The Page For Custom Posts

Displaying The Custom Posts

Important Notes

Examples

16 Comments

Maor

Paul Robinson

Maor

Maor

Paul Robinson

Maor

Paul Robinson

Holly

Paul Robinson

Thefrenchfries

Paul Robinson

Thefrenchfries

Thefrenchfries

Paul Robinson

Leave a Reply Cancel reply

Categories

Recent Posts

Recent Comments

I'll keep your WordPress site up-to-date and working to its best.

Setup A Custom Post Type

Add A Custom Taxonomy

Setting Up The Page For Custom Posts

Displaying The Custom Posts

Important Notes

Examples

Follow Me

Categories

Recent Posts

Recent Comments

I'll keep your WordPress site up-to-date and working to its best.