author Ahmad Muhardian

Belajar Membuat Template Wordpress Sendiri dari Nol


Cara Membuat Tema Wordpress Sendiri dari Nol

Di luar sana, ada banyak sekali bertebaran tema atau template Wordpress gratis. Namun, kita perlu hati-hati dalam menggunakan template gratis tersebut.

Beberapa hari yang lalu, saya sudah mengecek website wordpress teman saya. Katanya ia memesan web sekaligus temanya dari seorang developer.

Begitu saya cek…

Eh, ternyata di sana ada script backdoor yang memungkinkan si developer masuk kapan saja ke web dia.

Script ini ditanam pada kode tema atau template.

Si developer bisa saja melakukan deface. Lalu, meminta bayaran tambahan untuk mengembalikannya. Ini cara yang licik dan terkutuk.

Itu sebabnya kita harus membuat tema sendiri…

…atau menyuruh orang yang terpercaya membuatkan template.

Lebih baik sih buat sendiri.

Buat kamu yang belum paham cara membuat blog atau website dengan Wordpress, saya sarankan membaca Cara Membuat Blog di Wordpress terlebih dahulu.

Setelah itu, lanjutkan membaca artikel ini.

Persiapan Awal untuk Membuat Template Wordpress

Adapun yang harus dipersiapkan untuk membuat template wordpress:

  1. Sudah Memahami HTML, CSS, Javascript, dan PHP
  2. Teks Editor
  3. Wordpress yang sudah terinstal di localhost atau server

Pemahaman terhadap kode HTML, CSS, Javascript, dan PHP akan sangat membantu sekali dalam pembuatan template.

Jika kamu belum memahami, silahkan pelajari dulu dasar-dasarnya. Silahkan cek tutorialnya di sini:

Konstruksi Awal Template

Semua template wordpress akan disimpan pada direktori wp-content/themes/. Di sanalah kita akan membuat tema baru.

Silahkan buat direktori baru di sana dengan nama temanya. Contoh: nama tema yang akan saya buat adalah petanikode.

Direktori tema wordpress

Kita akan meletakan semua file tema di dalam direktori tersebut. Pada tahapan awal pembuatan tema ini, kita buat dulu dua file penting, yaitu:

  1. index.php
  2. dan style.css

File index.php adalah file utama yang akan diaksess saat website dibuka (homepage). Sementara itu, file style.css berisi kode CSS untuk menghias dan mengatur tampilan tema.

Isi file index.php

<!DOCTYPE html>
<html>
    <head>
         <title>Tema Wp pertama</title>
    </head>

<body>
    <h1>Hello world, ini adalah tema Wordpress perama saya</h1>
    <p>dibuat dari nol dengan penuh semangat<p>
</body>
<html>

dan isi file sytle.css

/*
Theme Name: Petani Kode
Author: Ardianta Pargo
Author URI: https://ardianta.github.io
Version: 0.1
Description: Tema ini untuk belajar membuat tema dari nol. Saat ini isinya masih sedikit karena masih dasar. Insa’allah nanti akan menjadi makin banyak.
*/

Perhatikan!

Di dalam kode style.css berisi komentar yang akan menjadi meta data atu keterangan dari template.

  • Theme Name adalah nama tema
  • Author adalah nama pembuat tema atau developer
  • Author URI adalah alamat website pembuat tema
  • Version adalah versi tema
  • Description adalah keterangan singkat tentang tema

Contoh kode css untuk meta data yang lebih lengkap:

/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentythirteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

Keterangan:

  • Theme URI adalah alamat website tema
  • License adalah lisensi tema
  • License URI adalah alamat lisensi tema
  • Tag tag untuk tema

Ujicoba Template Wordpress

Sekarang saatnya kita mengujicoba template yang baru saja kita buat.

Masuk ke wp-admin>appearance>themes, di sana kita akan menemukan sebuah tema tanpa gambar thumbnail. Itu adalah tema yang baru saja kita buat. Silahkan aktifkan tema tersebut.

Uji Coba template wordpress

Setelah itu, coba buka website wordpress-nya.

Membuat Template wordpress dari nol

Hore! selamat. 🎉

Apa Selanjutnya?

Tema pertama kita sudah bisa digunakan. Ini adalah tampilan awalnya. Tentu, ini bukan hasil akhir yang kita inginkan.

Selanjutnya kita akan menerapkan fungsi-fungsi wordpress pada file index.php.

Silahkan lanjutkan ke: Menerpakan Fungsi-fungsi Dasar Wordpress

Baca Juga ini

7 Manfaat Inspect Element Bagi Web Developer

7 Manfaat Inspect Element Bagi Web Developer

Inspect Element merupakan fitur browser yang dibuat untuk memudahkan pengembangan web. Inspect Element dapat kita akses dengan klik kanan, kemudian memilih Inspect Element, atau bisa juga dengan menekan tombol F12. Adapun manfaat dari Inspect Element untuk web Developer adalah sebagai berikut. 1. Tempat Eksperimen CSSSelain ada console Javascript, bisa dibilang di Inspect Elemen juga ada console-nya CSS. Ya, di sana kita bisa eksperimen kode CSS. Sebelum kita menulis kode CSS, sebaiknya gunakan Inspect Element terlebih dahulu.

Tutorial Bootstrap: Memahami Fungsi Tag Meta Viewport

Tutorial Bootstrap: Memahami Fungsi Tag Meta Viewport

Tag Meta Viewport adalah tag HTML yang penting bagi Bootstrap untuk membuat halaman web menjadi responsif.

Konfigurasi Server Apache PHP di Linux agar bisa Upload File

Konfigurasi Server Apache PHP di Linux agar bisa Upload File

Saya berencana akan melakukan instal ulang dalam waktu dekat ini. Karena ada beberapa kerusakan yang saya temukan di Distro Linux yang sedang saya pakai. Sebelum melakukan itu, ada baiknya mencatat dulu konfigurasi server yang sedang berjalan. Supaya nanti mudah mengonfigurasi lagi. Server Apache dan PHP di Linux tidak seperti server XAMPP di Windows. Server Apache dan PHP di linux memiliki hak akses direktori yang harus dipatuhi.

Tutorial Bootstrap: Memahami Sistem Grid untuk membuat Layout

Tutorial Bootstrap: Memahami Sistem Grid untuk membuat Layout

Sistem Grid adalah bagian terpenting yang harus dipahami pada Bootstrap. Apa itu sistem grid? Gimana cara menggunakan sistem grid. Mari kita pelajari!

Tutorial Bootstrap: Pengenalan Dasar Bootstrap untuk Pemula

Tutorial Bootstrap: Pengenalan Dasar Bootstrap untuk Pemula

Pada tutorial ini, kamu akan belajar dasar Bootstrap. Mulai mengenal sejarah bootstrap, hingga mencoba sendiri Bootstrap pada HTML

Membuat Project PHP dengan Composer

Membuat Project PHP dengan Composer

Sebanarnya untuk memulai belajar pemrograman PHP, kita tidak butuh banyak alat. Cukup dengan 4 alat ini...