WordPress Post 3 Columns

Kebetulan sekarang lagi ngerjain proyek wordpress yang butuh layout dalam bentuk tiga (3) kolom. Saya akan share cara yang saya gunakan untuk mengubah layout yang biasa single column menjadi three columns.

Pada file template / loop yang dipakai, sesuaikan strukturnya dengan code ini.


<div id="column-wrap">
<?php $count = 0;

while(have_posts()) : the_post(); ?>

<div class="box<?php if( $count%3 == 0 ) { echo '-1'; }; $count++; ?>">

<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<!--and other output of the loop -->

</div>

<?php endwhile; ?>
</div><!--end column-wrap-->

Tambahkan style ini pada css yang digunakan.


.box-1 { float:left; clear:left; width: 30%; margin-left: 0; }
.box { float:left; width: 30%; margin-left: 3%; }

Thanks to: alchymyth

One thought on “WordPress Post 3 Columns

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s