Membuat Custom Background

Sepertinya makin seru aja nih kegiatan kita utak-atik Themes WordPress. Dan kali ini saya ingin tunjukkan sebuah jurus lagi untuk membuat themes anda lebih gaya dan full fungsi. Apalagi kalau bukan custom background. hehehe..

Walaupun hasil akhirnya nanti sangat keren, tapi bikinnya ternyata gampang banget. Bahkan cuma perlu edit 1 file doang. Apalagi kalau bukan file functions.php yang selama ini sudah menemani kita dalam mempercanggih tampilan blog. Apa sih kode rahasianya? Nih, copy dan paste ke functions.php anda ya

add_custom_background();

Hah? cuman gitu doang mas? Trus apalagi yang diedit?

Karena background itu dimana-mana cuma ada satu, jadi kita ndak perlu ngasih tahu WordPress dimana backgroundnya hehehe.. Dia sudah cukup cerdas untuk menebaknya.

Tapi setelah saya coba, ternyata ada masalah nih dengan theme kita saat kita pasangin fungsi ini. Masalahnya yaitu, background bagian dalam ikut-ikutan berubah warna. Maklum, kemarin waktu bikin kita ndak ngisi dengan warna sehingga dianggap transparant. Nah, kita perbaikin yuk.

Buka style.css dan cari kode ini:

#wrap {
  border:solid 1px #000;
  width:900px;
  margin:0 auto;
  padding:10px;
}

lalu kita tambahin deh kode warna latar belakang untuk tulisannya, misalnya putih sehingga jadinya seperti ini:

#wrap {
  border:solid 1px #000;
  width:900px;
  margin:0 auto;
  padding:10px;
  background:#ffffff;
}

Yuk, kita lihat bagaimana hasilnya sekarang setelah kita rubah backgroundnya dengan warna coklat misalnya

Dicari dengan kata kunci:

background,background wordpress,membuat background,membuat background wordpress,cara membuat background wordpress,cara memberi background pada html,membuat background php,cara membuat background di wordpress,wordpress background,cara membuat background html

76 thoughts on “Membuat Custom Background

  1. john kova

    pak bos, saya sudah nyoba dan sudah jadi. Tapi ada kendala, untuk buat readmore di home bgmn? Coz yg ada readmore cuma di posting tunggal aja. Thx

    1. admin Post author

      readmore kan pasangnya di artikelnya. Klik tanda readmore di tempat pemotongan yang diinginkan. Nanti otomatis di home akan terpotong sendiri

    1. admin Post author

      Kalau sudah pasang kode custom background, tinggal masuk menu Appearance – Background aja lalu upload gambar backgroundnya

    1. admin Post author

      Lha background-nya sudah dimasukkan belum? Masukkan lewat menu Appearance – Background. Kalau ndak dimasukkan ya kosong πŸ™‚

  2. rahmatnurcholis

    mas punya saya ko error
    ada tulisan di atas menu wordpress
    Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\wordpress\wp-content\themes\themegue\functions.php:1) in C:\xampp\htdocs\wordpress\wp-includes\functions.php on line 861

    Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\wordpress\wp-content\themes\themegue\functions.php:1) in C:\xampp\htdocs\wordpress\wp-includes\functions.php on line 862

    pas saya memasukkan kode “add_custom_background();” pada “function.php”
    tolong pencerahannya…

  3. Andee

    Mas, saya juga ga berhasil nambahin ‘custom Background’ padahal saya sudah ikutin Tutorial dari mas Lutvi, mohon pencerahannya mas, Oiya pas saya cek Theme di Admin Wp saya di Appearance ngga ada tuh menu “background” nya,

    ada e-book yang komplit ngga soal membuat Theme WordPress kalo bisa versi Bahasa Inonesia mas, hehehehe

    terima kasih banyak ya..

  4. Jumpa UA

    Salam, Mas Lutvi, wah mantaps banget mas, seri tutorial membuat theme wp ini. Terimakasih banyak, saya belajar banyak sekali dari tulisan2 mas Lutvi di sini.
    Mau tanya mas, untuk penambahan add_custom_background();” pada β€œfunction.php”
    saya sudah coba, dan pada dashboard juga ada menunya, bisa ganti background , saya coba ganti warna tapi tidak muncul efeknya di tampilan, moohn pencerahannya mas, apa yang mesti saya perbaiki/cek
    Trimakasih banyak. Salam.
    Jumpa

  5. Angga

    Mas admin.. mohon pencerahannya..
    ku dah nyoba di wersi 3.3.1…
    tapi kok ga ngefect ya pada webnya… tapi di dashboardnya udah keluar menu buat ganti backgroundnya..
    trima kasih… mohon bimbingannya… ;D
    πŸ˜€

  6. Jefry

    Makasih mas buat tutorialnya,, saya jadi tahu letak background blog dan rencananya akan saya ganti dengan yang baru
    sekali lagi terima kasih

  7. Fajar

    Saya ucapkan terimakasih banyak kepada mas Lutvi, semoga panjang umur and Berkah atas ilmunya, saya mo nanya eh dah dijawab duluan ma comment2 sebelumnya….. lam kenal

  8. Habib Yunus

    Beberapa tutorial setelah saya coba kenapa tidak berfungsi dengan baik ya mas? Di menu appearance muncul tapi setelah di save dan dilihat hasilnya ga ada perubahan sama sekali. Mohon bantuannya mas… terima kasih..

    1. kholis.net

      Sama saya juga di appearance-background sudah muncul lengkap dengan isiannya, tapi setelah di save gak ada perubahan sama sekali. Ada yang tahu kenapa?

  9. Wawa

    Masalah saya juga sama, di appearance muncul tapi di theme gak ada efeknya. Saya googling dan nemu solusinya. Di header.php saya ganti pake ini <body >

    1. joni

      di tutorial ini kan belum ada panduan pembuatan header.php
      cukup buat header.php and masukin <body > atau ada step lain bro?

      1. Wawa

        cari aja tag body di file2 themenya bro, trus relace, kalo themeku tag awal body masuk di header.php

  10. patnerbiz

    Maaf mas, udah saya coba , tpi kok gak ada perubahan ya setelah di masukan gambar ataupun warna ,,
    background masih standart putih ,
    Mohon bantuannya mas…

        1. Wawa

          sip, btw aku lagi nyari tutorial biar bisa upload logo via admin, kasih tau dong yg bisa πŸ˜€

  11. jeff

    ikutan mas…gimana ya blog saya juga pengen rada bagus tampilan nya ni,,kaga diem n cuma tampilan asli nya,alias belum bisa di apa2in,cuma bisa nulis doang..ada yang bisa bantu? makasih semua nya salam,,,

  12. Nino

    itu fungsi add_function_background pasang dimananya? saya coba pasang di akhir function.php sebelum add_action( ‘widgets_init’, ‘themegue_widgets’ );
    muncul option background di appearance, tapi saya uplod gambar dan disave, tapi gak nongol di blognya…
    mohon pencerahan kurang dimananya?

  13. peyochan

    berhubung hari ini baru update ke wp 3.4.1, aku dapet info kalau fungsi add_custom_background() ga bakal disupport lagi mulai dari versi wp 3.4. fungsi itu digantikan sama add_theme_support( ‘custom-background’ ). walo aku coba, add_custom_background() masih bisa dipake. so, cek fungsi yang mau dipake dan versi wp-nya.

  14. Aswin

    nice tutor mas.. πŸ˜€
    tp setelah saya coba kok nggak keluar warnanya ya mas?? tetep aja putih, padahal sudah saya ganti warnanya…
    mohon penecerahannya mas.. makasih sebelumnya..

    1. Saeful Bahri

      sama nih, udah di ganti tapi tetep gak berubah, gak support atau ada yang kurang nih?
      yang bisa tolong di reply ya, πŸ˜€ hehehe

  15. big brother betting

    I rarely write responses, however after reading a few of the remarks here Membuat Custom Background.
    I actually do have some questions for you if you do not mind.
    Is it just me or does it look like some of these comments
    look like they are written by brain dead people? πŸ˜› And, if you are writing at other social sites, I would like to keep up with you.
    Could you make a list of the complete urls of all your shared pages
    like your linkedin profile, Facebook page or
    twitter feed?

  16. gats

    om mau nanya, coba deh buka web ku elelresto.com..
    trus buka salah satu menu..
    itu kan backgroundnya gk keliatan nah itu mau aku ganti transparan biar keliatan.. background gambar restonya..
    itu gmna yaa?
    di tunggu jawabannya segera yaa..

  17. sdchb

    terima kasih mas sudah memberikan tutorial membuat tempelate wordpress sendiri
    artikelnya berguna sekali saya ikutin step by stepnya ..makasih ya massssssssss..anda memang luar biasa

  18. elinz

    om ketika di dashboard background berubah namun setelah ke homepage backgroundnya masih tetap putih, padahal cara diatas sangan simple, dan kiranya sudah saya ikuti, kira2 dimana ya om

  19. internet

    I just want to tell you that I am beginner to weblog and certainly enjoyed this web site. Most likely I’m planning to bookmark your website . You certainly come with exceptional articles. Cheers for revealing your website.

Comments are closed.