WordPress.org

Ready to get started?Download WordPress

Forums

2 column layout on blog home (11 posts)

  1. stefanocps
    Member
    Posted 11 months ago #

    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

  2. alchymyth
    The Sweeper & Moderator
    Posted 11 months ago #

    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

  3. stefanocps
    Member
    Posted 11 months ago #

    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

  4. stefanocps
    Member
    Posted 11 months ago #

    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

  5. stefanocps
    Member
    Posted 11 months ago #

    ok last update
    no multicolumn

    i don't understand what to do with post_formats

  6. stefanocps
    Member
    Posted 11 months ago #

    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?

  7. stefanocps
    Member
    Posted 11 months ago #

    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; }

  8. alchymyth
    The Sweeper & Moderator
    Posted 11 months ago #

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

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

  9. stefanocps
    Member
    Posted 11 months ago #

    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;  }
  10. alchymyth
    The Sweeper & Moderator
    Posted 11 months ago #

    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;
    	}
  11. stefanocps
    Member
    Posted 11 months ago #

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

Reply

You must log in to post.

About this Topic