
Cara membuat theme wordpress (2021)
Akhirnya seri tutorial cara membuat theme wordpress sendiri dengan mudah hingga siap pakai dari InsertApps sudah mulai terlaksana.
Mudah-mudahan serial membuat tema WordPress sendiri dari 0, bisa terus berlanjut hingga selesai.
Bahkan theme hasil coding sedikit demi sedikit bisa kalian jual di marketplace themeforest. π Semoga saja.
Prerequisite tutorial coding theme Wordpress
Ada prasyarat untuk mengikuti seri tutorial cara membuat template wordpress ini!
Skil dasar yang harus dipenuhi adalah:
- Menguasai HTML dan CSS π
- Mengerti pemrograman PHP π¨
- Paham bahasa JavaScript π
βοΈ QUICK FAQ: Pertanyaannya: Saya belum menguasai betul bahasa pemrograman web? Apakah bisa mengikuti seri cara membuat theme wordpress ini? π
Bisa-bisa saja. Tapi yakinlah satu hal, zaman serba instan ini bisa saja menguasai bahasa pemrograman web dalam beberapa jam, dengan metode, sambil nyelam minum air.
Saat tiba di bagian yang tidak mengerti, silahkan cari dan pelajari maksud dari potongan kode itu sendiri. Setelah itu lanjut lagi ketik baris code berikutnya. π
Software untuk membuat theme wordpress
Untuk membuat software memang membutuhkan software lain. Membuat sebuah theme WordPress tidak membutuhkan software yang berat dan mahal. Semuanya ringan plus free tek-tok.
Hanya ada tiga software utama untuk bisa terlaksana dengan mulus proses coding WordPress sendiri di rumah.
Apa saja softwarenya:
1. Software coding theme wordpress:
- Visual Studio Code π₯
- Sublime Text π₯
- Atom
- Notepad++
- Dll sesuai selera
2. Software untuk menjalankan server PHP secara lokal:
- XAMPP π
- MAMP β
- WampServer
- AMPPS
Bingung memilih server PHP desktop yang terbaik dari beragam appsβ Saya telah mengulas dua apps server lokal yang populer: Antara XAMPP dan MAMP, Pilih Mana?
3. Browser
Semua aplikasi browser modern. Update terbaru lebih baik, seperti:
- Google Chrome
- Firefox
- Safari (macOS)
- Edge
- Opera
Nah… Setelah semuanya siap dan server PHP dan MySQL running, mari kita coding.
Steps 1 Persiapan Bahan Dasar
Syarat sahnya membuat sebuah theme WordPress wajib memiliki 4 file utama dalam satu folder theme, yaitu;
- File
index.php
β - File
style.css
β - File
functions.php
βοΈ - Image file
screenshoot.png
βοΈ

Kok cuma 4β Isi file dalam theme WordPress gratis saja banyak sekaliβ
Untuk sementara, abaikan dulu file partial template yang lain seperti: single.php
, header.php
, footer.php
dan sidebar.php
.
Di sesi tutorial ini, fokus dulu pada keempat file tersebut.
Keempat file tadi, simpan dalam satu folder. Nama folder menjadi nama resmi theme WordPress kamu.
Di tutorial membuat tema wordpress dengan bootstrap, eh salah, tapi dengan framework CSS Basscss, nama themenya: “pehtheme”.
Untuk nama theme WordPress kalian, silahkan namai sesuka hati, asal jangan nama mantanβrahasia nama mantan cukup untuk password saja π .
Insert folder bakal wp theme tersebut ke server php lokal (htdoc) desktop kalian di directory /wp-content/theme/pehtheme/
.
Steps 2 Insert script dasar ke dalam 3 file utama
Melalui editor VS Code, import folder pehtheme. Buka ketiga semua file tersebut, kecuali file image screenshoot.png.

Lalu insert code berikut:
1. File index.php
Untuk file index.php
, basic script template berupa struktur dasar dokumen html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>hello world...</p>
</body>
</html>
π₯ QUICK TIPS: Untuk mencetak struktur dasar document HTML dengan cepat di Visual Studio Code, cukup ketik html:5
-> Tab
keyboard. Kalau di sublime text, harus pasang plugin emmet lebih dulu.
2. File style.css
Dalam file style.css
stylesheet wajib ada dan harus tertera pada bagian header file diisi dengan informasi berikut:
/*
Theme Name: PehTheme
Theme URI: https://insertapps.com/themes/pehtheme/
Author: the InsertApps team
Author URI: https://insertapps.com/
Description:
Tags: simple, blog, one-column, custom-menu, menu-scroll, side-nav
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pehtheme
*/
Kode itu menjadi basis informasi theme kamu yang tampil dalam dashboard WordPress, khususnya di menu wp-admin => Appearance => Themes
.
3. File functions.php
File functions.php
berfungsi untuk mengaktifkan fitur-fitur khusus yang disediakan oleh CMS WordPress.
By default, beberapa fitur khusus seperti, menu, gambar featured dll dalam kondisi disable. Melalui file functions.php
fitur bawaan WordPress yang tertidur bisa diaktifkan berdasarkan kebutuhan theme.


Apa saja fitur yang harus diaktifkan dari sisi theme development? Ada banyak sih. Untuk sementara cukup mengaktifkan menu
, post-thumbnails
saja.
Untuk mempermudah manage title, boleh mengaktifkan title-tag
untuk mempercepat coding theme kalian.
<?php
if (!function_exists('pehtheme_setup')) :
function pehtheme_setup()
{
//Let WordPress manage the document title <title> tag in the document head.
add_theme_support('title-tag');
//Enable support for post thumbnails and featured images.
add_theme_support('post-thumbnails');
// Add support for navigation menus.
add_theme_support('menus');
}
endif;
add_action('after_setup_theme', 'pehtheme_setup');
Silahkan copy script di atas ke dalam file functions.php
kalian, lalu save.
Untuk bahan rujukan lebih lengkap tentang add_theme_support
buka laman dokumentasi WordPress
Steps 3 Menguji coba theme WordPress handcraft kalian
Hingga steps 2, theme buah tangan kalian sudah bisa running dan siap dijalankan. Kalau tidak ada typo dalam baris kode PHP dan CSS, theme siap running.
Caranya, masuk ke menu wp-admin/appearance/theme/
. Pilih dan klik tombol active. Tadaa… Browser berhasil merender theme pehtheme dengan isi, Hello World… saja. π±
Walau masih kosong melompong. Tak apalah, ini baru permulaan. Selanjutnya bersambung ke tutorial membuat theme WordPress berikutnya: Cara menampilkan Menu Navigasi WordPress. π
Comment
comments powered by Disqus