Support » Theme: Twenty Fourteen » Displaying second and other older posts in two columns

  • Hi there,

    I am trying to make the posts on my home page display like this:

    A (most recent post, one column, full width)

    B C (following posts, two columns, ideally with reduced font size accordingly, without affecting posts’ page neither the first post A)

    D E (idem)

    F G (idem)

    H I (idem, older posts here)

    and so on

    I found this useful code below, helping me partly. It puts everything on two columns (including the first post A, and without reducing the font size accordingly)

    in functions.php:

    add_filter('post_class','category_two_column_classes');
     
    function category_two_column_classes( $classes ) {
    global $wp_query;
    if( is_home() ) :
    $classes[] = 'two-column-post';
    if( $wp_query->current_post%2 == 1 ) $classes[] = 'two-column-post-left';
    endif;
    return $classes;
    }

    CSS:

    /* TWO COLUMNS POSTS */
    .two-column-post {
    	width: 46%;
    	float: left;
    	margin-left: 4%;
    	background-color: none;
    }
    
    .two-column-post-left {
    	clear: left;
    	margin-left: 1%;
    	background-color: none;
    }

    Other infos: It’s a 2014 child theme (but the original one now looks pretty much alike, since I accidentally made changes in it). Jetpack plugin is on. “Styles” and “Styles: TwentyFourteen” plugins are on too – have not used them for a while since I learned to code. The blog is this

    Any help or other ways of doing appreciated, thanks a lot!

    • This topic was modified 5 years, 8 months ago by evetslefurax.
Viewing 1 replies (of 1 total)
  • Thread Starter evetslefurax

    (@evetslefurax)

    Someone provided me with a code already (asked on the more generic support forum before here, link)

    Code is, in functions.php:

    add_filter('post_class','index_posts_layout_classes');
     
    function index_posts_layout_classes( $classes ) {
    global $wp_query;
    if( is_home() ) :
    $classes[] = $wp_query->current_post == 0 ? 'one-column-post' : 'two-column-post'; 
    if( $wp_query->current_post%2 == 1 ) 
    $classes[] = 'two-column-post-left';
    endif;
    return $classes;
    }

    CSS:

    /* TWO COLUMNS POSTS */
    .two-column-post {
    	width: 46%;
    	float: left;
    	margin-left: 4%;
    	background-color: none;
    }
    
    .two-column-post-left {
    	clear: left;
    	margin-left: 1%;
    	background-color: none;
    }
    
    .one-column-post {
    	width: 100%;
    	margin-left: 1%;
    	background-color: none;
    }

    Only things left is to reduce the font sizes of posts B-I accordingly to the posts’ newly reduced space, this without reducing it in the post page (not sure how though).

Viewing 1 replies (of 1 total)
  • The topic ‘Displaying second and other older posts in two columns’ is closed to new replies.