Cara membuat tema WordPress sendiri dengan mudah

Untuk membuat tema WordPress sendiri sebenarnya tidak terlalu sulit. agar pekerjaan Membuat tema wordpress sendiri bisa dilakukan dengan mudah maka sebaiknya kita pelajari dulu bagian-bagian dari sebuah tema yang ada dalam CMS WordPress. secara garis besar tema wordpress memiliki 4 bagian atau element dasar yaitu : Header, Main Content, Sidebar, Dan footer.

Disini akan di ulas bagaimana membuat template wordpress yang sangat simple dimana hanya part-part dasar yang akan di gunakan dalam pembuatan template. saya asumsikan disini Anda sudah sedikit faham tentang snipet-snipet yang ada dalam coding wordpress, dan anda sudah menginstal CMS wordpress pada Hosting Online ataupun localhost computer masing-masing.
lebih di anjurkan untuk belajar membuat tema wordpress sendiri CMS wordpress di install di localhost sehingga proses yang di jalankan lebih cepat tidak pengaruh dengan koneksi internet.

berikut langkah-langkah yang akan kita lakukan dalam proses membuat tema wordpress sendiri dengan mudah dan cepat.

1 Membuat Folder Tema yang akan kita buat

buatlah sebuah folder dalam directory “wp-content/themes” dengan nama sesuka anda namun lebih baik dengan menggunakan huruf kecil semua dan tanpa spasi, misalnya kita buat sebuah folder dengan nama “tema-saya“. folder tema-saya itu nanti akan menyimpan file-file php, javascript, css, dan file gambar dari template yang akan kita buat.

2 Membuat file-file yang di perlukan untuk membuat tema wordpress sendiri

setelah Folder tema-saya telah dibuat maka waktunya kita membuat file-file pendukung dalam folder tersebut agar tema bisa di gunakan.
pada dasarnya sebuah tema wordpress ada 2 file dasar yang harus di miliki atau ada dalam folder tema terbut. 2 file tersebut adalah “style.css”, dan “index.php”. dengan adanya 2 file tersebut sebenarnya kita sudah bisa melihat tema wordpress. namun sebagai dasar pembuatan template kita tambahkan 1 file lagi yang nantinya akan memiliki fungsi fital untuk system dari tema itu sendiri. file tersebut akan kita berinama file “function.php”.
silahkan buat 3 file yang telah tersebut di atas, dan buka file “Style.css” yang baru di buat dengan text editor dan pastlekan kode dibawah ini.

penjelasan dari kode diatas adalah sebagai berikut

Theme Name: Tema Saya : “Tema Saya” adalah text yang nanti akan muncul dapa dasbord wordpress -> Themes.
Theme URI: https://ariwarna.net : “https://ariwarna.net” isikan dengan URL website anda .

dan kode-kode selanjutnya tentunya sudah bisa di mengerti maksud dan fungsinya.

jika sudah maka save file “style.css” yang baru di edit tersebut, dan silahkan dari wp-admin anda buka menu “Apperance” maka disana sebuah tema dengan nama “Tema Saya” sudah terlihat di antara tema-tema yang lain yang sebelumnya sudah terinstal. Anda sudah bisa mengaktifkan tema yang baru kita buat tadi dari wp-admin. Aktifkan dan coba periksa tampilan halaman depan Website/Blog kita.
tampilan akan Blank/putih dan tidak ada satu kontent sama sekali. yach berarti kita sudah berhasil membuat tema wordpress sendiri . agar tema bisa di gunakan dengan fungsi untuk menampilkan kontent-kontent website atau blog yang kita telah buat langkah selanjutnya adalah menuliskan perintah-perintah looping pada file “index.php”.
namun agar file index php nantinya tidak berisi script atau kode yang terlalu panjang maka kita akan pecah lagi part-partnya dengan membuat beberapa file lagi antara laiin “header.php”, dan “footer.php” dimana detailnya akan saya jelaskan seperti di bawah ini

3 Membuat File header.php

buatlah file header.php pada folder root dari tema (folder “tema-saya”) dan paste kan kode dibawah ini :

kode di atas tidak beda jaul dengan struktur template atau website kebanyakan berisi tag tag meta, title dan juga kita isikan part dari header di mana ada bagian logo atau h1 dari nama website atau blog kita. lanjut ke langkah selanjutnya membuat file “footer.php”

4 membuat file footer.php untuk membuat tema wordpress sendiri

masil dalam folder root dari tema kita yaitu folder “tema-saya” buat 1 file lagi dan berinama “footer.php” buka file tersebut dengan text editor kemudian pastle kan kode dibawah ini.

file footer.php berisi tag penutup dari <body> , <html> dan elemnt div yang tadi di buka pada file header.php, dalam file footer.php juga kita masukan credit dari web kita masing-masing. disini nantinya juga bisa di gunakan untuk menginclude file-file javascript yang di butuhkan. setelah file footer.php di buat dan di isi dengan kode seperti di atas, langkah selanjutnya adalah membuat looping pada file index.php yang sebelumnya telah dibuat dalam folder “tema-saya”.

5 Looping Post DI file index.php

buka file index.php dengan text editor yang biasa anda gunakan dan tuliskan kode seperti di bawah ini.

di atas dapat kita lihat bagaimana file header.php dan file footer.php di panggil untuk di tampilkan sementara pada bagian tengah atau main content di lakukan loop dari kontent post yang ada, di situ juga ada perintah kondisi ketika post kontent tidak ada dalam halaman/page tersebut.

jika 5 langkah ini sudah Anda jalankan anda sudah bisa menampilkan kontent website atau blog dengan menggunakan tema yang anda buat sendiri. silahkan periksa halam depan website anda maka tanpilan nya kurang lebih akan seperti gambar di bawah ini.

Tampilan Home Page

agar lebih kelihataan buatlah beberapa postingan contoh. maka tampilannya akan menjadi seperti dibawah ini.

Looping post

walaupun konten sudah bisa tampil namun template belum memiliki layout yang menarik agar tampilan lebih menarik selanjutnya yang kita lakukan adalah menambahkan stylesheet pada template kita dengan menambahkan css untuk setiap tag atau elemant kedalam file “style.css” .
namun untuk kali ini cukup sampai disini dulu artikel tengtang Cara membuat template wordpress sendiri. pada artikel selanjutnya kan kita tambahkan element navigasi menu dan sidebar widget pada tema buatan sendiri ini.

selamat mencoba dan akan kita lanjutkan ke artikel berikutnya tentang menambahkan file css ke dalam tema wordpress buatan kita sendiri.

untuk membuat navidasi menu dan sidebar widget pada tema wordpress baca artikel berikut :
Membuat navigasi menu dan sidebar widget

This post was written by...

– who has written 63 posts on AriWarna Net.

Contact the author