{"id":5575,"date":"2017-09-12T10:00:11","date_gmt":"2017-09-12T10:00:11","guid":{"rendered":"https:\/\/blog.hostinger.io\/co-id-tutorial\/?p=5575"},"modified":"2025-12-18T23:35:53","modified_gmt":"2025-12-18T16:35:53","slug":"cara-membuat-tema-wordpress","status":"publish","type":"post","link":"\/id\/tutorial\/cara-membuat-tema-wordpress","title":{"rendered":"Cara membuat tema WordPress sendiri [bonus kode]"},"content":{"rendered":"<p>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.<\/p><p>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.<\/p><p>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.<\/p><p>\n\n\n\n\n\n<div class=\"protip\">\n                    <h2 class=\"featured-snippet title\">Cara Membuat Tema WordPress Sendiri<\/h2>\n                    <p>Langkah 1. Buat dan Simpan File Template<br>\nLangkah 2. Siapkan Stylesheet CSS Awal<br>\nLangkah 3. Konfigurasikan Tema WordPress agar Berfungsi<br>\nLangkah 4. Atur Tata Letak Tema Kustom<br>\nLangkah 5. Sempurnakan Desainnya di CSS Stylesheet<\/p>\n                <\/div>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-persiapan-awal-membuat-area-pengembangan-tema\">Persiapan Awal &ndash; Membuat Area Pengembangan Tema<\/h2><p>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.<\/p><p>Kalau menggunakan <a href=\"\/id\/wordpress-hosting\">paket WordPress Business<\/a> 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.<\/p><p>Untuk melakukannya, buka <strong>hPanel <\/strong>&rarr; <strong>Website <\/strong>&rarr; <strong>Dashboard<\/strong>. Dari sidebar, klik <strong>WordPress <\/strong>&rarr; <strong>Staging<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/id\/tutorial\/wp-content\/uploads\/sites\/37\/2023\/03\/menu-staging-dari-dropdown-wordpress-di-sidebar-kiri-hpanel-e1711001235278-556x1024.png\" alt=\"menu staging dari dropdown wordpress di sidebar kiri hpanel\" style=\"width:262px;height:auto\"><\/figure><\/div><p>Buat WordPress staging area dengan membuka tab <strong>Staging<\/strong>, kemudian klik <strong>Buat staging<\/strong>. Masukkan subdomain yang Anda inginkan, kemudian klik <strong>Buat<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/id\/wordpress-hosting\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/06\/ID-New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-37614\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/06\/ID-New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/06\/ID-New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/06\/ID-New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/06\/ID-New-WP_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-cara-membuat-tema-wordpress-sendiri\">Cara Membuat Tema WordPress Sendiri<\/h2><p>Setelah menyiapkan staging area, ikuti langkah-langkah berikut ini untuk membuat tema WordPress dari awal menggunakan PHP, <a href=\"\/id\/tutorial\/perbedaan-html-dan-html5\">HTML5<\/a>, dan CSS3.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-buat-dan-simpan-file-template\">1. Buat dan Simpan File Template<\/h3><p>Untuk membuat tema kustom di WordPress, Anda membutuhkan minimal dua file template. File yang pertama adalah <strong>index.php<\/strong> untuk menampilkan konten, dan yang kedua adalah <strong>style.css<\/strong> untuk mengelola elemen tema visual, seperti font.<\/p><p>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:<\/p><ul class=\"wp-block-list\">\n<li><strong>header.php<\/strong> &ndash; berisi HTML yang ditampilkan di atas website WordPress Anda.<\/li>\n\n\n\n<li><strong>footer.php<\/strong> &ndash; menyimpan HTML yang berada di bagian bawah website Anda.<\/li>\n\n\n\n<li><strong>sidebar.php<\/strong> &ndash; menghasilkan elemen sidebar.<\/li>\n\n\n\n<li><strong>functions.php<\/strong> &ndash; menambahkan fungsi pada tema, seperti widget WordPress.<\/li>\n\n\n\n<li><strong>single.php<\/strong> &ndash; menampilkan satu postingan, termasuk tipe kustom.<\/li>\n\n\n\n<li><strong>page.php<\/strong> &ndash; menampilkan konten statis dari satu halaman.<\/li>\n<\/ul><p>Dalam tutorial ini, kami akan menggunakan semua file template di atas. Ikuti langkah-langkah berikut untuk membuatnya di website staging:<\/p><ol class=\"wp-block-list\">\n<li>Login ke hPanel dan akses <strong>File Manager<\/strong> website Anda.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/id\/tutorial\/wp-content\/uploads\/sites\/37\/2024\/05\/file-manager-di-dashboard-hpanel.png\" alt=\"file manager di dashboard hpanel\"><\/figure><\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>Buka direktori <strong>tema<\/strong> WordPress dari <strong>public_html<\/strong> &rarr; <strong>staging<\/strong> &rarr; <strong>wp-content<\/strong> &rarr; <strong>themes<\/strong>.<\/li>\n\n\n\n<li>Dari sidebar file manager, klik <strong>Folder baru<\/strong>.<\/li>\n\n\n\n<li>Beri nama folder tema Anda. Buat nama yang mudah diingat, pendek, dan hanya mengandung karakter alfanumerik tanpa spasi. Setelah itu, klik <strong>Buat<\/strong>.<\/li>\n\n\n\n<li>Klik dua kali folder untuk membukanya. Pilih <strong>File baru<\/strong> pada sidebar.<\/li>\n\n\n\n<li>Beri nama <strong>index.php<\/strong>, kemudian klik <strong>Buat<\/strong>.<\/li>\n\n\n\n<li>Ulangi langkah yang sama untuk membuat semua file template Anda. Di tutorial ini, kami akan membuat <strong>style.css<\/strong>, <strong>header.php<\/strong>, <strong>footer.php<\/strong>, <strong>functions.php<\/strong>, <strong>sidebar.php<\/strong>, <strong>single.php<\/strong>, dan <strong>page.php<\/strong>.<\/li>\n<\/ol><p>File-file tema ini harus berada di folder yang sama dalam direktori penginstalan WordPress agar CMS ini bisa memuat file-file tema berdasarkan <a href=\"https:\/\/developer.wordpress.org\/themes\/basics\/template-hierarchy\/&#039;\" target=\"_blank\" rel=\"noopener\">hierarki template<\/a>.<\/p><p>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.<\/p><p>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 <strong>Images<\/strong> untuk menyimpan aset visual seperti logo.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/id\/tutorial\/wp-content\/uploads\/sites\/37\/2024\/06\/file-dan-folder-file-manager.png\" alt=\"file dan folder yang dibutuhkan untuk membuat tema wordpress sendiri\"><\/figure><\/div><p>Saat ini, file tema ini masih kosong. Kami akan menambahkan presentasi visual lebih dulu lalu mengatur tata letak template setelahnya.<\/p><h3 class=\"wp-block-heading\" id=\"h-2-siapkan-stylesheet-css-awal\">2. Siapkan Stylesheet CSS Awal<\/h3><p>Setelah membuat semua file template tema, Anda bisa mulai menulis kodenya. Mulailah dengan menambahkan keterangan pada stylesheet <strong>style.css<\/strong> yang tadi sudah dibuat agar WordPress bisa mengenali isinya.<\/p><p>Keterangan ini merupakan informasi yang akan muncul di area admin WordPress, seperti nama tema, penulis, dan deskripsi tema. Informasi tersebut ditulis berdasarkan format <a href=\"https:\/\/codex.wordpress.org\/File_Header#Theme\" target=\"_blank\" rel=\"noopener\">header file WordPress<\/a>. Berikut contohnya:<\/p><pre class=\"wp-block-preformatted\">\/*<br>Theme Name: My Theme<br>Author: Hostinger<br>Author URI: http:\/\/blog.hostinger.io\/co-id-tutorial<br>Description: My first responsive HTML5 theme<br>Version: 1.0<br>License: GNU General Public License v3 or later<br>License URI: http:\/\/www.gnu.org\/licenses\/gpl-3.0.html<br>*\/<\/pre><p>\n\n\n<div><p class=\"important\"><strong>Penting!<\/strong> Apabila ingin memublikasikan tema, Anda wajib menambahkan dua baris terakhir yang menjelaskan informasi lisensi tema. Kalau tidak berencana memublikasikannya, Anda boleh menghapus baris tersebut.<\/p><\/div>\n\n\n\n<\/p><p>Klik ikon <strong>disk<\/strong> di bagian kanan atas editor untuk menyimpan file. Kembali ke menu pengelolaan website hPanel, buka <strong>WordPress <\/strong>&rarr; <strong>Staging<\/strong>. Klik <strong>Kelola Staging<\/strong> di website staging Anda, kemudian pilih <strong>Panel Admin Staging<\/strong>.<\/p><p>Setelah dashboard admin website staging Anda terbuka, buka <strong>Appearance<\/strong> (Tampilan) &rarr; <strong>Themes<\/strong> (Tema) di sidebar. Anda akan melihat file dasar tema yang sudah dibuat.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/id\/tutorial\/wp-content\/uploads\/sites\/37\/2024\/06\/tema-kosong-yang-sudah-dibuat-di-menu-tema-wordpress.png\" alt=\"tema kosong yang sudah dibuat di menu tema wordpress\"><\/figure><\/div><p>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:<\/p><pre class=\"wp-block-preformatted\">* {\n  box-sizing: border-box;\n}\nbody {\n    background-color: #f9f9f9;\n    font-family: Helvetica;\n}<\/pre><p>Kode di atas dimulai dengan tanda bintang (<strong>*<\/strong>) untuk memilih semua elemen HTML dan menerapkan gaya dalam pasangan kurung kurawal pertama. Di sini, kami menambahkan <a href=\"https:\/\/www.w3schools.com\/css\/css_boxmodel.asp\" target=\"_blank\" rel=\"noopener\">model CSS box<\/a> yang menampung konten, padding, dan border.<\/p><p>Sementara itu, gaya kedua mengatur warna latar belakang dan font default untuk semua konten HTML di dalam tag <strong>&lt;body&gt;&lt;\/body&gt;<\/strong>.<\/p><p>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.<\/p><h3 class=\"wp-block-heading\" id=\"h-3-konfigurasikan-tema-wordpress-agar-berfungsi\">3. Konfigurasikan Tema WordPress agar Berfungsi<\/h3><p>Setelah tema WordPress Anda muncul di dashboard admin, sekarang saatnya membuat struktur dan fungsinya. Kami akan melakukannya dengan menambahkan kode ke file <strong>functions.php<\/strong> dan <strong>sidebar.php<\/strong>.<\/p><p><strong>functions.php<\/strong><\/p><p>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 <a href=\"https:\/\/necolas.github.io\/normalize.css\/\" target=\"_blank\" rel=\"noopener\">normalize.css<\/a> ke <strong>functions.php<\/strong>.<\/p><p>Template <strong>normalize.css <\/strong>adalah stylesheet siap pakai yang mengatur kode CSS Anda agar dimuat secara konsisten di berbagai browser. Untuk menambahkannya, masukkan fungsi tersebut ke <strong>functions.php<\/strong>:<\/p><pre class=\"wp-block-preformatted\">&lt;?php\n\/\/ This function enqueues the Normalize.css for use. The first parameter is a name for the stylesheet, the second is the URL. Here we\n\/\/ use an online version of the css file.\nfunction add_normalize_CSS() {\n   wp_enqueue_style( 'normalize-styles', \"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/normalize\/7.0.0\/normalize.min.css\");\n}\n\nadd_action('wp_enqueue_scripts', 'add_normalize_CSS');<\/pre><p>Kode ini akan meminta WordPress untuk memilih file <strong>normalize.css<\/strong> dari URL <a href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/normalize\/7.0.0\/normalize.min.css\" target=\"_blank\" rel=\"noopener\">sumber yang ditambahkan<\/a>.<\/p><p>Selanjutnya, tambahkan fungsi untuk mengaktifkan <strong>area widget <\/strong>atau <strong>sidebar<\/strong>. <a href=\"\/id\/tutorial\/apa-itu-widget\">Widget adalah<\/a> ekstensi yang berfungsi untuk menambahkan fitur tertentu ke berbagai bagian di website WordPress.<\/p><p>Untuk mengaktifkannya, tambahkan kode berikut setelah bagian sebelumnya:<\/p><pre class=\"wp-block-preformatted\">\/\/ Register a new sidebar simply named 'sidebar'\nfunction add_widget_support() {\n               register_sidebar( array(\n                               'name'          =&gt; 'Sidebar',\n                               'id'            =&gt; 'sidebar',\n                               'before_widget' =&gt; '&lt;div&gt;',\n                               'after_widget'  =&gt; '&lt;\/div&gt;',\n                               'before_title'  =&gt; '&lt;h2&gt;',\n                               'after_title'   =&gt; '&lt;\/h2&gt;',\n               ) );\n}\n\/\/ Hook the widget initiation and run our function\nadd_action( 'widgets_init', 'add_widget_support' );<\/pre><p>Sekarang, mari aktifkan tema melalui <strong>Appearance<\/strong> (Tampilan) &rarr; <strong>Themes<\/strong> (Tema) lalu klik <strong>Activate<\/strong> (Aktifkan). Anda akan melihat menu <strong>Widgets<\/strong> di bawah tab <strong>Appearance<\/strong>, tempat Anda bisa menambahkan atau menghapus widget dari website.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/id\/tutorial\/wp-content\/uploads\/sites\/37\/2024\/06\/menu-Widget-dari-tema-yang-baru-dibuat.png\" alt=\"menu Widget dari tema yang baru dibuat\"><\/figure><\/div><p>Kode di atas berisi <a href=\"https:\/\/binus.ac.id\/knowledge\/2020\/12\/menulis-hooks-pada-wordpress-functional-vs-class\" target=\"_blank\" rel=\"noopener\">hook<\/a> 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.<\/p><p>Terakhir, tambahkan kode berikut ini guna mengaktifkan fungsi untuk menyisipkan menu navigasi kustom:<\/p><pre class=\"wp-block-preformatted\">\/\/ Register a new navigation menu\nfunction add_Main_Nav() {\n  register_nav_menu('header-menu',__( 'Header Menu' ));\n}\n\/\/ Hook to the init action hook, run our navigation menu function\nadd_action( 'init', 'add_Main_Nav' );<\/pre><p>Kode tersebut akan menampilkan tombol <strong>Menu<\/strong> di bawah menu <strong>Appearance<\/strong>. Jangan lupa untuk menyimpan perubahan dengan mengklik tombol <strong>disk<\/strong> di editor kode <strong>File Manager<\/strong> setelah menambahkan kode baru.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69f2a3c8b03ef\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/id\/tutorial\/wp-content\/uploads\/sites\/37\/2024\/06\/memilih-ikon-disk-untuk-menyimpan-kode-di-file-manager.png\" alt=\"memilih ikon disk untuk menyimpan kode di file manager\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Ada berbagai fungsi lain yang bisa disisipkan. Sebagai contoh, pemilik website WordPress biasanya menambahkan featured image (gambar unggulan) dan thumbnail postingan.<\/p><p><strong>sidebar.php<\/strong><\/p><p>Selanjutnya, kami akan membuat sidebar tema WordPress untuk menampilkan widget menggunakan <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_sidebar\/\" target=\"_blank\" rel=\"noopener\">fungsi get_sidebar()<\/a>. Masukkan kode di bawah ini ke dalam file <strong>sidebar.php<\/strong> dan simpan perubahannya.<\/p><pre class=\"wp-block-preformatted\">&lt;?php if ( is_active_sidebar( 'sidebar' ) ) : ?&gt;\n  &lt;aside id=\"primary-sidebar\" class=\"primary-sidebar widget-area\" role=\"complementary\"&gt;\n    &lt;?php dynamic_sidebar( 'sidebar' ); ?&gt;\n  &lt;\/aside&gt;\n&lt;?php endif; ?&gt;<\/pre><p>Di dalam kode tersebut, pernyataan <strong>if<\/strong> berfungsi untuk mengecek apakah WordPress sudah menampilkan sidebar. Kalau belum, widget yang telah Anda tambahkan dari menu <strong>Widget<\/strong> di bawah tab <strong>Appearance<\/strong> akan ditampilkan.<\/p><h3 class=\"wp-block-heading\" id=\"h-4-atur-tata-letak-tema-kustom\">4. Atur Tata Letak Tema Kustom<\/h3><p>Setelah menambahkan sidebar dan fungsi normalize CSS, mari buat tata letak tema WordPress Anda. Di akhir langkah ini, struktur website Anda akan mulai terbentuk.<\/p><p>Selain <strong>index.php<\/strong>, kami akan memodifikasi file <strong>header.php<\/strong>, <strong>footer.php<\/strong>, <strong>single.php<\/strong>, <strong>page.php<\/strong>, dan <strong>style.php<\/strong> untuk mengatur tata letak khusus pada setiap halaman web.<\/p><p><strong>header.php<\/strong><\/p><p>File template header menentukan area atas halaman web Anda. Mulai kodenya dengan bagian berikut ini:<\/p><pre class=\"wp-block-preformatted\">&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;<\/pre><p>Dengan kode tersebut, header tema kustom WordPress Anda bisa menyesuaikan ukurannya sendiri berdasarkan ukuran layar tertentu menggunakan <strong>desain responsif<\/strong>. Tenang, kami akan menjelaskan konsep ini nanti.<\/p><p>Selanjutnya, tambahkan kode berikut ini:<\/p><pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;\n&lt;html &lt;?php language_attributes(); ?&gt;<\/pre><p>Deklarasi <strong>DOCTYPE<\/strong> memberitahukan jenis file template header Anda pada web browser. Sementara itu, <strong>language_attributes()<\/strong> berfungsi untuk menentukan HTML sebagai bahasa coding utama dokumen.<\/p><p>Kemudian, tambahkan tag HTML <strong>&lt;head&gt;&lt;\/head&gt;<\/strong> 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.<\/p><pre class=\"wp-block-preformatted\">&lt;head&gt;\n   &lt;title&gt;&lt;?php bloginfo('name'); ?&gt; &amp;raquo; &lt;?php is_front_page() ? bloginfo('description') : wp_title(''); ?&gt;&lt;\/title&gt;\n   &lt;meta charset=\"&lt;?php bloginfo( 'charset' ); ?&gt;\"&gt;\n   &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n   &lt;link rel=\"stylesheet\" href=\"&lt;?php bloginfo('stylesheet_url'); ?&gt;\"&gt;\n   &lt;?php wp_head(); ?&gt;\n &lt;\/head&gt;<\/pre><p>Selanjutnya, buat bagian isi dokumen HTML dan gunakan fungsi <strong>body_class<\/strong> untuk secara otomatis menetapkan class ke tag <strong>&lt;body&gt;<\/strong> untuk mengatur gaya.<\/p><pre class=\"wp-block-preformatted\"> &lt;body &lt;?php body_class(); ?&gt;&gt;<\/pre><p>Tambahkan header, yang diklasifikasikan sebagai class <strong>my-logo<\/strong>. Kemudian, kami akan menggunakan tag <strong>&lt;h1&gt;&lt;\/h1&gt;<\/strong> untuk menampilkan logo di folder <strong>Images<\/strong> sebagai header utama dan anchor untuk URL website.<\/p><pre class=\"wp-block-preformatted\">&lt;header class=\"my-logo\"&gt;\n    &lt;h1&gt;&lt;a href=\"&lt;?php echo esc_url( home_url( '\/' ) ); ?&gt;\"&gt;&lt;img src=\"&lt;?php echo get_template_directory_uri(); ?&gt;\/Images\/logo.png\" alt=\"Site Logo\" width=\"50px\" height=\"50px\"&gt;&lt;\/a&gt;&lt;\/h1&gt;\n&lt;\/header&gt;<\/pre><p>Terakhir, tambahkan kode berikut ini untuk menyisipkan menu navigasi di header tema:<\/p><pre class=\"wp-block-preformatted\"> &lt;?php wp_nav_menu( array( 'header-menu' =&gt; 'header-menu' ) ); ?&gt;<\/pre><p><strong>index.php<\/strong><\/p><p>File <strong>index.php<\/strong> menentukan struktur homepage dan berfungsi sebagai tata letak default kalau template halaman lain tidak tersedia.<\/p><p>Apabila Anda menggunakan tata letak yang berbeda untuk header, sidebar, dan footer, tambahkan <a href=\"https:\/\/codex.wordpress.org\/Template_Tags\" target=\"_blank\" rel=\"noopener\">tag template<\/a> untuk memanggil kodenya ke dalam <strong>index.php<\/strong>. Sebagai contoh, gunakan <strong>get_header<\/strong> untuk menautkan header, dan seterusnya.<\/p><p>Untuk membagi halaman web Anda, gunakan elemen semantik HTML5 seperti <strong>&lt;head&gt;<\/strong> dan <strong>&lt;section&gt;<\/strong>. Apabila Anda ingin menerapkan stylesheet CSS pada elemen-elemen tersebut, tambahkan class seperti berikut ini:<\/p><pre class=\"wp-block-preformatted\">&lt;head class=\"class-name\"&gt;<\/pre><p>\n\n\n<div><p class=\"important\"><strong>Penting!<\/strong> Tag header bisa muncul beberapa kali dan tidak selalu merujuk ke header halaman. Elemen semantik harus memiliki header kalau ada teks di dalam h1, h2, dst.<\/p><\/div>\n\n\n\n<\/p><p>Berikut adalah contoh kode dalam file <strong>index.php<\/strong> yang berisi tag template dan elemen semantik:<\/p><pre class=\"wp-block-preformatted\">&lt;?php get_header(); ?&gt;\n&lt;main class=\"wrap\"&gt;\n  &lt;section class=\"content-area content-thin\"&gt;\n&lt;?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?&gt;\n      &lt;article class=\"article-loop\"&gt;\n        &lt;header&gt;\n          &lt;h2&gt;&lt;a href=\"&lt;?php the_permalink(); ?&gt;\" title=\"&lt;?php the_title_attribute(); ?&gt;\"&gt;&lt;?php the_title(); ?&gt;&lt;\/a&gt;&lt;\/h2&gt;\n          By: &lt;?php the_author(); ?&gt;\n        &lt;\/header&gt;\n        &lt;?php the_excerpt(); ?&gt;\n      &lt;\/article&gt;\n&lt;?php endwhile; else : ?&gt;\n      &lt;article&gt;\n        &lt;p&gt;Sorry, no posts were found!&lt;\/p&gt;\n      &lt;\/article&gt;\n&lt;?php endif; ?&gt;\n  &lt;\/section&gt;&lt;?php get_sidebar(); ?&gt;\n&lt;\/main&gt;\n&lt;?php get_footer(); ?&gt;<\/pre><p>Dalam kode di atas, kami juga menambahkan <a href=\"https:\/\/codex.wordpress.org\/The_Loop\" target=\"_blank\" rel=\"noopener\">WordPress loop<\/a>, yaitu kode PHP yang mengambil postingan dari database dan meneruskannya ke fungsi-fungsi lain. Kode tersebut dimulai dari <strong>&lt;?php if ( have_posts() )<\/strong>&nbsp;<strong>: while ( have_posts() ) : the_post(); ?&gt;<\/strong> dan berakhir di <strong><strong>&lt;?php endif; ?&gt;<\/strong><\/strong>.<\/p><p>Loop di atas berisi fungsi-fungsi berikut ini untuk mengambil detail postingan tertentu:<\/p><ul class=\"wp-block-list\">\n<li><strong>&lt;?php the_permalink(); ?&gt;<\/strong> &ndash; menghasilkan URL postingan yang sebenarnya.<\/li>\n\n\n\n<li><strong>&lt;?php the_title_attribute(); ?&gt;<\/strong> &ndash; menampilkan judul postingan dalam format yang kompatibel dengan atribut elemen.<\/li>\n\n\n\n<li><strong>&lt;?php the_title(); ?&gt;<\/strong> &ndash; menampilkan judul postingan<\/li>\n\n\n\n<li><strong>&lt;?php the_author(); ?&gt;<\/strong> &ndash; menghasilkan nama author (penulis) postingan.<\/li>\n\n\n\n<li><strong>&lt;?php the_excerpt(); ?&gt;<\/strong> &ndash; mengekstrak kutipan postingan, yang akan dibuat secara otomatis kalau tidak ditulis.<\/li>\n<\/ul><p><strong>footer.php<\/strong><\/p><p>File <strong>footer.php<\/strong> menentukan konten di bagian bawah tema, seperti informasi hak cipta atau sitemap. Anda juga bisa menambahkan tag penutup <strong>&lt;body&gt;<\/strong> dan <strong>&lt;html&gt;<\/strong> di sini kalau belum menentukannya di <strong>header.php<\/strong>.<\/p><p>Tentukan konten footer dengan elemen semantik HTML <strong>&lt;footer&gt;&lt;\/footer&gt;<\/strong>. Dalam contoh ini, kami akan menambahkan informasi hak cipta di bagian bawah.<\/p><p>Kami juga akan menambahkan hook <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/wp_footer\/\" target=\"_blank\" rel=\"noopener\">tindakan wp_footer<\/a> untuk memuat kode <strong>fungsi wp_footer<\/strong> di file inti atau plugin WordPress. Berikut tampilan kode lengkapnya:<\/p><pre class=\"wp-block-preformatted\">&lt;footer&gt;\n      &lt;p&gt;Copyright &amp;copy; 2024&lt;\/p&gt;\n    &lt;\/footer&gt;\n    &lt;?php wp_footer(); ?&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/pre><p><strong>single.php<\/strong><\/p><p>File <strong>single.php<\/strong> menentukan tata letak semua jenis postingan di WordPress. Selain postingan blog, file ini juga mendefinisikan <a href=\"\/id\/tutorial\/cara-membuat-custom-post-types\">jenis postingan kustom<\/a> seperti halaman produk di toko online.<\/p><p>Mulai kodenya dengan memanggil file header menggunakan fungsi <strong>get_header()<\/strong> seperti berikut ini:<\/p><pre class=\"wp-block-preformatted\">&lt;?php get_header(); ?&gt;<\/pre><p>Kemudian, tambahkan tag <strong>&lt;section&gt;&lt;\/section&gt;<\/strong> untuk membuat container utama dan menetapkan class untuk pengaturan gaya. Gunakan loop WordPress untuk mengambil konten postingan dan menampilkannya menggunakan fungsi <strong>the_content()<\/strong>.<\/p><p>Kalau konten postingan tidak tersedia, pesan error akan ditampilkan. Berikut adalah contoh kode lengkapnya:<\/p><pre class=\"wp-block-preformatted\">&lt;main class=\"wrap\"&gt;\n  &lt;section class=\"content-area content-full-width\"&gt;\n&lt;?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?&gt;\n      &lt;article class=\"article-full\"&gt;\n        &lt;header&gt;\n          &lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;\/h2&gt;\n          By: &lt;?php the_author(); ?&gt;\n        &lt;\/header&gt;\n       &lt;?php the_content(); ?&gt;\n      &lt;\/article&gt;\n&lt;?php endwhile; else : ?&gt;\n      &lt;article&gt;\n        &lt;p&gt;Sorry, no post was found!&lt;\/p&gt;\n      &lt;\/article&gt;\n&lt;?php endif; ?&gt;\n  &lt;\/section&gt;\n&lt;\/main&gt;\n&lt;?php get_footer(); ?&gt;<\/pre><p>Tidak seperti file template lainnya, kami tidak menambahkan fungsi <strong>get_sidebar()<\/strong> untuk menghilangkan sidebar dan widget dari semua postingan.<\/p><p><strong>page.php<\/strong><\/p><p>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 <strong>index.php<\/strong>, bukan <strong>single.php<\/strong>.<\/p><p>Kami akan menggunakan kode yang mirip dengan <strong>single.php<\/strong>, tapi sudah disesuaikan lagi untuk membedakan halaman website dengan postingan. Selain menambahkan sidebar, kami akan membuat area konten menjadi lebih kecil. Berikut tampilan kodenya:<\/p><pre class=\"wp-block-preformatted\">&lt;?php get_header(); ?&gt;\n&lt;main class=\"wrap\"&gt;\n  &lt;section class=\"content-area content-thin\"&gt;\n&lt;?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?&gt;\n      &lt;article class=\"article-full\"&gt;\n        &lt;header&gt;\n          &lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;\/h2&gt;\n          By: &lt;?php the_author(); ?&gt;\n        &lt;\/header&gt;\n        &lt;?php the_content(); ?&gt;\n      &lt;\/article&gt;\n&lt;?php endwhile; else : ?&gt;\n      &lt;article&gt;\n        &lt;p&gt;Sorry, no page content was found!&lt;\/p&gt;\n      &lt;\/article&gt;\n&lt;?php endif; ?&gt;\n  &lt;\/section&gt;&lt;?php get_sidebar(); ?&gt;\n&lt;\/main&gt;\n&lt;?php get_footer(); ?&gt;<\/pre><p>Meskipun kami menggunakan loop yang sama, kode ini akan berjalan secara berulang pada halaman, bukan postingan, karena kami meletakkannya dalam file <strong>page.php<\/strong>.<\/p><p>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.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/id\/tutorial\/wp-content\/uploads\/sites\/37\/2024\/06\/tampilan-tema-baru-tanpa-gaya-1024x425.png\" alt=\"tampilan tema baru yang sudah dibuat tapi belum ditambahkan gaya\"><\/figure><\/div><p>Untuk menambahkan atau memodifikasi kodenya, Anda bisa menggunakan <strong>File Theme Editor<\/strong> tanpa perlu membuka file template PHP melalui File Manager. Akses editor dari menu <strong>Appearance<\/strong> di dashboard admin WordPress.<\/p><h3 class=\"wp-block-heading\" id=\"h-5-sempurnakan-desainnya-di-css-stylesheet\">5. Sempurnakan Desainnya di CSS Stylesheet<\/h3><p>Setelah menambahkan elemen HTML dan menetapkan class, mari kembali ke stylesheet untuk menyesuaikan desain tema. Mulailah dengan menambahkan kode berikut ini ke dalam <strong>style.css<\/strong> untuk memodifikasi ukuran, padding, dan warna logo:<\/p><pre class=\"wp-block-preformatted\">.my-logo,\nfooter {\n  width: 100%;\n  padding-left: 1%;\n  margin-bottom: 8px;\n  background-color: #78baff;\n  border: 1px solid #78baff;\n}<\/pre><p>Kemudian, tambahkan potongan kode berikut ini ke bagian gaya dalam tata letak tema Anda. Kami akan menyesuaikan <strong>anchor h1<\/strong>, <strong>artikel<\/strong>, dan <strong>footer<\/strong>:<\/p><pre class=\"wp-block-preformatted\">body &gt; header &gt; h1 &gt; a {\n  color: #ffffff;\n  font-weight: 400;\n}\n\narticle &gt; header {\n}\n\nfooter {\n  margin-top: 4px;\n}\n\na {\n  text-decoration: none;\n}\n\n\/* 'Margin: 0 auto' centers block content on the page *\/\n.wrap {\n  width: 99%;\n  margin: 0 auto;\n}<\/pre><p>Terakhir, tetapkan gaya ke elemen lain seperti area konten dan sidebar dengan menambahkan potongan kode berikut:<\/p><pre class=\"wp-block-preformatted\">.content-area {\n  display: inline-block;\n}\n\n.content-thin {\n    width: 70%;\n}\n\n.content-full-width {\n    width: 100%;\n}\n\n.content-area,\n.primary-sidebar {\n  display: inline-block;\n}\n\n.primary-sidebar {\n  width: 25%;\n  padding: 1%;\n  vertical-align: top;\n  background-color: #ececec;\n}\n\n.article-loop {\n    width: 45%;\n    text-align: left;\n    margin: 5px;\n    padding: 10px;\n}\n\n.article-full {\n  width: 99%;\n  padding: 1%;\n}\n\n.article-loop,\n.article-full {\n  display: inline-block;\n  vertical-align: top;\n  background-color: #FFF;\n  border-radius: 4px;\n  margin-bottom: 4px;\n}<\/pre><p>Setelah tema baru diterapkan, website staging Anda akan terlihat seperti ini:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/id\/tutorial\/wp-content\/uploads\/sites\/37\/2024\/06\/tampilan-tema-wordpress-yang-sudah-diberi-gaya.png\" alt=\"tampilan tema wordpress yang sudah diberi gaya\"><\/figure><\/div><p>Untuk memodifikasi stylesheet, Anda bisa <a href=\"\/id\/tutorial\/custom-css-wordpress\">menambahkan custom CSS WordPress<\/a> melalui editor tema. Akses fitur ini dengan membuka <strong>Appearance<\/strong> (Tampilan) &rarr; <strong>Themes<\/strong> (Tema) &rarr; <strong>Customize<\/strong> (Sesuaikan) &rarr; <strong>Additional CSS<\/strong> (CSS Tambahan) di sidebar.<\/p><p>\n\n\n<div><p class=\"important\"><strong>Penting!<\/strong> Karena akan membuat tema klasik, Anda tidak bisa menggunakan <strong>WordPress Full Site Editing<\/strong> secara default. Gunakan plugin theme builder untuk menyesuaikannya.<\/p><\/div>\n\n\n\n<\/p><h3 class=\"wp-block-heading\" id=\"h-6-uji-dan-terapkan-tema\">6. Uji dan Terapkan Tema<\/h3><p>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.<\/p><p>Buka dashboard admin staging area, lalu aktifkan tema yang baru melalui menu <strong>Themes<\/strong>. Kemudian, akses website uji coba dengan mengklik tombol <strong>Visit Site<\/strong> (Kunjungi Situs) di bagian atas menu admin.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/id\/tutorial\/wp-content\/uploads\/sites\/37\/2024\/06\/tombol-kunjungi-website-di-bagian-atas-panel-admin-website-staging-wordpress.png\" alt=\"tombol kunjungi website di bagian atas panel admin website staging wordpress\"><\/figure><\/div><p>Setelah memastikan tampilan visual dan tata letaknya berfungsi tanpa masalah, terapkan tema pada website asli Anda. Untuk melakukannya, kembali ke <strong>File Manager<\/strong> staging area, klik folder tema Anda, kemudian pilih tombol <strong>download <\/strong>di menu bagian atas. Download folder sebagai file <strong>ZIP.<\/strong><\/p><p>Ekstrak folder ke komputer, kemudian upload ke direktori <strong>\/wp-content\/themes<\/strong> di website asli Anda melalui <strong>File Manager<\/strong>. Aktifkan tema melalui dashboard admin WordPress.<\/p><h2 class=\"wp-block-heading\" id=\"h-konsep-penting-dalam-pengembangan-tema-wordpress\">Konsep Penting dalam Pengembangan Tema WordPress<\/h2><p>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.<\/p><h3 class=\"wp-block-heading\" id=\"h-kueri-media-dan-desain-responsif\">Kueri Media dan Desain Responsif<\/h3><p>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.<\/p><p>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.<\/p><p>Untuk menerapkan desain tema responsif, tambahkan <strong>kueri media CSS<\/strong> untuk menentukan penyajian konten ketika area tampilannya berubah. Kueri ini menggunakan persentase untuk menyesuaikan tata letak dan ukuran tampilan terhadap layar.<\/p><p>Contohnya, setiap bagian dalam desain tema dua kolom akan selalu menempati 50% area tampilan, apa pun resolusi dan orientasinya. Ada <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@media\" target=\"_blank\" rel=\"noopener\">beberapa properti CSS<\/a> untuk kueri media, dan yang paling umum adalah:<\/p><ul class=\"wp-block-list\">\n<li><strong>max-width<\/strong> &ndash; menentukan lebar maksimum pada area browser yang bisa dilihat.<\/li>\n\n\n\n<li><strong>min-width<\/strong> &ndash; menentukan lebar minimum pada area yang terlihat.<\/li>\n\n\n\n<li><strong>orientation<\/strong> &ndash; memeriksa apakah layar menggunakan mode portrait atau landscape.<\/li>\n<\/ul><p>Sebaiknya Anda menambahkan kueri media di bagian bawah dan menetapkan class untuk penataan kode yang lebih rapi dan kustomisasi tema yang lebih sederhana.<\/p><p>Misalnya, tambahkan kueri media berikut ini untuk secara otomatis menyesuaikan ukuran konten utama dan sidebar tema yang sudah dibuat:<\/p><pre class=\"wp-block-preformatted\">@media screen and (max-width: 400px) {\n  .content-area,\n  .primary-sidebar {\n    width: 80%;\n  }\n}<\/pre><p>Aturan ini berlaku untuk layar dan jendela browser dengan lebar maksimum <strong>400<\/strong> piksel. Elemen yang dipilih, yaitu <strong>content-area<\/strong> dan <strong>primary-sidebar<\/strong>, akan menampilkan <strong>80% <\/strong>ukuran aslinya kalau area tampilannya berada dalam dimensi yang ditentukan.<\/p><p>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%:<\/p><pre class=\"wp-block-preformatted\">@media screen and (max-width: 800px) {\n  .content-area,\n  .primary-sidebar {\n    width: 100%;\n  }\n}<\/pre><h3 class=\"wp-block-heading\" id=\"h-tag-template\">Tag Template<\/h3><p>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.<\/p><p>Untuk menerapkan template pada halaman tertentu, tambahkan tag ke file yang sesuai. Misalnya, untuk menampilkan <strong>footer<\/strong> hanya di homepage, tambahkan <strong>get_footer<\/strong> di bagian bawah <strong>home.php<\/strong>, bukan <strong>page.php<\/strong>.<\/p><p>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.<\/p><p>Untuk menautkan file template, berikut adalah beberapa tag yang paling sering digunakan:<\/p><ul class=\"wp-block-list\">\n<li><strong>get_header()<\/strong> &ndash; mencakup template <strong>header.php<\/strong>.<\/li>\n\n\n\n<li><strong>get_sidebar()<\/strong> &ndash; memanggil template <strong>sidebar.php<\/strong>.<\/li>\n\n\n\n<li><strong>get_footer ()<\/strong> &ndash; menautkan template <strong>footer.php<\/strong>.<\/li>\n\n\n\n<li><strong>get_search_form()<\/strong> &ndash; termasuk template <strong>searchform.php<\/strong>.<\/li>\n<\/ul><p>Sementara itu, tag template berikut ini menampilkan informasi dari database WordPress:<\/p><ul class=\"wp-block-list\">\n<li><strong>bloginfo()<\/strong> &ndash; menampilkan informasi yang diminta dalam parameter, seperti <strong>bloginfo(&ldquo;name&rdquo;)<\/strong> yang menunjukkan nama website Anda.<\/li>\n\n\n\n<li><strong>single_post_title ()<\/strong> &ndash; menampilkan judul postingan yang sedang dilihat saat digunakan dalam file <strong>single.php<\/strong>.<\/li>\n\n\n\n<li><strong>the_author()<\/strong> &ndash; menunjukkan penulis postingan yang sedang dilihat.<\/li>\n\n\n\n<li><strong>the_content()<\/strong> &ndash; menghasilkan teks utama dari postingan atau halaman.<\/li>\n\n\n\n<li><strong>the_excerpt()<\/strong> &ndash; menampilkan kutipan dari postingan atau halaman.<\/li>\n<\/ul><h3 class=\"wp-block-heading\" id=\"h-loop-wordpress\">Loop WordPress<\/h3><p>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.<\/p><p>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.<\/p><p>Loop disisipkan dalam file <strong>index.php<\/strong> dan template lain yang menampilkan konten postingan. Kode ini selalu dimulai dengan pernyataan <strong>if<\/strong>, seperti berikut ini:<\/p><pre class=\"wp-block-preformatted\">&lt;?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?&gt;<\/pre><p>Kemudian, tentukan tag template, HTML, atau fungsi PHP untuk memodifikasi data yang diambil kalau ada. Sebagai contoh, gunakan <strong>the_content()<\/strong> untuk menampilkan konten lengkap postingan atau <strong>the_excerpt()<\/strong> untuk mencantumkan versi yang lebih pendek.<\/p><p>Pada <strong>page.php<\/strong> sebelumnya, kami menampilkan informasi halaman sebagai konten utama dengan menggunakan kode berikut:<\/p><pre class=\"wp-block-preformatted\">&lt;article class=\"article-full\"&gt;\n        &lt;header&gt;\n          &lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;\/h2&gt;\n          By: &lt;?php the_author(); ?&gt;\n        &lt;\/header&gt;\n        &lt;?php the_content(); ?&gt;\n      &lt;\/article&gt;<\/pre><p>Kemudian, loop WordPress diakhiri dengan pernyataan <strong>else<\/strong>, yang menentukan kondisi yang harus dipenuhi kalau data yang diminta tidak ada. Sebagai contoh, error berikut akan muncul kalau data tidak ditemukan:<\/p><pre class=\"wp-block-preformatted\">&lt;?php endwhile; else : ?&gt;\n   &lt;p&gt;&lt;?php _e( 'Sorry, no pages matched your criteria.' ); ?&gt;&lt;\/p&gt;\n&lt;?php endif; ?&gt;<\/pre><h3 class=\"wp-block-heading\" id=\"h-hook-tindakan\">Hook Tindakan<\/h3><p>Hook adalah fungsi PHP yang berfungsi untuk memanipulasi fitur bawaan WordPress tanpa mengedit file intinya. Ada dua jenis hook WordPress tergantung pada tujuannya: <strong>action<\/strong> (tindakan) dan <strong>filter<\/strong>.<\/p><p>Hook filter digunakan untuk memodifikasi kode yang ada dalam file <strong>function.php<\/strong> dan menampilkan data yang telah diubah kepada pengguna. Sementara itu, action digunakan untuk membuat fungsi baru yang berjalan pada waktu tertentu.<\/p><p>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.<\/p><p>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.<\/p><p>Pada tema yang baru dibuat, kami menggunakan hook tindakan pada file <strong>header.php<\/strong> untuk mengambil header HTML WordPress default dan menyisipkannya pada kode tema:<\/p><pre class=\"wp-block-preformatted\">&lt;?php wp_head(); ?&gt;\n &lt;\/head&gt;<\/pre><p>Sementara itu, hook tindakan <strong>wp_footer()<\/strong> berikut ini di template footer menyertakan kode default WordPress dan menjalankan fungsi yang ditentukan dalam plugin:<\/p><pre class=\"wp-block-preformatted\">  &lt;?php wp_footer(); ?&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/pre><p>Apabila tema Anda tidak menyertakan hook, kode sumber penting tidak akan dimuat, dan plugin tidak akan berfungsi dengan benar. Sebagai contoh, tanpa adanya <strong>wp_footer()<\/strong>, menu admin WordPress tidak bisa dinonaktifkan karena terkait pada hook tindakan.<\/p><h2 class=\"wp-block-heading\" id=\"h-tips-terbaik-untuk-membuat-tema-wordpress-sendiri\">Tips Terbaik untuk Membuat Tema WordPress Sendiri<\/h2><p>Agar tema WordPress yang Anda buat sendiri bisa berfungsi dengan baik dan aman, ingat tips terbaik berikut ini saat mengembangkannya:<\/p><h3 class=\"wp-block-heading\" id=\"h-validasikan-kode-dan-file-tema\">Validasikan Kode dan File Tema<\/h3><p>Cek tema baru Anda untuk memastikan kesesuaiannya terhadap <a href=\"https:\/\/make.wordpress.org\/themes\/handbook\/review\/\" target=\"_blank\" rel=\"noopener\">standar peninjauan WordPress<\/a> terbaru. Selain untuk memeriksa fungsinya, proses validasi kode membantu menemukan masalah yang bisa memengaruhi keamanan, kompatibilitas, lisensi, dan kualitas tema.<\/p><p>Cara termudah untuk melakukannya adalah dengan menggunakan plugin seperti <a href=\"https:\/\/wordpress.org\/plugins\/theme-check\/\" target=\"_blank\" rel=\"noopener\">Theme Check<\/a>. Sebaiknya jalankan pengujian secara berkala setiap kali Anda melakukan perubahan agar bisa langsung menangani masalah yang muncul.<\/p><h3 class=\"wp-block-heading\" id=\"h-uji-tema-di-berbagai-perangkat-dan-browser\">Uji Tema di Berbagai Perangkat dan Browser<\/h3><p>Untuk memastikan aturan kueri media tema WordPress Anda berfungsi dengan benar pada berbagai area tampilan, akses website di perangkat yang berbeda.<\/p><p>Anda bisa melihat contoh ukuran layar yang berbeda menggunakan toolbar yang tersedia di browser. Kalau menggunakan Google Chrome, akses toolbar dengan menekan <strong>Ctrl + Shift + C<\/strong> lalu <strong>Ctrl + Shift + M<\/strong>. Sesuaikan resolusi dan rasio aspek dari menu bagian atas.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/id\/tutorial\/wp-content\/uploads\/sites\/37\/2024\/06\/fitur-toolbar-perangkat-di-google-chrome-1024x628.png\" alt=\"fitur toolbar perangkat di google chrome\"><\/figure><\/div><p>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.<\/p><h3 class=\"wp-block-heading\" id=\"h-manfaatkan-template-tema\">Manfaatkan Template Tema<\/h3><p>Gunakan tema awalan untuk mempermudah proses pengembangan. Jadi, daripada menulis kode dari nol, Anda cukup menambahkan gaya dan fitur sesuai kebutuhan.<\/p><p>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.<\/p><p>Meskipun ada banyak tema awalan yang tersedia, kami merekomendasikan tema gratis dari developer terkemuka seperti <a href=\"https:\/\/wpastra.com\/\" target=\"_blank\" rel=\"noopener\">Astra<\/a> dan <a href=\"http:\/\/underscores\/\">Underscores<\/a>.<\/p><h3 class=\"wp-block-heading\" id=\"h-minify-dan-optimalkan-kode\">Minify dan Optimalkan Kode<\/h3><p>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.<\/p><p>Untuk mempercepat loading halaman, gunakan tool seperti <a href=\"https:\/\/www.minifier.org\/\" target=\"_blank\" rel=\"noopener\">Minifier<\/a> untuk mengurangi ukuran file PHP, CSS, dan JavaScript. Proses ini menghapus karakter tambahan yang tidak memengaruhi fungsi kode, seperti spasi.<\/p><p>Sebelum melakukan proses <a href=\"\/id\/tutorial\/meningkatkan-performa-website-minify-css-html-dan-javascript\">minify kode<\/a>, backup file aslinya dulu karena hasil minify mungkin sulit dibaca, yang nantinya bisa mempersulit proses debug atau maintenance.<\/p><p>Selain itu, <a href=\"\/id\/tutorial\/cara-membuat-child-theme-wordpress\">buatlah child theme<\/a>, 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.<\/p><h2 class=\"wp-block-heading\" id=\"h-kesimpulan\">Kesimpulan<\/h2><p>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.<\/p><p>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:<\/p><ol class=\"wp-block-list\">\n<li>Buat file <strong>index.php<\/strong>, <strong>style.css<\/strong>, dan file template lainnya di folder tema staging area di dalam direktori <strong>themes<\/strong> WordPress.<\/li>\n\n\n\n<li>Siapkan stylesheet CSS awal dengan menambahkan informasi developer tema dan warna latar belakang.<\/li>\n\n\n\n<li>Konfigurasikan tema agar berfungsi dengan menambahkan sidebar di <strong>functions.php<\/strong> dan <strong>sidebar.php<\/strong>.<\/li>\n\n\n\n<li>Buat tata letak tema WordPress dengan membagi <strong>index.php<\/strong> dan file template lainnya menggunakan tag HTML.<\/li>\n\n\n\n<li>Sempurnakan desain tema dengan menambahkan CSS ke setiap class melalui stylesheet.<\/li>\n\n\n\n<li>Uji tema buatan Anda di staging area dan upload tema ke website asli setelah selesai.<\/li>\n<\/ol><p>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.<\/p><h2 class=\"wp-block-heading\" id=\"h-tanya-jawab-faq-cara-membuat-tema-wordpress-sendiri\">Tanya Jawab (FAQ) Cara Membuat Tema WordPress Sendiri<\/h2><p>Untuk membantu Anda memahami proses ini lebih lanjut, kami akan menjawab beberapa pertanyaan umum tentang cara membuat tema WordPress.<\/p><div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-69442d69b6291\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Apakah Sulit Membuat Tema WordPress Sendiri?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Prosesnya tergantung pada kerumitan tema yang ingin Anda buat. Tema WordPress dasar membutuhkan setidaknya dua file yang ditulis dalam HTML, CSS, dan PHP. Tema yang menyertakan banyak fitur akan lebih rumit karena memerlukan lebih banyak bahasa pemrograman dan kode. Jadi, daripada menulis kodenya dari nol, Anda bisa menggunakan struktur dasar dari tema WordPress yang sudah ada.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-69442d69b6296\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Bisakah Menghasilkan Uang dengan Membuat Tema WordPress?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Ya, bisa. Ada berbagai marketplace yang bisa dicoba untuk menjual tema WordPress Anda sendiri, seperti <a href=\"https:\/\/themeforest.net\/\" target=\"_blank\" rel=\"noopener\">ThemeForest<\/a> dan <a href=\"https:\/\/codecanyon.net\/\" target=\"_blank\" rel=\"noopener\">CodeCanyon<\/a>. Rata-rata, developer tema premium menjual produknya dengan harga <a href=\"https:\/\/www.codeinwp.com\/blog\/wordpress-theme-cost-analysis\/\" target=\"_blank\" rel=\"noopener\">$59 per lisensi<\/a>.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-69442d69b6297\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Berapa Lama Membuat Tema WordPress?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Anda perlu sekitar dua minggu atau lebih, tergantung pada kompleksitas dan fitur-fiturnya. Apabila masih pemula, Anda mungkin membutuhkan waktu yang lebih lama karena perlu mempelajari hal-hal terkait web development juga dalam prosesnya.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>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 [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/id\/tutorial\/cara-membuat-tema-wordpress\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":190,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"","rank_math_description":"Ingin menyesuaikan fitur atau gaya tertentu pada website Anda? Coba buat tema kustom! Baca cara membuat tema WordPress sendiri di sini yuk!","rank_math_focus_keyword":"cara membuat tema wordpress","footnotes":""},"categories":[4859],"tags":[7721,7498,7723,7724,7722,4860],"class_list":["post-5575","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-membuat-tema","tag-tema-wordpress","tag-tema-wordpress-responsive","tag-template-tags","tag-template-wordpress","tag-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-create-a-wordpress-theme","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/wordpress-como-criar-um-tema-responsivo-usando-html5","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/creer-un-theme-wordpress","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/crear-un-tema-de-wordpress-con-codigo","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/cara-membuat-tema-wordpress","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/create-wordpress-theme-html5","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/create-wordpress-theme-html5","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/create-wordpress-theme-html5","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/crear-un-tema-de-wordpress-con-codigo","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/crear-un-tema-de-wordpress-con-codigo","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/crear-un-tema-de-wordpress-con-codigo","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wordpress-como-criar-um-tema-responsivo-usando-html5","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/create-wordpress-theme-html5","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-create-a-wordpress-theme","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-create-a-wordpress-theme","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-create-a-wordpress-theme","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/5575","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/users\/190"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/comments?post=5575"}],"version-history":[{"count":34,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/5575\/revisions"}],"predecessor-version":[{"id":47258,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/5575\/revisions\/47258"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/media?parent=5575"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/categories?post=5575"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/tags?post=5575"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}