Desain theme saat ini, index.php digunakan untuk menampilkan homepage. Sebetulnya secara default index.php digunakan untuk menampilkan blog post. Sedangkan untuk menampilkan Homepage, front-page.php
Agar WordPress menggunakan file front-page.php untuk Homepage dan index.php sebagai blogpost, kita perlu melakukan beberapa langkah berikut.
Pertama, buat 2 Page baru, tanpa content dengan title adalah Home dan Blog.
Kedua, dari WordPress Dashboard, buka menu Setting – Reading. Pilih Your Homepage Displays ke A static page. Pilih page yang telah kita buat pada langkah sebelumnya. Pilih Home untuk Homepage dan Blog untuk Post page.
Ubah juga Blog pages show at most menjadi 2 atau angka yang cukup kecil, bertujuan untuk testing pagination. Lalu tekan tombol Save Changes.
Ketiga, buat file template baru dengan nama front-page.php, lalu copy seluruh isi index.php kedalam front-page.php
Ganti code dari index.php dengan code berikut.
<?php
get_header();
?>
<div class="page-banner">
<div class="page-banner__bg-image" style="background-image: url(<?php echo get_theme_file_uri('images/ocean.jpg') ?>);"></div>
<div class="page-banner__content container container--narrow">
<h1 class="page-banner__title">Welcome to our Blog!</h1>
<div class="page-banner__intro"><p>keep update with our latest post</p></div>
</div>
</div>
<div class="container container--narrow page-section">
<?php
while(have_posts()) {
the_post();
?>
<div class="post-item">
<h2 class="headline headline--medium headline--post-title"><a href="<?php the_permalink(); ?>"><?php the_title();?></a></h2>
<div class="metabox">
<p>Posted by <?php the_author_posts_link(); ?> on <?php the_time('n.j.y'); ?> in <?php echo get_the_category_list(', '); ?></p>
</div>
<div class="generic-content">
<?php the_excerpt(); ?>
<p><a class="btn btn--blue" href="<?php the_permalink();?>">Read more » </a></p>
</div>
</div>
<?php
}
echo paginate_links();
?>
</div>
<?php
get_footer();
?>
?>
