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.
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 🙂
83 replies on “Membangun Theme WP: Style.css”
Mantap mas,ditunggu kelanjutannya subscribed dulu deh 😀
ini manual banget ya dan kok cuma “kepalanya” doang, hehehe… ditunggu lanjutannya mas. Bravo.
Yup, pelan-pelan. kalau langsung lengkap saya jamin udah ditutup duluan tapi nggak ngerti apa-apa 😀
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.
file style.css-nya ada kan? trus file index.php apakah ada juga? Minimal harus ada 2 file itu
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.. 🙁
cara membuat file style.css dari mana di mulai
Bismillah, biar amatiran tapi tetep pengen pinter gan. Boleh ikut nyemak kan?
Ini yang saya cari-cari…baca-baca sumber yang Bahasa Inggris malah pusing karena tidak dari dasar.
Nantinya akan ada tambahan cara membuat menu theme option di admin tidak? Biar kalau merubah-rubah cukup dari admin saja.
جزاكم الله خيرا
Sudah ada. Langsung cek daftar isinya aja (lihat bagian navigasi atas blog ini)
iya mas sudah saya bookmark nih,
tambah mantap kang lutvi ini terima kasih pembelajarannya
mas, mau tanya nih. kalau folder wp content yang ada di localhost itu ada dimana ya?
udah cari-cari belum ketemu juga.
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.
Kalau pake Xampp lokasi foldernya di
C:\xampp\htdocs\wordpress\wp-content
syaratnya pas install xampp di driver C 😀
ikut pantau yaa
wah harus belajar dari nol neh
hm…. next …
Belum ngerti PHP, belajar dulu ah
edit css malah bikin mumet kepala mas
ok…tutorial selanjutnya..hehe
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 😀
Pakai standart-nya aja 🙂
yang standar itu yang mana ?? haha
nice admin, sangat membantu
Need Helep mas..
saya lagi nyoba web building di http://demo.beautyfunbiz.net/ tapi enggak tau kenapa setelah nyoba nambah widget 1 di bagiankiri, tiba-tiba semua widget dan konten jadi di luar kotak. itu kenapaa yaa?? makasiih 🙂
gan ko ngga muncul deh di wordpressnya itu kenapa ya? dan itu file wordpressnya ditaro dimana ya gan
Wah dah mulai nih…, ngikut terus ah…,
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
screenshot cmIIw itu yg mana
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…
ane udah instal appserver tpi gmna cara pakainya biyar..bisa edit ato buka cpanel wordpress ane lewat localhost…
Lanjutan css ny dmn ya gan? 🙂
Bikin greeget aja nih. lanjut……………………..
Wah,, akhirnya nemuin cara membuat themes wordpress. Ijin bookmark dulu gan 😀 mau blajar dari sini ajah 😀
makasih atas infonya gan 🙂
siiiiip pak….tapi saya coba merubahnya kok pake bayar, apa memang bayar ato gratis pak, makasih atas penjelasannya sebelumnya !!!!
wah makasih banyak telah kasih ilmunya, sgt bermanfaat. mantap bro
akhirnya aku ke sasar deh ke situs yang sangat berguna sekali ..aku tidak menyesal..he…he..
folder style css di simpan di mana gan…? di pc atau dimana…?
itumah cuman komentar doang
==”
suram
tahap demi tahap pembuatan theme wp akan saya pelajari di sni ..
terimakasih atas tutorialnya mas 😀
jadi tertarik untuk membuat themes sendiri
siiip mampir disitus ane ya
ok ane sedikit ngerti, lanjut lagi ke part berikutnya.. loL
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.
kebetulan saya pemula dalam hal blog.
makasi atas ilmunya pak…
Ilmunya sunggu bermanfaat 😀 terimakasih semoga menjadi amal jariyyah ^^
Lanjut lagi kebagian selanjutnya ah. Terimakasih. Sungguh sangat membantu. 😀
Saatnya bilang ‘Woow’..
Sesuatu banget deh!
Diluar sana banyak ilmu yg diperjual belikan, tp disini di share gratis. MANTAB!
Akhirnya yang dicari2 ketemu juga. Udah dari dulu kpengen bikin themes sendiri. Smoga banyak nanti nya para web designer lokal yg bikin theme wordpress.
Dimana tutor lengkapnya gan?
makasih tutornya kang, jadi pengen buat nih.
ok lah thx akan terus update tahap selanjutnya
terima kasih mas tutornya.
saya ijin ngelanjutin ampe tamat ni cerita. 😀
di bookmark yah tutorialnyya 🙂
Nice info..saya udah kerjakan sampe beres! akhirnya jadi juga..thanks bro!
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
mantaps buat theme nya. udah aku cobain 😀
Selai
Assalamu’alaikum
mau tanya, bagaimana cara mengupload theme ke wordpress.org ya ?
Terima kasih atas infonya.
Wassalamu’alaikum
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…
Terima kasih tutorialnya. Saya belajar dari awal dan mendapatkan hasil yang “menurut saya” bagus. Memang menyenangkan ngutak-atik cms.
makasih mas dah membantu saya krn saya hanya make theme orang jadi pingin buat theme sendiri gitu…
jadi, fungsinya AppServ buat preview template yak??????
#jadi tambah greget, pengen pindah ke hosting sendiri 😀
sip dah gan.. langsung ke TEKAPE..
hahahahaa… Gila, super GILA XD saya ketawa-ketiwi baca artikel ini mas. ternyata bikin tema wordpress mudah banget ya. 😀 terima kasih mas, sangat mencerahkan… 😉
mkasih ……
Nyimak Gan, sambil mau belajar maklum Gan newbe Gaptek….
ini dia yang saya cari2 mas, terimakasih banyak ya. Bookmark dulu tutorialnya
wiss komplet banget tutorialnya, dari nol bikin smpai jadi. Bookmark lah dulu biar ga lupa 😀
Lanjutkan mas bro.. setia menyimak dari jauh.. He 😀
apa hanya saya yang bingung di localhost nya?
cara ke localhost nya gimana?
akhirnya ketemu juga tutorial membaut Themes WP nya, izin bookmark dulu ya mas.. Udah tengah malam soalnya..
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.
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.
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.
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
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.
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.
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.
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.
Very good info. Lucky me I ran across your site by accident (stumbleupon). I’ve book marked it for later!
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!