Custom Post Types on WordPress Homepages

This custom post type tutorial is a follow-up to our earlier article showing how to create custom post types for WordPress.

Let’s imagine that you’re now empowered by knowledge and have gone wild, creating lots of new custom post types. They work wonderfully, but by default they don’t show on your homepage. So, how do you get these custom post types to show on the front page of your blog with the normal post types?

There are a couple ways to do this, neither very difficult. Trying them both will give you practice editing functions.php and The Loop, both at a very beginning cut-and-paste-coder level.

In method one, we’ll show you where to find the functions.php file, and we’ll also give you a few lines to paste into it.

In method two, we’ll be pasting a few lines of code in the The Loop, found at the top of the default index.php template file.

Method 1 – Step 1

1. Go to the Dashboard
2. Click Appearance
3. Click Edit

Method 1 – Step 2

On the right side of the page there is a list of files. Scroll down and find Theme Functions and click on it. This will open the file in the editing window.

Scroll all the way to the bottom of the window, and after the last line, paste the code.

Method 1 – Step 3. Paste this code into your functions.php file

Paste the following code at the bottom of the editing window

Click Update File to save it.

That’s all there is to it.

After you paste it, change the array to a list of your content types. Type the names between single quotes ‘name’ separated by a comma, no comma after the last one in line. You could also make the changes in a text editor before you paste it. Don’t delete any brackets or punctuation or add any stray marks.

add_filter( 'pre_get_posts', 'my_get_posts' );
function my_get_posts( $query ) {
if ( is_home() && false == $query->query_vars['suppress_filters'] )
$query->set( 'post_type', array(
'post', 'page', 'album','movie', 'quote','tutorial', 'attachment' ) );
return $query;
}

This code sets all the post types you would like to have displayed by using the pre_get_posts filter.

At one point in WP 3.2’s short history, someone found that the filter might break the new menu’s in WordPress 3.0. That did not happen for me. Even so i am going to include a second method in case you run into problems. This will also introduce you to The Loop, which is often modified by theme developers and you may need to tweak it at some point.

Method 2 – Step 1. Open index.php in the editor

1. Go to the Dashboard
2. Appearance
3. Editor

Method 2 – Step 2

Find the Main Index Template and open it by clicking on the name.

Method 2 – Step 3

What is The Loop.

The Loop is used by WordPress to display each of your posts. Using The Loop, WordPress processes each of the posts to be displayed on the current page and formats them according to how they match specified criteria within The Loop tags. Any HTML or PHP code placed in the Loop will be repeated on each post.

Found at the top of the default index.php template file is the starting code for The Loop.

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

and ends with:

<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

This is the real heart of the page. The rest of code mostly makes the output of The Loop look good. (An oversimplification, to be sure, but it makes my point.)

Method 2 – Step 4

To display the posts from your custom post type, add the following code in the loop:

<?php
if( is_home() ){
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts( array('post_type'=>array(
'post','page','album','movie','quote','tutorial','attachment'
),'paged'=>$paged ) );
}
?>

Add your list of post types in the array.

Paste it right before the line. The comment line may not be in every template, but the first line of the loop will always be in the template. If you don’t see the comment use the start line as your placement guide.

Type the names between single quotes ‘name’ separated by a comma, no comma after the last one in line. You could also make the changes in a text editor before you paste it. Don’t delete any brackets or punctuation or add any stray marks. Change movies with your custom post type name and add any others you have.

The above code will display all the post from the regular post type (post) and from the custom post types.

That’s it.

The result

You can see that Hello World! (which is a normal post type and the Sample Page both show up on the home page.

“page” is a post type. It shows up on the home page because we added the post type to the array
query_posts( array(‘post_type’=>array( ‘post’,’page’,‘album’,’movie’,’quote’,’tutorial’,’attachment’ ),’paged’=>$paged ) );

You can now include or exclude any post type from your home page.

You don’t need to use both these methods, only one is sufficient.