Buat Theme WordPress: Blog Header

44 Replies

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 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,mengatur font di wordpress,pasang header di wordpress,membuat tema di blog wordpress

44 thoughts on “Buat Theme WordPress: Blog Header”

Nurjaman February 23, 2011 at 11:23 am

Saya do’ain selalu mas, kebetulan saya nyasarnya pass di awal bagian.

Reply ↓
ID Tutorial February 23, 2011 at 11:51 am

Azip tenan mas. tak tunggui tutorial selanjutnya

Reply ↓
1. pulau tidung center February 19, 2013 at 2:15 pm
  
  wahh juragan ada disini hehehehe
  salam sejahtera juragan, semoga maikn joss ae
  
  Reply ↓
Farmasi February 23, 2011 at 12:06 pm

Weh.. Makin kelihatan batang hidung themenya. Mantap.. Mantap.. Mantap..

Reply ↓
Farmasi February 23, 2011 at 2:35 pm

mulai ada penampakan nih themenya. Bangga, bisa buat sendiri.

Reply ↓
dHaNy February 23, 2011 at 7:13 pm

Wah pengen ikutin terus nih.. Langganan ahh…

Reply ↓
A Fauzi February 28, 2011 at 3:18 am

Bagaimana caranya bila menunya banyak / textnya panjang, sehingga butuh 2 atau3 baris ?

salam

Reply ↓
A Fauzi February 28, 2011 at 4:05 am

Untuk memunculkan submenunya bagaimana ?

Salam

Reply ↓
health and spirit February 28, 2011 at 12:16 pm

Ikutan nyimak mas….

Reply ↓
grandchief March 10, 2011 at 10:24 am

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

Reply ↓
1. admin Post authorMarch 13, 2011 at 11:30 am
  
  Iya. Kalau mau copas kodenya, gunakan link view plain yang ada di atas kode. Nanti akan muncul pop up berisi kode yang bisa diambil.
  
  Reply ↓
Topan Aprilia March 11, 2011 at 12:13 am

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

Reply ↓
1. admin Post authorMarch 13, 2011 at 11:27 am
  
  Langsung cek disini gan: http://wordpress.org/showcase/
  
  Reply ↓
Topan Aprilia March 15, 2011 at 2:27 pm

thanks gan w dah cek,
d 1stwebdesigner w td liyat juga banyak.
yar ga kelamaan pake CodeIgniter,,

Oy gan lo Wordcamp indonesia tu pa c,,?
yang ne ,,,http://wordcampindonesia.com/

Reply ↓
the guitar tablature May 15, 2011 at 5:38 am

mantaps gan, lagi belajar bikin themes wp sendiri, kalau bikin themes yang seo friendly gmn ya gan..

Reply ↓
1. admin Post authorMay 20, 2011 at 12:02 pm
  
  yang diatas sudah SEO friendly kok. Bikin dulu aja, insya Allah ke depan ada update untuk lebih mempercanggih
  
  Reply ↓
Rasyid May 29, 2011 at 2:24 pm

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…

Reply ↓
1. admin Post authorMay 30, 2011 at 4:37 am
  
  Lha anda baca artikel diatas atau ndak? Jangan-jangan cuma copy paste kodenya aja. hayoo ngakuuu !!
  
  Reply ↓
  1. Rasyid June 12, 2011 at 2:41 pm
    
    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….. )
    
    Reply ↓
  2. Munawar Tidung January 6, 2013 at 7:35 am
    
    saya mau buat pakai flash susah gak ya? gimana sih caranya please kasih tau donk bosan dengan tampilan website yang sekarang nih.
    
    Reply ↓
Maksum May 29, 2011 at 2:52 pm

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

Reply ↓
frezy prima ardi July 11, 2011 at 7:33 am

saya udah selesai sampai sini…mana lanjutannya??udah ga sabar nih mas…

Reply ↓
1. admin Post authorJuly 11, 2011 at 8:52 am
  
  Daftar isinya udah dipindah keatas gan
  
  Reply ↓
4hm4d 15w4d1 August 14, 2011 at 10:49 am

mas sy mau tanya,
style.css ya di letakkan di paling bawah, lanjutan kode yang #kanan ya?

Reply ↓
Mbah Lalar August 17, 2011 at 7:47 am

bingung, namun mencoba untuk slalu MENJIMAK (maaf pakai ejaan kuno)

Reply ↓
maspe October 24, 2011 at 5:48 am

wah mantap tenan mas.

Reply ↓
panghaidar December 9, 2011 at 2:36 am

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;
}

Reply ↓
1. Heri ireng Blora March 11, 2012 at 1:10 pm
  
  Gimana kalau
  #menu li {
  float: left;
  position: relative;
  margin-right:10px;
  color:#ffffff;
  text-decoration: none;
  }
  
  Reply ↓
panghaidar December 9, 2011 at 4:07 am

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

Reply ↓
Lintas dot Us December 20, 2011 at 9:40 am

Thanks gan jadi tahu format nya nih..

Reply ↓
amin April 26, 2012 at 3:11 pm

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 |

Reply ↓
ilmu pengetahuan June 22, 2012 at 5:42 am

.body {
font-family: Georgia, “Bitstream Charter”, serif;
}

kode ini di simpan di sebelah mana ya? kurang jelas.

Reply ↓
Klikdana July 8, 2012 at 8:44 am

Baru belajar wordpress,, makasih mas ulasannya..

Reply ↓
tidung July 26, 2012 at 8:27 am

ok baget gan infonya sanyangat menguntungkan terimaksih ya

Reply ↓
vino July 26, 2012 at 8:29 am

infonya bagus …… mantap terimaksih ya

Reply ↓
Alvarisi December 15, 2012 at 2:20 pm

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…

Reply ↓
Arsa December 30, 2012 at 12:40 pm

Kalo mau buat Header Image Slider bgmana caranya ya???

Reply ↓
Moffey January 5, 2013 at 4:29 am

Wah.. kemana nih lanjutannya padahal udah seru ngikut ampe sini hikz hikz…
Ayolah mastah Qzoner daku menunggu mu

Reply ↓
1. pulau tidung center February 19, 2013 at 2:13 pm
  
  ga’ sabar ya mas..
  
  Reply ↓
Pakde March 20, 2013 at 7:30 am

Kepriwe kiye pak, nunggu terusane….

Gimana ini pak, nunggu kelanjutane…makin hot neh

Reply ↓
yasir tidung April 9, 2013 at 7:24 pm

infonya keren banget saya jadi ngerti nich cara membuat theme blog woodpress

Reply ↓
pulau tidung April 16, 2013 at 11:10 pm

ini ni,info yang selama ini saya cari,thanks banget atas infonya gan

Reply ↓
trisna April 19, 2013 at 4:56 pm

keren ni
trimkasih gan

Reply ↓
pulau tidung May 25, 2013 at 6:33 am

sangat keren, untuk memper-keren tampilan blog saya.

trims ya!

Reply ↓

Dicari dengan kata kunci:

44 thoughts on “Buat Theme WordPress: Blog Header”

Leave a Reply Cancel reply