How to show front page(latest posts) in two columns?

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.

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

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?

This code examples are using below shortcode plugins

https://www.ads-software.com/plugins/list-category-posts/

https://www.ads-software.com/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.

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)

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.

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?

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.

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.

Hi Nobita.

Can you help with my problem here? – https://www.ads-software.com/support/topic/post-list-side-by-side?replies=1