Jika Anda terbiasa dengan tema klasik (Classic Themes), file seperti functions.php (untuk add_theme_support), style.css, dan Customizer API adalah senjata utama Anda. Namun di era WordPress modern (Block Themes), “otak” dari desain situs Anda kini berpindah ke satu file bernama theme.json.
File ini bukan sekadar konfigurasi; ia adalah mesin yang men-generate CSS, mengontrol antarmuka editor (Gutenberg), dan membatasi apa yang bisa (dan tidak bisa) dilakukan oleh klien.
Mari kita bedah strukturnya.
1. Filosofi: Settings vs Styles
Struktur theme.json dibagi menjadi dua pilar utama yang sering membingungkan pemula:
-
settings: Mengatur kontrol UI yang tersedia di Editor. (Contoh: “Apakah user boleh memilih warna custom?”, “Font apa saja yang muncul di dropdown?”). -
styles: Mengatur tampilan default situs. (Contoh: “Apa warna background body?”, “Berapa padding default tombol?”).
2. Mengontrol Palet Warna (The CSS Variable Engine)
Salah satu fitur terkuat theme.json adalah kemampuannya mengubah definisi JSON menjadi CSS Custom Properties (Variables) secara otomatis.
Kode di theme.json:
{
"version": 2,
"settings": {
"color": {
"palette": [
{
"slug": "primary",
"color": "#0073AA",
"name": "Primary Blue"
},
{
"slug": "dosa-merah",
"color": "#FF0000",
"name": "Danger"
}
]
}
}
}
Apa yang terjadi di Frontend:
WordPress akan otomatis menyuntikkan CSS berikut di <body>:
body {
--wp--preset--color--primary: #0073AA;
--wp--preset--color--dosa-merah: #FF0000;
}
Artinya, Anda bisa menggunakan variabel ini di file CSS kustom Anda tanpa perlu mendeklarasikannya ulang.
3. “Client-Proofing”: Mengunci Desain
Developer sering frustrasi ketika klien mengubah warna font menjadi hijau neon atau merusak layout dengan margin aneh. theme.json adalah solusi lock-down terbaik.
Mematikan Warna Custom
Jika Anda ingin klien HANYA memilih warna dari palet yang sudah Anda tentukan di atas, matikan fitur color picker:
"settings": {
"color": {
"custom": false,
"palette": [ ... ]
}
}
Mengontrol Layout Container
Lupakan pembungkus .container manual di setiap file PHP. Tentukan lebar konten global di sini:
"settings": {
"layout": {
"contentSize": "800px",
"wideSize": "1200px"
}
}
Ini memastikan semua blok group atau cover mengikuti aturan lebar yang konsisten.
4. Styling Elemen Spesifik (Tanpa CSS File)
Anda bisa menargetkan elemen HTML atau Blok WordPress spesifik langsung dari JSON. Ini mengurangi ketergantungan pada file style.css yang membengkak.
Contoh: Mengubah Default Tombol (Button Block)
"styles": {
"blocks": {
"core/button": {
"border": {
"radius": "0px"
},
"color": {
"background": "var(--wp--preset--color--primary)",
"text": "#ffffff"
},
"typography": {
"fontWeight": "700"
}
}
}
}
Dengan kode di atas, semua tombol di situs otomatis akan kotak (radius 0), tebal, dan berwarna biru, tanpa menulis satu baris CSS pun.
5. Template Parts & Global Styles
Di tema FSE, header.php dan footer.php sudah tidak ada. Gantinya adalah file HTML statis di folder parts/. Namun, theme.json bertugas mendaftarkannya agar dikenali editor.
"templateParts": [
{
"area": "header",
"name": "header-sticky",
"title": "Header Sticky"
},
{
"area": "footer",
"name": "footer-minimal",
"title": "Footer Minimalis"
}
]
Kapan Menggunakan CSS vs JSON?
Transisi ke FSE tidak berarti Anda dilarang menggunakan CSS.
-
Gunakan
theme.jsonuntuk: Tipografi global, palet warna, layout dasar, dan style default blok core. -
Gunakan CSS biasa untuk: Animasi (
@keyframes), Pseudo-elements (:before/:after), dan query media yang kompleks (meskipuntheme.jsonmulai mendukung ini perlahan).
Menguasai theme.json membuat tema Anda lebih ringan, lebih cepat (karena CSS di-load inline atau efisien), dan lebih aman dari “tangan jahil” klien.
