Custom Post Types on WordPress Homepages

posttypes-home

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

tutuploadsMethod_1_-_Step_1.png
  1. Go to the Dashboard
  2. Click Appearance
  3. Click Edit

Method 1 – Step 2

tutuploadsMethod_1_-_Step_2.png

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

tutuploadsMethod_1_-_Step_3.__Paste_this_code_into_your_functions.png

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.

{codecitation} 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;
}  {/codecitation}

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

tutuploadsMethod_2_-_Step_1.__Open_index.png
  1. Go to the Dashboard
  2. Appearance
  3. Editor

Method 2 – Step 2

tutuploadsMethod_2_-_Step_2.png

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

Method 2 – Step 3

tutuploadsMethod_2_-_Step_3.png

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.

{codecitation}<?php if ( have_posts() ) : while

( have_posts() ) : the_post(); ?>{/codecitation}

and ends with:

{codecitation}<?php endwhile; else: ?>
<p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p>
<?php endif; ?>{/codecitation}

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

tutuploadsMethod_2_-_Step_4.png

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

{codecitation}<?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 ) );
}
?>

{/codecitation}

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

tutuploadsThe_result..png

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.

Instructor

0 0 votes
Blog Rating
Subscribe
Notify of
5 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
ataylor

Hello – I have been searching for hours on how to do this and have come up empty. I am hoping you can point me in the right directions. I have a custom post type names Recipes. I have created categories for this post type (bread, meat, fish, etc). I want to list these categories on my static homepage, but cannot get them to display with wp_list_categories();

Nick

Hi and welcome!

We would love to get into a discussion with you on this. If you are a student at [url=http://ostraining.com]ostraining.com[/url], please log into the support forum ([url=http://www.ostraining.com/support-forum/)]http://www.ostraining.com/s…[/url] and post the question in there, so that one of our support techs can look into it for you. If you’re not a student, I hope you’ll consider becoming one, so that we can give you the attention you deserve. You can find out more about our online class at [url=http://www.ostraining.com/online]www.ostraining.com/online[/url]

Kind regards,

Nick

John Sanabria

Thanks, this helped me a lot

david handrian

sorry but when i placing that code make some call function custom post type eror like this image , i only wan to show on recent update only like pict 1 [urlcomment image]https://uploads.disquscdn.c…[/url] but when i try placing the code make the featured series lik this .. [urlcomment image]https://uploads.disquscdn.c…[/url]

pls help you can visit for surely at [url=http://animesearch.net]animesearch.net[/url]

Esteban

Hello, I followed the first method, the code works but shows the sidebar of the page and does not apply other changes in category builder

5
0
Would love your thoughts, please comment.x
()
x