Membuat Pagination WordPress Tanpa Menggunakan Plugin

Pada Blog yang memakai mesin WordPress tentunya sistem paging yang dipakai adalah standar, hanya berupa “Previous Posts & Next Post” dan yang sejenis. Tadi saya kepikiran bagaimana caranya agar paging ini berupa angka dan tanpa menggunakan plugin. Seperti yang kita semua ketahui bahwa untuk plugin paging seperti ini banyak sekali tersedia secara gratis.

Setelah browsing akhirnya saya temukan sumbernya disini dan juga disini.

Oke kita tampilkan kodenya :

function pagenavi( $p = 2 ) { // pages will be show before and after current page
    if ( is_singular() ) return; // don't show in single page
    global $wp_query, $paged;
    $max_page = $wp_query->max_num_pages;
    if ( $max_page == 1 ) return; // don't show when only one page
    if ( empty( $paged ) ) $paged = 1;
    // echo '<span class="pages">Page: ' . $paged . ' of ' . $max_page . ' </span> '; // pages
    if ( $paged > $p + 1 ) p_link( 1, 'First' );
    if ( $paged > $p + 2 ) echo '... ';
    for( $i = $paged - $p; $i <= $paged + $p; $i++ ) { // Middle pages
      if ( $i > 0 && $i <= $max_page ) $i == $paged ? print "<span class='page-numbers current'>{$i}</span> " : p_link( $i );
    }
    if ( $paged < $max_page - $p - 1 ) echo '... ';
    if ( $paged < $max_page - $p ) p_link( $max_page, 'Last' );
}
function p_link( $i, $title = '' ) {
    if ( $title == '' ) $title = "Page {$i}";
    echo "<a class='page-numbers' href='", esc_html( get_pagenum_link( $i ) ), "' title='{$title}'>{$i}</a> ";
}

Sekarang kita panggil function diatas di bagian loop seperti ini :

<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
        <!-- isi loop -->
    <?php endwhile;  ?>
        <div class="navigation">
            <?php pagenavi(); ?>
        </div>
    <?php else : ?>
<?php endif; ?>

Sekarang kita masuk ke CSSnya biar bagus tampilannya :

/* Navigation CSS */
.navigation {
    padding-top: 10px;
    margin-top: 10px;
}
.page-numbers{
    padding: 0 5px;
    margin: 0 10px 10px 0;
}
.navigation a {
    color: #b3b3b3;
    text-decoration: none;
}
.navigation a:hover {
    text-decoration: none;
}
.page-numbers:hover{
    border: solid 1px #b3b3b3;
    padding: 0 5px;
    margin: 0 10px 10px 0;
}

Mudah sekali kan? 🙂

Baca Juga:  Shortcode WordPress untuk Menampilkan Artikel Terkait

Teknik ini saya pakai di Theme WordPress selanjutnya dari http://wpactive.com

Komentar

comments

zulsdesign

Seorang Web Designer, Web Developer, Wordpress Development dan independen Blogger. Spesialisasi Personal Branding. Selalu haus akan ilmu tentang perkembangan dunia Web Design, Social Media, Online Marketing. Kadang-kadang juga berprofesi sebagai konsultan Website dadakan :)

8 Responses

  1. boyin says:

    pertanyaan nya juga sama mas..itu code nanti di paste kemana mas, maklum oot nih..

  2. tAufix says:

    Itu klo udah pasang kodenya di function.php perlu pasang kode di index.php nggak?

    Dulu waktu saya pake plugin pagenavi kan kudu masang kode lagi di index.php nya

  3. massol507 says:

    Sip berhasil mas. Kalo mau menghide Older Post dan Newer Postnya gimana mas. suwun

  4. makasih ilmunya. Langusng dipraktek in ya… 🙂

  5. rastu says:

    mas, code itu dimasukkan ke mana mas?

  6. rastu says:

    mas, code tersebut lantas dimasukkan ke mana ya?

  1. June 23, 2011

    […] » Membuat Pagination WordPress Tanpa Menggunakan Plugin […]

Leave a Reply

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

grain storage steel silo grain bins