Tutorial Cara Membuat Sticky Post dan Merubah Stylenya

Sticky post menurut pengertian saya adalah satu atau lebih penggalan artikel di homepage yang posisinya tetap pada urutan paling atas walaupun ada artikel baru yang dipublish. Sticky post ini bisa digunakan untuk menampilkan artikel penting dari blog anda atau bila anda pemain program Paid To Review dan harus menampilkan link di homepage yang diberikan dari job yang anda dapatkan selama beberapa hari, anda bisa menggunakan sticky post ini.

Sekarang bagaimana caranya membuat sticky post itu ? Tidaklah sulit membuat sticky post itu, silahkan anda ikuti caranya di bawah ini.

1. Masuk dashboard
2. Kemudian pilih Posts »Add New
3. Setelah itu anda lihat di kanan layar anda ada kotak Publish
4. Klik Edit pada Visibility : Public



5. Kemudian akan muncul drop down, centang Stick this post to the front page bila anda ingin membuat artikel anda sebagai Sticky post Sticky post

Cara Merubah Style Sticky Post

Secara default styling/design dari sebuah sticky post akan sama dengan style dari postingan/artikel biasa, mungkin anda ingin agar pengunjung blog anda tahu bahwa ada stiky post di blog anda, satu-satu cara adalah dengan membedakan style sticky post dengan artikel lainnya. Untuk merubah style sticky post anda harus membuka file index.php, kode standard rata-rata template untuk menampilkan artikel biasanya seperti ini :

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<?php the_content(); ?>
<?php endwhile; endif; ?>

Untuk menambahkan class pada sticky post anda cukup merubahnya menjadi seperti ini

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
<div <?php post_class(); ?>>
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<?php the_content(); ?>
</div>
<?php endwhile; endif; ?>

Atau apabila anda bingung dengan kode di atas, silahkan anda tambahkan div baru sebagai pembungkus artikel/post.

<div <?php post_class(); >>
Div pembungkus artikel, looping artikel.
</div>

Fungsi dari kode div tersebut adalah sebagai div class generator yang akan membuat class baru, salah satunya class=sticky. Setelah anda selesai menambahkan kode di atas, sekarang anda hanya tinggal membuat style baru untuk class sticky. Buka file style.css kemudian anda masukan kode css di bawah ini.

.sticky {
    background: #000;
    border: 2px solid black;
}

*nb : styling silahkan disesuaikan dengan keinginan anda masing-masing

Semoga bermanfaat and good luck