WordPress.org

Support

Support » How-To and Troubleshooting » 2 column layout on blog home

2 column layout on blog home

  • so may be this is th ebest solution
    having the xx latest post from all categories shown as
    1 2
    3 4
    .. xx

    important.as they contain videos, videos must be playable from the main page

    i know it is a common issues, but there are so many php around, i don’t know where to start
    i use twentytwelve

Viewing 10 replies - 1 through 10 (of 10 total)
  • Moderator Michael

    @alchymyth

    Forum Moderator

    start with creating a child theme of Twenty Twelve (if you don’t have one already) http://codex.wordpress.org/Child_Themes

    one possibility for posts in columns:

    – create a functions.php in the child theme http://codex.wordpress.org/Child_Themes#Using_functions.php (you will need to use FTP or the file management system of your hoster to create the file)

    – add for example:

    add_filter('post_class', 'postclass_postspage_columns_correction');
    function postclass_postspage_columns_correction( $classes ) {
      if ( is_home() ) $classes[] = 'post-column-'.(($wp_query->current_post%2)?'right':'left');
    return $classes;
    }

    – in style.css of the child theme, add for example:

    .post-column-left, .post-column-right { float: left; width: 45%; padding: 1% 2% 1% 1%; }
    .post-column-left { margin-right: 1.8%; clear: left; }

    might need some refinement.
    so far, this is one possibility to show posts in two columns;

    further details depend on what exactly you want to show per post in these columns; it might be useful if you enable the post format ‘video’ for the posts…
    http://codex.wordpress.org/Post_Formats

    ok i have done it but there is something wrong with the functions.php i havee created with your code

    you cancheck

    http://www.psycotube.net

    ok the main error has now disappeared since i have put
    <?php at the beginning
    and
    ?> at the end

    but still weird character appears on the screen now
    and i don’t have 2 columns

    ok last update
    no multicolumn

    i don’t understand what to do with post_formats

    ok don’t know why if applied to an existing child theme it would not work at all
    now at least 1 can see the split, but the right column is not populated

    also , how do i rearrange the size of media in the post to make it automatically fit?

    i have some more adjustment to css and now at least i have 2 column
    but i need to adjust it properly, don’t like like this
    there sis something wrong yet

    .post-column-left { float: left; width: 40%; padding: 1% 2% 1% 1%; }
    .post-column-right { margin-right: 1%; clear: left; }

    Moderator Michael

    @alchymyth

    Forum Moderator

    the css post_classes don’t seem to get output properly;

    please post the full code of functions.php of the child theme.

    this is th functions,php in child(copy and paste from yours)

    <?php
    
    add_filter('post_class', 'postclass_postspage_columns_correction');
    function postclass_postspage_columns_correction( $classes ) {
      if ( is_home() ) $classes[] = 'post-column-'.(($wp_query->current_post%2)?'right':'left');
    return $classes;
    }
    
    ?>

    and this is the css how i modified to have 2 columns shown, but can’t adjust the right column position

    .post-column-left { float: left; width: 45%; padding: 1% 2% 1% 1%; }
    .post-column-right { margin-right:0px;  }

    Moderator Michael

    @alchymyth

    Forum Moderator

    my mistake – there has to be a global $wp_query; in the code;

    corrected:

    add_filter('post_class', 'postclass_postspage_columns_correction');
    function postclass_postspage_columns_correction( $classes ) {
      global $wp_query;
      if ( is_home() ) $classes[] = 'post-column-'.(($wp_query->current_post%2)?'right':'left');
    return $classes;
    }

    the matching css should be:

    .post-column-left, .post-column-right {
    		float: left;
    		width: 46%;
    		padding: 1%;
    	}
    	.post-column-left {
    		margin-right: 3.9%;
    		clear: left;
    	}

    ok now it works with your new codes
    but how can i move to right?there is a lot of empty space

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘2 column layout on blog home’ is closed to new replies.