This is part 2 from our tutorial about how to implement a new news pages in wordpress from scratch. In this part we only make the css style for item posts, and add a more details button to the post. You will see in the following code. A little below we have the video of implementation.

Full php and html code:

<?php
$news_posts_args = array(
'post_type' => 'post',
'posts_per_page' => -1
);
$news_posts = get_posts($news_posts_args);
?>
<?php if($news_posts):?>
<section id="main_news_section" class="main_news_section">
<div class="container">
<div class="section_name">
<h2>Stiri</h2>
</div>
<div class="news_container">
<?php foreach($news_posts as $k => $v):?>
<?php
$news_image = wp_get_attachment_image_src( get_post_thumbnail_id( $v->ID ), 'big_square');
?>
<div class="post_item">
<div class="table_row">
<div class="left">
<div class="background" style="background-image:url(<?=$news_image[0];?>)"></div>
</div>
<div class="right">
<div class="title">
<a href="<?=get_permalink($v->ID);?>"><?=$v->post_title;?></a>
</div>
<div class="description">
<p><?=strip_tags(substr($v->post_content, 0, 200));?> [...]</p>
</div>
<div class="read_more_button">
<a href="<?=get_permalink($v->ID);?>">Citeste Tot</a>
</div>
</div>
</div>
</div>
<?php endforeach;?>
</div>
</div>
</section>
<?php endif;?>

This code should work on every website if will do all steps from tutorial. And if you have posts as default wordpress "post". If you want to get other post type the only thing you need to do is to change the "post_type" parameter.

Here you can find the first part of wordpress news page implementation

If you have any question ask in the comments section.