WordPress.org

Forums

2 or 3 column grid layout for Twenty Twelve (2 posts)

  1. dyablohunter
    Member
    Posted 1 year ago #

    I came across this post:
    http://www.transformationpowertools.com/wordpress/posts-in-two-columns-twenty-twelve#comment-24185

    And it does work for the latest version of Twenty Twelve, with the exception that I couldn't figure out how to make the articles go under each other and not align at the end of the longest article, while keeping the responsiveness of the theme.

    The author of the article suggested I use another post of his:
    http://www.transformationpowertools.com/wordpress/playing-with-columns-stacking-posts-grid-style

    But this one needs to be adapted to the Twenty Twelve, and I really am not that good with PHP.

    Can someone please give me a solution to this? I would really appreciate it.

    Thank you.

  2. maxgx
    Member
    Posted 1 year ago #

    hey diablo
    this is a custom category page i created in my twenty twelve child theme, using the 4 columns layout. basically you need to place Michael's code in between the original theme's code.
    hope that helps, but if you do custom theme stuff, i'd suggest you read manuals and tutorials on how to read WP code - it's quite intuitive after you get the hang of it.

    <?php
    /**
     * The template for displaying Custom Category page
     *
     * Used to display archive-type pages for posts in a category.
     *
     * @link http://codex.wordpress.org/Template_Hierarchy
     *
     * @package WordPress
     * @subpackage Twenty_Twelve
     * @since Twenty Twelve 1.0
     */
    
    get_header(); ?>
    
    	<section id="primary" class="site-content">
    		<div id="content" role="main">
    
    	<?php
    	$num_cols = 4; // set the number of columns here
    	if (have_posts()) : ?>
    			<header class="entry-header">
    				<h1 class="entry-title"><?php printf( '%s', '<span>' . single_cat_title( '', false ) . '</span>' ); ?></h1>
    
    			<?php if ( category_description() ) : // Show an optional category description ?>
    				<div class="archive-meta"><?php echo category_description(); ?></div>
    			<?php endif; ?>
    			</header><!-- .archive-header -->
    
    		<?php
    		for ( $i=1 ; $i <= $num_cols; $i++ ) :
    			echo '<div id="col-'.$i.'" class="col">';
    			$counter = $num_cols + 1 - $i;
    			/* Start the Loop */
    			while (have_posts()) : the_post();
    				if( $counter%$num_cols == 0 ) :
    
    				/* Include the post format-specific template for the content. If you want to
    				 * this in a child theme then include a file called called content-___.php
    				 * (where ___ is the post format) and that will be used instead.
    				 */
    					get_template_part( 'content', get_post_format() );
    
    				endif;
    				$counter++;
    			endwhile;
    			rewind_posts();
    			echo '</div>'; //closes the column div
    		endfor;
    		?>
    
    		<?php
    
    			twentytwelve_content_nav( 'nav-below' );
    			?>
    
    		<?php else : ?>
    			<?php get_template_part( 'content', 'none' ); ?>
    		<?php endif; ?>
    
    		</div><!-- #content -->
    	</section><!-- #primary -->
    
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>

Topic Closed

This topic has been closed to new replies.

About this Topic