Tutorial Cara Membuat Tema WordPress dari Nol (Tanpa Plugin & Tanpa Ribet)

by hyvercode

Pernahkah kamu membuka situs web yang desainnya begitu pas — tidak terlalu ramai, tidak terlalu datar, tapi justru bikin kamu betah berlama-lama di sana? Lalu kamu cek di footer: “Dibuat dengan tema kustom”. Bukan Astra. Bukan Kadence. Bukan bahkan Hello Elementor. Tapi benar-benar buatan tangan.

Nah, ini bukan rahasia industri — ini skill nyata yang bisa kamu kuasai dalam 2–3 jam, asal tahu langkah pastinya. Bukan dengan mengedit file style.css di tema anak (child theme), tapi dengan membuat tema WordPress *dari nol*: struktur dasar, markup bersih, CSS terkendali, dan tetap kompatibel dengan Gutenberg — tanpa plugin bloat, tanpa dependency tak perlu, dan tanpa kehilangan kendali atas kode milikmu sendiri.

Mengapa Harus Bikin Tema Sendiri?

Karena tema siap pakai itu seperti sepatu di toko: ukurannya “hampir pas”, tapi selalu ada bagian yang sedikit sempit di tumit atau agak longgar di ujung jari. Kamu akhirnya menyesuaikan diri dengan sepatunya — bukan sepatunya yang menyesuaikan kakimu.

  • Kamu tahu persis apa yang dijalankan di server — tidak ada kode tersembunyi untuk tracking, iklan, atau “fitur premium” yang dikunci
  • Kecepatan loading lebih terprediksi: tidak ada 15 script eksternal yang saling berebut prioritas
  • Kamu bisa menulis markup HTML sesuai standar modern — bukan markup warisan tahun 2012 yang masih pakai <div class="content"> di mana-mana
  • Jika suatu hari kamu ganti hosting, pindah ke headless, atau migrasi ke Jamstack — struktur temamu tetap bisa dipakai sebagai basis komponen statis

Persiapan Sebelum Mulai: 3 Hal Wajib

Tidak butuh software berat. Tidak butuh akun premium. Cukup siapkan ini:

  • Editor teks ringan: VS Code (gratis) atau Notepad++ — bukan Word atau Google Docs!
  • Instalasi lokal WordPress: Gunakan LocalWP, XAMPP, atau Docker — pastikan kamu bisa mengakses http://localhost tanpa error
  • Browser dengan DevTools terbuka: Untuk langsung melihat perubahan CSS & struktur DOM saat kamu ketik

💡 Catatan penting: Jangan mulai dari folder wp-content/themes/twentytwentyfour. Itu bukan tempat belajar — itu museum kode. Kita akan buat folder baru dari nol, di dalam wp-content/themes/, dengan nama yang kamu pilih sendiri.

Langkah 1: Buat Struktur Dasar Tema

Buka folder wp-content/themes/ di instalasi lokalmu. Di sana, buat folder baru — misalnya namanya tema-sederhana. Di dalamnya, buat dua file wajib:

  • style.css — file identitas tema
  • index.php — template utama yang ditampilkan kalau tidak ada template spesifik

Isi file style.css

Ini bukan file CSS biasa — ini juga berfungsi sebagai “kartu nama” tema di dashboard WordPress. Salin dan tempel ini (ganti nilai sesuai keinginanmu):

/*
Theme Name: Tema Sederhana
Theme URI: https://namakamu.dev/tema-sederhana
Author: Nama Kamu
Author URI: https://namakamu.dev
Description: Tema minimalis, cepat, dan sepenuhnya dikendalikan olehmu.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tema-sederhana
Tags: minimal, lightweight, custom, gutenberg-ready
*/

Simpan. Lalu buka Dashboard → Penampilan → Tema. Kamu akan lihat “Tema Sederhana” muncul — meski belum bisa diaktifkan karena belum ada index.php.

Isi file index.php

Ini adalah jantung temamu. Untuk sekarang, kita buat versi paling dasar — cukup agar WordPress mau menjalankannya:

<?php get_header(); ?>

<main class="site-main">
  <article class="post">
    <header class="post-header">
      <h1 class="post-title"><?php the_title(); ?></h1>
      <div class="post-meta">Diposting pada <?php the_date(); ?></div>
    </header>
    <div class="post-content">
      <?php the_content(); ?>
    </div>
  </article>
</main>

<?php get_footer(); ?>

Sekarang, tema bisa diaktifkan! Tapi tampilannya masih mentah — karena belum ada header, footer, maupun CSS. Mari lanjut.

Langkah 2: Tambahkan Header & Footer

WordPress punya sistem template part — jadi kamu tidak perlu menulis <head> dan <footer> di setiap file. Cukup buat dua file baru:

  • header.php
  • footer.php

File header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title><?php wp_title('|', true, 'right'); bloginfo('name'); ?></title>
  <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="site-header">
  <div class="site-branding">
    <h1 class="site-title"><a href="" rel="home"><?php bloginfo('name'); ?></a></h1>
  </div>
</header>
<nav class="main-navigation">
  <?php wp_nav_menu(['theme_location' => 'primary']); ?>
</nav>

File footer.php

</nav>
<footer class="site-footer">
  <p>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?>. Hak cipta dilindungi.</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>

Setelah itu, buat menu navigasi di Dashboard → Penampilan → Menu, lalu pilih lokasi “Primary” — dan simpan. Sekarang halamanmu sudah punya header, navigasi, dan footer yang hidup.

Ilustrasi struktur folder tema WordPress sederhana dengan file inti

Langkah 3: Registrasi Fungsi & Fitur Dasar

Agar tema benar-benar “hidup”, kamu butuh file functions.php. Ini bukan file PHP biasa — ini adalah otak temamu. Buat file baru bernama functions.php di folder tema-sederhana, lalu isi dengan ini:

<?php
// Pastikan file ini dimuat dengan aman
if (!defined('ABSPATH')) {
  exit;
}

// Load CSS & JS
function tema_sederhana_enqueue_scripts() {
  wp_enqueue_style('tema-sederhana-style', get_stylesheet_uri(), [], filemtime(get_template_directory() . '/style.css'));
}
add_action('wp_enqueue_scripts', 'tema_sederhana_enqueue_scripts');

// Support fitur inti WordPress
function tema_sederhana_setup() {
  add_theme_support('title-tag');
  add_theme_support('post-thumbnails');
  add_theme_support('automatic-feed-links');
  add_theme_support('html5', ['search-form', 'comment-form', 'comment-list', 'gallery', 'caption']);
  add_theme_support('custom-logo');
  add_theme_support('align-wide');
  add_theme_support('editor-styles');
}
add_action('after_setup_theme', 'tema_sederhana_setup');

// Daftarkan area menu
function tema_sederhana_register_menus() {
  register_nav_menus([
    'primary' => __('Menu Utama', 'tema-sederhana'),
  ]);
}
add_action('init', 'tema_sederhana_register_menus');

Dengan ini, tema-mu sudah mendukung thumbnail post, title dinamis, feed RSS, dan mode lebar penuh di editor Gutenberg — semua tanpa plugin tambahan.

Langkah 4: Tambahkan CSS Minimalis yang Bisa Diandalkan

Buka kembali style.css, dan tambahkan CSS di bawah komentar header (setelah blok /* ... */). Gunakan CSS modern — flexbox, clamp(), dan variabel CSS:

:root {
  --primary-color: #2a5c8c;
  --text-color: #333;
  --bg-color: #fff;
  --border-radius: 8px;
  --shadow: 0 2px 8px rgba(0,0,0,0.08);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--bg-color);
}

.site-header {
  padding: 1.5rem 5%;
  background: var(--primary-color);
  color: white;
}

.site-title a {
  color: white;
  text-decoration: none;
  font-size: clamp(1.2rem, 4vw, 1.8rem);
}

.main-navigation {
  padding: 1rem 5%;
  background: #f8f9fa;
}

.post-title {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  margin-bottom: 1rem;
}

.post-content p {
  margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .main-navigation {
    display: flex;
    justify-content: center;
  }
}

Coba refresh halaman. Lihat perubahannya? Itu bukan “theme customizer” — itu CSS murni yang kamu tulis, dan bisa kamu ubah kapan saja tanpa klik-klik tak berujung.

Apa Langkah Selanjutnya?

Kamu sudah punya fondasi temamu. Sekarang, kamu bisa memperdalam sesuai kebutuhan:

  • Buat single.php dan archive.php untuk kontrol tampilan postingan & daftar artikel
  • Tambahkan dukungan block patterns dengan theme.json — untuk mengatur warna, tipografi, dan spacing secara global
  • Integrasikan full-site editing dengan membuat index.html di folder templates/ — jika kamu ingin beralih ke FSE di masa depan
  • Optimalkan kecepatan: tambahkan loading="lazy" otomatis untuk gambar, atau nonaktifkan emoji & XML-RPC lewat functions.php

Ingat: tema bukan tentang seberapa banyak fitur yang dimiliki — tapi seberapa jelas kamu memahami tiap baris kode di dalamnya. Kalau kamu bisa menjelaskan kenapa wp_head() harus di dalam <head>, dan kenapa get_footer() harus di akhir — maka kamu sudah lebih dari sekadar pengguna WordPress. Kamu adalah pembuatnya.

Jika kamu ingin, saya bisa bantu lanjut ke tutorial lanjutan: cara membuat tema dengan block-based templates, atau cara mengemas tema ini jadi file ZIP siap upload ke situs produksi — termasuk checklist validasi sebelum publish.

Yang penting hari ini: kamu sudah melewati batas antara “menggunakan WordPress” dan “memahami WordPress”. Dan itu — tidak ada plugin yang bisa memberimu.

hyvercode

Leave a Reply

Your email address will not be published. Required fields are marked *

by hyvercode