Membuat Custom Header

Mari kita melangkah pada trik yang lebih canggih lagi. Kali ini kita akan menambah fasilitas untuk mengganti gambar pada header. Dengan fasilitas ini, pengguna theme kita bisa menentukan sendiri mau pakai gambar apa. Keren kan?

Kita juga bisa menentukan lebar dan tinggi bagian headernya sehingga sesuai dengan themes. Hebatnya lagi, ternyata trik agar themes kita punya fasilitas custom header sangat mudah lho.. hehehe… Bagaimana sih caranya? Cekidot gan!

Ada 2 file yang kita otak-atik disini yaitu file functions.php dan index.php. Pada functions.php kita tambahkan kode ini di bagian bawah:

define( 'HEADER_IMAGE_WIDTH', 900 );
define( 'HEADER_IMAGE_HEIGHT',120 );
define( 'HEADER_TEXTCOLOR', '000000' );

add_custom_image_header( '', 'themegue_header_style' );

function themegue_header_style() {
echo '
<style type="text/css">
#headimg {
  height:120px;
  background:#cccccc;
}
#name { 
  font-family: Georgia, "Bitstream Charter", serif;
  font-size:30px;
}
h1 a {
  text-decoration:none;
  }
#desc { 
  font-family: Georgia, "Bitstream Charter", serif;
  font-size:14px;
}

</style>';
}

Ada 3 bagian dalam kode diatas. Pertama adalah kode-kode define yang berisi nilai-nilai yang menjadi default header blog nanti.

define( 'HEADER_IMAGE_WIDTH', 900 ); : menentukan ukuran lebar header
define( 'HEADER_IMAGE_HEIGHT',120 ); : menentukan ukuran tinggi header
define( 'HEADER_TEXTCOLOR', '000000' ); : menentukan warna teks di header

Kemudian diikuti oleh kode untuk deklarasi bahwa theme kita menyediakan fasilitas ganti header.

add_custom_image_header( '', 'themegue_header_style' );

Dan terakhir adalah kode yang kita gunakan untuk memasang style di halaman admin nanti saat user mengedit gambar headernya.

Setelah kode-kode tersebut masuk di functions.php kita tentukan letak headernya di index.php (ingat, WP hanya robot yang nggak tahu apa-apa kalau ndak kita kasih tahu)

Karena design theme kita gambarnya adalah latar belakang maka kita letakkan style sebelum tag </head>

 <style type="text/css">
  #header {
    background : url(<?php header_image(); ?>); 
  }
  .blogtitle a, .description {
    color: <?php header_textcolor(); ?>
  }
 </style>

Anda perhatikan kode <?php header_image(); ?> adalah kode untuk memanggil gambar header yang dipasang oleh user.

Sekarang silahkan deh coba masuk ke wp-admin lalu klik menu Appearance – Header πŸ™‚ Selamat mencoba!

Dicari dengan kata kunci:

membuat header wordpress,ukuran header wordpress,cara membuat header wordpress,membuat header dengan php,cara membuat header di wordpress,membuat header dengan CSS,membuat header slideshow di wordpress,membuat header php,membuat header di wordpress,cara membuat header php

88 thoughts on “Membuat Custom Header

    1. admin Post author

      Pertanyaannya membingungkan nih. Masukin gambar pada script? Lha script itu kan text doang. Mungkin maksudnya gini ya:

      Script untuk memasukkan gambar gimana?

      Kalau ini gampang, scriptnya seperti ini:

      <img src=”http://urlgambar” alt=”Alternatif text”/>

        1. admin Post author

          Upload gambar bisa menggunakan fasilitas upload di editor. Atau anda bisa pakai File Manager CPanel, atau bisa juga pakai FTP Client Software

  1. baitulmakmur

    mas aku sudah coba langkah di atas. langkah pertama (functions.php) ok sudah jadi namun pada langkah kedua (index.php) aku ngak temukan tuh cara memasukan

    #header {
    background : url();
    }
    .blogtitle a, .description {
    color:
    }
    

    katanya kan sebelum tag
    aku sudah cari tuh tag ngak ketemu. bahkan sudah ku coba menekan ctrl + F hasilnya nihil. trus naruhnya di mana nih ?

    berikut index php aku (tolong di bantu ya mas di taruh sebelah mana script php header tersebut ?

    <a href="" rel="bookmark" title="">
    <img src="/images/PostDateIcon.png" width="18" height="18" alt="PostDateIcon" />
    <img src="/images/PostAuthorIcon.png" width="14? height="14? alt="PostAuthorIcon" />
    : <a href="#" title="">
    ID )) : ?>
    <img src="/images/PostEditIcon.png" width="14? height="14" alt="PostEditIcon" />
    <img src="/images/PostCategoryIcon.png" width="18" height="18" alt="PostCategoryIcon" />
    <img src="/images/PostTagIcon.png" width="18" height="18" alt="PostTagIcon" />
    if(function_exists('get_search_form')) get_search_form();
    

  2. baitulmakmur

    maaf mas aku salah. yang benar nih fungsi index.php aku

    <a href="" rel="bookmark" title="">
    </a>
    <img src="/images/PostDateIcon.png" width="18" height="18" alt="PostDateIcon" />
    <img src="/images/PostAuthorIcon.png" width="14" height="14" alt="PostAuthorIcon" />
    : <a href="#" title=""></a>
    ID )) : ?>
    <img src="/images/PostEditIcon.png" width="14" height="14" alt="PostEditIcon" />
    <img src="/images/PostCategoryIcon.png" width="18" height="18" alt="PostCategoryIcon" />
    <img src="/images/PostTagIcon.png" width="18" height="18" alt="PostTagIcon" />
    if(function_exists('get_search_form')) get_search_form();
    

    1. admin Post author

      Itu beneran gitu kodenya? Kok ancur banget πŸ˜€ yang ini maksudnya apa?

      ID )) : ?>

      Dan sebelum kode ini harusnya ada pembuka tag phpnya

      if(function_exists('get_search_form')) get_search_form();

      Dan terakhir, sepertinya anda coba mengedit themes lain deh, bukan themes yang diajarin disini

      1. baitulmakmur

        maaf mas. ketika aku copikan seluruh perintah yang tertulis di index php dan ku tuliskan kembali di sini hasilnya jadi kacau balau.
        aku disini sama sekali tidak mengerti tentang bahasa php. hanya mencoba trik dari internet dan ketemu trik di sini.
        katanya kan sebelum tag “” namun tulisan tersebut rupanya tidak ku temukan di index.php dari themes yg aku gunakan. aku menggunakan themes Soccer Professional 1.0

  3. aqgeni

    kode berhasil namun yang jadi pertanyaan saya kenapa kode stylenya dipasang sebelum tag head ? kenapa tidak d file style.css

  4. ismonoe

    tolongin dong gan, mau nambah gambar n logo aja di header gak bisa2 nih(http://panoramabalitour.com/)..minta tolong kasih tau caranya mulai dari pertama ampe selesai cara masukin gambar n logonya, nanti kalo kee bali call aku tak diskon deh, jawabannya sangat di perlukan n makasih banyak bantuannya.

  5. Arkilli

    seep mastah … mungkin sedikit koreksi untuk potongan script yg kedua

    #header {
    background : url();
    }
    .blogtitle a, .description {
    color:
    }

    tag untuk ada pada file header.php , jadi tambahkan potongan script itu pada file header.php … moga aq nda salah, tapi sudah aku coba berhasil kok πŸ™‚

  6. Gin

    Kalau file Function.php nya ada dimana ya, saya udah nyari-nyari di appearance=>editor ga ada, di cpanel=>file manager juga ga ada?????????

  7. thoserba ikln baris SEO

    tutorial di atas telah saya ikuti.. sebelomnya themes yang saya pakek tidak ada header/costum headernya. setelah menambah kode yang disediakan diatas. tombol header sudah ada.dan bisa ganti ganti header sesuai selera.
    dan pemasalahan saya..header yang sudah dibuat tidak muncul di halaman blog saya.
    kira2 kesalahan terletak dimana yaah?coba deh lihat di http://thoserba.16mb.com
    tampilannya masi default.gambar headernya tidak terlihat sama sekali.padahal di dashboard gambarnya ada.

  8. thoserba ikln baris SEO

    oya saya menggunakan themes “padangan” yang saya download di situs jauhari.
    saya bingung ne cari2 taq di “index.php.” memang tidak ada tu..yang ada cuma di “header.php.” saya coba pasang kode yang terhir di atas di atas kode di “header.php” tapi tetap gak muncul gambarnya di halaman blog saya.
    apa saya coba pasang di “Styles” aja?

    1. Sekarepan Wes

      theme editor mas, ke dashboard > appereance > editor > click mana yang mau di edit … dah gitu aja , tnggal masukin code2 yang dikasih admin diatas …

  9. Jefry

    Panduannya sangat membantu seklai, sekarang saya sudah bisa mengcustom header blog wp saya
    terima kasih banyak

  10. Narko

    Mau tanya mas, di mana letak file header.php?
    Saya mau ganti tulisan “Hey there! Thanks for dropping by rantinghijau! Take a look around and grab the RSS feed to stay updated. See you around!”.
    Saya menggunakan tema Motion.
    Terima kasih.

  11. sidoble

    boss,,, pas saya masukin kode custom header ke functions.php,,itu berhasil..
    TAPI pada saat saya mengganti header lewat appearance > header> chose file> upload> save change. terus kok headernya tidak mau ganti juga boss,, tetep warnanya abu-abu,,,

    bagaimana ini kisahnya boss,,,???
    kasih pencerahan dong..!!!
    siapapun itu,,,,yang baik hati,,hehehe πŸ™‚

    1. sidoble

      maaf boss,, ternyata backgroundnya juga gitu boss,,
      tetapi headernya sudah bisa terganti,, cuma backgroundnya yang gak bisa ganti sekarang

  12. dasar

    website ane jadi error ngikutin ini… wp-admin ga bisa di buka error line…… mesti ke cpanel paswordnya ga ada…. sia….sia…sia…

  13. alyzi

    background sudah diganti, nah kalo titel & descriptionnya mau diganti image, terus buat admin menu untuk ganti title & description text dgn title berupa image, caranya gimana bos.. terima kasih bila ada yang mbantu. πŸ˜€ (.Y.)

  14. order foredi

    makasih gan infonya.
    salam kenal dan salam silaturahim.
    distributor foredi gel, gasa, tisu majakani, oris breast cream melayani penjualan partai maupun eceran seluruh indonesia.
    terima kasih dan semoga sukses selalu

  15. Ansul

    Pd style.php koding .blogtitle a mestinya “a” dihapus dan pada color kekurangan ” ; ” , untuk efek blogtitle…. klo custom background yg tdk mau berubah..kita tunggu admin sambil nyari..

  16. Wisata di Malang

    Mau tanya gan, apakah perlu merubah-rubah header pada editor header untu menjadikan website tersebut seo friendly atau memaksimalkan Seo nya ?Saya tunggun pencerahannya om .. Thanks

  17. seo plugin

    Hello Web Admin, I noticed that your On-Page SEO is is missing a few factors, for one you do not use all three H tags in your post, also I notice that you are not using bold or italics properly in your SEO optimization. On-Page SEO means more now than ever since the new Google update: Panda. No longer are backlinks and simply pinging or sending out a RSS feed the key to getting Google PageRank or Alexa Rankings, You now NEED On-Page SEO. So what is good On-Page SEO?First your keyword must appear in the title.Then it must appear in the URL.You have to optimize your keyword and make sure that it has a nice keyword density of 3-5% in your article with relevant LSI (Latent Semantic Indexing). Then you should spread all H1,H2,H3 tags in your article.Your Keyword should appear in your first paragraph and in the last sentence of the page. You should have relevant usage of Bold and italics of your keyword.There should be one internal link to a page on your blog and you should have one image with an alt tag that has your keyword….wait there’s even more Now what if i told you there was a simple WordPress plugin that does all the On-Page SEO, and automatically for you? That’s right AUTOMATICALLY, just watch this 4minute video for more information at. Seo Plugin

  18. look at this site

    I just want to tell you that I’m newbie to blogging and site-building and really liked you’re web site. Almost certainly I’m going to bookmark your website . You definitely come with excellent stories. With thanks for revealing your blog.

  19. Cristen Boothe

    I loved as much as you will receive carried out right here. The sketch is attractive, your authored material stylish. nonetheless, you command get got an shakiness over that you wish be delivering the following. unwell unquestionably come further formerly again since exactly the same nearly very often inside case you shield this hike.

  20. Sandy Sonier

    Good era. Very cool site!! Guy .. Admirable .. Magnificent .. I will bookmark your blog and acquire the feeds additionally…I’m joyful to locate a lot of useful info right at this juncture in the article. Be grateful you for sharing..

  21. Trudi Alford

    After I initially commented I appear to have clicked on the -Notify me when new comments are added- checkbox and from now on each time a comment is added I get four emails with the same comment. Perhaps there is a way you are able to remove me from that service? Kudos!

  22. Lashandra Kyles

    I have been surfing online more than 3 hours today, yet I never found any interesting article like yours. It is pretty worth enough for me. In my opinion, if all webmasters and bloggers made good content as you did, the internet will be much more useful than ever before.

  23. Anika Raitt

    I blog frequently and I seriously thank you for your information. The article has really peaked my interest. I’m going to take a note of your site and keep checking for new information about once per week. I opted in for your Feed as well.

  24. Eldon Dolhon

    Hi, i think that i saw you visited my weblog thus i came to β€œreturn the favor”.I’m attempting to find things to improve my website!I suppose its ok to use some of your ideas!!

Comments are closed.