Cara Membuat Tema WordPress Sendiri dari Nol (Khusus Pemula)

5. Membuat Footer

Setelah membuat header.php, langkah berikutnya adalah membuat file footer.php. File ini digunakan untuk menampilkan bagian bawah website, seperti copyright, menu footer, informasi tambahan, atau penutup struktur HTML.

Sama seperti header, bagian footer biasanya muncul di hampir semua halaman. Jadi, daripada menulis kode footer berulang-ulang di setiap file template, kita cukup membuat satu file footer.php, lalu memanggilnya menggunakan fungsi get_footer().

Buat file baru di dalam folder tema kamu:

wp-content/themes/tema-saya/footer.php

Lalu isi dengan kode dasar seperti ini:

<footer class="site-footer">
  <div class="container">
    <p>
      &copy; <?php echo date( 'Y' ); ?>
      <?php bloginfo( 'name' ); ?>. All rights reserved.
    </p>
  </div>
</footer>

<?php wp_footer(); ?>
</body>
</html>

Kode di atas membuat footer sederhana yang menampilkan tahun berjalan dan nama website. Fungsi date( ‘Y’ ) digunakan untuk menampilkan tahun secara otomatis, sedangkan bloginfo( ‘name’ ) digunakan untuk mengambil nama website dari pengaturan WordPress.

Bagian yang paling penting di file ini adalah wp_footer(). Fungsi ini wajib diletakkan sebelum tag penutup </body>. Banyak plugin dan fitur WordPress membutuhkan wp_footer() untuk menambahkan script atau kode tambahan di bagian bawah halaman.

Kalau fungsi ini tidak ditambahkan, beberapa fitur bisa saja tidak berjalan dengan benar. Misalnya script plugin tidak termuat, fitur tertentu tidak muncul, atau tampilan website mengalami masalah.

Setelah file footer.php dibuat, fungsi get_footer() yang ada di index.php akan memanggil file ini secara otomatis. Jadi, halaman website kamu sekarang sudah punya bagian penutup yang lebih rapi.

Untuk tahap awal, footer sederhana seperti ini sudah cukup. Nanti kamu bisa mengembangkannya lagi dengan menambahkan menu footer, widget, link halaman penting, ikon media sosial, atau informasi lain yang dibutuhkan.

Jadi, file footer.php berfungsi sebagai penutup halaman sekaligus tempat penting untuk menjalankan fungsi wp_footer(). Dengan adanya file ini, struktur tema menjadi lebih lengkap dan sesuai standar WordPress.

6. Membuat File functions.php

Setelah membuat header.php dan footer.php, langkah berikutnya adalah membuat file functions.php. File ini berfungsi untuk menambahkan fitur dan pengaturan tambahan pada tema WordPress yang sedang kamu buat.

Kalau style.css dipakai untuk identitas dan tampilan, lalu index.php dipakai untuk menampilkan konten, maka functions.php bisa dianggap sebagai tempat untuk mengaktifkan berbagai fitur tema.

Misalnya, melalui file ini kamu bisa memanggil file CSS, menambahkan dukungan featured image, mendaftarkan menu navigasi, mengaktifkan title tag otomatis, sampai membuat widget area.

Buat file baru di dalam folder tema kamu:

wp-content/themes/tema-saya/functions.php

Untuk tahap awal, kamu bisa mengisi file functions.php dengan kode sederhana seperti ini:

<?php

function tema_saya_setup() {
  add_theme_support( 'title-tag' );
  add_theme_support( 'post-thumbnails' );

  register_nav_menus(
    array(
      'primary' => __( 'Menu Utama', 'tema-saya' ),
    )
  );
}
add_action( 'after_setup_theme', 'tema_saya_setup' );

function tema_saya_scripts() {
  wp_enqueue_style(
    'tema-saya-style',
    get_stylesheet_uri(),
    array(),
    '1.0'
  );
}
add_action( 'wp_enqueue_scripts', 'tema_saya_scripts' );

Kode di atas terdiri dari dua bagian utama. Bagian pertama adalah fungsi tema_saya_setup(). Di dalam fungsi ini, kita menambahkan beberapa dukungan fitur untuk tema.

add_theme_support( ‘title-tag’ ) digunakan agar WordPress bisa mengatur tag judul halaman secara otomatis. Sedangkan add_theme_support( ‘post-thumbnails’ ) digunakan untuk mengaktifkan featured image atau gambar unggulan pada postingan.

Lalu ada register_nav_menus(), yang digunakan untuk mendaftarkan lokasi menu. Dalam contoh ini, kita membuat lokasi menu bernama primary dengan label “Menu Utama”. Nantinya, menu ini bisa diatur dari dashboard WordPress.

Bagian kedua adalah fungsi tema_saya_scripts(). Fungsi ini digunakan untuk memanggil file CSS utama tema dengan cara yang benar, yaitu menggunakan wp_enqueue_style().

Di sini kita memakai get_stylesheet_uri() untuk mengambil file style.css dari tema yang sedang aktif. Jadi, CSS tema tidak dipanggil secara manual dari header.php, tetapi dikelola melalui functions.php.

Perlu diingat, file functions.php harus ditulis dengan hati-hati. Kesalahan kecil seperti tanda titik koma yang hilang, kurung yang tidak tertutup, atau nama fungsi yang bentrok bisa membuat website error.

Karena itu, saat belajar membuat tema WordPress, biasakan menulis kode sedikit demi sedikit lalu cek hasilnya. Jangan langsung memasukkan banyak fungsi sekaligus, supaya kalau terjadi error kamu lebih mudah menemukan penyebabnya.

Dengan adanya file functions.php, tema yang kamu buat mulai punya fitur dasar. Nantinya, file ini bisa terus dikembangkan untuk menambahkan menu, widget, script, style tambahan, custom logo, customizer, dan fitur lain sesuai kebutuhan tema.

7. Cara Memanggil CSS dan JavaScript dengan Benar

Saat membuat tema WordPress, kamu pasti akan memakai file CSS dan mungkin juga JavaScript. CSS digunakan untuk mengatur tampilan website, sedangkan JavaScript biasanya dipakai untuk menambahkan interaksi, seperti menu mobile, slider, tombol kembali ke atas, atau fitur lain yang membutuhkan aksi dinamis.

Namun, di WordPress, file CSS dan JavaScript sebaiknya tidak dipanggil langsung secara sembarangan di header.php atau footer.php. Cara yang lebih disarankan adalah menggunakan fungsi enqueue melalui file functions.php.

Untuk memanggil file CSS utama tema, kamu bisa menggunakan kode seperti ini:

function tema_saya_scripts() {
  wp_enqueue_style(
    'tema-saya-style',
    get_stylesheet_uri(),
    array(),
    '1.0'
  );
}
add_action( 'wp_enqueue_scripts', 'tema_saya_scripts' );

Kode di atas akan memanggil file style.css yang ada di dalam folder tema. Fungsi get_stylesheet_uri() digunakan untuk mengambil alamat file style.css secara otomatis dari tema yang sedang aktif.

Kalau nanti kamu ingin menambahkan file CSS lain, misalnya assets/css/custom.css, kamu bisa menulisnya seperti ini:

function tema_saya_scripts() {
  wp_enqueue_style(
    'tema-saya-style',
    get_stylesheet_uri(),
    array(),
    '1.0'
  );

  wp_enqueue_style(
    'tema-saya-custom',
    get_template_directory_uri() . '/assets/css/custom.css',
    array(),
    '1.0'
  );
}
add_action( 'wp_enqueue_scripts', 'tema_saya_scripts' );

Sementara itu, untuk memanggil file JavaScript, kamu bisa menggunakan wp_enqueue_script(). Misalnya kamu punya file main.js di dalam folder assets/js/, maka contohnya seperti ini:

function tema_saya_scripts() {
  wp_enqueue_style(
    'tema-saya-style',
    get_stylesheet_uri(),
    array(),
    '1.0'
  );

  wp_enqueue_script(
    'tema-saya-main',
    get_template_directory_uri() . '/assets/js/main.js',
    array(),
    '1.0',
    true
  );
}
add_action( 'wp_enqueue_scripts', 'tema_saya_scripts' );

Pada bagian terakhir, nilai true berarti file JavaScript akan dimuat di bagian bawah halaman, sebelum penutup </body>. Cara ini biasanya lebih baik untuk performa, karena halaman bisa memuat konten utama terlebih dahulu sebelum menjalankan script.

Dengan menggunakan wp_enqueue_style() dan wp_enqueue_script(), file CSS dan JavaScript akan lebih rapi dikelola oleh WordPress. Cara ini juga membantu menghindari bentrok dengan plugin atau file lain yang digunakan di website.

Jadi, saat membuat tema WordPress, biasakan memanggil file CSS dan JavaScript melalui functions.php, bukan langsung menempelkan link file di header secara manual. Selain lebih rapi, cara ini juga lebih sesuai dengan standar pengembangan tema WordPress.

8. Membuat Menu Navigasi

Setelah file CSS dan JavaScript bisa dipanggil dengan benar, langkah berikutnya adalah membuat menu navigasi. Menu ini biasanya muncul di bagian header dan berfungsi untuk membantu pengunjung berpindah ke halaman lain di website, seperti Home, About, Contact, kategori artikel, atau halaman penting lainnya.

Di WordPress, menu sebaiknya tidak ditulis manual satu per satu di file header.php. Lebih baik kita daftarkan dulu lokasi menu melalui functions.php, lalu tampilkan menu tersebut menggunakan fungsi wp_nav_menu().

Sebelumnya, di bagian functions.php, kita sudah menambahkan kode seperti ini:

register_nav_menus(
  array(
    'primary' => __( 'Menu Utama', 'tema-saya' ),
  )
);

Kode tersebut digunakan untuk mendaftarkan lokasi menu bernama primary. Nantinya, lokasi menu ini bisa dipilih dari dashboard WordPress melalui menu Appearance > Menus atau Tampilan > Menu, tergantung bahasa WordPress yang kamu gunakan.

Setelah lokasi menu terdaftar, sekarang kamu bisa menampilkannya di file header.php. Misalnya, tambahkan kode ini di dalam bagian <header>:

<nav class="site-navigation">
  <?php
  wp_nav_menu(
    array(
      'theme_location' => 'primary',
      'menu_class'     => 'primary-menu',
      'container'      => false,
    )
  );
  ?>
</nav>

Fungsi wp_nav_menu() digunakan untuk menampilkan menu WordPress. Bagian theme_location harus sesuai dengan lokasi menu yang sudah kita daftarkan sebelumnya, yaitu primary.

Sementara itu, menu_class digunakan untuk memberi class pada elemen menu. Class ini bisa kamu pakai nanti saat mengatur tampilan menu dengan CSS. Sedangkan container => false digunakan agar WordPress tidak menambahkan pembungkus tambahan secara otomatis.

Kalau digabung dengan header sebelumnya, struktur sederhananya bisa menjadi seperti ini:

<header class="site-header">
  <div class="container">
    <h1 class="site-title">
      <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
        <?php bloginfo( 'name' ); ?>
      </a>
    </h1>

    <p class="site-description">
      <?php bloginfo( 'description' ); ?>
    </p>

    <nav class="site-navigation">
      <?php
      wp_nav_menu(
        array(
          'theme_location' => 'primary',
          'menu_class'     => 'primary-menu',
          'container'      => false,
        )
      );
      ?>
    </nav>
  </div>
</header>

Setelah itu, masuk ke dashboard WordPress dan buat menu baru. Tambahkan halaman atau kategori yang ingin ditampilkan, lalu pilih lokasi menu Menu Utama. Jika sudah disimpan, menu tersebut akan muncul di bagian header tema.

Untuk tahap awal, tampilan menu mungkin masih sangat sederhana. Kamu bisa mengaturnya dengan CSS di file style.css, misalnya seperti ini:

.primary-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
}

.primary-menu li a {
  text-decoration: none;
  color: #222;
}

Dengan menu navigasi, tema WordPress yang kamu buat akan terasa lebih lengkap. Pengunjung bisa berpindah halaman dengan lebih mudah, dan struktur website juga terlihat lebih rapi.

9. Menambahkan Featured Image

Featured image atau gambar unggulan adalah gambar utama yang biasanya mewakili sebuah artikel. Gambar ini sering muncul di halaman daftar artikel, halaman single post, artikel terkait, atau thumbnail ketika artikel dibagikan ke media sosial.

Dalam tema WordPress, featured image tidak selalu aktif secara otomatis. Supaya bisa digunakan, kita perlu menambahkan dukungannya melalui file functions.php.

Sebenarnya, di contoh functions.php sebelumnya kita sudah menambahkan kode ini:

add_theme_support( ‘post-thumbnails’ );

Kode tersebut berfungsi untuk mengaktifkan fitur featured image pada postingan. Biasanya kode ini diletakkan di dalam fungsi setup tema, misalnya seperti ini:

function tema_saya_setup() {
  add_theme_support( 'title-tag' );
  add_theme_support( 'post-thumbnails' );

  register_nav_menus(
    array(
      'primary' => __( 'Menu Utama', 'tema-saya' ),
    )
  );
}
add_action( 'after_setup_theme', 'tema_saya_setup' );

Setelah fitur ini aktif, kamu bisa menambahkan gambar unggulan saat membuat atau mengedit artikel di dashboard WordPress.

Lalu, untuk menampilkan featured image di dalam template, kamu bisa menggunakan fungsi the_post_thumbnail(). Misalnya, jika ingin menampilkan gambar unggulan di dalam Loop pada file index.php, kamu bisa menulisnya seperti ini:

<?php if ( has_post_thumbnail() ) : ?>
  <div class="post-thumbnail">
    <a href="<?php the_permalink(); ?>">
      <?php the_post_thumbnail( 'medium' ); ?>
    </a>
  </div>
<?php endif; ?>

Kode has_post_thumbnail() digunakan untuk mengecek apakah artikel memiliki featured image. Jika ada, maka gambar akan ditampilkan menggunakan the_post_thumbnail().

Kamu juga bisa menentukan ukuran gambar yang ingin ditampilkan. Misalnya:

the_post_thumbnail( 'thumbnail' );
the_post_thumbnail( 'medium' );
the_post_thumbnail( 'large' );
the_post_thumbnail( 'full' );

Untuk halaman daftar artikel, ukuran medium atau large biasanya sudah cukup. Sedangkan untuk halaman detail artikel, kamu bisa memakai ukuran large atau full, tergantung kebutuhan desain tema.

Featured image cukup penting karena bisa membuat tampilan blog terlihat lebih menarik. Artikel yang hanya berisi teks kadang terasa terlalu polos, sedangkan gambar unggulan bisa membantu pembaca memahami topik secara visual sebelum membaca isi artikel.

Namun, pastikan gambar yang digunakan tetap relevan, ukurannya tidak terlalu besar, dan sudah dioptimasi agar tidak membuat website menjadi lambat.

Jadi, fitur featured image termasuk salah satu fitur dasar yang sebaiknya kamu aktifkan sejak awal. Dengan begitu, tampilan daftar artikel dan halaman detail postingan akan terlihat lebih rapi dan profesional.

10. Membuat Tampilan Daftar Artikel

Setelah featured image aktif, kamu bisa mulai merapikan tampilan daftar artikel. Bagian ini biasanya muncul di halaman utama blog, halaman kategori, halaman tag, atau halaman arsip.

Di WordPress, daftar artikel biasanya ditampilkan menggunakan Loop WordPress. Sebelumnya, kita sudah membuat contoh Loop sederhana di file index.php. Sekarang, kita bisa mengembangkannya sedikit agar tampilannya lebih lengkap.

Misalnya, setiap artikel bisa menampilkan beberapa elemen seperti:

• featured image,
• judul artikel,
• tanggal publikasi,
• nama penulis,
• ringkasan artikel,
• tombol baca selengkapnya.

Contoh kode sederhananya bisa seperti ini:

<main class="site-main">
  <?php
  if ( have_posts() ) :
    while ( have_posts() ) :
      the_post();
      ?>

      <article id="post-<?php the_ID(); ?>" <?php post_class( 'post-card' ); ?>>

        <?php if ( has_post_thumbnail() ) : ?>
          <div class="post-thumbnail">
            <a href="<?php the_permalink(); ?>">
              <?php the_post_thumbnail( 'large' ); ?>
            </a>
          </div>
        <?php endif; ?>

        <div class="post-content">
          <h2 class="post-title">
            <a href="<?php the_permalink(); ?>">
              <?php the_title(); ?>
            </a>
          </h2>

          <div class="post-meta">
            <span><?php echo get_the_date(); ?></span>
            <span>oleh <?php the_author(); ?></span>
          </div>

          <div class="post-excerpt">
            <?php the_excerpt(); ?>
          </div>

          <a class="read-more" href="<?php the_permalink(); ?>">
            Baca Selengkapnya
          </a>
        </div>

      </article>

      <?php
    endwhile;
  else :
    echo '<p>Belum ada artikel yang tersedia.</p>';
  endif;
  ?>
</main>

Kode di atas masih menggunakan Loop yang sama, tetapi tampilan artikelnya dibuat lebih lengkap. Featured image ditampilkan di bagian atas, lalu diikuti judul, meta artikel, ringkasan, dan link menuju halaman detail.

Bagian post_class( ‘post-card’ ) digunakan untuk menambahkan class pada elemen artikel. Class ini bisa kamu pakai untuk mengatur tampilan lewat CSS.

Misalnya, kamu bisa menambahkan CSS sederhana seperti ini di file style.css:

.post-card {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid #eeeeee;
}

.post-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
}

.post-title {
  margin-top: 16px;
  margin-bottom: 8px;
}

.post-title a {
  color: #222222;
  text-decoration: none;
}

.post-meta {
  font-size: 14px;
  color: #777777;
  margin-bottom: 12px;
}

.read-more {
  display: inline-block;
  margin-top: 12px;
  text-decoration: none;
  font-weight: 600;
}

Dengan tampilan seperti ini, daftar artikel di tema kamu akan terlihat lebih rapi dibanding hanya menampilkan judul dan ringkasan saja.

Namun, jangan terlalu fokus membuat desain yang rumit di awal. Untuk tahap belajar membuat tema WordPress dari nol, yang paling penting adalah memahami alurnya dulu: WordPress mengambil data artikel, lalu tema menampilkannya menggunakan Loop.

Setelah alurnya paham, kamu bisa mulai mengatur tampilan sesuai kebutuhan. Misalnya membuat layout grid, menambahkan kategori, menampilkan jumlah komentar, atau mengatur excerpt agar lebih pendek.

Jadi, bagian daftar artikel ini bisa menjadi fondasi awal untuk membuat homepage blog. Dari sini, kamu bisa mengembangkan tampilan tema menjadi lebih menarik dan sesuai dengan jenis website yang ingin kamu buat.

11. Membuat Halaman Single Post

Setelah membuat tampilan daftar artikel, langkah berikutnya adalah membuat halaman detail artikel atau single post. Di WordPress, halaman ini biasanya diatur menggunakan file single.php.

File single.php digunakan ketika pengunjung membuka satu artikel secara penuh. Jadi, kalau di halaman utama kamu menampilkan daftar artikel, maka di halaman single post inilah isi artikel lengkap akan ditampilkan.

Buat file baru di dalam folder tema kamu:

wp-content/themes/tema-saya/single.php

Lalu isi dengan kode dasar seperti ini:

<?php get_header(); ?>

<main class="site-main single-post">
  <?php
  if ( have_posts() ) :
    while ( have_posts() ) :
      the_post();
      ?>

      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

        <h1 class="single-title">
          <?php the_title(); ?>
        </h1>

        <div class="post-meta">
          <span><?php echo get_the_date(); ?></span>
          <span>oleh <?php the_author(); ?></span>
        </div>

        <?php if ( has_post_thumbnail() ) : ?>
          <div class="single-thumbnail">
            <?php the_post_thumbnail( 'large' ); ?>
          </div>
        <?php endif; ?>

        <div class="entry-content">
          <?php the_content(); ?>
        </div>

        <div class="post-tags">
          <?php the_tags( '<span>Tag: </span>', ', ', '' ); ?>
        </div>

      </article>

      <?php
    endwhile;
  endif;
  ?>
</main>

<?php get_footer(); ?>

Kode di atas masih memakai Loop WordPress, tapi kali ini digunakan untuk menampilkan satu artikel secara lengkap. Judul artikel ditampilkan menggunakan the_title(), tanggal dengan get_the_date(), nama penulis dengan the_author(), dan isi artikel dengan the_content().

Perbedaan penting antara halaman daftar artikel dan halaman single post ada pada fungsi yang digunakan untuk menampilkan konten. Di halaman daftar artikel, kita biasanya memakai the_excerpt() agar yang tampil hanya ringkasan. Sedangkan di halaman single post, kita memakai the_content() agar seluruh isi artikel muncul.

Featured image juga bisa ditampilkan di halaman ini menggunakan the_post_thumbnail(). Kamu bisa menyesuaikan ukurannya sesuai kebutuhan, misalnya large atau full.

Selain itu, kita juga menambahkan the_tags() untuk menampilkan tag artikel jika ada. Kalau ingin menampilkan kategori, kamu bisa menambahkan kode seperti ini:

<div class="post-categories">
  <?php the_category( ', ' ); ?>
</div>

Untuk tampilan dasar, kamu bisa menambahkan CSS sederhana di style.css:

.single-post {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 16px;
}

.single-title {
  font-size: 36px;
  line-height: 1.3;
  margin-bottom: 12px;
}

.single-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
  margin: 24px 0;
}

.entry-content {
  line-height: 1.8;
  font-size: 17px;
}

Dengan adanya file single.php, tema kamu sudah bisa menampilkan halaman artikel secara lebih lengkap. Bagian ini penting, terutama kalau website yang kamu buat adalah blog, portal artikel, atau website konten.

Nanti, tampilan single post ini masih bisa dikembangkan lagi. Misalnya dengan menambahkan breadcrumb, author box, artikel terkait, navigasi artikel sebelumnya dan berikutnya, atau tombol share media sosial.

Jadi, single.php adalah file penting untuk mengatur tampilan detail artikel. Setelah file ini dibuat, struktur tema kamu akan terasa lebih lengkap karena sudah punya halaman daftar artikel dan halaman isi artikel.

12. Membuat Halaman Page

Selain postingan artikel, WordPress juga punya halaman statis atau page. Biasanya, page digunakan untuk halaman seperti About, Contact, Privacy Policy, Disclaimer, atau halaman lain yang sifatnya tidak masuk ke daftar artikel blog.

Untuk mengatur tampilan halaman statis, kamu bisa membuat file page.php di dalam folder tema. File ini akan digunakan WordPress ketika pengunjung membuka halaman seperti About atau Contact.

Buat file baru di dalam folder tema kamu:

wp-content/themes/tema-saya/page.php

Lalu isi dengan kode dasar seperti ini:

<?php get_header(); ?>

<main class="site-main page-content">
  <?php
  if ( have_posts() ) :
    while ( have_posts() ) :
      the_post();
      ?>

      <article id="page-<?php the_ID(); ?>" <?php post_class(); ?>>

        <h1 class="page-title">
          <?php the_title(); ?>
        </h1>

        <div class="entry-content">
          <?php the_content(); ?>
        </div>

      </article>

      <?php
    endwhile;
  endif;
  ?>
</main>

<?php get_footer(); ?>

Kode di atas mirip dengan single.php, tapi penggunaannya berbeda. File single.php dipakai untuk menampilkan postingan artikel, sedangkan page.php dipakai untuk menampilkan halaman statis.

Pada contoh tersebut, judul halaman ditampilkan menggunakan the_title(), lalu isi halaman ditampilkan menggunakan the_content().

Untuk tampilan sederhana, kamu bisa menambahkan CSS seperti ini di file style.css:

.page-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 16px;
}

.page-title {
  font-size: 34px;
  line-height: 1.3;
  margin-bottom: 20px;
}

.page-content .entry-content {
  line-height: 1.8;
  font-size: 17px;
}

Dengan adanya file page.php, tema kamu bisa menampilkan halaman statis dengan tampilan yang lebih rapi dan terpisah dari tampilan artikel biasa.

Nantinya, kalau kamu ingin membuat desain khusus untuk halaman tertentu, kamu juga bisa membuat page template. Misalnya, halaman Contact punya layout berbeda dari halaman About. Tapi untuk tahap awal, file page.php sederhana seperti ini sudah cukup.

Jadi, page.php berfungsi untuk mengatur tampilan halaman statis. File ini penting karena hampir semua website biasanya membutuhkan halaman pendukung seperti About, Contact, dan Privacy Policy.

13. Membuat Halaman Archive dan Category

Setelah membuat single.php dan page.php, bagian berikutnya yang bisa kamu tambahkan adalah halaman archive. Di WordPress, halaman archive digunakan untuk menampilkan kumpulan artikel berdasarkan kategori, tag, tanggal, author, atau arsip lainnya.

Misalnya, ketika pengunjung membuka kategori “Tutorial WordPress”, WordPress akan menampilkan daftar artikel yang masuk ke kategori tersebut. Nah, tampilan seperti ini bisa diatur menggunakan file archive.php atau category.php.

Untuk tahap awal, kamu bisa membuat file archive.php terlebih dahulu. File ini bisa menjadi template umum untuk berbagai jenis halaman arsip.

Buat file baru di dalam folder tema kamu:

wp-content/themes/tema-saya/archive.php

Lalu isi dengan kode dasar seperti ini:

<?php get_header(); ?>

<main class="site-main archive-page">

  <header class="archive-header">
    <h1 class="archive-title">
      <?php the_archive_title(); ?>
    </h1>

    <div class="archive-description">
      <?php the_archive_description(); ?>
    </div>
  </header>

  <?php
  if ( have_posts() ) :
    while ( have_posts() ) :
      the_post();
      ?>

      <article id="post-<?php the_ID(); ?>" <?php post_class( 'post-card' ); ?>>

        <?php if ( has_post_thumbnail() ) : ?>
          <div class="post-thumbnail">
            <a href="<?php the_permalink(); ?>">
              <?php the_post_thumbnail( 'medium' ); ?>
            </a>
          </div>
        <?php endif; ?>

        <div class="post-content">
          <h2 class="post-title">
            <a href="<?php the_permalink(); ?>">
              <?php the_title(); ?>
            </a>
          </h2>

          <div class="post-meta">
            <span><?php echo get_the_date(); ?></span>
            <span>oleh <?php the_author(); ?></span>
          </div>

          <div class="post-excerpt">
            <?php the_excerpt(); ?>
          </div>
        </div>

      </article>

      <?php
    endwhile;
  else :
    echo '<p>Belum ada artikel di arsip ini.</p>';
  endif;
  ?>

</main>

<?php get_footer(); ?>

Pada kode di atas, the_archive_title() digunakan untuk menampilkan judul arsip. Misalnya nama kategori, nama tag, arsip bulan, atau nama author. Sedangkan the_archive_description() digunakan untuk menampilkan deskripsi arsip jika tersedia.

Bagian daftar artikelnya masih memakai Loop WordPress, mirip seperti yang kita buat di index.php. Bedanya, di halaman archive, artikel yang tampil sudah difilter berdasarkan jenis arsip yang sedang dibuka.

Kalau kamu ingin membuat tampilan khusus untuk halaman kategori, kamu bisa membuat file category.php. File ini akan dipakai khusus untuk halaman kategori.

Contohnya:

wp-content/themes/tema-saya/category.php

Kalau category.php tidak ada, WordPress akan memakai archive.php. Kalau archive.php juga tidak ada, WordPress akan kembali memakai index.php. Inilah salah satu contoh cara kerja template hierarchy WordPress.

Untuk tampilan sederhana, kamu bisa menambahkan CSS seperti ini:

.archive-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 16px;
}

.archive-header {
  margin-bottom: 32px;
}

.archive-title {
  font-size: 32px;
  line-height: 1.3;
  margin-bottom: 8px;
}

.archive-description {
  color: #666666;
  line-height: 1.7;
}

Halaman archive cukup penting untuk website berbasis konten. Dengan halaman ini, pengunjung bisa menemukan artikel berdasarkan kategori atau tag tertentu. Selain itu, halaman kategori yang rapi juga bisa membantu struktur navigasi website terlihat lebih jelas.

Jadi, file archive.php membantu mengatur tampilan kumpulan artikel berdasarkan arsip. Nanti kalau kamu ingin tampilan yang lebih spesifik, kamu bisa menambahkan file lain seperti category.php, tag.php, atau author.php.

14. Membuat Sidebar dan Widget Area

Selain header, footer, dan halaman artikel, bagian lain yang sering ada di tema WordPress adalah sidebar. Sidebar biasanya digunakan untuk menampilkan elemen tambahan seperti kolom pencarian, kategori, artikel terbaru, arsip, iklan, atau widget lain.

Dalam tema WordPress, sidebar tidak harus selalu ada. Kalau kamu ingin membuat tampilan blog yang simpel dan full width, kamu bisa saja tidak memakai sidebar. Tapi untuk belajar membuat tema dari nol, memahami cara membuat sidebar tetap penting.

Langkah pertama adalah mendaftarkan widget area melalui file functions.php. Tambahkan kode berikut:

function tema_saya_widgets_init() {
  register_sidebar(
    array(
      'name'          => __( 'Sidebar Utama', 'tema-saya' ),
      'id'            => 'sidebar-1',
      'description'   => __( 'Widget area untuk sidebar utama.', 'tema-saya' ),
      'before_widget' => '<section class="widget">',
      'after_widget'  => '</section>',
      'before_title'  => '<h2 class="widget-title">',
      'after_title'   => '</h2>',
    )
  );
}
add_action( 'widgets_init', 'tema_saya_widgets_init' );

Kode di atas digunakan untuk membuat area widget bernama Sidebar Utama. Nantinya, area ini bisa kamu isi dari dashboard WordPress melalui menu Appearance > Widgets atau Tampilan > Widget.

Setelah widget area didaftarkan, buat file baru bernama sidebar.php di dalam folder tema:

wp-content/themes/tema-saya/sidebar.php

Lalu isi dengan kode berikut:

<aside class="site-sidebar">
  <?php
  if ( is_active_sidebar( 'sidebar-1' ) ) {
    dynamic_sidebar( 'sidebar-1' );
  }
  ?>
</aside>

Fungsi is_active_sidebar() digunakan untuk mengecek apakah sidebar tersebut memiliki widget aktif. Jika ada widget yang dipasang, maka dynamic_sidebar() akan menampilkannya di halaman website.

Setelah file sidebar.php dibuat, kamu bisa memanggilnya di file template seperti index.php, single.php, atau archive.php menggunakan fungsi:

<?php get_sidebar(); ?>

Misalnya, kalau kamu ingin menampilkan sidebar di halaman daftar artikel, kamu bisa menambahkan get_sidebar() setelah bagian konten utama.

Contoh sederhananya:

<?php get_header(); ?>

<div class="site-layout">
  <main class="site-main">
    <!-- Loop artikel di sini -->
  </main>

  <?php get_sidebar(); ?>
</div>

<?php get_footer(); ?>

Agar layout konten dan sidebar terlihat rapi, kamu bisa menambahkan CSS sederhana seperti ini:

.site-layout {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 16px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
}

.site-sidebar {
  background: #f7f7f7;
  padding: 20px;
}

.widget {
  margin-bottom: 24px;
}

.widget-title {
  font-size: 18px;
  margin-bottom: 12px;
}

Untuk tampilan mobile, jangan lupa buat sidebar turun ke bawah agar tidak membuat layout sempit di layar kecil:

@media (max-width: 768px) {
  .site-layout {
    grid-template-columns: 1fr;
  }
}

Dengan sidebar, tema kamu bisa memiliki area tambahan yang fleksibel. Kamu bisa menambahkan widget tanpa harus mengedit kode setiap saat.

Jadi, dalam proses membuat tema WordPress sendiri, sidebar dan widget area membantu membuat tema lebih dinamis. Pengguna tema bisa mengatur isi sidebar langsung dari dashboard WordPress sesuai kebutuhan website.

15. Buat Tema WordPress biar Responsive

Setelah struktur dasar tema mulai terbentuk, langkah berikutnya adalah memastikan tampilan tema tetap nyaman dibuka di berbagai ukuran layar. Inilah yang disebut responsive.

Tema responsive berarti tampilan website bisa menyesuaikan diri saat dibuka dari desktop, tablet, maupun HP. Jadi, layout tidak berantakan, teks tetap mudah dibaca, gambar tidak keluar dari area konten, dan menu tetap bisa digunakan dengan nyaman.

Ini penting karena banyak pengunjung sekarang membuka website lewat perangkat mobile. Kalau tema yang kamu buat hanya bagus di laptop tapi berantakan di HP, pengalaman pembaca tentu jadi kurang nyaman.

Untuk membuat tema WordPress responsive, kamu bisa mulai dari CSS dasar. Misalnya, pastikan gambar tidak melebar keluar dari area konten:

img {
  max-width: 100%;
  height: auto;
}

Kode di atas akan membuat gambar mengikuti lebar area konten. Jadi, ketika layar mengecil, gambar ikut menyesuaikan ukuran tanpa merusak layout.

Selanjutnya, kamu bisa mengatur container utama agar tidak terlalu lebar di desktop, tapi tetap fleksibel di layar kecil:

.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

Dengan kode tersebut, area konten akan tetap berada di tengah, punya batas lebar maksimal, dan masih memiliki jarak kiri-kanan saat dibuka di HP.

Kalau kamu memakai layout dua kolom, misalnya konten utama dan sidebar, kamu bisa menggunakan media query agar sidebar turun ke bawah saat layar kecil:

.site-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
}

@media (max-width: 768px) {
  .site-layout {
    grid-template-columns: 1fr;
  }
}

Pada layar besar, konten dan sidebar akan tampil berdampingan. Tapi saat layar lebarnya di bawah 768px, layout berubah menjadi satu kolom. Ini membuat tampilan lebih nyaman di HP.

Menu navigasi juga perlu diperhatikan. Untuk tahap awal, kamu bisa membuat menu sederhana agar item menu turun ke bawah saat layar kecil:

.primary-menu {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}

@media (max-width: 768px) {
  .primary-menu {
    flex-direction: column;
    gap: 12px;
  }
}

Kode di atas memang masih sederhana, tapi sudah cukup untuk memahami konsep dasarnya. Nantinya, kamu bisa mengembangkan menu menjadi hamburger menu jika ingin tampilan mobile yang lebih rapi.

Selain layout, perhatikan juga ukuran font. Jangan sampai teks terlalu kecil saat dibaca di HP. Kamu bisa memakai ukuran font yang nyaman seperti ini:

body {
  font-size: 16px;
  line-height: 1.7;
}

Untuk judul artikel, kamu juga bisa menyesuaikan ukurannya di layar kecil:

.single-title {
  font-size: 36px;
}

@media (max-width: 768px) {
  .single-title {
    font-size: 28px;
  }
}

Dengan begitu, judul tetap terlihat besar di desktop, tapi tidak terlalu memenuhi layar saat dibuka di HP.

Dalam proses membuat tema WordPress dari nol, responsive design tidak boleh dianggap sebagai tambahan belakangan. Sejak awal, usahakan setiap bagian tema sudah dipikirkan tampilannya di layar kecil.

Jadi, saat membuat header, menu, daftar artikel, single post, sidebar, dan footer, selalu cek tampilannya di desktop dan mobile. Dengan begitu, tema WordPress yang kamu buat tidak hanya bisa digunakan, tapi juga nyaman dibaca oleh pengunjung dari berbagai perangkat.

16. Menambahkan Screenshot Tema

Setelah tema mulai terbentuk, kamu juga bisa menambahkan gambar preview tema. Di WordPress, gambar ini biasanya muncul di halaman Appearance > Themes atau Tampilan > Tema.

File gambar preview tersebut bernama: screenshot.png

Letakkan file ini di dalam folder tema kamu, misalnya:

wp-content/themes/tema-saya/screenshot.png

Sebenarnya, screenshot.png bukan file wajib agar tema bisa berjalan. Tanpa file ini pun tema tetap bisa aktif. Namun, kalau tidak ada screenshot, tampilan tema di dashboard WordPress akan terlihat kosong atau kurang profesional.

Gambar screenshot ini sebaiknya menampilkan gambaran tampilan tema kamu. Misalnya bagian homepage, header, daftar artikel, atau layout utama website. Jadi ketika tema dilihat dari dashboard, pengguna bisa langsung punya bayangan seperti apa tampilan tema tersebut.

Untuk ukurannya, kamu bisa memakai rasio yang umum seperti 4:3. Misalnya:

1200 x 900 px

Atau ukuran lain yang tetap terlihat rapi. Yang penting, nama filenya harus screenshot.png dan diletakkan langsung di dalam folder tema, bukan di dalam subfolder seperti assets atau images.

Contoh struktur foldernya:

tema-saya/
├── style.css
├── index.php
├── functions.php
├── header.php
├── footer.php
└── screenshot.png

Setelah file ditambahkan, coba buka dashboard WordPress, lalu masuk ke menu Tampilan > Tema. Kalau file sudah benar, gambar preview tema akan muncul di sana.

Bagian ini memang terlihat sederhana, tapi cukup penting kalau kamu ingin tema buatanmu terlihat lebih rapi. Apalagi kalau nanti tema tersebut ingin kamu simpan, bagikan, atau kembangkan lebih serius.

Jadi, screenshot.png berfungsi sebagai gambar identitas visual tema di dashboard. Tidak wajib, tapi sangat disarankan agar tema terlihat lebih profesional.

17. Mengaktifkan Tema di Dashboard WordPress

Setelah file dasar tema dibuat, langkah berikutnya adalah mengaktifkan tema tersebut melalui dashboard WordPress. Di tahap ini, kamu bisa mengecek apakah tema sudah terbaca dengan benar atau masih ada bagian yang perlu diperbaiki.

Untuk mengaktifkannya, masuk ke dashboard WordPress, lalu buka menu:

Tampilan > Tema

atau kalau dashboard kamu memakai bahasa Inggris:

Appearance > Themes

Di halaman tersebut, cari nama tema yang sudah kamu buat. Kalau file style.css sudah berisi informasi tema dengan benar, seharusnya tema akan muncul di daftar tema WordPress.

Misalnya, kalau di file style.css kamu menulis:

/*
Theme Name: Tema Saya
Author: Nama Kamu
Description: Tema WordPress sederhana yang dibuat untuk belajar.
Version: 1.0
*/

Maka di dashboard WordPress, tema tersebut akan muncul dengan nama Tema Saya.

Setelah tema muncul, klik tombol Activate atau Aktifkan. Jika tidak ada error, berarti tema berhasil diaktifkan dan kamu bisa langsung melihat tampilan website di bagian depan.

Namun, kalau tema tidak muncul, coba cek beberapa hal berikut:

• Pastikan folder tema berada di dalam wp-content/themes/.
• Pastikan file style.css ada di dalam folder tema.
• Pastikan informasi tema di bagian atas style.css ditulis dengan benar.
• Pastikan file index.php juga sudah dibuat.
• Pastikan tidak ada error di file functions.php.

Kalau setelah diaktifkan website menampilkan error, biasanya masalahnya ada di kode PHP. File yang paling sering menyebabkan error adalah functions.php, karena satu tanda kurung atau titik koma yang hilang saja bisa membuat website bermasalah.

Karena itu, saat belajar membuat tema WordPress dari nol, sebaiknya aktifkan tema di website lokal atau staging terlebih dahulu. Jangan langsung mencobanya di website utama yang sudah punya pengunjung.

Setelah tema aktif, coba buka beberapa halaman untuk memastikan semuanya berjalan normal. Cek homepage, halaman artikel, halaman statis, kategori, dan tampilan mobile. Kalau ada bagian yang belum rapi, kamu bisa memperbaikinya pelan-pelan lewat file template atau CSS.

Jadi, tahap mengaktifkan tema ini penting untuk melihat apakah struktur tema sudah benar. Kalau tema sudah muncul dan bisa dipakai, berarti fondasi utama tema WordPress buatanmu sudah berhasil dibuat.

Kesalahan Pemula Saat Membuat Tema WordPress

Saat belajar membuat tema WordPress dari nol, wajar kalau kamu menemui error atau tampilan yang belum sesuai harapan. Bahkan, kadang satu kesalahan kecil saja bisa membuat tema tidak terbaca atau website menampilkan pesan error.

Agar proses belajarnya lebih aman, berikut beberapa kesalahan yang sering dilakukan pemula saat membuat tema WordPress.

1. Tidak Membuat style.css dengan Benar

Kesalahan pertama yang cukup sering terjadi adalah salah membuat file style.css. Padahal, file ini penting karena menjadi identitas utama tema.

Kalau bagian informasi tema tidak ditulis dengan benar, tema bisa saja tidak muncul di dashboard WordPress. Misalnya, kamu lupa menambahkan Theme Name, salah menulis komentar pembuka dan penutup, atau meletakkan file style.css di folder yang salah.

Contoh bagian identitas tema yang benar:

/*
Theme Name: Tema Saya
Author: Nama Kamu
Description: Tema WordPress sederhana untuk belajar.
Version: 1.0
*/

Jadi, sebelum bingung kenapa tema tidak muncul, cek dulu apakah file style.css sudah ada dan identitas temanya sudah ditulis dengan benar.

2. Salah Menulis Kode di functions.php

File functions.php memang sangat penting, tapi juga cukup sensitif. Satu tanda titik koma yang hilang, kurung yang tidak tertutup, atau nama fungsi yang bentrok bisa membuat website error.

Karena itu, jangan langsung memasukkan terlalu banyak kode sekaligus. Lebih baik tambahkan fungsi sedikit demi sedikit, lalu cek hasilnya. Kalau terjadi error, kamu lebih mudah tahu bagian mana yang menjadi penyebabnya.

Kalau kamu masih pemula, biasakan backup file sebelum mengedit functions.php, terutama kalau sedang bekerja di website online.

3. Tidak Menggunakan wp_head() dan wp_footer()

Dua fungsi ini sering terlihat sederhana, tapi wajib ada di tema WordPress.

Fungsi wp_head() harus diletakkan di file header.php sebelum tag penutup </head>. Sedangkan wp_footer() harus diletakkan di file footer.php sebelum tag penutup </body>.

Kalau dua fungsi ini tidak ada, beberapa plugin, script, style, atau fitur WordPress bisa tidak berjalan dengan benar. Akibatnya, tampilan website bisa berantakan atau fitur tertentu tidak muncul.

4. Memanggil CSS dan JavaScript Secara Manual

Kesalahan lain yang sering dilakukan adalah memanggil file CSS dan JavaScript langsung di header.php. Padahal, cara yang lebih benar di WordPress adalah menggunakan wp_enqueue_style() dan wp_enqueue_script() melalui file functions.php.

Dengan cara enqueue, WordPress bisa mengatur file style dan script dengan lebih rapi. Ini juga membantu menghindari bentrok dengan plugin atau file lain yang digunakan di website.

5. Tidak Memahami Template Hierarchy

Kadang pemula bingung kenapa file tertentu tidak dipakai oleh WordPress. Misalnya sudah membuat category.php, tapi halaman tertentu tetap memakai template lain.

Hal seperti ini biasanya berkaitan dengan template hierarchy WordPress. WordPress punya urutan sendiri dalam memilih file template. Kalau file yang lebih spesifik tidak ada, WordPress akan memakai file yang lebih umum seperti archive.php atau index.php.

Karena itu, memahami template hierarchy akan sangat membantu saat kamu mulai membuat file seperti single.php, page.php, archive.php, category.php, atau tag.php.

6. Tidak Membuat Tema Responsive

Tampilan tema mungkin terlihat bagus di laptop, tapi belum tentu nyaman di HP. Ini juga termasuk kesalahan yang sering terjadi.

Padahal, banyak pengunjung sekarang membuka website lewat perangkat mobile. Jadi, sejak awal kamu perlu memastikan layout, gambar, menu, dan ukuran teks tetap nyaman dibaca di layar kecil.

Gunakan CSS responsive dan media query agar tampilan tema bisa menyesuaikan ukuran layar.

7. Langsung Membuat Tema yang Terlalu Kompleks

Saat baru belajar, kadang kita ingin langsung membuat tema yang lengkap seperti tema premium. Ada slider, customizer, banyak layout, widget, animasi, dan fitur lainnya.

Sebenarnya boleh saja punya target seperti itu, tapi jangan langsung semuanya dibuat di awal. Untuk pemula, lebih baik mulai dari tema sederhana dulu. Pastikan tema bisa terbaca, artikel bisa tampil, header dan footer berjalan, lalu fitur ditambahkan pelan-pelan.

Dengan cara seperti ini, proses belajar akan terasa lebih ringan dan tidak cepat membuat pusing.

Intinya, saat belajar cara membuat tema WordPress, jangan takut melakukan kesalahan. Yang penting, kerjakan secara bertahap, pahami fungsi setiap file, dan biasakan mengecek hasilnya setelah menambahkan kode baru.

Urutan Belajar Membuat Tema WordPress

Kalau kamu baru mulai belajar, jangan langsung memaksa diri memahami semua bagian tema WordPress sekaligus. Lebih baik pelajari secara bertahap, supaya alurnya lebih mudah dicerna dan tidak cepat bikin pusing.

Menurutku, urutan belajar membuat tema WordPress dari nol bisa dimulai dari bagian paling dasar dulu.

Pertama, pahami HTML dan CSS. HTML digunakan untuk membuat struktur halaman, sedangkan CSS digunakan untuk mengatur tampilannya. Ini menjadi fondasi utama karena tema WordPress tetap dibangun dari struktur halaman yang ditampilkan ke browser.

Setelah itu, pelajari dasar PHP. Tidak harus langsung mendalam, tapi minimal kamu tahu cara membuka dan menutup kode PHP, membuat fungsi sederhana, memahami variabel, dan membaca alur kode. Soalnya, file tema WordPress seperti index.php, single.php, page.php, dan functions.php banyak menggunakan PHP.

Berikutnya, mulai pahami struktur folder tema WordPress. Kamu perlu tahu bahwa tema berada di dalam folder wp-content/themes/, lalu di dalamnya terdapat file seperti style.css, index.php, header.php, footer.php, dan file template lainnya.

Setelah itu, pelajari dua file paling dasar, yaitu style.css dan index.php. File style.css digunakan untuk identitas tema, sedangkan index.php menjadi template utama yang dipakai WordPress untuk menampilkan konten.

Kalau dua file itu sudah paham, lanjutkan ke header.php dan footer.php. Dua file ini penting karena hampir selalu dipakai di berbagai halaman website. Dengan memisahkan header dan footer, struktur tema jadi lebih rapi dan tidak banyak pengulangan kode.

Setelah itu, pelajari functions.php. File ini digunakan untuk menambahkan fitur tema, seperti memanggil CSS dan JavaScript, mengaktifkan featured image, mendaftarkan menu, dan membuat widget area.

Langkah berikutnya adalah memahami Loop WordPress. Bagian ini penting karena Loop digunakan untuk menampilkan artikel dari database. Tanpa memahami Loop, kamu akan kesulitan membuat daftar artikel, halaman arsip, atau halaman detail postingan.

Setelah Loop, baru masuk ke template hierarchy WordPress. Di tahap ini, kamu akan belajar kenapa WordPress memakai single.php untuk artikel, page.php untuk halaman statis, archive.php untuk arsip, dan index.php sebagai fallback.

Kalau struktur dasar sudah paham, lanjutkan ke responsive design. Pastikan tema yang kamu buat nyaman dibuka di HP, tablet, dan desktop. Ini penting karena tema yang bagus bukan hanya bisa tampil, tapi juga harus enak digunakan oleh pengunjung.

Setelah semua dasar itu dikuasai, kamu baru bisa lanjut ke bagian yang lebih advanced, seperti customizer, custom logo, custom post type, widget tambahan, pagination, breadcrumb, dark mode, atau bahkan mulai mempelajari block theme.

Jadi, urutan belajarnya bisa kamu bayangkan seperti ini:

• HTML dan CSS dasar
• PHP dasar
• Struktur folder tema WordPress
• style.css dan index.php
• header.php dan footer.php
• functions.php
• Loop WordPress
• Template hierarchy
• Responsive design
• Fitur lanjutan

Dengan urutan seperti ini, proses belajar membuat tema WordPress akan lebih terarah. Kamu tidak perlu langsung membuat tema yang sempurna. Mulai saja dari tema sederhana, lalu tambahkan fitur satu per satu sampai kamu benar-benar paham cara kerjanya.

Kesimpulan

Membuat tema WordPress sendiri dari nol memang terlihat teknis, apalagi kalau kamu baru mulai belajar HTML, CSS, PHP, dan struktur file WordPress. Tapi kalau dipelajari pelan-pelan, prosesnya bisa jauh lebih mudah dipahami.

Kuncinya adalah jangan langsung membuat tema yang terlalu kompleks. Mulai dulu dari struktur paling dasar, seperti membuat folder tema, menyiapkan style.css, membuat index.php, lalu memisahkan bagian header dan footer ke dalam file header.php dan footer.php.

Setelah itu, kamu bisa mulai menambahkan fitur melalui functions.php, seperti memanggil CSS, mengaktifkan featured image, mendaftarkan menu navigasi, dan membuat widget area. Dari sana, tema bisa dikembangkan lagi dengan file lain seperti single.php, page.php, archive.php, dan sidebar.php.

Dalam proses cara membuat tema WordPress, hal yang paling penting bukan hanya menghafal kode, tapi memahami fungsi setiap file. Kalau kamu sudah tahu tugas masing-masing file, nanti akan lebih mudah saat ingin mengubah tampilan, memperbaiki error, atau menambahkan fitur baru.

Jangan lupa juga untuk selalu mengecek tampilan tema di desktop dan mobile. Tema yang bagus bukan hanya bisa aktif di dashboard WordPress, tapi juga harus nyaman dibaca, responsive, dan tidak mengganggu pengalaman pengunjung.

Jadi, kalau kamu ingin belajar membuat tema WordPress sendiri dari nol, mulailah dari tema sederhana dulu. Setelah fondasinya paham, baru lanjut ke artikel selanjutnya yang insya Allah akan membahas bagian-bagian tertentu secara lebih detail, seperti cara membuat header, footer, functions.php, single post, sidebar, dan fitur lainnya.

FAQ Seputar Cara Membuat Tema WordPress

Berikut adalah beberapa pertanyaan yang sering diajukan seputar cara membuat tema WordPress sendiri dari nol:

Apakah membuat tema WordPress harus bisa coding?

Iya, minimal kamu perlu memahami dasar HTML, CSS, dan PHP. Tidak harus langsung jago, tapi setidaknya kamu tahu bagaimana struktur halaman dibuat, bagaimana tampilan diatur, dan bagaimana PHP dipakai untuk mengambil data dari WordPress.

Kalau belum paham semuanya, tidak masalah. Kamu bisa belajar pelan-pelan sambil praktik membuat tema sederhana.

Apa file wajib untuk membuat tema WordPress?

Untuk classic theme sederhana, file paling dasar yang perlu kamu siapkan adalah style.css dan index.php.

File style.css digunakan untuk identitas tema, sedangkan index.php digunakan sebagai template utama. Setelah itu, kamu bisa menambahkan file lain seperti functions.php, header.php, footer.php, single.php, dan page.php.

Apa fungsi functions.php di tema WordPress?

File functions.php digunakan untuk menambahkan fitur pada tema. Misalnya untuk memanggil CSS dan JavaScript, mengaktifkan featured image, mendaftarkan menu navigasi, membuat widget area, dan menambahkan dukungan fitur tertentu di WordPress.

Namun, file ini juga perlu hati-hati saat diedit. Kalau ada kesalahan kode di functions.php, website bisa mengalami error.

Apa bedanya header.php dan footer.php?

header.php digunakan untuk menampilkan bagian atas website, seperti struktur awal HTML, tag <head>, logo, nama website, dan menu navigasi.

Sedangkan footer.php digunakan untuk menampilkan bagian bawah website, seperti copyright, menu footer, script penutup, serta fungsi penting wp_footer().

Apakah tema WordPress buatan sendiri bisa dipakai di website asli?

Bisa, asalkan temanya sudah diuji dengan baik. Pastikan tidak ada error, tampilannya responsive, struktur file rapi, dan fitur penting seperti wp_head() serta wp_footer() sudah ditambahkan.

Sebelum dipakai di website utama, sebaiknya uji dulu di WordPress lokal atau staging agar lebih aman.

Lebih baik membuat tema dari nol atau memakai child theme?

Kalau tujuanmu belajar memahami struktur tema WordPress, membuat tema dari nol adalah pilihan yang bagus. Kamu bisa tahu fungsi setiap file dan bagaimana WordPress menampilkan konten.

Tapi kalau tujuanmu hanya ingin mengubah tampilan dari tema yang sudah ada, child theme biasanya lebih aman. Dengan child theme, kamu bisa melakukan modifikasi tanpa mengubah file tema utama secara langsung.

Apakah membuat tema WordPress dari nol cocok untuk pemula?

Cocok, asalkan dimulai dari tema yang sederhana. Jangan langsung membuat tema yang terlalu kompleks. Mulai dulu dari file dasar seperti style.css, index.php, header.php, footer.php, dan functions.php.

Setelah paham alurnya, baru tambahkan fitur lain secara bertahap.