Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

WordPress

Gabriel Ward
Gabriel Ward
20,222 Points

changing column count in index.php

I'm customising a Wordpress theme and I want to change the column count from 2 to 3 in the index.php template so that my home page is displayed with 3 columns instead of 2. I don't have a home.php file and the index.php file is controlling the home page.

I've tried playing around with the code but haven't had any luck yet. Here's my index.php code. I really appreciate any advice.

get_header(); ?>

<div id="post" class="col span_9 clr">
    <?php
    if ( have_posts( )) :
    $att_count=0;
        while ( have_posts() ) : the_post();
            $att_count++;
            get_template_part( 'content', get_post_format() );  
            if ( $att_count == 2 ) { $att_count = 0; }
        endwhile;
    endif;
    echo '<div class="clear"></div>';
    att_pagination(); ?>
</div><!-- .span_8 -->

<?php
get_sidebar();
get_footer();
?>

2 Answers

Kevin Korte
Kevin Korte
28,135 Points

Okay, I would assume that your solution lies here:

<article <?php post_class('loop-entry span_6 col count-'. $att_count); ?>>

This looks like it is using Bootstrap 2, I think if you change the span_6 to a span_4 you should get 3 articles across.

Gabriel Ward
Gabriel Ward
20,222 Points

Hmm no luck unfortunately. It still displays as two columns. I've tried playing around with the width of span_6 in CSS by reducing it from 49% to 25% but still displays in only two columns. So at this point I'm not sure if it's the php file or CSS I need to be looking at.

Kevin Korte
Kevin Korte
28,135 Points

What code is the get template part grabbing?

Gabriel Ward
Gabriel Ward
20,222 Points

This here I believe

<?php
/**
 * This file is used for your blog and archive entries.
 *
 * @package WordPress Theme
 * @since 1.0
 */



/******************************************************
 * Single Posts
 * @since 1.0
*****************************************************/
if ( is_singular() && is_main_query() ) { ?>


    <?php
    // Get, resize and display featured image
    if( att_option('blog_single_thumbnail','1' ) == '1' && has_post_thumbnail() ) { ?>
    <div class="post-head-image">
        <div id="post-thumbnail">
            <img src="<?php echo aq_resize( wp_get_attachment_url( get_post_thumbnail_id() ),  att_img( 'blog_post_width' ), att_img( 'blog_post_height' ), att_img( 'blog_post_crop' ) ); ?>" alt="<?php echo the_title(); ?>" />
        </div><!-- /post-thumbnail -->   
    </div>
    <?php } ?>


<?php
/******************************************************
 * Entries
 * @since 1.0
*****************************************************/
} else {
    global $att_count; ?>

    <article <?php post_class('loop-entry span_6 col count-'. $att_count); ?>>  
        <?php if( has_post_thumbnail() ) {  ?>
            <div class="loop-entry-thumbnail">
                <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><img src="<?php echo aq_resize( wp_get_attachment_url( get_post_thumbnail_id() ),  att_img( 'blog_entry_width' ), att_img( 'blog_entry_height' ), att_img( 'blog_entry_crop' ) ); ?>" alt="<?php echo the_title(); ?>" /></a>
            </div><!-- /loop-entry-thumbnail -->
        <?php } ?>
        <div class="loop-entry-content">
            <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
            <div class="entry-text">
                <?php the_excerpt(); ?>
            </div><!-- l.oop-entry-text -->
        </div><!-- .loop-entry-content -->
    </article><!-- .loop-entry -->