8 Langkah Membuat Tema WordPress Sendiri
Membuat tema WordPress sendiri adalah langkah yang sangat baik bagi pengembang web yang ingin memiliki kontrol penuh atas tampilan dan fungsi website mereka. Berikut adalah panduan 8 langkah untuk membuat tema WordPress dari nol.
1. Persiapan Awal
Sebelum mulai, pastikan Anda memiliki:
- Server lokal dengan XAMPP, WAMP, atau MAMP.
- Instalasi WordPress di localhost.
- Text editor seperti VS Code atau Sublime Text.
- Pemahaman dasar tentang HTML, CSS, PHP, dan WordPress Template Hierarchy.
2. Membuat Folder Tema
- Buka direktori wp-content/themes/ di dalam instalasi WordPress Anda.
- Buat folder baru dengan nama tema Anda, misalnya mayutatheme.
- Di dalam folder tersebut, buat beberapa file dasar:
Berikut ini adalah file dasar atau yang wajib ada ketika mau membuat tema wordpress sendiri, mulailah dengan membuat 3 file ini:
- style.css
- index.php
- functions.php
Untuk kemudian jika mau pengembangan temanya, maka file index.php yang akan displit menjadi beberapa file dengan tujuan agar kita lebih mudah saat melakukan perubahan sesuai filenya, misal mau mengubah di single post, maka perlu dibuatkan file sendiri single postnya, untuk membahas ini nanti akan dibuatkan artikel sendiri.
3. Menyiapkan File style.css
File style.css berfungsi untuk memberi informasi dasar tentang tema Anda. Tambahkan kode berikut:
[php]
/*
Theme Name: MayutaTheme
Theme URI: https://mayutamedia.com/
Author: MayutaTheme
Author URI: https://mayutamedia.com/
Description: Tema WordPress buatan sendiri
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: custom-theme, responsive
Text Domain: mayutatheme
*/
[/php]
4. Membuat File index.php
File index.php adalah inti dari tema WordPress. Untuk awal, tambahkan kode berikut:
[php]
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php bloginfo('name'); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<h1><?php bloginfo('name'); ?></h1>
<p><?php bloginfo('description'); ?></p>
</header>
<main>
<?php
if (have_posts()) {
while (have_posts()) {
the_post();
echo '<h2>' . get_the_title() . '</h2>';
the_content();
}
}
?>
</main>
<?php wp_footer(); ?>
</body>
</html>
[/php]
5. Membuat File functions.php
File functions.php digunakan untuk menambahkan fitur khusus ke tema Anda. Tambahkan kode berikut:
[php]
<?php
function mayutatheme_enqueue_styles() {
wp_enqueue_style('mayutatheme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'mayutatheme_enqueue_styles');
?>
[/php]
Kode di atas memastikan bahwa file style.css dimuat saat tema diaktifkan.
6. Menambahkan Template Header dan Footer
Pisahkan bagian header dan footer agar lebih rapi.
Buat file 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">
<title><?php bloginfo('name'); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<h1><?php bloginfo('name'); ?></h1>
<p><?php bloginfo('description'); ?></p>
</header>
[/php]
Buat file footer.php:
[php]
<footer>
<p>© <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>
</footer>
<?php wp_footer(); ?>
</body>
</html>
[/php]
Perbarui index.php agar menggunakan header dan footer:
[php]
<?php get_header(); ?>
<main>
<?php
if (have_posts()) {
while (have_posts()) {
the_post();
echo '<h2>' . get_the_title() . '</h2>';
the_content();
}
}
?>
</main>
<?php get_footer(); ?>
[/php]
7. Mengaktifkan Tema di WordPress
- Buka Dashboard WordPress.
- Masuk ke Appearance > Themes.
- Cari tema Anda dan klik Activate.
- Cek website Anda untuk melihat hasilnya.
8. Mengembangkan Tema Lebih Lanjut
Setelah tema dasar selesai, Anda bisa menambahkan:
- Template tambahan seperti page.php, single.php, archive.php.
- Menu navigasi dengan wp_nav_menu().
- Widget dan sidebar dengan register_sidebar().
- Customizer API untuk pengaturan tema lebih lanjut.
Dengan memahami langkah-langkah ini, Anda bisa membuat tema WordPress sesuai kebutuhan dan mengembangkannya lebih lanjut. Jika ada yang mau ditanyakan, silakan curahkan di kolom komentar yah. Selamat Mencoba