Mari Belajar WordPress lagi, kali ini kita akan coba membahas tentang cara bikin custom page dengan custom loop dan tentu saja custom query. Bingung? Tidak kan? oke mari kita lanjutGan.
Tujuan pembelajaran WordPress kali ini, adalah untuk membuat suatu page khusus dalam blog atau website kita yang mana di page khusus itu hanya akan memuat tulisan dari kategori tertentu (kita juga bisa menggunakan beberapa parameter selain kategori, tapi saya akan kasih contoh dengan katogori dahulu) Contohnya, saya mempunyai halaman wordpress theme gratis, lha kalau kita coba simak dihalaman itu hanya menampilkan tulisan saya dengan jenis WordPress theme kan?
Cara Bikin Custom Page dengan Custom Loop dan Query WordPress
Oke, Mari kita mulai, siapkan lapak dulu biar nyaman dan hasilnya mantap. Sekarang bukan text editor favorit kalian dan lakukan duplikasi dari page.php di theme yang sampean sedang pake.
Jika sudah rename namanya (contoh page-custom.php) kemudian buka file page-custom.php tadi dan tambahkan sedikit kode diatasnya seperti ini
<?php /* Template Name: Page Custom */ ?>
Sebelum melangkah lebih jauh, saya akan sedikit jelaskan fungsi kode diatas, fungsinya kode diatas sebagai perkenalan kepada mesin WordPress bahwa pada theme yang sedang dipake ada Custom Template page. Dengan nama Page Custom. Oke? LanjutGan
Sekarang kita akan menulis kode sedikit lebih banyak, jadi daripada sedikit pusing nanti kodenya COPAS aja terus di MODIF. Anda bisa menambah kode ini diakhir looping/query asli dari page-custom.php setelah ketemu akhir dari looping itu segera tambahkan kode berikut ini
<?php $temp_query = $wp_query; ?>
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$sticky=get_option('sticky_posts');
$args=array(
'caller_get_posts'=>1,
'category_name' => 'Tricks',
'post__not_in' => $sticky,
'paged'=>$paged,
'posts_per_page'=>6,
);
//query_posts($args);
$my_query = new WP_Query($args);
while ($my_query->have_posts()) : $my_query->the_post();
?>
<div id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div>
<p><?php the_excerpt(); ?></p>
</div>
<div><?php the_tags('Tags: ', ', ', '<br />'); ?> <?php if(function_exists('echo_tptn_post_count')) echo_tptn_post_count(); ?></div>
<div></div>
</div>
<!-- Post -->
<?php endwhile; ?>
<br />
<?php if(function_exists('wp_pagenavi')) { ?>
<div>
<?php
wp_pagenavi(); ?>
</div>
<br />
<?php } else { ?>
<div>
<div>
<?php next_posts_link(__('← Previous Entries','public')) ?>
</div>
<div>
<?php previous_posts_link(__('Next Entries →','public')) ?>
</div>
</div>
<?php } ?>
<?php
$wp_query = $temp_query;
wp_reset_query();
?>
Setelah sukses menulis kode yang lumayan tadi, mari kita pelajari apa yang kita tulisakan tadi 
Pada baris pertama kode ini $temp_query = $wp_query; bertujuan untuk menyimpan query asli, tujuannya apa? Salah satu tujuannya untuk mengembalikan query itu ketika custom loop kita telah selesai, kenapa harus dikembalikan? agar Comment bisa tepat sasaran, karena kalau tidak kembalikan di terakhir baris ini $wp_query = $temp_query; bisa bisa nanti ketika ada pengunjung kasih komen akan lari ke artikel terakhir dari custom loop kita. Bisa fatal bukan? Pada bagian ini
$args=array( 'caller_get_posts'=>1, 'category_name' => 'Tricks', 'post__not_in' => $sticky, 'paged'=>$paged, 'posts_per_page'=>6, );
Kita bisa bermain-main dengan parameter yang kita mau, seperti category_name, post_per_page dan lain lain, silahlah explore sendiri aja
Setelah kode tadi sudah dianggap beres, silahkan diupload di server dan bikin page baru dengan Title terserah dan jangan lupa pada bagian Page Template pilih template yang barusan kalian bikin ini. Semoga tips sederhana Cara Membuat Custom Page dengan Custom Loop dan Query pada WordPress ini bermanfaat, jika ternyata kode saya ini kurang sempurna, mohon maaf dan jika ada yang bisa lebih menyempurnakan dengan senang hati akan kami terima. Aritkel ini juga terdapat bahasa bule yang bisa disimak di Create Custom Page with Custom Loop
Berikut Kode Komplitnya yang saya coba di Client saya
<?php
/*
Template Name: Page Custom
*/
?>
<?php get_header(); ?>
<?php if ( $paged < 2 ) : // Do stuff specific to first page ?>
<div class="sekapur-sirih">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><?php the_title(); ?></h2>
<div class="entry">
<?php the_excerpt('<p class="serif">'.__('Read the rest of this page »','public').'</p>'); ?>
<?php wp_link_pages(array(__('before','public') => '<p><strong>',__('Pages:','public'),'</strong> ',__('after','public') => '</p>','next_or_number' => __('number','public'))); ?>
</div>
</div>
<?php endwhile; endif; ?>
<?php edit_post_link(__('Edit this entry.','public'), '<p>', '</p>'); ?>
</div>
<?php endif; ?>
<div class="ebook">
<h2 class="pagetitle">Artikel Tricks</h2>
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$sticky=get_option('sticky_posts');
$args=array(
'category_name'=>'Tricks',
'caller_get_posts'=>1,
'post__not_in' => $sticky,
'paged'=>$paged,
'posts_per_page'=>6,
);
query_posts($args);
while(have_posts()) : the_post();
?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div class="metadata">
<?php _e('by','public'); ?> <?php the_author_posts_link(); ?>
<span class="time"><?php the_date('d F Y') ?> <?php the_time(); ?></span> <?php edit_post_link(__('Edit','public'), '', ''); ?>
</div>
<div class="entry">
<?php the_content(__('Read the rest of this entry →','public')); ?>
</div>
<div class="botmeta">
<div class="tagged">
<?php the_tags('Tags: ', ', ', '<br />'); ?>
</div>
<div class="commr">
<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>
</div>
</div>
</div>
<?php endwhile; ?>
<?php if(function_exists('wp_pagenavi')) { ?>
<div class="navinavi">
<?php
wp_pagenavi(); ?>
</div>
<br class="clear" />
<?php } else { ?>
<div class="navigation">
<div class="alignleft">
<?php next_posts_link(__('← Previous Entries','public')) ?>
</div>
<div class="alignright">
<?php previous_posts_link(__('Next Entries →','public')) ?>
</div>
</div>
<?php } ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Tulisan ini permintaan dari saudara saya Annosmile, semoga bermanfaat
RT @jauhari Cara Membuat Custom Page Special http://goo.gl/fb/HZUEj #wordpresstips #custompage #tutorial
RT @jauhari Cara Membuat Custom Page Special http://goo.gl/fb/HZUEj #wordpresstips #custompage #tutorial
wooohhh kudu belajar jopo montro iki critane..
woh mantap gan, dulu didats pernah bikin tutor ginian tapi bukan untuk page, intinya sih hampir sama memisahkan salah satu postingan dari kategori pada posisi berbeda. praktekah
.-= geblek´s last blog ..Jembatan Barelang Di Malam Hari =-.
matur nuwun banget mas..
sangat membantu sekali
.-= annosmile´s last blog ..Ka’bah Itu Berada di Pantai Selatan Yogyakarta =-.
ngakak moco’ komentmu nno’
bukan’e kamu di awal paragraf sudah terhipnotis kata bingung
xixixixi
.-= raiderhost´s last blog ..Ternyata Cinta yang Menguatkan Aku =-.
saya bingung bro
, eh itu foto siapa saja?
[...] Seminggu saya habiskan untuk mempelajari cara membuat custom page dengan menggunakan custom query. Akhirnya saya bertanya kepada Masedi.net dan Mas jauhari yang dijawab dengan postingan Cara Membuat Custom Page Special. [...]
Kalau di WP gratisan bisa nggak mas? (mmm)
.-= Perawan Desah´s last blog ..PR blogku 3 =-.
mkasih ya. info yg membantu. lnjtkan!!
artikel menarik, walaupun saya masih blank dengan PHP
Oww jdi gtu caranya ya mas, dlu prnah coba cara yg dikit beda tpi gak berhasil. Thanks
Trus ini intinya gimana ??
buat “Custom Page” … apa bedanya dengan “Page Template” yang biasa dipake untuk merubah tampilan pada page tertentu ??
Sorry bro masih bingung ini …
Ya kalau page template standard kan hanya menampilkan data default.. lha ini salah satu cara meng Kustomnya pakde…
saya coba pake themes default (kubric) wordpress
wp-page navinya gak jalan mas
cuma keluar tulisan PAGE 1 – 0
boleh tau yg kemarin blog yg kata mas jauhari bisa menggunakan code diatas
pake wp-page navi versi berapa?
codenya sama persis atau ada penambahan mas?
looping/query asli dari page-custom.php itu sebelah mana mas? maaf gak tau istilah2nya
Nanti saya UPDATEnya tutorial saya mas.. CODE lengkapnya.. biar mudah…
komentar sama masuk spam mas
.-= annosmile´s last blog ..Menikmati Sejuknya Kebun Raya Bogor =-.
Mas jauhari, ane mau tanya. Klo untuk custom page untuk gambar hasil attach di blog kita apa bisa pakai cara ini. Sebagai contoh di moreindonesia.com ( bukan blog saya ) tp punya temen hehe. saat gambar nya di klik maka menghasilkan tampilan blog yang berbeda ^_^. terima kasih pencerahan nya
Ko ga dikasih prevew page-nya kang? jadi bingung + ragu saya mau cobanya di Blepot.Com
Gan gimana caranya bikin tampilan seperti di bawah post artikel,….Pembaca kami juga menyukai nah di bawahnya ada recent post dg gampar maupun tulisan gimana cara buatnya….
terimakasih banyak…
Mantap bos
thank
infonya sob..
gitu pembelajaran….hehehe
Hasil ending-nya kayak apa sih mas?!!!
Aduh …rumit ya…ada yg lebih simple!?? maklum msh newbie!!
wew, ruwet juga neh script2nya, hehe. salam
waduch…. klw soal php mah ribet amat yaa (sick)
lbih suka aq Html biasa …. (rock)
Mantap infonya, makasih atas ilmunya
mas jauhari, itu kan pake the_excerpt(); . kalo pake the_excerpt itukan otomatis tulisan menjadi satu paragraf. misal di konten saya terdapat 2 paragraf tetapi dengan the_excerpt() maka tulisan tersebut menjadi 1 paragraf. nah yang saya pertanyakan bagaimana membuat summary di custom page dengan menggunakan the_content()??
klo defaultnya di index.php, category.php, tag.php, search.php kan biasanya pake the_content() dan saat di query ada summary teksnya. bagaimana dengan kasus ini??
terima kasih atas jawabannya mas
Setau saya kalau tulsian
the_excerpt()sampean masukkan sewaktu Posting (coba di cari field excerpt) dan masukan dengan penambahan paragraph make dengan sendirinya nantithe_excerpt()mas taufiq akan ada paragraph sebanyak mas taufiq bikin di bagian excerpt.Gan, mhn bantuan nih.. di’dashboardku kok gak ada nyang namanya ‘plugin’ ya?? (mode nubiw)… (sleeping) (sleeping)
Ini harus SELF INSTALL WordPress mas.. bukan yang WordPress.com
[UPDATE] Cara Membuat Custom Page Special / ID-JAUHARI http://t.co/pXKWlty via @PanduanWP
RT @jauhari: [UPDATE] Cara Membuat Custom Page Special / ID-JAUHARI http://t.co/pXKWlty via @PanduanWP
Laaa…hurufnya kriting semuanya…pusing deh mas!!!
kursus donk mass…bingung neh,simpelnya gini bukan mas kalo sekiranya total baris d postingan kita ada 10 trus pake cara mas bisa tampil 3-5 baris yah??betul g c mas??kalo mmg betul brarti ini mmg yg saya lagi carii!!!tlg d kroscek mas,maklum newbie mode on.
wah,. gak mudeng mas hurufnya,..
hahhahaha
makasih udah bagi caranya sgt bermanfaat.
sukses slalu Gan.
pak, mo nanya
Gimana cara menampilkan pengaturan “PAGE TEMPLATE”?
Saya coba2 gak nemu pengaturannya
Pengaturan seperti apa? kalau hanya membuat Page Template baru tinggal modifikasi aja
page.phpkemudian simpan sebagai page-baru.php. Di atas sendiri dari kode ditulis seperti iniLangkah selanjutnya tinggal bikin Page baru dan arahkan ke Page Baru sebagai kustom pagenya