Membuat Themes WordPress Sendiri: Intro (Pelajaran 1)

WordPress merupakan sebuah CMS (Content Management System) Opensource yang berguna untuk membangun sebuah website, terutama membuat blog. Selain itu WordPress bisa juga di buat toko online, forum dan masih banyak lagi. Sehingga, membuat CMS satu ini sangat populer digunakan dalam membangun sebuah website.

Dan seperti yang saya sebutkan diatas tadi, WordPress bersifat opensource, jadi, kalian bisa memodifikasi wordpress ini sesuka kalian, terutama themes (Tampilan front end) WordPressnya. Nah, ngomongin themes, kali ini kita akan membahas tutorial bagaimana cara membuat themes Wordprees ini.

Fun Fact: Sychonix menggunakan WordPress dan membangun themesnya sendiri loh, haha XD.

Yang Dibutuhkan:

Skill:

  • Dasar HTML;
  • Dasar CSS;
  • Dasar PHP (paling penting).

Memulai:

Jika kalian sudah menginstall XAMPP & Visual Studio code (installnya tinggal next-next aja, jadi ga perlu contoh ya XD), saatnya menginstall wordpressnya.

  1. Caranya extract file wordpress-x-x-x.zip kalian dan letakan di folder aplikasi XAMPP dan letakan di folder htdocs (Contoh: c:/xampp/htdocs).
File WordPress yang diinstall di dalam software XAMPP
  1. Kemudian, nyalakan XAMPPnya terlebih dahulu. Aktifkan Apache dan MySQL saja.
Menjalankan aplikasi XAMPP untuk WordPress
  1. Lalu buka di browser dengan alamat localhost/wordpress atau jika folder wordpress installernya kalian rubah menjadi nama lain, maka buka dengan alamat localhost/NAMAFOLDER (contoh: localhost/Websiteanakbaikhati).
Pemilihan bahasa untuk WordPress
  1. Jika sudah berhasil, mari membuat database terlebih dahulu http://localhost/phpmyadmin/ . Lalu klik NewIsi Nama DatabaseCreate.
Membuat Database untuk WordPress
  1. Kembali ke localhost/wordpress lagi, lalu pilih bahasa, kemudia next saja sampai ke halaman konfigurasi database dan masukan Database Name sesuai nama database yang kita buat di PhpMyAdmin, lalu isi Username menjadi root dan Password dikosongkan saja, jika MyPhpAdmin kalian masih dalam keadaan default dan belum pernah kalian edit username & passwordnya. Jika sudah, silahkan pakai username dan password database sesuai yang kalian buat. Setelah, selesai submit saja dan next-next aja sampai ke konfigurasi informasi web WordPressnya.
Konfigurasi Database untuk WordPress
  1. Nah, di konfigurasi informasi ini, kalian bebas mau memberikan nama apa saja di Site Title-nya, Lalu Username dan Password untuk login ke Control Panel WordPress-nya nanti, lalu masukan juga email kamu. dan untuk Search Engine Visibility di skip aja jangan dicentang. Dan setelah selesai silahkan klik Install WordPress.
Konfigurasi Informasi untuk WordPress

Dengan begitu situs local kalian telah berhasil dibuat dan jika kalian mau masuk ke control panel gunakan username dan password yang kalian buat, lalu, masuk ke link :
http://localhost/wordpress/wp-admin

Membuat Themes Dasar

Setelah kalian berhasil menginstall WordPress, saatnya kita ke bagian utama, yaitu membuat themes. Tapi, untuk pembelajaran pertama ini kita hanya membahas dasar-dasarnya terlebih dahulu. Untuk tingkat lanjut kita akan bahas di pertemuan selanjutnya.

  1. Buatlah folder di dalam direktori c:/xampp/htdocs/wordpress/wp-content/themes/FOLDER_UNTUK_THEMES_YANG_KAMU_BUAT.
    Contoh: c:/xampp/htdocs/wordpress/wp-content/themes/sychonix
  2. Kemudian buat 2 file penting di dalam folder tersebut yaitu index.php dan style.css
Membuat file penting WordPress

3. Kemudian, buka http://localhost/wordpress/wp-admin/themes.php . Dan jika themes kalian berhasil dibuat maka akan terlihat seperti gambar dibawah ini. Kalau begitu, klik active saja, agar memudahkan kita dalam membangun themes nanti.

Hasil dari pembuatan Themes bagian pertama

Oh ya, sebelum mulai ngoding ada baiknya melengkapi informasi tentang themesnya, seperti gambar yang dibawah ini.

Membuat informasi Themes

Untuk gambar, silahkan buat gambar dengan nama screenshot.jpg dan letak di folder themes kalian. Untuk rekomendasi ukuran resolusi 1200x900px.

Nah untuk informasi teksnya. Silahkan pergi ke file style.css lalu masukan text berikut ini (referensi):

/*
Theme Name: NAMA THEMES
Theme URI: ALAMAT THEMES
Author: NAMA PEMBUAT
Author URI: ALAMAT WEB PEMBUAT
Description: DESKRIPSI TENTANG THEMES
Tags: BEBAS
Version: 1.0
*/

Index.php

Sebagai, permulaan mengonding themes wordpress, mari kita mulai dari paling dasarnya dahulu.

  1. Buka file Index.php dengan Visual Studio Code biar mudah ngeditnya. Lalu, tulis code berikut:
<?php get_header();

if (have_posts()):
    while(have_posts()) : the_post();
        the_title();
        the_content();
    endwhile;
    else:
        echo 'Tidak ada content';
endif;

get_footer();?>

Penjelasan:

get_header(); = untuk memanggil header yang didalam terdapat style.css, title, subtitle dan beberapa fungsi lainnya dalam keadaaan default.

have_posts() = untuk memanggil post jika kita memiliki post.

while(have_posts()) : the_post();the_title();the_content(); = berfungsi untuk mengulang post jika memiliki post.

else: echo 'Tidak ada content' = mengeluarkan pesan ketika tidak ada post.

Hasil blog WordPress sederhana

Nah segitu dulu pembelajaran kali ini, dan kalau ada pertanyaan atau ada yang salah mohon diperbaiki, kritik dan saran sangat dibutuhkan untuk konten selanjutnya. Dan jika kalian ingin mendownload file project sederhana ini bisa melalui donasi di bawah ini agar saya makin rajin lagi membuat content :D:

Download File Project

Dan terima kasih telah membaca artikel ini. Sampai jumpa di pembelajaran selanjutnya.