Pemrograman

Bahasa

Framework

Peralatan

Info

Membuat tema Wordpress dari nol: (0) konstruksi tema

– 13 February 2016

Hi, saya sedang belajar membuat tema wordpress dari nol dan ingin membagikan apa yang telah dipelajari. Mungkin postingan ini cocok disebut catatan belajar.

Persiapan dan peralatan

Sebelum memulai, pastikan sudah menginstal wordpress dan alat-alat untuk membuat temanya.
  1. Text editor (untuk menulis kode tema)
  2. Web browser (untuk menampilkan hasilnya)

Konstruksi awal tema

Semua tema wordpress terletak di direktori wp-content/themes. Di sanalah kita akan meletakan tema yang akan dibuat. Buatlah sebuah direktori baru di sana. Sebagai contoh, saya membuat sebuah direktori bernama petanikode.

Kita akan meletakan semua file tema di dalam direktori tersebut. Pada tahapan awal pembuatan tema ini, kita buat dulu dua file penting, yaitu:
  1. index.php; dan
  2. style.css
File index.php adalah file utama yang akan diaksess saat website dibuka. Sementara itu, file style.css berisi kode CSS untuk menghias dan mengatur tampilan tema. Letakkan kedua file tersebut di dalam direktori petanikode. Karena, akan menjadi fondasi awal tema kita.

Isi file index.php:
<!DOCTYPE html>
<html>
    <head>
         <title>Tema Wp pertama</title>
    </head> 

<body>
    <h1>Hello world, ini adalah tema Wordpress perama saya</h1>
    <p>dibuat dari nol dengan penuh semangat<p> 
</body>
<html>
dan isi file style.css:
/*
Theme Name: Petani Kode
Author: Ardianta Pargo
Author URI: https://twitter.com/ArdiantaPargo
Version: 0.1
Description: Tema ini untuk belajar membuat tema dari nol. Saat ini isinya masih sedikit karena masih dasar. Insa'allah nanti akan menjadi makin banyak.
*/

Ujicoba tema baru

Masuk ke wp-admin>appearance>themes, di sana kita akan menemukan sebuah tema misterius. Tema yang baru saja kita buat. Silahkan aktifkan tema tersebut.

Setelah itu, coba buka website wordpress-nya.
Hore! selamat. Tema pertama kita sudah bisa digunakan. Ini adalah tampilan awal. Tentu, ini bukan hasil akhir yang kita inginkan. Kedepan insa'allah akan kita kembangkan bersama. Cukup ini saja dulu. [bersambung...]