Cara Membuat Tema WordPress Kustom dengan Mudah dan Cepat

WordPress adalah salah satu platform blogging dan CMS (Content Management System) yang paling populer di dunia. Dengan WordPress, Anda bisa membuat website apa saja, mulai dari blog pribadi, toko online, hingga portal berita.

Salah satu kelebihan WordPress adalah kemudahan dalam mengubah tampilan website. Anda bisa memilih dari ribuan tema gratis atau berbayar yang tersedia di repository WordPress atau marketplace lainnya.

Namun, mungkin Anda merasa tidak puas dengan tema yang ada. Mungkin Anda ingin membuat website yang lebih unik dan sesuai dengan selera Anda. Atau mungkin Anda ingin belajar lebih banyak tentang web development dan mencoba tantangan baru.

Jika demikian, maka Anda bisa mencoba membuat tema WordPress kustom sendiri. Dengan membuat tema WordPress kustom, Anda bisa mengontrol setiap aspek dari website Anda, mulai dari layout, warna, font, hingga fitur-fitur tambahan.

Tapi, bagaimana cara membuat tema WordPress kustom? Apakah sulit? Apa saja yang dibutuhkan?

Tenang saja, di artikel ini saya akan menjelaskan langkah-langkah cara membuat tema WordPress kustom dari awal dengan mudah dan cepat. Anda tidak perlu khawatir, karena saya akan menjelaskan semuanya dengan detail dan mudah dipahami.

Siap? Mari kita mulai!

Apa yang Dibutuhkan untuk Membuat Tema WordPress Kustom?

Sebelum kita mulai membuat tema WordPress kustom, ada beberapa hal yang harus kita siapkan terlebih dahulu. Berikut adalah daftarnya:

• WordPress. Tentu saja, kita membutuhkan WordPress sebagai platform utama untuk membuat website kita. Jika Anda belum memiliki WordPress, Anda bisa mengunduhnya di situs resminya atau menggunakan layanan hosting WordPress yang sudah menyediakan instalasi WordPress secara otomatis.
• Text editor. Ini adalah alat yang kita gunakan untuk menulis kode-kode untuk tema WordPress kita. Ada banyak text editor yang bisa kita gunakan, seperti Notepad++, Sublime Text, [Atom], atau [Visual Studio Code]. Pilihlah text editor yang sesuai dengan preferensi dan kenyamanan Anda.
• Web browser. Ini adalah alat yang kita gunakan untuk melihat hasil dari kode-kode yang kita tulis. Anda bisa menggunakan web browser apa saja, seperti [Google Chrome], [Mozilla Firefox], [Microsoft Edge], atau [Safari]. Pastikan web browser Anda selalu diperbarui ke versi terbaru agar mendukung fitur-fitur terkini dari web development.
• Localhost. Ini adalah alat yang kita gunakan untuk menjalankan website kita secara lokal di komputer kita sendiri, tanpa perlu mengunggahnya ke internet. Dengan localhost, kita bisa menguji tema WordPress kita dengan cepat dan mudah. Ada beberapa alat localhost yang bisa kita gunakan, seperti [XAMPP], [WAMP], [MAMP], atau [Local by Flywheel]. Pilihlah alat localhost yang sesuai dengan sistem operasi dan kemampuan komputer Anda.

Setelah kita memiliki semua alat yang dibutuhkan, kita bisa mulai membuat tema WordPress kustom kita.

Bagaimana Cara Membuat Tema WordPress Kustom?

Untuk membuat tema WordPress kustom, kita perlu mengikuti beberapa langkah berikut ini:

1. Membuat Folder Tema

Langkah pertama yang harus kita lakukan adalah membuat folder untuk menyimpan file-file tema kita. Folder ini nantinya akan kita letakkan di dalam folder wp-content/themes di direktori WordPress kita.

Nama folder tema bisa kita tentukan sendiri, asalkan tidak sama dengan nama folder tema lain yang sudah ada. Sebagai contoh, saya akan memberi nama folder tema saya dengan temaku.

Di dalam folder tema, kita perlu membuat dua file wajib, yaitu index.php dan style.css. File index.php adalah file yang berisi kode PHP untuk menampilkan konten website kita. File style.css adalah file yang berisi kode CSS untuk mengatur tampilan website kita.

Selain dua file wajib tersebut, kita juga bisa membuat file-file lain yang opsional, seperti header.php, footer.php, sidebar.php, functions.php, screenshot.png, dan lain-lain. File-file ini akan kita bahas lebih lanjut nanti.

2. Menulis Kode di File style.css

Langkah kedua yang harus kita lakukan adalah menulis kode di file style.css. Kode ini berfungsi untuk memberi informasi tentang tema kita, seperti nama, deskripsi, versi, penulis, dan lain-lain. Kode ini juga disebut sebagai theme header.

Berikut adalah contoh kode theme header yang bisa kita tulis di file style.css:

/*
Theme Name: Temaku
Theme URI: https://temaku.com
Author: Namaku
Author URI: https://namaku.com
Description: Tema WordPress kustom yang saya buat sendiri dengan bantuan Bing.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: temaku
Tags: custom, responsive, blog
*/

Selain menulis theme header, kita juga bisa menulis kode CSS lainnya di file style.css untuk mengatur tampilan website kita, seperti warna, font, margin, padding, dan lain-lain. Kode CSS ini akan kita tulis setelah theme header.

Berikut adalah contoh kode CSS yang bisa kita tulis di file style.css:

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

/* Font */
body {
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Header */
.header {
    background-color: #f0f0f0;
    padding: 20px;
}

.header h1 {
    font-size: 32px;
    font-weight: bold;
}

.header p {
    font-size: 18px;
}

/* Main */
.main {
    display: flex;
    margin-top: 20px;
}

/* Content */
.content {
    flex: 3;
}

.content h2 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

.content p {
    margin-bottom: 10px;
}

/* Sidebar */
.sidebar {
    flex: 1;
    background-color: #f0f0f0;
    padding: 20px;
}

.sidebar h3 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.sidebar ul {
    list-style-type: none;
}

.sidebar li {
    margin-bottom: 10px;
}

.sidebar a {
    color: #333;
    text-decoration: none;
}

/* Footer */
.footer {
    background-color: #333;
    color: #fff;
    padding: 20px;
}

3. Menulis Kode di File index.php

Langkah ketiga yang harus kita lakukan adalah menulis kode di file index.php. Kode ini berfungsi untuk menampilkan konten website kita, seperti judul, isi, gambar, dan lain-lain. Kode ini juga disebut sebagai template tag.

Berikut adalah contoh kode template tag yang bisa kita tulis di file index.php:

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

<div class=”container”>
<div class=”main”>
<div class=”content”>
<?php if (have_posts()) : // Memeriksa apakah ada post ?>
<?php while (have_posts()) : the_post(); // Mengulang setiap post ?>
<h2><a href=”<?php the_permalink(); // Menampilkan link post ?>”><?php the_title(); // Menampilkan judul post ?></a></h2>
<p><?php the_excerpt(); // Menampilkan cuplikan post ?></p>
<?php endwhile; ?>
<?php else : // Jika tidak ada post ?>
<p>Tidak ada post yang ditemukan.</p>
<?php endif; ?>
</div>
<div class=”sidebar”>
<?php get_sidebar(); // Memanggil file sidebar.php ?>
</div>
</div>
</div>

<?php get_footer(); // Memanggil file footer.php ?>

4. Membuat File-File Lain yang Opsional

Langkah keempat yang bisa kita lakukan adalah membuat file-file lain yang opsional untuk tema WordPress kita. File-file ini berfungsi untuk memecah kode-kode yang ada di file index.php menjadi bagian-bagian yang lebih spesifik dan modular. Dengan begitu, kita bisa mengatur tema WordPress kita dengan lebih mudah dan rapi.

Beberapa file yang bisa kita buat adalah sebagai berikut:

• header.php. File ini berisi kode untuk menampilkan bagian header website kita, seperti logo, menu, dan lain-lain.
• footer.php. File ini berisi kode untuk menampilkan bagian footer website kita, seperti informasi kontak, link sosial media, dan lain-lain.
• sidebar.php. File ini berisi kode untuk menampilkan bagian sidebar website kita, seperti widget, iklan, dan lain-lain.
• functions.php. File ini berisi kode untuk menambahkan fungsi-fungsi tambahan untuk tema WordPress kita, seperti mendaftarkan menu, widget, script, style, dan lain-lain.
• screenshot.png. File ini berisi gambar untuk menampilkan tampilan tema WordPress kita di halaman admin WordPress.

Untuk memanggil file-file ini di file index.php, kita bisa menggunakan fungsi get_header(), get_footer(), get_sidebar(), dan lain-lain.

Berikut adalah contoh kode yang bisa kita tulis di file-file opsional tersebut:

header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset=”<?php bloginfo(‘charset’); ?>”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title><?php wp_title(‘|’, true, ‘right’); ?></title>
<?php wp_head(); // Memanggil script dan style yang didaftarkan di functions.php ?>
</head>
<body <?php body_class(); ?>>
<div class=”header”>
<h1><a href=”<?php echo home_url(); // Menampilkan link homepage ?>”><?php bloginfo(‘name’); // Menampilkan nama website ?></a></h1>
<p><?php bloginfo(‘description’); // Menampilkan deskripsi website ?></p>
<?php wp_nav_menu(array(‘theme_location’ => ‘primary’)); // Menampilkan menu yang didaftarkan di functions.php ?>
</div>

footer.php

<div class=”footer”>
<p>© <?php echo date(‘Y’); ?> <?php bloginfo(‘name’); // Menampilkan nama website ?>. All rights reserved.</p>
<p>Follow us on:
<a href=”https://facebook.com/temaku”>Facebook</a>,
<a href=”https://twitter.com/temaku”>Twitter</a>,
<a href=”https://instagram.com/temaku”>Instagram</a>.
</p>
</div>
<?php wp_footer(); // Memanggil script yang didaftarkan di functions.php ?>
</body>
</html>

sidebar.php

<h3>Search</h3>
<?php get_search_form(); // Menampilkan form pencarian ?>

<h3>Categories</h3>
<ul>
<?php wp_list_categories(array(‘title_li’ => ”)); // Menampilkan daftar kategori ?>
</ul>

<h3>Recent Posts</h3>
<ul>
<?php wp_get_archives(array(‘type’ => ‘postbypost’, ‘limit’ => 5)); // Menampilkan daftar post terbaru ?>
</ul>

<h3>Tag Cloud</h3>
<div>
<?php wp_tag_cloud(); // Menampilkan daftar tag ?>
</div>