Begini Caranya Membuat Template WordPress Sendiri. Gampang!

Farid Surya August 19, 2021

Mengapa Bikin Template Sendiri?

Dengan membuat template sendiri, fungsi-fungsi yang kita bangun tidak dibatasi fitur yang disediakan. Prinsip saya dalam membangun sistem adalah begini: produk harus ikut kebutuhan. Jangan sampai fitur tertentu dalam sebuah template dipaksakan untuk memenuhi kebutuhan.

Saya sering melihat data rutin yang harus dipublikasikan ke masyarakat lewat web dipaksakan menggunakan fitur tertentu. Misalnya data rutin tentang pengumuman jadwal seminar skripsi mahasiswa. Itu kan data rutin. Seharusnya itu bisa dibuat fitur khusus, tidak mengikuti fitur publikasi berita.

Nah kalau kita membuat sendiri template wordpress maka hal-hal seperti itu dapat diatasi dengan mudah. Tinggal lakukan penyesuaian sedikit maka sistem dapat memenuhi kebutuhan dengan solusi yang tepat.

Bagaimana Membuat Template Wordpress Sendiri?

Template wordpress terdapat pada folder wp-content/themes/. Pada folder tersebut buatlah folder dengan nama 'templateku' kemudian buat dua file berikut:

index.php
style.css

Dengan menggunakan dua file tersebut, kita sudah dapat membuat sebuah tempate wordpress sendiri. Isi file tersebut dengan kode berikut:

index.php

<h1>Template Pertama Saya</h1>

style.css

/*
Theme Name: Template Pertamaku
Author: namapenulis
Description: Deskripsi template
*/

Tampilan pada administrator setelah membuat folder baru pada wp-content/themes/templateku

Template pertamamu sudah jadi! Coba aktifkan dan lihat perubahan yang terjadi pada halaman web. Tampilan yang muncul adalah apa yang kita tuliskan pada file index.php.

Struktur Utama Template Wordpress

Wordpress memiliki dua jenis posting yaitu POST dan PAGE. Meskipun terlihat mirip tapi dua tipe itu beda. Post merupakan koleksi artikel. Oleh sebab itu post memiliki kategori. Fungsi utama page juga menampilkan artikel tapi artikel yang bersifat tunggal. Jadi kalau kamu akan membuat artikel yang sifatnya adalah koleksi seperti berita maka pakailah post. Jika kamu akan membuat artikel yang sifatnya tunggal seperti halaman kontak, visi misi, atau tentang kami maka pakailah page.

Apa kaitannya dengan template Wordpress?

Tempate wordpress dibuat berdasarkan jenis posting. Berikut ini acuan pembuatan template:

index.php

FIle utama yang dipanggil oleh WP untuk ditampilkan. Jadi kalau mau membuat template single page ya cukup pakai file ini saja.

header.php

File untuk menaruh header HTML. Biasanya pada file inilah elemen <html> sampa dengan <body> dilampirkan. Elemen navbar setelah <body> juga biasa ditaruh di file header.php

footer.php

File ini adalah untuk menaruh elemen akhir HTML disertai juga blok desain untuk footer halaman web.

<!--start header.php -->
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>

<!--end header.php -->

<!--start index.php -->

    <h1>Hello, world!</h1>

<!-- end index.php -->

<!--start footer.php -->

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Kode di atas merupakan starter page HTML menggunakan bootstrap. Coba pecah bagian-bagian kode HTML kedalam tiga file: index.php, header.php, dan footer.php.

Template dasar sudah jadi!

Apa selanjutnya?

Tahap berikutnya kita akan memasukkan Wordpress menu kedalam navbar bootstrap. Tunggu edisi berikutnya ya!

Begini Caranya Membuat Template WordPress Sendiri. Gampang!

Our Services

Products