Cara Membuat Tema WordPress Sendiri [Bonus Kode]

Selama ini, Anda mungkin selalu mencari dan menginstal tema WordPress yang tersedia di direktori resmi. Meskipun ada banyak opsi yang bisa dipilih, terkadang tema tersebut tidak menyediakan fungsi yang Anda butuhkan.

Untungnya, ada beberapa cara membuat tema WordPress sendiri yang bisa Anda coba dengan mudah. Tema kustom ini umumnya dibuat menggunakan bahasa coding populer seperti PHP, HTML, dan CSS. Dengan membuat tema kustom, Anda bisa menambahkan fitur atau elemen tertentu sesuai kebutuhan.

Di tutorial ini, kami akan menjelaskan cara membuat tema WordPress dari awal. Selain itu, kami akan membantu Anda membuat desain yang responsif dan menjelaskan konsep desain web terbaik untuk mengoptimalkan website Anda.

Persiapan Awal – Membuat Area Pengembangan Tema

Saat membuat tema di WordPress, sebaiknya jangan langsung menerapkannya di website asli Anda karena mungkin masih ada error yang perlu diperbaiki. Untuk menghindari masalah, Anda bisa menggunakan WordPress staging area.

Kalau menggunakan paket WordPress Business dari Hostinger, Anda bisa membuat staging area dengan tool yang sudah disertakan. Cara ini akan lebih cepat daripada membuat lingkungan lokal karena Anda tidak perlu menginstal banyak tool.

Untuk melakukannya, buka hPanel → Website → Dashboard. Dari sidebar, klik WordPress → Staging.

Buat WordPress staging area dengan membuka tab Staging, kemudian klik Buat staging. Masukkan subdomain yang Anda inginkan, kemudian klik Buat.

Cara Membuat Tema WordPress Sendiri

Setelah menyiapkan staging area, ikuti langkah-langkah berikut ini untuk membuat tema WordPress dari awal menggunakan PHP, HTML5, dan CSS3.

1. Buat dan Simpan File Template

Untuk membuat tema kustom di WordPress, Anda membutuhkan minimal dua file template. File yang pertama adalah index.php untuk menampilkan konten, dan yang kedua adalah style.css untuk mengelola elemen tema visual, seperti font.

Namun, sebagian besar tema WordPress juga memiliki file template tambahan yang menentukan tata letak area website tertentu, seperti postingan dan halaman. Berikut adalah beberapa file yang paling umum:

• header.php – berisi HTML yang ditampilkan di atas website WordPress Anda.
• footer.php – menyimpan HTML yang berada di bagian bawah website Anda.
• sidebar.php – menghasilkan elemen sidebar.
• functions.php – menambahkan fungsi pada tema, seperti widget WordPress.
• single.php – menampilkan satu postingan, termasuk tipe kustom.
• page.php – menampilkan konten statis dari satu halaman.

Dalam tutorial ini, kami akan menggunakan semua file template di atas. Ikuti langkah-langkah berikut untuk membuatnya di website staging:

1. Login ke hPanel dan akses File Manager website Anda.

2. Buka direktori tema WordPress dari public_html → staging → wp-content → themes.
3. Dari sidebar file manager, klik Folder baru.
4. Beri nama folder tema Anda. Buat nama yang mudah diingat, pendek, dan hanya mengandung karakter alfanumerik tanpa spasi. Setelah itu, klik Buat.
5. Klik dua kali folder untuk membukanya. Pilih File baru pada sidebar.
6. Beri nama index.php, kemudian klik Buat.
7. Ulangi langkah yang sama untuk membuat semua file template Anda. Di tutorial ini, kami akan membuat style.css, header.php, footer.php, functions.php, sidebar.php, single.php, dan page.php.

File-file tema ini harus berada di folder yang sama dalam direktori penginstalan WordPress agar CMS ini bisa memuat file-file tema berdasarkan hierarki template.

Kalau seluruh website Anda menggunakan tata letak yang sama, Anda tidak memerlukan semua template kustom ini. Namun, kami sarankan agar Anda tetap menggunakannya untuk memisahkan kode utama dari konten lainnya guna mempermudah proses kustomisasi tema.

Anda juga perlu membuat file JavaScript di direktori tema kalau memerlukan elemen desain yang dinamis. Kami tidak akan menggunakannya di tutorial ini, namun akan membuat folder bernama Images untuk menyimpan aset visual seperti logo.

Saat ini, file tema ini masih kosong. Kami akan menambahkan presentasi visual lebih dulu lalu mengatur tata letak template setelahnya.

2. Siapkan Stylesheet CSS Awal

Setelah membuat semua file template tema, Anda bisa mulai menulis kodenya. Mulailah dengan menambahkan keterangan pada stylesheet style.css yang tadi sudah dibuat agar WordPress bisa mengenali isinya.

Keterangan ini merupakan informasi yang akan muncul di area admin WordPress, seperti nama tema, penulis, dan deskripsi tema. Informasi tersebut ditulis berdasarkan format header file WordPress. Berikut contohnya:

/*
Theme Name: My Theme
Author: Hostinger
Author URI: http://www.hostinger.co.id/tutorial
Description: My first responsive HTML5 theme
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/

Klik ikon disk di bagian kanan atas editor untuk menyimpan file. Kembali ke menu pengelolaan website hPanel, buka WordPress → Staging. Klik Kelola Staging di website staging Anda, kemudian pilih Panel Admin Staging.

Setelah dashboard admin website staging Anda terbuka, buka Appearance (Tampilan) → Themes (Tema) di sidebar. Anda akan melihat file dasar tema yang sudah dibuat.

Mari tambahkan desain visual agar tema Anda lebih menarik. Buka file stylesheet dan tulis kode CSS Anda di bawah header. Sebagai contoh, kami akan menambahkan kode berikut ini untuk mengubah warna latar belakang tema:

* {
  box-sizing: border-box;
}
body {
    background-color: #f9f9f9;
    font-family: Helvetica;
}

Kode di atas dimulai dengan tanda bintang (*) untuk memilih semua elemen HTML dan menerapkan gaya dalam pasangan kurung kurawal pertama. Di sini, kami menambahkan model CSS box yang menampung konten, padding, dan border.

Sementara itu, gaya kedua mengatur warna latar belakang dan font default untuk semua konten HTML di dalam tag <body></body>.

Pada tahap ini, Anda tidak akan melihat perubahan apa pun karena kode HTML tadi belum ada isinya. Kami akan menyertakan lebih banyak kode CSS setelah menambahkan elemen dan membangun struktur tema.

3. Konfigurasikan Tema WordPress agar Berfungsi

Setelah tema WordPress Anda muncul di dashboard admin, sekarang saatnya membuat struktur dan fungsinya. Kami akan melakukannya dengan menambahkan kode ke file functions.php dan sidebar.php.

functions.php

Karena pengaturan margin dan padding yang tidak konsisten, beberapa web browser mungkin akan menampilkan tema WordPress Anda dalam cara yang berbeda. Agar tampilannya tetap sesuai, tautkan file normalize.css ke functions.php.

Template normalize.css adalah stylesheet siap pakai yang mengatur kode CSS Anda agar dimuat secara konsisten di berbagai browser. Untuk menambahkannya, masukkan fungsi tersebut ke functions.php:

<?php
// This function enqueues the Normalize.css for use. The first parameter is a name for the stylesheet, the second is the URL. Here we
// use an online version of the css file.
function add_normalize_CSS() {
   wp_enqueue_style( 'normalize-styles', "https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css");
}

add_action('wp_enqueue_scripts', 'add_normalize_CSS');

Kode ini akan meminta WordPress untuk memilih file normalize.css dari URL sumber yang ditambahkan.

Selanjutnya, tambahkan fungsi untuk mengaktifkan area widget atau sidebar. Widget adalah ekstensi yang berfungsi untuk menambahkan fitur tertentu ke berbagai bagian di website WordPress.

Untuk mengaktifkannya, tambahkan kode berikut setelah bagian sebelumnya:

// Register a new sidebar simply named 'sidebar'
function add_widget_support() {
               register_sidebar( array(
                               'name'          => 'Sidebar',
                               'id'            => 'sidebar',
                               'before_widget' => '<div>',
                               'after_widget'  => '</div>',
                               'before_title'  => '<h2>',
                               'after_title'   => '</h2>',
               ) );
}
// Hook the widget initiation and run our function
add_action( 'widgets_init', 'add_widget_support' );

Sekarang, mari aktifkan tema melalui Appearance (Tampilan) → Themes (Tema) lalu klik Activate (Aktifkan). Anda akan melihat menu Widgets di bawah tab Appearance, tempat Anda bisa menambahkan atau menghapus widget dari website.

Kode di atas berisi hook tindakan, yaitu fungsi PHP yang memuat kode dari file lain untuk memodifikasi pengaturan dan fitur WordPress tanpa mengubah bagian intinya. Kami akan membahas istilah ini nanti di bagian bawah.

Terakhir, tambahkan kode berikut ini guna mengaktifkan fungsi untuk menyisipkan menu navigasi kustom:

// Register a new navigation menu
function add_Main_Nav() {
  register_nav_menu('header-menu',__( 'Header Menu' ));
}
// Hook to the init action hook, run our navigation menu function
add_action( 'init', 'add_Main_Nav' );

Kode tersebut akan menampilkan tombol Menu di bawah menu Appearance. Jangan lupa untuk menyimpan perubahan dengan mengklik tombol disk di editor kode File Manager setelah menambahkan kode baru.

Ada berbagai fungsi lain yang bisa disisipkan. Sebagai contoh, pemilik website WordPress biasanya menambahkan featured image (gambar unggulan) dan thumbnail postingan.

sidebar.php

Selanjutnya, kami akan membuat sidebar tema WordPress untuk menampilkan widget menggunakan fungsi get_sidebar(). Masukkan kode di bawah ini ke dalam file sidebar.php dan simpan perubahannya.

<?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
  <aside id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
    <?php dynamic_sidebar( 'sidebar' ); ?>
  </aside>
<?php endif; ?>

Di dalam kode tersebut, pernyataan if berfungsi untuk mengecek apakah WordPress sudah menampilkan sidebar. Kalau belum, widget yang telah Anda tambahkan dari menu Widget di bawah tab Appearance akan ditampilkan.

4. Atur Tata Letak Tema Kustom

Setelah menambahkan sidebar dan fungsi normalize CSS, mari buat tata letak tema WordPress Anda. Di akhir langkah ini, struktur website Anda akan mulai terbentuk.

Selain index.php, kami akan memodifikasi file header.php, footer.php, single.php, page.php, dan style.php untuk mengatur tata letak khusus pada setiap halaman web.

header.php

File template header menentukan area atas halaman web Anda. Mulai kodenya dengan bagian berikut ini:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Dengan kode tersebut, header tema kustom WordPress Anda bisa menyesuaikan ukurannya sendiri berdasarkan ukuran layar tertentu menggunakan desain responsif. Tenang, kami akan menjelaskan konsep ini nanti.

Selanjutnya, tambahkan kode berikut ini:

<!DOCTYPE html>
<html <?php language_attributes(); ?>

Deklarasi DOCTYPE memberitahukan jenis file template header Anda pada web browser. Sementara itu, language_attributes() berfungsi untuk menentukan HTML sebagai bahasa coding utama dokumen.

Kemudian, tambahkan tag HTML <head></head> yang berisi metadata dokumen, seperti judul halaman web, rangkaian karakter default, area tampilan (viewport) desain responsif, dan stylesheet yang ditautkan. Semua detail ini ditambahkan dengan tag yang berbeda.

<head>
   <title><?php bloginfo('name'); ?> &raquo; <?php is_front_page() ? bloginfo('description') : wp_title(''); ?></title>
   <meta charset="<?php bloginfo( 'charset' ); ?>">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
   <?php wp_head(); ?>
 </head>

Selanjutnya, buat bagian isi dokumen HTML dan gunakan fungsi body_class untuk secara otomatis menetapkan class ke tag <body> untuk mengatur gaya.

 <body <?php body_class(); ?>>

Tambahkan header, yang diklasifikasikan sebagai class my-logo. Kemudian, kami akan menggunakan tag <h1></h1> untuk menampilkan logo di folder Images sebagai header utama dan anchor untuk URL website.

<header class="my-logo">
    <h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo get_template_directory_uri(); ?>/Images/logo.png" alt="Site Logo" width="50px" height="50px"></a></h1>
</header>

Terakhir, tambahkan kode berikut ini untuk menyisipkan menu navigasi di header tema:

 <?php wp_nav_menu( array( 'header-menu' => 'header-menu' ) ); ?>

index.php

File index.php menentukan struktur homepage dan berfungsi sebagai tata letak default kalau template halaman lain tidak tersedia.

Apabila Anda menggunakan tata letak yang berbeda untuk header, sidebar, dan footer, tambahkan tag template untuk memanggil kodenya ke dalam index.php. Sebagai contoh, gunakan get_header untuk menautkan header, dan seterusnya.

Untuk membagi halaman web Anda, gunakan elemen semantik HTML5 seperti <head> dan <section>. Apabila Anda ingin menerapkan stylesheet CSS pada elemen-elemen tersebut, tambahkan class seperti berikut ini:

<head class="class-name">

Berikut adalah contoh kode dalam file index.php yang berisi tag template dan elemen semantik:

<?php get_header(); ?>
<main class="wrap">
  <section class="content-area content-thin">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <article class="article-loop">
        <header>
          <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
          By: <?php the_author(); ?>
        </header>
        <?php the_excerpt(); ?>
      </article>
<?php endwhile; else : ?>
      <article>
        <p>Sorry, no posts were found!</p>
      </article>
<?php endif; ?>
  </section><?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>

Dalam kode di atas, kami juga menambahkan WordPress loop, yaitu kode PHP yang mengambil postingan dari database dan meneruskannya ke fungsi-fungsi lain. Kode tersebut dimulai dari <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> dan berakhir di <?php endif; ?>.

Loop di atas berisi fungsi-fungsi berikut ini untuk mengambil detail postingan tertentu:

• <?php the_permalink(); ?> – menghasilkan URL postingan yang sebenarnya.
• <?php the_title_attribute(); ?> – menampilkan judul postingan dalam format yang kompatibel dengan atribut elemen.
• <?php the_title(); ?> – menampilkan judul postingan
• <?php the_author(); ?> – menghasilkan nama author (penulis) postingan.
• <?php the_excerpt(); ?> – mengekstrak kutipan postingan, yang akan dibuat secara otomatis kalau tidak ditulis.

footer.php

File footer.php menentukan konten di bagian bawah tema, seperti informasi hak cipta atau sitemap. Anda juga bisa menambahkan tag penutup <body> dan <html> di sini kalau belum menentukannya di header.php.

Tentukan konten footer dengan elemen semantik HTML <footer></footer>. Dalam contoh ini, kami akan menambahkan informasi hak cipta di bagian bawah.

Kami juga akan menambahkan hook tindakan wp_footer untuk memuat kode fungsi wp_footer di file inti atau plugin WordPress. Berikut tampilan kode lengkapnya:

<footer>
      <p>Copyright &copy; 2024</p>
    </footer>
    <?php wp_footer(); ?>
  </body>
</html>

single.php

File single.php menentukan tata letak semua jenis postingan di WordPress. Selain postingan blog, file ini juga mendefinisikan jenis postingan kustom seperti halaman produk di toko online.

Mulai kodenya dengan memanggil file header menggunakan fungsi get_header() seperti berikut ini:

<?php get_header(); ?>

Kemudian, tambahkan tag <section></section> untuk membuat container utama dan menetapkan class untuk pengaturan gaya. Gunakan loop WordPress untuk mengambil konten postingan dan menampilkannya menggunakan fungsi the_content().

Kalau konten postingan tidak tersedia, pesan error akan ditampilkan. Berikut adalah contoh kode lengkapnya:

<main class="wrap">
  <section class="content-area content-full-width">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <article class="article-full">
        <header>
          <h2><?php the_title(); ?></h2>
          By: <?php the_author(); ?>
        </header>
       <?php the_content(); ?>
      </article>
<?php endwhile; else : ?>
      <article>
        <p>Sorry, no post was found!</p>
      </article>
<?php endif; ?>
  </section>
</main>
<?php get_footer(); ?>

Tidak seperti file template lainnya, kami tidak menambahkan fungsi get_sidebar() untuk menghilangkan sidebar dan widget dari semua postingan.

page.php

Area seperti landing page berisi konten yang kemungkinan besar jarang berubah. Jadi, kalau template halaman khususnya tidak ada, halaman tersebut akan mewarisi tata letak dari index.php, bukan single.php.

Kami akan menggunakan kode yang mirip dengan single.php, tapi sudah disesuaikan lagi untuk membedakan halaman website dengan postingan. Selain menambahkan sidebar, kami akan membuat area konten menjadi lebih kecil. Berikut tampilan kodenya:

<?php get_header(); ?>
<main class="wrap">
  <section class="content-area content-thin">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <article class="article-full">
        <header>
          <h2><?php the_title(); ?></h2>
          By: <?php the_author(); ?>
        </header>
        <?php the_content(); ?>
      </article>
<?php endwhile; else : ?>
      <article>
        <p>Sorry, no page content was found!</p>
      </article>
<?php endif; ?>
  </section><?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>

Meskipun kami menggunakan loop yang sama, kode ini akan berjalan secara berulang pada halaman, bukan postingan, karena kami meletakkannya dalam file page.php.

Saat ini, tema WordPress kustom Anda sudah memiliki tata letak dan konten. Namun, tampilannya hanya akan menyajikan teks biasa dan logo kalau Anda mengakses website staging karena belum diberi gaya apa pun.

Untuk menambahkan atau memodifikasi kodenya, Anda bisa menggunakan File Theme Editor tanpa perlu membuka file template PHP melalui File Manager. Akses editor dari menu Appearance di dashboard admin WordPress.

5. Sempurnakan Desainnya di CSS Stylesheet

Setelah menambahkan elemen HTML dan menetapkan class, mari kembali ke stylesheet untuk menyesuaikan desain tema. Mulailah dengan menambahkan kode berikut ini ke dalam style.css untuk memodifikasi ukuran, padding, dan warna logo:

.my-logo,
footer {
  width: 100%;
  padding-left: 1%;
  margin-bottom: 8px;
  background-color: #78baff;
  border: 1px solid #78baff;
}

Kemudian, tambahkan potongan kode berikut ini ke bagian gaya dalam tata letak tema Anda. Kami akan menyesuaikan anchor h1, artikel, dan footer:

body > header > h1 > a {
  color: #ffffff;
  font-weight: 400;
}

article > header {
}

footer {
  margin-top: 4px;
}

a {
  text-decoration: none;
}

/* 'Margin: 0 auto' centers block content on the page */
.wrap {
  width: 99%;
  margin: 0 auto;
}

Terakhir, tetapkan gaya ke elemen lain seperti area konten dan sidebar dengan menambahkan potongan kode berikut:

.content-area {
  display: inline-block;
}

.content-thin {
    width: 70%;
}

.content-full-width {
    width: 100%;
}

.content-area,
.primary-sidebar {
  display: inline-block;
}

.primary-sidebar {
  width: 25%;
  padding: 1%;
  vertical-align: top;
  background-color: #ececec;
}

.article-loop {
    width: 45%;
    text-align: left;
    margin: 5px;
    padding: 10px;
}

.article-full {
  width: 99%;
  padding: 1%;
}

.article-loop,
.article-full {
  display: inline-block;
  vertical-align: top;
  background-color: #FFF;
  border-radius: 4px;
  margin-bottom: 4px;
}

Setelah tema baru diterapkan, website staging Anda akan terlihat seperti ini:

Untuk memodifikasi stylesheet, Anda bisa menambahkan custom CSS WordPress melalui editor tema. Akses fitur ini dengan membuka Appearance (Tampilan) → Themes (Tema) → Customize (Sesuaikan) → Additional CSS (CSS Tambahan) di sidebar.

6. Uji dan Terapkan Tema

Sebelum menerapkan tema kustom yang baru, mari aktifkan tema tersebut di website WordPress staging Anda dulu untuk mengecek apakah tampilan dan fungsinya sudah sesuai yang diharapkan.

Buka dashboard admin staging area, lalu aktifkan tema yang baru melalui menu Themes. Kemudian, akses website uji coba dengan mengklik tombol Visit Site (Kunjungi Situs) di bagian atas menu admin.

Setelah memastikan tampilan visual dan tata letaknya berfungsi tanpa masalah, terapkan tema pada website asli Anda. Untuk melakukannya, kembali ke File Manager staging area, klik folder tema Anda, kemudian pilih tombol download di menu bagian atas. Download folder sebagai file ZIP.

Ekstrak folder ke komputer, kemudian upload ke direktori /wp-content/themes di website asli Anda melalui File Manager. Aktifkan tema melalui dashboard admin WordPress.

Konsep Penting dalam Pengembangan Tema WordPress

Setelah berhasil membuat tema WordPress sendiri, Anda mungkin ingin memodifikasi fitur dan tampilannya lagi nanti. Nah, untuk membantu Anda, kami akan menjelaskan konsep desain dan fungsi penting dalam pembuatan tema WordPress.

Kueri Media dan Desain Responsif

Pengunjung menggunakan perangkat dengan layar yang berbeda-beda dari segi resolusi, ukuran, dan orientasi. Kalau hanya dioptimalkan untuk desktop, tema Anda mungkin tidak akan ditampilkan atau berfungsi dengan baik di perangkat lain seperti ponsel.

Jadi, pastikan tema Anda memiliki desain yang responsif agar tetap berfungsi baik di layar apa pun. Website Anda pun nantinya bisa menyesuaikan tata letak, penempatan konten, dan ukuran elemennya secara otomatis dengan mendeteksi jenis tampilan perangkat.

Untuk menerapkan desain tema responsif, tambahkan kueri media CSS untuk menentukan penyajian konten ketika area tampilannya berubah. Kueri ini menggunakan persentase untuk menyesuaikan tata letak dan ukuran tampilan terhadap layar.

Contohnya, setiap bagian dalam desain tema dua kolom akan selalu menempati 50% area tampilan, apa pun resolusi dan orientasinya. Ada beberapa properti CSS untuk kueri media, dan yang paling umum adalah:

• max-width – menentukan lebar maksimum pada area browser yang bisa dilihat.
• min-width – menentukan lebar minimum pada area yang terlihat.
• orientation – memeriksa apakah layar menggunakan mode portrait atau landscape.

Sebaiknya Anda menambahkan kueri media di bagian bawah dan menetapkan class untuk penataan kode yang lebih rapi dan kustomisasi tema yang lebih sederhana.

Misalnya, tambahkan kueri media berikut ini untuk secara otomatis menyesuaikan ukuran konten utama dan sidebar tema yang sudah dibuat:

@media screen and (max-width: 400px) {
  .content-area,
  .primary-sidebar {
    width: 80%;
  }
}

Aturan ini berlaku untuk layar dan jendela browser dengan lebar maksimum 400 piksel. Elemen yang dipilih, yaitu content-area dan primary-sidebar, akan menampilkan 80% ukuran aslinya kalau area tampilannya berada dalam dimensi yang ditentukan.

Anda mungkin memerlukan aturan tambahan untuk ukuran dan orientasi layar lainnya agar konten Anda selalu ditampilkan dengan benar. Misalnya, tetapkan kondisi ketika konten ditampilkan 100%:

@media screen and (max-width: 800px) {
  .content-area,
  .primary-sidebar {
    width: 100%;
  }
}

Tag Template

Tag template adalah fungsi PHP untuk menautkan file dengan mudah dan menyederhanakan kueri database yang kompleks. Tugas ini bisa dilakukan menggunakan satu baris skrip, tanpa perlu menulis kode yang panjang.

Untuk menerapkan template pada halaman tertentu, tambahkan tag ke file yang sesuai. Misalnya, untuk menampilkan footer hanya di homepage, tambahkan get_footer di bagian bawah home.php, bukan page.php.

Meskipun beberapa tag bersifat opsional kalau Anda tidak menggunakan file template, tag lainnya cukup penting agar loop WordPress bisa berfungsi dengan benar. Tag-tag ini mengambil informasi postingan dari database sehingga loop bisa mengulang dan meneruskan data.

Untuk menautkan file template, berikut adalah beberapa tag yang paling sering digunakan:

• get_header() – mencakup template header.php.
• get_sidebar() – memanggil template sidebar.php.
• get_footer () – menautkan template footer.php.
• get_search_form() – termasuk template searchform.php.

Sementara itu, tag template berikut ini menampilkan informasi dari database WordPress:

• bloginfo() – menampilkan informasi yang diminta dalam parameter, seperti bloginfo(“name”) yang menunjukkan nama website Anda.
• single_post_title () – menampilkan judul postingan yang sedang dilihat saat digunakan dalam file single.php.
• the_author() – menunjukkan penulis postingan yang sedang dilihat.
• the_content() – menghasilkan teks utama dari postingan atau halaman.
• the_excerpt() – menampilkan kutipan dari postingan atau halaman.

Loop WordPress

Loop WordPress adalah kode yang berjalan secara berulang dalam postingan, mengambil datanya, dan meneruskannya ke fungsi-fungsi lain. Pada dasarnya, loop berfungsi untuk mengambil konten dari database dan menampilkannya ke area front-end.

Dalam pembuatan tema WordPress, loop memiliki fungsi yang sangat penting untuk menampilkan postingan secara dinamis. Tanpanya, Anda hanya bisa menampilkan konten statis karena file template Anda tidak memiliki informasi terbaru dari database.

Loop disisipkan dalam file index.php dan template lain yang menampilkan konten postingan. Kode ini selalu dimulai dengan pernyataan if, seperti berikut ini:

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

Kemudian, tentukan tag template, HTML, atau fungsi PHP untuk memodifikasi data yang diambil kalau ada. Sebagai contoh, gunakan the_content() untuk menampilkan konten lengkap postingan atau the_excerpt() untuk mencantumkan versi yang lebih pendek.

Pada page.php sebelumnya, kami menampilkan informasi halaman sebagai konten utama dengan menggunakan kode berikut:

<article class="article-full">
        <header>
          <h2><?php the_title(); ?></h2>
          By: <?php the_author(); ?>
        </header>
        <?php the_content(); ?>
      </article>

Kemudian, loop WordPress diakhiri dengan pernyataan else, yang menentukan kondisi yang harus dipenuhi kalau data yang diminta tidak ada. Sebagai contoh, error berikut akan muncul kalau data tidak ditemukan:

<?php endwhile; else : ?>
   <p><?php _e( 'Sorry, no pages matched your criteria.' ); ?></p>
<?php endif; ?>

Hook Tindakan

Hook adalah fungsi PHP yang berfungsi untuk memanipulasi fitur bawaan WordPress tanpa mengedit file intinya. Ada dua jenis hook WordPress tergantung pada tujuannya: action (tindakan) dan filter.

Hook filter digunakan untuk memodifikasi kode yang ada dalam file function.php dan menampilkan data yang telah diubah kepada pengguna. Sementara itu, action digunakan untuk membuat fungsi baru yang berjalan pada waktu tertentu.

Selain file inti, Anda bisa menggunakan hook untuk menambahkan fungsi dari plugin WordPress pada tema. Hal ini akan memastikan kompatibilitas antara berbagai software di lingkungan WordPress untuk performa yang lebih stabil.

Selain itu, hook bisa digunakan untuk mengatur kode dalam file-file terpisah untuk memudahkan modifikasi, update, dan debugging. Anda juga bisa menggunakannya untuk menambahkan lebih banyak fitur, seperti mengaktifkan WordPress customizer bawaan atau editor website untuk tema blok.

Pada tema yang baru dibuat, kami menggunakan hook tindakan pada file header.php untuk mengambil header HTML WordPress default dan menyisipkannya pada kode tema:

<?php wp_head(); ?>
 </head>

Sementara itu, hook tindakan wp_footer() berikut ini di template footer menyertakan kode default WordPress dan menjalankan fungsi yang ditentukan dalam plugin:

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

Apabila tema Anda tidak menyertakan hook, kode sumber penting tidak akan dimuat, dan plugin tidak akan berfungsi dengan benar. Sebagai contoh, tanpa adanya wp_footer(), menu admin WordPress tidak bisa dinonaktifkan karena terkait pada hook tindakan.

Tips Terbaik untuk Membuat Tema WordPress Sendiri

Agar tema WordPress yang Anda buat sendiri bisa berfungsi dengan baik dan aman, ingat tips terbaik berikut ini saat mengembangkannya:

Validasikan Kode dan File Tema

Cek tema baru Anda untuk memastikan kesesuaiannya terhadap standar peninjauan WordPress terbaru. Selain untuk memeriksa fungsinya, proses validasi kode membantu menemukan masalah yang bisa memengaruhi keamanan, kompatibilitas, lisensi, dan kualitas tema.

Cara termudah untuk melakukannya adalah dengan menggunakan plugin seperti Theme Check. Sebaiknya jalankan pengujian secara berkala setiap kali Anda melakukan perubahan agar bisa langsung menangani masalah yang muncul.

Uji Tema di Berbagai Perangkat dan Browser

Untuk memastikan aturan kueri media tema WordPress Anda berfungsi dengan benar pada berbagai area tampilan, akses website di perangkat yang berbeda.

Anda bisa melihat contoh ukuran layar yang berbeda menggunakan toolbar yang tersedia di browser. Kalau menggunakan Google Chrome, akses toolbar dengan menekan Ctrl + Shift + C lalu Ctrl + Shift + M. Sesuaikan resolusi dan rasio aspek dari menu bagian atas.

Selain melakukan pengujian di beberapa perangkat, uji tema WordPress Anda di web browser lain karena proses render CSS dan HTML setiap aplikasi mungkin berbeda, yang mungkin menyebabkan error yang mengganggu pengalaman pengguna.

Manfaatkan Template Tema

Gunakan tema awalan untuk mempermudah proses pengembangan. Jadi, daripada menulis kode dari nol, Anda cukup menambahkan gaya dan fitur sesuai kebutuhan.

Template tema biasanya mengikuti standar coding WordPress, menyediakan tema dasar yang canggih untuk kemudian dikembangkan lagi. Beberapa template juga menyediakan dukungan komunitas yang baik dan materi panduan untuk mempermudah penyelesaian masalah.

Meskipun ada banyak tema awalan yang tersedia, kami merekomendasikan tema gratis dari developer terkemuka seperti Astra dan Underscores.

Minify dan Optimalkan Kode

Saat membuat tema WordPress sendiri dari nol, jaga kode Anda tetap rapi agar ukuran file tidak membengkak. Dengan demikian, web browser bisa merender tema Anda dengan lebih cepat, yang juga akan mengoptimalkan kecepatan website.

Untuk mempercepat loading halaman, gunakan tool seperti Minifier untuk mengurangi ukuran file PHP, CSS, dan JavaScript. Proses ini menghapus karakter tambahan yang tidak memengaruhi fungsi kode, seperti spasi.

Sebelum melakukan proses minify kode, backup file aslinya dulu karena hasil minify mungkin sulit dibaca, yang nantinya bisa mempersulit proses debug atau maintenance.

Selain itu, buatlah child theme, yaitu tema turunan yang bisa digunakan untuk menambahkan fungsi atau gaya baru tanpa memengaruhi file template utama. Tema turunan ini membantu mencegah error konfigurasi dan memudahkan Anda mengembalikan perubahan kalau terjadi masalah.

Kesimpulan

Dengan membuat tema WordPress sendiri, Anda bisa memberikan sentuhan yang lebih unik pada website Anda. Selain itu, Anda bisa memilih fitur-fitur yang diperlukan saja, serta meminimalkan kode yang terlalu padat untuk mempercepat loading halaman.

Di artikel ini, kami sudah menjelaskan cara membuat tema WordPress sendiri yang bisa Anda coba dari awal. Setelah menyiapkan staging area, ikuti langkah-langkah berikut ini:

1. Buat file index.php, style.css, dan file template lainnya di folder tema staging area di dalam direktori themes WordPress.
2. Siapkan stylesheet CSS awal dengan menambahkan informasi developer tema dan warna latar belakang.
3. Konfigurasikan tema agar berfungsi dengan menambahkan sidebar di functions.php dan sidebar.php.
4. Buat tata letak tema WordPress dengan membagi index.php dan file template lainnya menggunakan tag HTML.
5. Sempurnakan desain tema dengan menambahkan CSS ke setiap class melalui stylesheet.
6. Uji tema buatan Anda di staging area dan upload tema ke website asli setelah selesai.

Kemudian, terapkan konsep desain responsif pada tema Anda untuk memastikan tampilannya tetap optimal di berbagai ukuran layar. Selain itu, konfigurasikan tag template, loop WordPress, dan hook tindakan dengan benar untuk menjaga kompatibilitas tema dengan software lainnya di WordPress.

Tanya Jawab (FAQ) Cara Membuat Tema WordPress Sendiri

Untuk membantu Anda memahami proses ini lebih lanjut, kami akan menjawab beberapa pertanyaan umum tentang cara membuat tema WordPress.