Membangun Theme WP: Style.css

Oke, sekarang kita mulai dengan membangun style dulu. Sebenarnya sih cara kerjanya bergantian antara file index.php dan style.css. Tapi karena informasi theme ada di file style.css, maka file inilah yang pertama kali kita buat.

Sebelum bicara terlalu banyak, untuk membuat theme WordPress anda membutuhkan sebuah server lokal (localhost). Anda bisa pakai AppServ, XAMPP atau yang lainnya untuk membangun server lokal di komputer pribadi. Sangat tidak bijaksana kalau anda membangun langsung di hosting. Selain boros bandwidth juga boros waktu. Saya anggap anda sudah tahu soal instalasi WordPress di localhost dan cara mengaktifkan themes. Kalau belum bisa, sebaiknya anda belajar dulu 🙂

Saya juga menganggap anda tahu bagaimana cara membuat file PHP. Kalau ini juga belum bisa, silahkan pelajari dulu ya? Oke, jika sudah siap, kita buat dulu folder tempat theme kita. Kita akan namakan theme ini dengan: themegue. Jadi, silahkan buat folder /themegue/ di wp-content/themes.

Berikutnya semua file yang kita buat harus masuk di folder ini. Siap?

File pertama yang kita buat adalah style.css. File ini akan menangani semua tampilan theme kita. Untuk kustomisasi style, anda bisa baca referensi soal CSS. Tapi disini kita akan langsung pakai perintah-perintah CSS yang kita terapkan di theme.

Pertama, kita isi file style.css dengan keterangan seperti ini:

/*
Theme Name: Theme Gue
Theme URI: http://wordpress.or.id/
Description: Theme Pertama yang Gue Buat untuk Bangsa Indonesia Tercinta
Author: Lutvi Avandi
Author URI: http://lutviavandi.com/
Version: 1.0
*/

Theme Name: isilah dengan nama theme yang ingin anda buat
Theme URI: isilah dengan tempat mendownload theme ini
Description: isilah dengan diskripsi singkat theme anda. Jika mau diupload ke wordpress.org anda harus mengisinya dalam bahasa Inggris
Author: isilah dengan nama anda (mau pakai nama saya boleh hehehe)
Author URI: isilah dengan URL blog pribadi anda (kalau punya)
Version: isi dengan versi themesnya. Idealnya sih dimulai dari 1.0

Simpanlah file tersebut dan sekarang coba anda cek di bagian Appearance – Themes. Themes-nya belum muncul kan? hehehe… itu karena 1 file lagi belum ada yaitu index.php. Nah, bikin deh file index.php di dalam folder themegue tadi. Tidak perlu diisi dulu, kosongan aja.

Sekarang seharusnya di menu Appearance – Themes sudah ada sebuah theme baru dengan nama Theme Gue. Silahkan aktifkan.

membuat theme wordpress

Jika anda nekat mau melihat blog anda. Saya jamin isinya cuma blank doang. hehehe.. Namanya juga theme belum jadi. Insya Allah besok kita akan belajar bagaimana cara mengisinya. Untuk saat ini kita tinggalkan dulu file style.css

Kalau gak mau ketinggalan info, buruan tuh masukkan email di kotak isian sebelah kanan 🙂

Dicari dengan kata kunci:

theme wp,style css,cara membuat theme wp,cara membuat style css,Membuat Style css,cara edit theme wp,css untuk wordpress,cara edit css wordpress,Css theme,css style

83 thoughts on “Membangun Theme WP: Style.css

  1. Opay

    Koq sy coba gak tampil ya mas….
    malah keluar
    “Tema yang Rusak

    Tema-tema berikut ini terinstal tapi tidak lengkap. Tema harus punya sebuah stylesheet dan sebuah templat.
    Nama Deskripsi
    tema legiit Stylesheet hilang.”

    terima kasih.

      1. barajablog

        ya mas, kasus saya sama dengan @opay.

        Udah saya bikin juga style.css dan index.php nya tapi tidak bisa juga.. Maaf, mas sebelumnya saya udah komentar karena tidak tau ada komentar di atas yang kasusnya sama dengan saya.. 🙁

  2. Suryadi

    mas, mau tanya nih. kalau folder wp content yang ada di localhost itu ada dimana ya?
    udah cari-cari belum ketemu juga.

    1. admin Post author

      tergantung nama folder untuk wordpress dan lokasi AppServ-nya (kalau pakai AppServ). Misalnya nama foldernya wordpress maka biasanya ada di:

      C:\AppServ\www\wordpress\wp-content

      Kalau pakai yang lain mohon maaf saya kurang tahu karena cuma pakai AppServ aja.

  3. cucu

    Mas admin mohon pencerahannya :
    Di bagian style.css itu kan ada informasih tentang link tempat donwload template dan link si pembuat template. Nah, yang umum digunakan atau yang sebaiknya digunakan itu memakai kata “Theme URI/Author URI” atau kah “Theme URL/Author URL” ??

    Makasih ya 😀

  4. Bayu Adrian Guntur Putra

    gan ko ngga muncul deh di wordpressnya itu kenapa ya? dan itu file wordpressnya ditaro dimana ya gan

    1. panghaidar

      ini tahapan paling gampangg..gak muncul gimana? folder theme yg akan dibuat taro disini..
      C:\xampp\htdocs\wordpress\wp-content\themes\themegue
      dan difolder themegue ini di dalemnya ada index.php sama style.css plus gambar screenshot..CMIIW

  5. Udin Catok

    busyet deh… keliling nyari master wordpress di indonesia rupanya kanjeng lutvi toh… adduuuh nyesel ane kenal beberapa tahun yang lalu lewat pembelian/nyewa software iklan gratis jagopromo tp baru sempet sadar “kenapa ga dari dulu sedot ilmunya… ane siap nyimak semua tutornya kanjeng…

  6. reza

    ane udah instal appserver tpi gmna cara pakainya biyar..bisa edit ato buka cpanel wordpress ane lewat localhost…

  7. bangali

    siiiiip pak….tapi saya coba merubahnya kok pake bayar, apa memang bayar ato gratis pak, makasih atas penjelasannya sebelumnya !!!!

  8. barajablog

    Baru belajar nich mas.. Mohon bimbingannya..

    Sudah saya lakukan tahap pertama, setelah di cek di appereance tetapi belum bisa di aktifkan?

    Broken Themes

    The following themes are installed but incomplete. Themes must have a stylesheet and a template.

    Name Description
    Theme Ku Template is missing.

  9. Harry R

    Akhirnya yang dicari2 ketemu juga. Udah dari dulu kpengen bikin themes sendiri. Smoga banyak nanti nya para web designer lokal yg bikin theme wordpress.

  10. saya

    permisi pa.. saya baru nemu infonya sekarang, telat memang. tapi buat ilmu ga ada kata telat kan? jadi saya mau nanya.. kan dalam appserv itu ada file www tapi ga ada file wordpress. ada yang tau dimana download versi yang ada file wordpressnya? saya pake appserv-win32-2.6.0. terima kasih

  11. Saih

    Assalamu’alaikum
    mau tanya, bagaimana cara mengupload theme ke wordpress.org ya ?
    Terima kasih atas infonya.
    Wassalamu’alaikum

  12. Indonesia Terkini

    Ajib bener gan tutorialnya…ijin bookmark sama copy urlnya buat jaga2…ane baca smp sini dulu,,,bljr php-nya dulu 😀 mantab banget dah pokoknya buat pemula seperti saya…makasih gan info tutorialnya…

  13. Yanuar

    Terima kasih tutorialnya. Saya belajar dari awal dan mendapatkan hasil yang “menurut saya” bagus. Memang menyenangkan ngutak-atik cms.

  14. johan

    hahahahaa… Gila, super GILA XD saya ketawa-ketiwi baca artikel ini mas. ternyata bikin tema wordpress mudah banget ya. 😀 terima kasih mas, sangat mencerahkan… 😉

  15. blog here

    I just want to say I am very new to blogging and really loved your website. Probably I’m likely to bookmark your blog . You really have incredible articles. Thank you for revealing your web site.

  16. a fantastic read

    I simply want to say I am just all new to blogs and definitely loved this page. Almost certainly I’m planning to bookmark your blog post . You surely have outstanding articles. Thanks for revealing your web site.

  17. Eliz Draggett

    Fantastic goods from you, man. I’ve understand your stuff previous to and you are just extremely great. I actually like what you’ve acquired here, certainly like what you are stating and the way in which you say it. You make it entertaining and you still care for to keep it wise. I can’t wait to read much more from you. This is really a wonderful website.

  18. free xbox live gold membership

    The most popular causes of citing Twitter inside the divorce proceedings petitions were definitely inappropriate text messages to individuals the alternative making love (‘Facebook cheating’), split up husbands and wives publishing horrible remarks about one another and good friends revealing spouse’s carry out

  19. Debrah Corron

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

  20. Rene Stangel

    Pretty section of content. I just stumbled upon your website and in accession capital to assert that I get actually enjoyed account your blog posts. Anyway I’ll be subscribing to your feeds and even I achievement you access consistently fast.

  21. Gregory Despain

    Apple now has Rhapsody as an app, which is a great start, but it is currently hampered by the inability to store locally on your iPod, and has a dismal 64kbps bit rate. If this changes, then it will somewhat negate this advantage for the Zune, but the 10 songs per month will still be a big plus in Zune Pass’ favor.

  22. Sid Sharpey

    I loved as much as you’ll receive carried out right here. The sketch is tasteful, your authored subject matter stylish. nonetheless, you command get bought an impatience over that you wish be delivering the following. unwell unquestionably come more formerly again since exactly the same nearly a lot often inside case you shield this hike.

  23. Earleen Querio

    You really make it seem so easy with your presentation but I find this topic to be actually something that I think I would never understand. It seems too complex and very broad for me. I’m looking forward for your next post, I will try to get the hang of it!

Comments are closed.