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.

[code]

<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–>

[/code]

Tambahkan style ini pada css yang digunakan.

[code]

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

[/code]

Thanks to: alchymyth

1 thought on “WordPress Post 3 Columns”

Leave a Comment

Your email address will not be published. Required fields are marked *