Saat ini, isi front-page.php masih berupa fixed code. Kita belum menampilkan konten dinamis seperti pada kolom “From Our Blogs” dan “Upcoming Events”.
Untuk menampilkan konten dinamis, kita gunakan custom query. Fungsi tersebut adalah WP_Query(array), untuk dokumentasi lengkap click disini.
Code dibawah adalah hanya bagian yang diubah pada file front-page.php. Jika Anda menggunakan desain yang sama, silakan cari bagian From Our Blogs untuk mengubahnya.
<div class="full-width-split__two">
<div class="full-width-split__inner">
<h2 class="headline headline--small-plus t-center">From Our Blogs</h2>
<?php
$homePosts = new WP_Query(array(
'posts_per_page' => 2
));
while($homePosts->have_posts()){
$homePosts->the_post();
?>
<div class="event-summary">
<a class="event-summary__date event-summary__date--beige t-center" href="<?php the_permalink(); ?>">
<span class="event-summary__month"><?php the_time('M'); ?></span>
<span class="event-summary__day"><?php the_time('d'); ?></span>
</a>
<div class="event-summary__content">
<h5 class="event-summary__title headline headline--tiny"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h5>
<p><?php echo wp_trim_words(get_the_content(), 15) ?> <a href="<?php the_permalink(); ?>" class="nu gray">Read more</a></p>
</div>
</div>
<?php
}
wp_reset_postdata();
?>
<p class="t-center no-margin"><a href="<?php echo site_url('\blog') ?>" class="btn btn--yellow">View All Blog Posts</a></p>
</div>
</div>
Berikut full code dari front-page.php, setelah blog section menggunakan fungsi WP_Query();
<?php
get_header();
?>
<div class="page-banner">
<div class="page-banner__bg-image" style="background-image: url(<?php echo get_theme_file_uri('images/library-hero.jpg'); ?>);"></div>
<div class="page-banner__content container t-center c-white">
<h1 class="headline headline--large">Welcome!</h1>
<h2 class="headline headline--medium">We think you’ll like it here.</h2>
<h3 class="headline headline--small">Why don’t you check out the <strong>major</strong> you’re interested in?</h3>
<a href="#" class="btn btn--large btn--blue">Find Your Major</a>
</div>
</div>
<div class="full-width-split group">
<div class="full-width-split__one">
<div class="full-width-split__inner">
<h2 class="headline headline--small-plus t-center">Upcoming Events</h2>
<div class="event-summary">
<a class="event-summary__date t-center" href="#">
<span class="event-summary__month">Mar</span>
<span class="event-summary__day">25</span>
</a>
<div class="event-summary__content">
<h5 class="event-summary__title headline headline--tiny"><a href="#">Poetry in the 100</a></h5>
<p>Bring poems you’ve wrote to the 100 building this Tuesday for an open mic and snacks. <a href="#" class="nu gray">Learn more</a></p>
</div>
</div>
<div class="event-summary">
<a class="event-summary__date t-center" href="#">
<span class="event-summary__month">Apr</span>
<span class="event-summary__day">02</span>
</a>
<div class="event-summary__content">
<h5 class="event-summary__title headline headline--tiny"><a href="#">Quad Picnic Party</a></h5>
<p>Live music, a taco truck and more can found in our third annual quad picnic day. <a href="#" class="nu gray">Learn more</a></p>
</div>
</div>
<p class="t-center no-margin"><a href="#" class="btn btn--blue">View All Events</a></p>
</div>
</div>
<div class="full-width-split__two">
<div class="full-width-split__inner">
<h2 class="headline headline--small-plus t-center">From Our Blogs</h2>
<?php
$homePosts = new WP_Query(array(
'posts_per_page' => 2
));
while($homePosts->have_posts()){
$homePosts->the_post();
?>
<div class="event-summary">
<a class="event-summary__date event-summary__date--beige t-center" href="<?php the_permalink(); ?>">
<span class="event-summary__month"><?php the_time('M'); ?></span>
<span class="event-summary__day"><?php the_time('d'); ?></span>
</a>
<div class="event-summary__content">
<h5 class="event-summary__title headline headline--tiny"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h5>
<p><?php echo wp_trim_words(get_the_content(), 15) ?> <a href="<?php the_permalink(); ?>" class="nu gray">Read more</a></p>
</div>
</div>
<?php
}
wp_reset_postdata();
?>
<p class="t-center no-margin"><a href="<?php echo site_url('\blog') ?>" class="btn btn--yellow">View All Blog Posts</a></p>
</div>
</div>
</div>
<div class="hero-slider">
<div class="hero-slider__slide" style="background-image: url(<?php echo get_theme_file_uri('images/bus.jpg'); ?>);">
<div class="hero-slider__interior container">
<div class="hero-slider__overlay">
<h2 class="headline headline--medium t-center">Free Transportation</h2>
<p class="t-center">All students have free unlimited bus fare.</p>
<p class="t-center no-margin"><a href="#" class="btn btn--blue">Learn more</a></p>
</div>
</div>
</div>
<div class="hero-slider__slide" style="background-image: url(<?php echo get_theme_file_uri('images/apples.jpg'); ?>);">
<div class="hero-slider__interior container">
<div class="hero-slider__overlay">
<h2 class="headline headline--medium t-center">An Apple a Day</h2>
<p class="t-center">Our dentistry program recommends eating apples.</p>
<p class="t-center no-margin"><a href="#" class="btn btn--blue">Learn more</a></p>
</div>
</div>
</div>
<div class="hero-slider__slide" style="background-image: url(<?php echo get_theme_file_uri('images/bread.jpg') ?>);">
<div class="hero-slider__interior container">
<div class="hero-slider__overlay">
<h2 class="headline headline--medium t-center">Free Food</h2>
<p class="t-center">Fictional University offers lunch plans for those in need.</p>
<p class="t-center no-margin"><a href="#" class="btn btn--blue">Learn more</a></p>
</div>
</div>
</div>
</div>
<?php
get_footer();
?>