I am new to wordpress, and have encountered some difficulty in making my own custom layouts. I'm using _S framework (underscore.me) as well as Custom Post Templates plugin.

I'm using custom fields to inject images above the title of posts currently, and that's worked so far but I encounter problems when trying to make index-only custom layouts for post's as well as applying CSS to the custom fields.

The custom index only post appearances are about three in number, one of which is how I want posts to look like by default.

What I'd like to know is which files should I be looking at, and some guidance on how I should go about modifying (as some elements seem not to change when I wrap/apply CSS to them) to change the index only appearance as I currently am able to modify the appearance of the post page itself.

If more info is required I can post it

  • Do you mean "custom layouts for posts" or "layouts for custom post types"? (In the latter case, this may help: codex.wordpress.org/Template_Hierarchy .)
    – Pat J
    Jan 3, 2014 at 16:07
  • What support does underscore include for Layouts? Jan 3, 2014 at 16:40
  • Listing posts with custom markup for each post in a list, for example the category or pages or index or frontpage, could be done with a custom post taxonomy that is assigned to that post. Something like this or this. It is the term taxonomy that is attached to the post as a "label" if you like. You can then create different markup and styling for such a label and assign it to the posts you like.
    – lowtechsun
    Jun 15, 2017 at 11:30

2 Answers 2


To rephrase, I believe what you're asking is how can you have a different style or template for your custom post types when they are displaying as a list?

It looks like the Custom Post Templates plugin you're using only allows you to switch templates for the single view of a post, not the listing of the posts, which is what I think you mean when you say index?

If you just need a way to style your posts separately, this depends on your theme, but in TwentyTwelve and TwentyThirteen, in index.php, it has the loops that, if posts exists, displays them, or displays a message if there are no posts. If you just need a class to use so that you can style each post type's archive separately, you can use a PHP if statement to check for your custom post type and add a class if it's true. Here's an example. Let's say my custom post type is called recipe_posts, and I want to add a class called "recipe-archive" for when those posts are being displayed in list form, I would write something like this in TwentyThirteen's index.php:

<div id="primary" class="content-area <?php if(get_post_type() == recipe_posts): ?>recipes-archive<?php endif; ?>">
    <div id="content" class="site-content" role="main">
            <?php if ( have_posts() ) : ?>

                <?php /* The loop */ ?>
                <?php while ( have_posts() ) : the_post(); ?>
                    <?php get_template_part( 'content', get_post_format() ); ?>
                <?php endwhile; ?>

                <?php twentythirteen_paging_nav(); ?>

            <?php else : ?>
                <?php get_template_part( 'content', 'none' ); ?>
            <?php endif; ?>

    </div><!-- #content -->
</div><!-- #primary -->

Here I added a class to where "content-area" is with <?php if(get_post_type() == recipe_posts): ?>recipes-archive<?php endif; ?> but really, you can use this method where you need it to make styling easier. Now if you want to change templates, by default, in TwentyTwelve/Thirteen, it uses content.php that gets called in index.php. You can use the same PHP if statement if you want to swap out <?php get_template_part(); ?> with something else.

Hope that helps. Good luck!


There's 2 questions you're asking which relate to Layouts and Styling Custom Templates.


You can change the layout using code in the template files or conditionally from your child themes functions.php file using a filter however this depends on your parent theme.

The code for this may vary depending on the theme you're using and the support it includes for different layout options.

Custom Body Class

You can also add a custom body class directly to the templates or from your functions file conditionally for the archive or single template file.

Use this code directly in a template file

add_filter( 'body_class', 'add_custom_body_class_template' );

function add_custom_body_class_template( $classes ) {

$classes[] = 'archive-body-class';

return $classes;


Use this code in your child themes functions fle:

add_filter( 'body_class', 'add_custom_body_class_conditionally' );

function add_custom_body_class_conditionally( $classes ) {

if ( is_page_template('template_file_name.php') ) {

$classes[] = 'custom-body-class';

return $classes;


Change the conditional tag to match the templates you want to style.

Source http://codex.wordpress.org/Function_Reference/body_class

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.