Buat Theme WordPress: Blog Header

Panduan kali ini membutuhkan konsentrasi tinggi.. hehehe.. Makanya anda butuh fokus..fokus..dan fokus.. cieeh.. Bagi yang kesasar, ini adalah artikel ketujuh dari rangkaian artikel cara membuat theme WordPress dari awal sampai akhir. Anda bisa membaca-baca lagi artikel sebelumnya di bagian bawah tulisan ini:

Yang akan kita bahas nanti adalah bagian header blog. Saya punya gambaran headernya nanti bisa diganti-ganti kayak Twenty Ten gitu, tapi nanti ajalah kalau kita sudah membahas soal fungsi. Untuk saat ini kita bikin standart dulu. Namanya juga belajar. Tul nggak?

Kita akan pasang judul blog ukuran besar di bagian header. Kemudian kita tambahkan juga description dengan font lebih kecil di bawahnya dan nanti dekat dengan batas bawah header kita pasang menu navigasi. Untuk sementara menu navigasinya pakai list page saja. Nanti kita akan merubahnya menjadi custom menu. Keren kan?

Yuk, langsung buka file index.php lalu fokus pada zona header yaitu baris antara tag <div id="header"> hingga </div>. Yuk kita lihat lagi kodenya:

     <div id="header">
        Lokasi header ada disini
     </div>

Sekarang kita ganti tulisan Lokasi header ada disini dengan nama blog dan sekaligus diskripsi di bawahnya lalu kita pasang juga list page. Kode lengkapnya seperti ini:

 <div id="header">
  <h1 class="blogtitle"><?php bloginfo('name');?></h1>
  <p class="description"><?php bloginfo('description');?></p>
  <div id="menu">
    <ul>
    <li><a href="<?php bloginfo('url');?>">Home</a></li>
    <?php wp_list_pages('title_li='); ?>
    </ul>
  </div>
 </div>

Saya jelaskan satu per satu ya. Kita mulai dari baris <h1 class="blogtitle"><?php bloginfo('name');?></h1>. Ini akan menampilkan judul blog di dalam header kita. Disini kita memakai class agar bisa dengan mudah kita atur nanti. Dan ketika ada di single page, h1 ini akan kita rubah menjadi div sehingga bisa SEO friendly. Tapi itu nanti dulu ya hehehe..

Baris berikutnya adalah untuk menampilkan diskripsi. Kita beri class juga agar CSS tahu bahwa cuma bagian ini saja yang dirubah font maupun tata letaknya.

Berikutnya adalah zona menu. Perintah wp_list_page kita pakai untuk menampilkan list page kita. Sebelum menampilkan page, kita tambahkan satu menu lagi yaitu Home. Jika anda ingin menambahkan menu lagi anda tinggal ikuti saja alur seperti pembuatan link home diatas.

Sekarang coba buka blog anda. Hehehe.. dijamin ancur.. hahahaha… Tenang bro, jangan panik dulu apalagi sampai banting laptop :D Mari kita buka style.css dan kita atur-atur deh tampilan header blog kita.

.blogtitle {
  font-size:30px;
  padding:30px 0 0 30px;
  margin:0;
  }
.description {
  font-size:14px;
  padding-left: 30px;
  margin:0;
  }
#menu {
  margin-top:10px;
  padding:0;
  background:#000;
  height:30px;
  }
#menu ul {
  margin: 0;
  padding: 5px 0 0 15px;
  list-style: none;
  display: block;
  }
#menu li , #menu li  a{
  float: left;
  position: relative;
  margin-right:10px;
  color:#ffffff;
  text-decoration: none;
}

Ada beberapa perintah CSS baru yang kita masukkan: font-size (untuk mengatur ukuran font), list-style (untuk mengatur style list page), display (untuk mengatur bagaimana list ditampilkan. Dalam contoh ini kita buat mendatar) dan text-decoration (untuk mengatur dekorasi link. Dalam contoh ini kita pilih none karena kita gak mau ada garis bawah di link-nya).

Agar mudah mengaturnya, kita tempatkan kode tersebut tepat diatas kode #maincontent biar urut gitu ini setingan untuk header.

Oh iya, ada yang terlupa kemarin. Kita belum mengatur font-nya kan? Nah, silahkan tambahin juga deh di bagian atas deretan setingan CSS kode ini:

body {
  font-family: Georgia, "Bitstream Charter", serif;
  }

Nah, sekarang harusnya blog anda sudah muncul seperti ini:

hasil akhir

Mudah-mudahan masih bisa diikuti ya? Insya Allah besok kita beranjak ke bagian konten-nya. Doakan aja moga sehat dan punya banyak kesempatan :)

Dicari dengan kata kunci:

header,buat tema,template wordpress 3 1,buat theme,membuat tema blog wordpress,tema blog,membuat theme wordpress dari awal,pasang header di wordpress,mengatur font di wordpress,header buat wordpress

70 thoughts on “Buat Theme WordPress: Blog Header

  1. grandchief

    Hehehe akhirnya hampir sama juga tampilannya :D
    kadang kelupaan untuk menghapus angkanya mas atau perubahan jadi # ketika di copas .apa ini juga berpengaruh terhadap baris kodenya mas ?

    1. admin Post author

      Iya. Kalau mau copas kodenya, gunakan link view plain yang ada di atas kode. Nanti akan muncul pop up berisi kode yang bisa diambil.

  2. Topan Aprilia

    mo nanya ne gan, mungkin pertanyaanku ga ada kaitannya dengan postingan ini.
    bisa kasih contoh g website portal yang menggunakan wordpress,,?
    yg q tw situs portal di indonesia menggunakan dojo dan tmn2nya ,
    thanks gan..

    1. admin Post author

      yang diatas sudah SEO friendly kok. Bikin dulu aja, insya Allah ke depan ada update untuk lebih mempercanggih

  3. Rasyid

    kalau ganti jenis font + size judul di atas header gimana mas? sekalian kalau dikirinya judul di atas header ditambahi logo atau foto bisa? caranya?
    Trims, sebelumnya…

    1. admin Post author

      Lha anda baca artikel diatas atau ndak? Jangan-jangan cuma copy paste kodenya aja. hayoo ngakuuu !!

      1. Rasyid

        udah dicoba kok, tapi memang tidak radikal cuma coba selip sana sini, ubah font size dan warna. tapi yg gak bisa-bisa ya sisipkan logo di kanan judul blog. belum bisa juga. sampe sempat instal ulang wpnya….. :))

  4. Maksum

    terima kasih gan…, atas info cara membuat theme wordprees…, kebetulan saya sedang belajar membuat theme wordpress…, kira” kapan dilanjutin infonya…?

  5. panghaidar

    kembali ke awal belajarnya, sampe disini ada error..
    kalau saya pasang ini, sidebar kolom nya jadi pindah ke kolom konten :(

    #menu li , #menu li a{
    float: left;
    position: relative;
    margin-right:10px;
    color:#ffffff;
    text-decoration: none;
    }

  6. panghaidar

    Tapi kalau saya copas dari awal sampai sini, ga ada masalah =)) … mungkin saya harus mendinginkan kepala dulu neh hahahaha… lanjutkan mastah..!!

  7. amin

    mas pengen jelasin yang ini..coz soal nya diatas belum dijelasin..hehe…

    <a href="”>Home

    klo href kan menyangkut link…
    misalkan kita buat link menu banyak, apa ga apa tetep seperti itu aja di tulisnya..???
    misalkan home | photos | about |

  8. Alvarisi

    mas, kok ada error di wp_list_page bunyi errornya kek gini:
    ” Call to undefined function wp_list_page() in C:\****\wp-content\themes\themegue\index.php on line 18″
    mohon pencerahannya…

  9. gita

    gan ane kok error ya ?
    jadi di bagian tab chrome ane, title blognya jadi Fatal Error , terus halamannya blank

  10. medyczny

    Zlecenie istnieje jednym spośród moich potrzeb , owo ściąga mi samokontrola zaś to pomaga w wydajności . Wobec tego książki natomiast dokumenty muszą być w pozory łańcuchu zaś nie wszystkie dystrykty gruntu prawdopodobnie istnieć w łańcuchu , być przypuszczalnie jedna

  11. hop over to these guys

    I simply want to tell you that I am new to weblog and honestly liked your web-site. Probably I’m likely to bookmark your site . You really have fabulous posts. Appreciate it for sharing your website page.

  12. podjazy

    “Proszę”, powiedziałem do niej. “Przeczytaj opisy co dowiesz się w zakładach syntezy i postanowić, który Cię interesuje bardziej.”

  13. Mauro Getchman

    Hello There. I found your blog using msn. This is an extremely well written article. I’ll be sure to bookmark it and come back to read more of your useful information. Thanks for the post. I’ll definitely comeback.

  14. Francesco Rutley

    An attention-grabbing dialogue is value comment. I feel that you should write extra on this subject, it may not be a taboo topic but generally individuals are not sufficient to speak on such topics. To the next. Cheers

  15. free xbox live gold membership

    Maybe their posting educated you a specific thing you didn’t know, or reminded you to definitely warning sign that petition about Monsanto, or perhaps it has been a picture of kittens and cats, because who doesn’t like snap shots of cats and kittens

  16. Abraham Zeledon

    I accomplish see eye to eye with all of the ideas you have presented in your send. They’re same persuasive and will positively labor. Still, the posts are vastly tiny on behalf of novices. Could you entertain go on them a insignificant starting subsequently time? Thanks for the post.

  17. Devin Gromoll

    Great post. I was checking constantly this blog and I’m impressed! Very useful information specially the last part :) I care for such info a lot. I was seeking this particular info for a very long time. Thank you and best of luck.

  18. Zelda Roos

    Hello there, just became alert to your blog through Google, and found that it is really informative. I am gonna watch out for brussels. I’ll appreciate if you continue this in future. A lot of people will be benefited from your writing. Cheers!

  19. Harris Lewellen

    Hi, Neat post. There’s a problem with your website in internet explorer, would test this… IE still is the market leader and a big portion of people will miss your great writing because of this problem.

  20. Deshawn Bakker

    Pretty nice post. I just stumbled upon your blog and wished to say that I’ve really enjoyed browsing your blog posts. After all I will be subscribing to your feed and I hope you write again soon!

  21. Paola Stockholm

    Pretty section of content. I just stumbled upon your weblog and in accession capital to assert that I acquire actually enjoyed account your blog posts. Any way I will be subscribing to your feeds and even I achievement you access consistently quickly.

  22. Margot Vasquiz

    Great blog here! Also your site loads up fast! What host are you using? Can I get your affiliate link to your host? I wish my web site loaded up as fast as yours lol

  23. Maria Buckel

    I’m not sure where you’re getting your information, but great topic. I needs to spend some time learning much more or understanding more. Thanks for fantastic info I was looking for this info for my mission.

Comments are closed.