[UPDATE] Cara Membuat Custom Page Special

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
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(__('&larr; Previous Entries','public')) ?>
 </div>
 <div>
 <?php previous_posts_link(__('Next Entries &rarr;','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 :D 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 &raquo;','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 &rarr;','public')); ?>
				</div>

<div class="botmeta">
<div class="tagged">
<?php the_tags('Tags: ', ', ', '<br />'); ?>
</div>
<div class="commr">
<?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?>
</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(__('&larr; Previous Entries','public')) ?>
</div>
<div class="alignright">
  <?php previous_posts_link(__('Next Entries &rarr;','public')) ?>
</div>
</div>
<?php } ?>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Tulisan ini permintaan dari saudara saya Annosmile, semoga bermanfaat

45 thoughts on “[UPDATE] Cara Membuat Custom Page Special

  1. lumayan ribet juga prosesnya…. tapi di patut di coba… nice post kang .. tanks ya

  2. waahhh sangat membantu banget gan,,oya gan ane mau tanya nih gan tentang contom page,,jadi gini gan bisa kah kita membuat costom page yang isi di dalamnya semacam dasboard yang nantinya bisa di terapkan sebagai dasboard member,,dan si member bisa membuat artikel di situ dan melihat hasil postingan yang sudah di aprove sama adminnya, tolong email ane ya gan makasih.,,salam suses :D

  3. mas, saya kan nyoba membuat sebuah plugin,, saya install wordpress di localhost. nah disitu kan aktif di dashboard admin,, bagaimana cara dia bisa tampil dengan membuat sebuah page baru sendiri ketika visit site??
    apakah harus membuat script php sendiri yg fungsinya untuk tampil ke user?

    1. Pengaturan seperti apa? kalau hanya membuat Page Template baru tinggal modifikasi aja page.php kemudian simpan sebagai page-baru.php. Di atas sendiri dari kode ditulis seperti ini

      /*
      Template Name: Page Baru
      */
      

      Langkah selanjutnya tinggal bikin Page baru dan arahkan ke Page Baru sebagai kustom pagenya

  4. 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.

  5. Pingback: Rio Purnomo
  6. Pingback: Nurudin Jauhari ?
  7. 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 :)

    1. Setau saya kalau tulsian the_excerpt() sampean masukkan sewaktu Posting (coba di cari field excerpt) dan masukan dengan penambahan paragraph make dengan sendirinya nanti the_excerpt() mas taufiq akan ada paragraph sebanyak mas taufiq bikin di bagian excerpt.

  8. 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… :-) :-) :-)

  9. 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 :)

  10. 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

  11. 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 …

  12. Pingback: jauhari
  13. Pingback: Nurudin Jauhari

Leave a Reply

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

Name *