WordPress.org

Ready to get started?Download WordPress

Forums

raindrops
[resolved] How to show front page(latest posts) in two columns? (11 posts)

  1. IamPetard
    Member
    Posted 12 months ago #

    Okay so either I am a little bit stupid or there's no option for this.

    If I select the option to have latest posts shown on the front page, how do I make them show in 2 columns?
    I'm a WordPress noob so be gentle if its a trivial thing.

    Picture of what I want is on this link: CLICKY

    Nobita help out! :D

  2. nobita
    Member
    Theme Author

    Posted 11 months ago #

    Hi IamPetard

    how do I make them show in 2 columns?

    Please add to style.css last line.

    When browser width is larger than 640px, it indicates by 2 columns.

    @media screen and (min-width : 640px){
    
    	.home ul.index > li{
    
    		display:inline-block;
    		clear:none;
    	}
    
    	.home .index > li:nth-child(odd){
    
    		width:50%;
    		float:left;
    		border:1px solid #fff;
    		clear:both;
    	}
    	.home .index > li:nth-child(even){
    
    		width:46%;
    		float:right;
    		border:1px solid #fff;
    	}
    }

    Thank you.

  3. IamPetard
    Member
    Posted 11 months ago #

    Excellent, exactly what I wanted! I even understand the code so I can edit it accordingly. Thanks very much, you are loved <3

  4. IamPetard
    Member
    Posted 11 months ago #

    When I'm asking already, how would I be able to sort the new posts by category(or pages)? Lets say I want one column to have 3 categories(or pages), and the other column showing the newest posts from the rest of categories(or pages)?

    Would be very useful if I could make that work!

    So basically I would like to have a feed of newest posts where the left column would give updates from x y and z category(or pages), while the column to the right would give updates from the rest.
    Can that be done?

  5. nobita
    Member
    Theme Author

    Posted 11 months ago #

    This code examples are using below shortcode plugins

    http://wordpress.org/plugins/list-category-posts/

    http://wordpress.org/plugins/display-posts-shortcode/

    Step1: Create a static page.

    Step2: Select the template 'brank front'

    Step3: title imput '2col'

    entry content below.

    If you need responsive nest grid 2column

    class name must need.

    <div class="line">
    	<div class="unit size1of2">
    		[catlist]
    	</div>
    	<div class="unit size1of2">
    		[display-posts]
    	</div>
    </div>

    If you need fluid 2column

    <div class="yui-g">
    	<div class="yui-u first">
    		[catlist]
    	</div>
    	<div class="yui-u">
    		[display-posts]
    	</div>
    </div>

    Step4: Dashboard settings / reading / Reading Settings set static page and select '2col'

    submit and show front page.

    Thank you.

  6. IamPetard
    Member
    Posted 11 months ago #

    This works but it displays links to posts, not the posts themselves.

    I want the posts to be shown the same way they're shown with your previous code, but so every column shows posts from specific categories. Example below:
    CLICKY

    I would assume this would be something similar to your first code but it wouldn't show even and odd posts but posts by category
    .home .index > li:nth-child(odd) (odd changed with category or something)

  7. nobita
    Member
    Theme Author

    Posted 11 months ago #

    a short code is the simplest -- various displays can be chosen although shown

    <div class="line">
    	<div class="unit size1of2">
    
    [catlist content=yes date=yes author=yes id=1,-32,16]
    </div>
    <div class="unit size1of2">
    
    [display-posts include_excerpt="true" image_size="thumbnail" wrapper="div"]
    </div>
    </div>

    Thank you.

  8. IamPetard
    Member
    Posted 11 months ago #

    Thank you very much nobita it works really well! I have one more question left which I don't know can you answer but I will ask since you seem to know everything so far.

    How can I show an embedded video using the display posts? Currently if I put a link in the post and use the shortcode to show full content, it just copies the link, not the video.
    I looked through the support for that plugin and I found an older post where the plugin creator said a filter should be added to functions.php:

    /
    add_filter( 'display_posts_shortcode_output', 'be_display_posts_full_content', 4, 7 );
    function be_display_posts_full_content( $output, $atts, $image, $title, $date, $excerpt, $inner_wrapper ) {
    
    	// See if 'full_content' is set in shortcode.
    	// Ex: [display-posts full_content="true"]
    	if ( isset( $atts['full_content'] ) && "true" == $atts['full_content'] )
    		$excerpt = '<div class="listing-content">' . get_the_content() . '</div>';
    
    	// Now let's rebuild the output. Only the excerpt changed so we're using the original $image, $title, and $date
    	$output = '<' . $inner_wrapper . ' class="listing-item">' . $image . $title . $date . $excerpt . '</' . $inner_wrapper . '>';
    
    	// Finally we'll return the modified output
    	return $output;
    }

    Using this and then posting [display-posts full_content="true"] doesn't show the embedded video, do you maybe know how can I do that?

  9. nobita
    Member
    Theme Author

    Posted 11 months ago #

    WordPress supports Oembed.

    It is displayed as video only by sticking the link of youtube on the text of contribution.

    To one question, please limit to the heart that one answer is a rule of a forum, and place it. :)

    Thank you.

  10. IamPetard
    Member
    Posted 11 months ago #

    Alright thanks for the help! The Oembed doesn't work with the display posts shortcode so I'll have to find an alternative!
    If you can tell me though can you help me with this? I don't know should I create a new post here so maybe you try to help if you know how.

  11. dzulfriday
    Member
    Posted 7 months ago #

    Hi Nobita.

    Can you help with my problem here? - http://wordpress.org/support/topic/post-list-side-by-side?replies=1

Reply

You must log in to post.

About this Theme

About this Topic