Need help creating a 3 column grid.

Community Forums Forums Design Tips and Tricks Need help creating a 3 column grid.

This topic is: not resolved

Tagged: , , ,

This topic contains 4 replies, has 2 voices, and was last updated by  Aticus21 2 months, 3 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #86892

    Aticus21
    Member
    Post count: 4

    What I would like to do is have a 3 column grid under my banner you can see Here

    I’m following a tutorial that you can find Here

    The problem i’m running into is when I change the value to 3 in my functions.php // Alter this number to change the number of columns – used to add class names
    $columns = 3;

    the width of the post change but they don’t display in a grid. Not sure why it wont work correctly. I don’t know much about php so maybe someone who has more of an understanding could help me with this.

    Below is the css for the grid.

    Styles:

    /* Featured Post Grid
    Link: http://my.studiopress.com/tutorials/genesis-grid-loop/
    ——————————————— */

    .genesis-grid-even {
    float: right;
    padding: 0 0 15px;
    width: 48%;
    }

    .genesis-grid-odd {
    clear: both;
    float: left;
    padding: 0 0 15px ;
    width: 48%;
    }

    .genesis-grid-even,
    .genesis-grid-odd {
    margin: 0 0 20px;
    }

    #content .genesis-grid {
    float: left;
    margin: 0;
    padding: 15px 0 10px 3%;
    }
    #content .genesis-grid-column-1 {
    clear: left;
    padding-left: 0;
    }
    .size1of2 {
    width: 48%;
    }
    .size1of3 {
    width: 31%;
    }
    .size1of4 {
    width: 22.5%;
    }
    .size1of5 {
    width: 17.4%;
    }
    .size1of6 {
    width: 14%;
    }
    /* Above widths assume 0 left padding on the first column, 3% left padding on all
    subsequent columns, and a total sum of 99% to avoid browser rounding errors */

    Here is my functions.php

    /**
    * Add some extra body classes to grid posts.
    *
    * Change the $columns value to alter how many columns wide the grid uses.
    *
    * @author Gary Jones
    * @author Bill Erickson
    * @link http://code.garyjones.co.uk/genesis-grid-loop-advanced/
    *
    * @global array $_genesis_loop_args
    * @global integer $loop_counter
    *
    * @param array $grid_classes
    */
    function child_grid_loop_post_class( $grid_classes ) {

    global $_genesis_loop_args, $loop_counter;

    // Alter this number to change the number of columns – used to add class names
    $columns = 3;

    // Be able to convert the number of columns to the class name in Genesis
    $fractions = array( ”, ‘half’, ‘third’, ‘fourth’, ‘fifth’, ‘sixth’ );

    // Only want extra classes on grid posts, not feature posts
    if ( $loop_counter >= $_genesis_loop_args['features'] ) {
    // Make a note of which column we’re in
    $column_number = ( ( $loop_counter – $_genesis_loop_args['features'] ) % $columns ) + 1;

    // Add genesis-grid-column-? class to know how many columns across we are
    $grid_classes[] = sprintf( ‘genesis-grid-column-%d’, $column_number );

    // Add one-* class to make it correct width
    $grid_classes[] = sprintf( ‘one-’ . $fractions[$columns - 1], $columns );

    // Add a class to the first column, so we’re sure of starting a new row with no padding-left
    if ( 1 == $column_number )
    $grid_classes[] = ‘first’;
    }

    return $grid_classes;

    }

    http://beasomdesign.com/
    #86916

    Davinder Singh Kainth
    Participant
    Post count: 977

    Use grid loop plugin http://wordpress.org/plugins/genesis-grid-loop/ (you can also integrate code from plugin into your theme). See implementation here – stuffselect.com


    Need website customization services or other Genesis / WordPress help ?
    Davinder @ Design Studio iGuiding Media | My Blog | Fresh Genesis Themes Collection

    #87001

    Aticus21
    Member
    Post count: 4

    The grid loop plug in works great but my only issue with it is how would I make my home page display only one category? Is there a way to make a category page a home page?

    #87063

    Davinder Singh Kainth
    Participant
    Post count: 977

    Try solutions here – http://wordpress.stackexchange.com/questions/84417/show-specific-category-posts-on-genesis-framework-home-page


    Need website customization services or other Genesis / WordPress help ?
    Davinder @ Design Studio iGuiding Media | My Blog | Fresh Genesis Themes Collection

    #87104

    Aticus21
    Member
    Post count: 4

    So I was looking at your solution and came across this. – http://wpsmith.net/2013/genesis/genesis-grid-loop-in-genesis-1-9/
    Now from that my understanding is that I have to add.

    if ( function_exists( 'genesis_grid_loop' ) ) {
    	genesis_grid_loop(
    		array(
    			'features'              => 0,
    			'feature_image_size'    => 0,
    			'feature_image_class'   => 'alignright post-image',
    			'feature_content_limit' => 0,
    			'grid_image_size'       => 'thumbnail',
    			'grid_image_class'      => 'alignleft',
    			'grid_content_limit'    => 250,
    			'more'                  => __( '[Read more...]', 'child-domain' ),
    		) 
    	);
    } else {
    	genesis_standard_loop();
    }
    

    to my home.php Correct?

    Also I have to add

    <?php
     
    add_action( 'pre_get_posts', 'wps_include_cat_in_grid' );
    /**
     * Limit Query to one Category
     * 
     * @author Bill Erickson
     * @author Travis Smith
     * @link http://www.billerickson.net/customize-the-wordpress-query/
     * @link http://wpsmith.net/2013/genesis/genesis-grid-loop-in-genesis-1-9/
     * @param object $query WP Query data
     *
     */
    function wps_include_cat_in_grid( $query ) {
      
      if( $query->is_main_query() && wps_is_doing_grid_loop() ) {
    		$query->set( 'cat', '4' );
    	}
     
    }

    to my functions.php correct?

    If I wanted to add the code above into lets say grid.php to keep my functions.php clean do I need to do anything else for WP to find the code?

    • This reply was modified 2 months, 3 weeks ago by  Aticus21.
    • This reply was modified 2 months, 3 weeks ago by  Aticus21.
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.