Web Development. Client Satisfaction. Web Consultancy. Professional. UX. Fast. Responsive Design. Dynamic. Interactive. Innovative. Ecommerce. Wordpress plugins. Prestashop modules. You name it.

How To Implement News Page In WordPress From Scratch –  WordPress Tutorial Part 2

How To Implement News Page In WordPress From Scratch – WordPress Tutorial Part 2

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.

 

Leave a Reply

avatar
  Subscribe  
Notify of