Buat Theme WP: Konten

Bukan blog namanya kalau ndak memunculkan konten. Nah, tutorial membuat theme WP kali ini akan beranjak turun ke bawah yaitu ke bagian konten. Disini nanti akan kita munculkan artikel-artikel blog yang sudah susah payah dan berpeluh serta berderai air mata kita tulis dengan tinta emas kita… *lebay*

Untuk itu mari fokus lagi ke index.php dan kita akan mengutak-atik kode ini:

<div id="content">
   Artikel akan muncul disini
</div>

Looping

Stop dulu! sebelum kita beranjak ke kode, saya perlu jelaskan dulu soal istilah looping. Looping artinya perulangan. Dalam WordPress pengulangan ini dilakukan untuk menampilkan artikel. Misalnya di halaman depan kita setting untuk tampil 10 artikel, maka looping akan melakukan pengulangan perintah menampilkan artikel hingga 10 kali.

Untuk melakukan loop, biasanya kita memakai perintah while. Yang artinya, selama masih ada artikel yang ingin ditampilkan, maka ulangi lagi. Perintah ini sangat fleksibel. Ketika kita membuat halaman artikel, berarti kan disana cuma ada 1 artikel saja yang akan ditampilkan. Maka while pun akan bekerja 1 kali saja. Enak kan?

Banyak fungsi-fungsi WP yang harus dimasukkan dalam loop ini. Artinya anda tidak bisa meletakkan di luar loop. Contoh yang paling sering ditemui adalah fungsi the_title, the_content, the_date, dll.

Sekarang kita coba belajar bikin loop dulu. Ini kodenya. Pasang kode ini menggantikan tulisan Artikel akan muncul disini

  <div id="content">
   <?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
      <?php the_title();?><br/>
    <?php endwhile;?>
   <?php endif;?>
  </div>

Kita bahas satu per satu ya. Pertama fungsi have_posts(). Fungsi ini untuk mengecek apakah ada tulisan yang ingin ditampilkan. Kita pakai fungsi IF untuk pengecekan. Jika have_posts ada isinya, maka perintah di bawahnya akan di eksekusi. Jika tidak ya langsung ke endif.

Kemudian while seperti dijelaskan diatas. Selama ada tulisan (have_post) maka the_post. Fungsi the_post digunakan untuk mengambil data di have_post dan kemudian dengan fungsi-fungsi lainnya kita akan menampilkannya satu per satu.

Sebagai bahan belajar kali ini, kita cuma akan menampilkan judul blog saja dan mengakhirinya dengan tanda <br/> untuk mengganti baris.

Sekarang jika anda melihat blog, maka akan ada judul-judul artikel disana. Cobalah membuat beberapa artikel agar terlihat bagaimana loop bekerja.

Nah, silahkan berkreasi, ingin menampilkan apa di blog anda. Dan ini beberapa fungsi yang bisa anda pakai:

– the_permalink : digunakan untuk menampilkan URL artikel
– the_title : untuk menampilkan judul artikel
– the_content : untuk menampilkan konten artikel. Jika lebih dari 1 artikel, maka yang muncul cuma sampai tanda readmore
– the_excerpt: untuk menampilkan beberapa karakter awal artikel dan menghilangkan kode HTML-nya
– the_time : untuk menampilkan kapan artikel ini di publikasikan
– the_author : untuk menampilkan penulisnya
– the_category : untuk menampilkan kategori artikel

Untuk menambah wawasan anda, silahkan coba baca-baca daftar template tags dari codex.wordpress.org

Berhubung beberapa hari ke depan saya agak sibuk di offline, jadi insya Allah kita akan jumpa lagi hari Senin ya. Sebagai PR, silahkan anda utak-atik deh fungsi-fungsi itu dan tempatkan diantara while dan endwhile.

Dicari dengan kata kunci:

membuat wp theme,cara memperlebar halaman wordpress,cara mengedit theme wp,membuat index berita di wordpress,memperlebar halaman blog wordpress,fungsi loop wordpress,membuat indeks berita php wordpress,kata kata buat sahabat yg sok alim tp dalemnya busuk,belajar bikinvtheme wp,bagaimana while loop bekerja

55 thoughts on “Buat Theme WP: Konten

  1. farmasi

    Ternyata tag-tag itu digunakan untuk memunculkan fungsinya masing-masing toh.
    Tadi nyari cara untuk nyatukan tag title ama permalink, tapi ga bisa2. Soalnya belum ada single.php-nya ya mas. πŸ™‚

  2. Rommy

    Maaf mas out of topic.
    Saya membuat custom page dengan template yang sama dengan template page saya tetapi tanpa sitebar. Saya sudah delete code php untuk menampilkan sitebar. Pagenya sudah jadi tanpa sitebar, tapi lebar contentnya koq masih tetap ya. Bagaimana cara memperlebar contentnya supaya bisa full gitu? Gimana cara edit CSSnya?
    Maaf, saya ga ngerti CSS soalnya…
    Terima kasih. πŸ™‚

      1. Rommy

        Bilang aja mas kalau pelit. Tulisannya aja sok alim, kasih zakat segala, bagi ilmu, dsb dst, tapi ditanya ga mau jawab.
        Sampeyan iku koyok gajah diblangkoni mas… Iso kotbah ga iso nglakoni…
        Ingat mas, yang ngerti bahasa pemrograman bukan cuma anda.
        Masih banyak orang lain yang lebih pinter & ga pelit kayak mas.

        Saya sudah dapat jawaban untuk pertanyaan saya di atas dari orang lain. Saya ga butuh jawaban mas lagi.
        O ya, saya salah satu member premium CafeBisnis. Setiap kali saya tanya mas, jawaban mas mengecewakan. Jadi maaf kalau suatu saat nanti mas menemukan bahwa plugin wp-afiliasi CafeBisnis dan ebook2 premium CafeBisnis tersebar luas dan bisa didownload gratis.
        Anggaplah itu imbalan dari perilaku mas yang sombong & kikir ilmu. Ganjaran sejalan dengan perbuatan mas.
        Wassalam…

        1. admin Post author

          wah salah lagi deh πŸ™

          Pelajaran penting nih buat saya biar ndak kejadian lagi. Saya harus punya indra keenam yang bisa langsung tahu seseorang pakai theme apa, domainnya apa, kesalahannya dimana bahkan harus tahu dia sekarang pakai baju apa, lagi ngapain, dll. Kalau ndak tahu maka saya akan dianggap orang pelit πŸ™‚

          Btw, makasih untuk mengingatkan saya agar jadi dukun πŸ˜€

          1. Rommy

            Hmm… Anda ini pandai beralasan. Sayang, alasan anda ga logis.
            1. Saya tanya bagaimana edit CSSnya. Tapi anda malah jawab: Repot kalau mau edit CSS tapi ga ngerti CSS.
            Kalau saya tanya, ya berarti saya ga ngerti. Kalau saya ngerti, ya saya ga tanya. Jawaban anda itu konyol.
            Kalau ada orang yang tanya ke anda: Mas, saya mau ke Jakarta, tapi ga tau jalan ke sana. Bisa beri tahu jalannya?
            Masak anda lantas jawab: Wah repot kalau ga ngerti jalan ke Jakarta tapi mau ke Jakarta.
            Kalau anak anda tanya: Pak, aku mau komputeran, tapi ga ngerti cara ngoperasiinnya. Ajarin dong cara ngoperasiin komputer.
            Masak anda terus jawab: Wah repot kalau ga bisa ngoperasiin komputer tapi mau komputeran.
            Jawaban-jawaban itu jelas konyol dan mencerminkan keengganan anda untuk menjawab. Gampangnya ya pelit ilmu.

            2. Saya tanya soal edit CSS. Itu jelas ga ada hubungannya dengan domain apa, baju apa, lagi ngapain, dsb.
            Itu mungkin berhubungan dengan theme apa yang saya pakai. Nah, kalau memang itu persoalannya dan anda memang niat menjawab, tentu anda akan bertanya: Themenya yang dipakai apa ya?
            Itu kalau anda niat jawab. Tapi adakah anda bertanya begitu?

            3. Setelah saya tau caranya (tanya ke orang lain), ternyata caranya simple saja. Cukup mengubah sebaris code pada file custompage.php yang saya buat plus menambahkan beberapa baris code pada style.css.
            Kenyataan ini semakin membuktikan bahwa anda ga niat membantu alias pelit.

            Jadi, soal dukun-mendukun itu hanya alasan yang anda buat-buat dan sama sekali ga logis. Anda benar-benar sombong & pelit.

        2. admin Post author

          oh iya, terima kasih dibilang gajah. Akhirnya ada juga yang bilang saya gemuk wkwkwkw… abis mau ningkatin berat badan aja susahnya minta ampun.

          1. Rommy

            Iya, anda memang gajah, bukan manusia.
            Pantaslah kalau anda ga punya karakter manusia.
            Jangan-jangan anda malah diusir dari komunitas gajah gara-gara karakternya lebih rendah dari gajah… wkwkwkwkwkwkwkwk…….

      2. Vygica

        Jika saya lihat Jawaban admin, itu berarti kita tahu ada yang belom di edit di code CSSnya.
        Berarti kode CSS untuk di sidebarnya harus di hapus atau kode CSS bagian Content harus di Edit ukurannya.
        Sebenernya jawaban admin sudah benar, karena sudah memberi tutorial Code CSS nya untuk bagian ukuran Content pas di file style.css. jadi tinggal kita yang mengkreasi ukuran content di code CSSnya

    1. bayu

      ganti aja bagian ini om.
      #content{
      width: 690px;
      background: #FFCC00;
      float: left;
      }
      width: 690px; hapus aja, ato ganti width: 100%;

  3. Rommy

    Wah, komentarnya dihapus semua ya? Dasar munafik & pengecut …
    Kalau yang bagus ditampilin terus kalau yang jelek didelete ya? Penipu juga berarti…
    Itukah seorang Muslim yang suka zakat? Zakatmu ga ada gunanya… Cuma kayak kuburan yang dicat putih2… Depannya keliatannya bagus, tapi dalamnya busuk…

    1. admin Post author

      Astaghfirullah.. kayaknya anda ni emang bukan orang. Mudah-mudahan cuma utusan Allah untuk nguji saya.

      Komentar mana yang dihapus? Yang ada anda justru pakai email saya untuk berkomentar.

      1. Rommy

        Kemarin ketika saya ke sini, semua komentar saya tak ada. Sepertinya ada 2 kemungkinan:
        1. Setelah anda hapus, anda kembalikan lagi karena komentar saya di atas. Kalau ini yang terjadi, ya komentar saya di atas benar.
        2. Atau waktu saya berkunjung, cache blog ini sedang bekerja ga normal. Kalau ini yang terjadi, saya mohon maaf, saya yang salah.

        Mengenai email anda yang saya gunakan, saya hanya menggunakannya sekali saja seingat saya. Itu karena setelah saya komentar, komentar saya tidak keluar. Saya pikir apa komentar saya masuk spam. Jadi ya saya pakai saja email anda biar bebas jebakan spam.

  4. john kova

    Mas, menurut saya comment yang begituan ndak usah diambil pusing. Mas udah sangat baik mau berbagi dengan kami. Saya juga anggota cafebisnis tapi g premium..g nduwe duit kate upgrade..semua yang mas berikan kepada kami dg cuma2. Andaikan mas menyudahi artikel nya sampai disini, saya juga akan berterimakasih. Karena setidaknya saya sudah mendapatkan tambahan pengetahuan dan itu akan sangat bermanfaat bagi saya.

    1. admin Post author

      single.php dipakai kalau ada perbedaan antara tampilan depan dan halaman artikel. Nah, kalau single.php tidak ada, maka index.php-lah yang dijadikan acuan πŸ™‚

  5. ahmadfuad

    Wah Mas Lutvi hebat yah,lumayan bikin pusing otak,baru pertama kali utak atikHTML,saya mau tanya Mas,kalau terjadi kesalahan dalam masukan kode,apakah webs kita akan eror,terus bagaimana mengatasinya,satu lagi neh yang tak kalah penting,blog saya fonts masih bawaaan themes,hurufnya kecil-kecil,saya pengenya hurufnya enak dibaca,seperti blog ini,gimana cara buat fonts kalau bisa sama dengan blog Mas lutvi ini,terimakasih atas infonya.

  6. udin

    mau nanya gan, kalo semisal kita punya 10 artikel, terus kita mau nampilin artikel kedua dan kelima saja yang tampil di halaman depan, itu caranya gimana ya gan, mohon pencerahannya, thx

  7. WordpressProject

    Setelah saya praktikan sampai sini saja sudah cukup membuat saya lebih paham tentang pembuatan wordpress themes tapi yg diatas kok ada yg bilang pelit ilmu ya???
    hahahaha…. mengenaskan…….

    terima kasih tutorialnya mas Lutfi………..
    pokoknya mantaf banget…………

  8. pengusaha

    mas admin, sabar aja mas, he…tidak semua akan berkata baik setiap kebaikan yang kita tebar. tidak ada gunanya dibahas, jangan sampai masalah dengan satu orang sampe melupakan teman-teman lainya yang baik-baki kaya saya, he…saya juga mengalami yang mas alami, jadi faham, kita bukan robot yang bisa layani semua kemauan orang, he…btw terimakasih ilmunya sangat bermanfaat. terus berbagi ya, nabi saja manusia sempurna tetap ada yg benci, apalagi kita, he…lanjutkan saja dan lupakan yang negatif, di blok jg gak apa2 krna ini rumah mas, jd bisa menentukan aturan sendiri siapa aja yang boleh bertamu, he…

  9. Alvarisi

    assalamualaikumm…
    mas terjadi error(lagi)… muncul tulisan “Fatal error: Call to undefined function have_post() in ***” itu gimana atasinnya mas??

    1. MIKA

      pakai ini buat nampilin title yang jadi link buat wordpres nya .,, saya dukng admin web ini \m/
      <a href="” title=””>

  10. Belajar Wordress

    makasih mas gan infonya…
    bagus sekali…
    makaih uda share ilmunya..
    omongan yang g jelas g usah di anggap min..
    belum tentu dia mau share ilmunya ..
    πŸ™‚

  11. akbar

    om, gimana caranya kalau kita mau nampilin judul dan ringkasan artikel dari kategori tertentu sj. mohon bantuannya. πŸ˜€

  12. roni

    Thanks gan, ane udah coba ikutin tutorial ini dari awal sampe akhir, bener-bener komplit dan jelas banged deh…
    Tapi ada yang mw ane tanyain gan
    Ane kan buat tema wordpress sendiri, udah ada file:
    – index.php
    – functions.php
    – header.php
    – sidebar.php
    – footer.php
    Tapi kenapa waktu ane mw coba Upload gambar ke Media Library, selalu stop di cruching….
    Gambarnya muncul di Library, tapi pas ane mw “Add Media” ke Post/Page, masa Media Library-nya kosong.
    Padahal di dalamnya ada 4 gambar.
    Tapi kalo ane ganti theme jadi default theme dari wordpress, bisa gan, ga ada masalah sama sekali…..
    Kenapa bisa gini yah? Apakah ada file yang kurang?
    mohon pencerahannya, karena ane masih newbie……

  13. Going Here

    I simply want to tell you that I’m newbie to blogs and seriously loved you’re web page. Almost certainly I’m want to bookmark your site . You definitely come with impressive writings. Kudos for sharing your website page.

  14. Kaylee Lillick

    I do not even know how I ended up here, but I thought this post was good. I don’t know who you are but certainly you’re going to a famous blogger if you are not already πŸ˜‰ Cheers!

  15. Mozella Lockaby

    I approximating this blog its a master peace ! Happy I naked this on google. “Irrationally held truths may ensue added harmful than reasoned errors.” by Thomas Huxley.

  16. Vance Lasage

    Great beat ! I would like to apprentice while you amend your site, how could i subscribe for a blog web site? The account aided me a acceptable deal. I had been tiny bit acquainted of this your broadcast offered bright clear idea

  17. Isaac Crim

    We are a group of volunteers and opening a new scheme in our community. Your site provided us with valuable information to work on. You have done a formidable job and our entire community will be thankful to you.

  18. Cathryn Bednarz

    I cling on to listening to the news speak about getting boundless online grant applications so I have been looking around for the top site to get one. Could you tell me please, where could i acquire some?

  19. Margrett Thoe

    Every few minutes Firefox tries to open a site. Because I just got a Trojan off my computer. So the link to the virus does not work anymore but Firefox keeps trying to open it. It says it cannot display this webpage. So how do I stop this?.

  20. Haydee Knotowicz

    It’s the best time to make some plans for the future and it’s time to be happy. I’ve read this post and if I could I wish to suggest you some interesting things or tips. Maybe you could write next articles referring to this article. I desire to read more things about it!

  21. Darin Hagey

    Hi! I could have sworn I’ve visited this web site before but after going through a few of the articles I realized it’s new to me. Nonetheless, I’m certainly delighted I discovered it and I’ll be bookmarking it and checking back often!

Comments are closed.