Membuat Custom Theme di WordPress adalah cara terbaik untuk memiliki kontrol penuh atas desain, fungsionalitas, dan performa website Anda. Meskipun ada ribuan tema siap pakai yang tersedia, membuat tema sendiri memungkinkan Anda membangun sesuatu yang benar-benar unik dan dioptimasi secara spesifik untuk kebutuhan Anda, tanpa bloat dari fitur yang tidak terpakai.

Proses pembuatan tema kustom membutuhkan pemahaman dasar tentang HTML, CSS, PHP, dan JavaScript. Jika Anda seorang developer atau ingin belajar lebih dalam tentang pengembangan WordPress, ini adalah langkah yang tepat.

Sebelum mulai coding, siapkan lingkungan pengembangan lokal Anda. Ini penting agar Anda bisa menguji tema tanpa memengaruhi website live.

1. Instal Lingkungan Lokal:

   • XAMPP / MAMP / Laragon: Ini adalah software yang menginstal Apache, MySQL, dan PHP di komputer Anda, memungkinkan Anda menjalankan WordPress secara lokal.

   • DevKinsta / Local by Flywheel: Alat khusus untuk pengembangan WordPress lokal yang lebih user-friendly.

2. Instal WordPress di Lingkungan Lokal: Ikuti langkah-langkah instalasi WordPress biasa di lingkungan lokal Anda.

3. Siapkan Editor Kode: Gunakan editor kode seperti VS Code, Sublime Text, atau PhpStorm.

Struktur Dasar Custom Theme WordPress

Setiap tema WordPress setidaknya membutuhkan dua file utama: style.css dan index.php.

Mari kita buat folder tema baru di direktori wp-content/themes/ (misalnya, wp-content/themes/namatemaanda).

1. style.css (Stylesheet Utama)

File ini berisi informasi tema Anda dan semua gaya CSS.

Buat file style.css di dalam folder tema Anda dan tambahkan komentar header berikut:

CSS

/*
Theme Name: Nama Tema Anda
Theme URI: https://contohtemaanda.com/ (URL situs Anda jika ada)
Author: Nama Anda
Author URI: https://namaanda.com/
Description: Tema kustom yang dibuat untuk kebutuhan spesifik.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: custom, responsive, light
Text Domain: namatemaanda
*/

/* --- Tambahkan CSS Anda di bawah ini --- */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}
.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px;
}

Setelah file ini dibuat, Anda sudah bisa melihat tema Anda di dashboard WordPress (Appearance > Themes), meskipun belum berfungsi penuh. Aktifkan tema Anda.

2. index.php (Template Utama)

Ini adalah file inti yang akan menampilkan konten website Anda.

Buat file index.php di dalam folder tema Anda:

PHP

<?php
/**
 * The main template file
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package NamaTemaAnda
 */

get_header(); // Memanggil header.php
?>

<div id="primary" class="content-area">
    <main id="main" class="site-main">
        <div class="container">
            <?php
            if ( have_posts() ) :
                while ( have_posts() ) : the_post();
                    // Konten loop WordPress
                    ?>
                    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                        <header class="entry-header">
                            <?php the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' ); ?>
                        </header><div class="entry-content">
                            <?php the_content(); ?>
                        </div></article><?php
                endwhile;
            else :
                // Jika tidak ada postingan
                ?>
                <p>Maaf, tidak ada konten yang ditemukan.</p>
                <?php
            endif;
            ?>
        </div></main></div><?php
get_sidebar(); // Memanggil sidebar.php (opsional)
get_footer(); // Memanggil footer.php

3. Memecah Tema (Template Files)

Tema WordPress yang baik dibagi menjadi beberapa bagian untuk pengelolaan yang lebih mudah.

• header.php: Berisi pembuka HTML, <head>, navigasi, logo, dll.

• footer.php: Berisi penutup HTML, script JS, dan area footer.

• sidebar.php: Berisi widget atau konten sidebar.

• functions.php: Tempat Anda menambahkan fungsionalitas kustom tema, enqueue script, stylesheet, dan mendaftarkan fitur.

Contoh header.php:

PHP

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?> // WAJIB ada untuk plugin dan script WordPress
</head>
<body <?php body_class(); ?>>
<div id="page" class="site">
    <a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'namatemaanda' ); ?></a>
    <header id="masthead" class="site-header">
        <div class="site-branding">
            <?php
            the_custom_logo(); // Menampilkan logo kustom jika diatur
            if ( is_front_page() && is_home() ) :
                ?>
                <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
                <?php
            else :
                ?>
                <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
                <?php
            endif;
            $namatemaanda_description = get_bloginfo( 'description', 'display' );
            if ( $namatemaanda_description || is_customize_preview() ) :
                ?>
                <p class="site-description"><?php echo $namatemaanda_description; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></p>
                <?php
            endif;
            ?>
        </div><nav id="site-navigation" class="main-navigation">
            <?php
            wp_nav_menu( array(
                'theme_location' => 'main-menu', // Lokasi menu yang akan Anda daftarkan di functions.php
                'menu_id'        => 'primary-menu',
            ) );
            ?>
        </nav></header><div id="content" class="site-content">

Contoh footer.php:

PHP

    </div><footer id="colophon" class="site-footer">
        <div class="site-info">
            <?php
            echo sprintf( esc_html__( 'Copyright &copy; %1$s %2$s. All rights reserved.', 'namatemaanda' ), date_i18n( __( 'Y', 'namatemaanda' ) ), '<a href="' . esc_url( home_url( '/' ) ) . '">' . get_bloginfo( 'name' ) . '</a>' );
            ?>
        </div></footer></div><?php wp_footer(); ?> // WAJIB ada untuk plugin dan script WordPress
</body>
</html>

4. functions.php (Pusat Fungsionalitas Tema)

Ini adalah file yang sangat penting. Di sinilah Anda mendaftarkan fitur tema, meng-enqueue script dan stylesheet, serta menambahkan fungsionalitas kustom.

Buat file functions.php di dalam folder tema Anda:

PHP

<?php
/**
 * Functions and definitions
 *
 * @link https://developer.wordpress.org/themes/basics/theme-functions/
 *
 * @package NamaTemaAnda
 */

if ( ! function_exists( 'namatemaanda_setup' ) ) :
    /**
     * Sets up theme defaults and registers support for various WordPress features.
     *
     * Note that this function is hooked into the after_setup_theme hook, which
     * runs before the init hook. The init hook is too late for some features, such
     * as indicating support for post thumbnails.
     */
    function namatemaanda_setup() {
        /*
         * Make theme available for translation.
         * Translations can be filed in the /languages/ directory.
         * If you're building a theme based on NamaTemaAnda, use a find and replace
         * to change 'namatemaanda' to the name of your theme in all the template files.
         */
        load_theme_textdomain( 'namatemaanda', get_template_directory() . '/languages' );

        // Add default posts and comments RSS feed links to head.
        add_theme_support( 'automatic-feed-links' );

        /*
         * Let WordPress manage the document title.
         * By adding theme support, we declare that this theme does not use a
         * hard-coded <title> tag in the document head, and expect WordPress to
         * provide it for us.
         */
        add_theme_support( 'title-tag' );

        /*
         * Enable support for Post Thumbnails on posts and pages.
         *
         * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/
         */
        add_theme_support( 'post-thumbnails' );

        // This theme uses wp_nav_menu() in one location.
        register_nav_menus( array(
            'main-menu' => esc_html__( 'Main Menu', 'namatemaanda' ),
            // Anda bisa menambahkan lokasi menu lain di sini
        ) );

        /*
         * Switch default core markup for search form, comment form, and comments
         * to output valid HTML5.
         */
        add_theme_support( 'html5', array(
            'search-form',
            'comment-form',
            'comment-list',
            'gallery',
            'caption',
            'style',
            'script',
        ) );

        // Add theme support for selective refresh for widgets.
        add_theme_support( 'customize-selective-refresh-widgets' );

        /**
         * Add support for core custom logo.
         *
         * @link https://developer.wordpress.org/themes/functionality/custom-logo/
         */
        add_theme_support( 'custom-logo', array(
            'height'      => 250,
            'width'       => 250,
            'flex-width'  => true,
            'flex-height' => true,
        ) );
    }
endif;
add_action( 'after_setup_theme', 'namatemaanda_setup' );

/**
 * Enqueue scripts and styles.
 */
function namatemaanda_scripts() {
    wp_enqueue_style( 'namatemaanda-style', get_stylesheet_uri(), array(), '1.0' ); // Menggunakan style.css
    // Jika Anda punya file CSS lain:
    // wp_enqueue_style( 'namatemaanda-custom-css', get_template_directory_uri() . '/css/custom.css', array(), '1.0' );

    wp_enqueue_script( 'namatemaanda-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
    // Jika Anda punya file JS lain:
    // wp_enqueue_script( 'namatemaanda-custom-js', get_template_directory_uri() . '/js/custom.js', array('jquery'), '1.0', true );

    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'namatemaanda_scripts' );

// Anda bisa menambahkan fungsi kustom lainnya di sini, seperti:
// Custom Post Types, Taxonomies, Shortcodes, dll.

• wp_head() dan wp_footer(): Ini adalah hook WAJIB di header.php dan footer.php Anda. Plugin WordPress dan beberapa fitur inti WordPress menggunakannya untuk menyuntikkan script dan stylesheet. Tanpa ini, banyak hal tidak akan berfungsi.

• namatemaanda_setup(): Fungsi ini di-hook ke after_setup_theme dan digunakan untuk mendaftarkan dukungan tema untuk berbagai fitur (seperti post thumbnails, custom logo, title tag, dll.).

• namatemaanda_scripts(): Fungsi ini di-hook ke wp_enqueue_scripts dan digunakan untuk memuat stylesheet (style.css Anda) dan script JavaScript Anda. Pastikan Anda membuat folder js jika ingin menambahkan script JavaScript terpisah (misalnya, js/navigation.js).

5. Hierarki Template WordPress (Penting!)

WordPress memiliki sistem hierarki template yang menentukan file mana yang akan digunakan untuk menampilkan konten tertentu. Memahami ini penting untuk membuat tema yang lengkap.

• index.php: Template fallback (jika tidak ada file lain yang lebih spesifik ditemukan).

• home.php: Halaman blog posts (jika diatur sebagai halaman beranda statis).

• front-page.php: Halaman beranda statis.

• single.php: Untuk menampilkan satu postingan (single post).

• page.php: Untuk menampilkan satu halaman statis (single page).

• archive.php: Untuk menampilkan halaman arsip (kategori, tag, tanggal, penulis).

• category.php / tag.php: Lebih spesifik untuk kategori atau tag tertentu.

• search.php: Halaman hasil pencarian.

• 404.php: Halaman "Tidak Ditemukan".

Anda bisa membuat file-file ini di folder tema Anda untuk mengontrol tampilan setiap jenis halaman.

6. Screenshot Tema (screenshot.png)

Untuk membuat tema Anda terlihat bagus di dashboard (Appearance > Themes), tambahkan gambar screenshot.png di dalam folder tema Anda. Ukuran ideal adalah 1200x900 piksel.

7. Kembangkan dan Uji

• HTML & CSS: Bangun struktur HTML di file PHP Anda dan beri gaya dengan CSS.

• Loop WordPress: Pahami dan gunakan The Loop (blok if ( have_posts() ) : while ( have_posts() ) : the_post(); ... endif;) untuk menampilkan konten dinamis.

• Template Tags: Gunakan template tags seperti the_title(), the_content(), the_permalink(), bloginfo(), dll. untuk mengambil data WordPress.

• Pengujian Responsif: Pastikan tema Anda terlihat dan berfungsi dengan baik di berbagai ukuran layar (desktop, tablet, mobile).

• Uji Fungsionalitas: Pastikan menu, widget, komentar, dan fitur lain berfungsi.

Tips Tambahan:

• Gunakan Child Theme: Jika Anda membangun tema dari tema dasar yang sudah ada (misalnya, Twenty Twenty-Four, Astra), buatlah Child Theme. Ini memungkinkan Anda memodifikasi tema tanpa kehilangan perubahan saat tema induk diperbarui.

• Accessibility: Pastikan tema Anda dapat diakses oleh semua pengguna.

• Security Best Practices: Tulis kode yang aman. Selalu escape output (esc_html(), esc_attr(), esc_url()) dan sanitize input.

• Performance: Optimalkan tema Anda untuk kecepatan. Kurangi request HTTP, kompres CSS/JS, dan optimalkan gambar.

• Version Control (Git): Gunakan Git untuk melacak perubahan pada kode tema Anda.

Membuat custom theme adalah proyek yang rewarding. Ini memberi Anda kendali penuh dan pemahaman mendalam tentang cara kerja WordPress. Lanjutkan dengan bereksimen, belajar dari dokumentasi resmi WordPress Developer, dan membangun apa yang Anda impikan!