Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Gabriel Ward
Gabriel Ward
20,222 Points
Posted by 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,148 Points
Kevin Korte
Kevin Korte
28,148 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
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,148 Points
Kevin Korte
Kevin Korte
28,148 Points

What code is the get template part grabbing?

Gabriel Ward
Gabriel Ward
20,222 Points
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 -->