1. InsertApps
  2. Blog
  3. Cara membuat theme wordpress (2021)
Cara membuat theme wordpress (2021)
Animasi sidebar menu. (Ilustrasi dari Freepik)

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:

  1. Menguasai HTML dan CSS 😆
  2. Mengerti pemrograman PHP 😨
  3. 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;

  1. File index.php ✅
  2. File style.css ✅
  3. File functions.php ☑️
  4. Image file screenshoot.png ✔️
Siapkan satu folder dan isi tiga file utama
Siapkan satu folder dan isi tiga file utama

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.

Open folder di VS Code.
Open folder di VS Code.

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.

Fitur menu sebelumnya disable.
Fitur menu sebelumnya disable.
Mengaktifkan fitur add feature image WordPress.
Mengaktifkan fitur add feature image WordPress.

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. 🙏

Banner Join our Telegram Channel

Comment

comments powered by Disqus