Langkah Pertama Membuat Theme WordPress untuk Pemula

Halo Teman-teman onphpid setelah lama break, onphpid kini kembali dengan menghadirkan berbagai tutorial web yang menarik untuk kalian dan jika kalian ingin menjadi seorang developer theme wordpress maka ini adalah saat yang tepat buat kalian karena onphpid akan menghadirkan tutorial lengkap membuat theme wordpress khusus untuk pemula yang dikemas dalam beberapa sesi dari pengenalan hingga menjadi sebuah theme yang bisa kalian digunakan pada wordpress.

Sebelum kita melangkah ke koding atau bagaimana membuat theme wordpress-nya sebaiknya kita perkenalan terlebih dahulu dengan wordpress berikut list perkenalannya :

  1. Kenapa WordPress
  2. Apa Itu Theme WordPress
  3. Perlengkapan WordPress Developer
  4. Installasi WordPress di localhost
  5. Installasi Plugins
  6. Konfigurasi Fakerpress
  7. Membuat Theme WordPress Sendiri

KENAPA WORDPRESS

WordPress adalah sebuah platform blogging sepertihalnya blogger.com namun wordpress jauh lebih baik dan menarik.  Kenapa ? karena wordpress menyediakan sebuah CMS (Content Management System) yang bisa kita unduh di wordpress.org secara gratis yang nantinya bisa kita kembangkan (salah satunya adalah theme wordpress) dan dapat kita pergunakan untuk berbagai tujuan seperti blogging, portfolio, toko onlinecompany profile atau sesuai keinginan kita dengan persyaratan kita harus memiliki domain dan hosting sendiri.

APA ITU THEME WORDPRESS

Nah apa itu theme wordpress ? apa kegunaannya ? dan kenapa kita belajar membuatnya ?

Mungkin akan muncul banyak jawaban dibenak kalian mengenai pertanyaan diatas tapi secara singkat kita bisa menjawab theme atau tema wordpress adalah bagian depan website. theme atau lebih akrab dengan istilah front-end  ini nantinya akan dilihat oleh pengunjung website kita sehingga theme wordpress ini secara tidak langsung juga mempresentasikan apa tujuan dari keberadaan website kita bahkan hingga karakter pemilik websitenya.

Di dalam perkembanganya wordpress telah memiliki ribuan developer di seluruh dunia yang membuat wordpress menjadi popular dan menjadikannya sebagai salah satu sumber penghasilan dengan menjual theme ataupun plugin wordpress atau hanya menjadikannya sebagai sekedar hobi saja.

PERLENGKAPAN WORDPRESS DEVELOPER

Sepertihalnya membangun sebuah rumah, membuat theme WP (wordpress) pun memerlukan perlengkapan atau software pendukung yang akan mempermudah kita dalam membuat  theme wordpress.

tools tersebut adalah sebagai berikut :

  • XAMPP
    XAMPP adalah aplikasi yang akan kita gunakan untuk membuat server lokal atau localhost sehingga kita bisa melakukan develop theme wordpress secara offline
  • Browser
    Browser adalah aplikasi untuk membuka halaman website. kalian bisa menggunakan mozila, chrome atau apapun favorite kalian.
  • Text Editor
    Text Editor adalah aplikasi yang akan kita gunakan untuk koding. kalian bisa menggunakan notepad++, sublime text,  netbean atau apapun favorite kalian
  • CMS WordPress
    CMS wordpress bisa kalian unduh di wordpress.org.
  • Dummy Post Generator
    Dummy Post Generator adalah plugin yang akan kita gunakan untuk membuat content, category, tag dan lain-lain secara otomatis sehingga kita bisa lebih fokus dalam melakukan developing theme wordpress. Plugin bisa kalian search di menu Plugins wordpress.  di sini onphpid rekomendasikan untuk menggunakan Fakerpress.
  • Regenerate Thumbnails
    Regenerate Thumbnails adalah aplikasi yang digunakan untuk menyesuaikan ukuran image yang sudah diupload dengan ukuran yang diset theme sekarang.

INSTALLASI WORDPRESS DI LOCALHOST

Baiklah setelah kita sudah memiliki tool-tool di atas (khusus Plugins bisa di Install via WP) maka selanjutnya kita akan meng-install wordpress di localhost agar kita bisa melakukan developing theme wordpress tanpa harus online. Mulai dari sini kalian sangat diharapkan mengikuti atau menyamakan dengan contoh baik step atau code agar tidak terjadi kebingungan.

Untuk melakukan installasi wordpress di localhost kalian bisa baca di cara install wordpress di localhost.

INSTALLASI PLUGINS

Sebagai Step Berikutnya kita akan melakukan installasi Plugin yang mana  plugin ini akan membantu kita dalam proses developing theme.

Buka menu Plugins > Add New.

Di sini kita diberikan pilihan untuk installasi plugin yaitu dengan menggunakan menu Search yang artinya kita memerlukan koneksi karena kita akan mendownload Plugin tersebut langsung dari wordpress plugins directory atau menggunakan menu Upload Plugin (pojok kiri atas) jika kita sudah memiliki file zip dari plugin yang kita butuhkan.

Install Fakerpress (by Gustavo Bordoni)  dengan ketikan Fakerpress di menu search. jika sudah ketemu klik install tunggu beberapa saat setelah muncul menu “Activate Plugin” lakukan klik untuk mengaktifkan plugin Fakerpress.

lakukan hal yang sama pada Regenerate Thumbnails (By Alex Mills (Viper007Bond) ).

KONFIGURASI FAKERPRESS

Selanjutnya kita akan men-generate post/artikel dengan menggunakan Fakerpress.

Buka Fakerpress > Posts.

Pada Quantity isi kolom depan dengan 30 ( atau sesuai keinginan ), sementara kolom belakang biarkan kosong, seperti gambar berikut.

Scroll kebawah lalu klik tombol generate dan tunggu beberapa saat. jika loading sudah selesai kita akan check di menu Posts > All Posts jika kita berhasil men-generate post maka dimenu tersebut akan tampak banyak post yang sudah dibuat. namun jika belum kalian bisa mengulangi dengan mengurangi jumlah post yang digenerate, misal 10.

Fatal error: Maximum execution time of 30 seconds exceeded in “C:\xampp\htdocs\theme-wp\wp-includes\class-wp-http-curl.php on line 324”

silahkan baca : Meningkatkan batas limit WordPress

MEMBUAT THEME WORDPRESS SENDIRI

Oke semua persiapan dari tools, installasi dan konfigurasi sudah oke maka kita akan memulai membuat theme wordpress.

Dalam membuat theme wordpress yang kita perlukan adalah membuat sebuah folder di dalam theme-wp/wp-content/themes/ dan di dalam folder tersebut minimal terdapat 2 (dua) file yaitu index.php dan style.css.

Pertama : Buatlah sebuah folder dengan nama “onphpid-theme” di theme-wp/wp-content/themes/.

Kedua : Buatlah sebuah file php dengan nama “index.php” di dalam folder “onphpid-theme” dan biarkan kosong.

ketiga : Buatlah file css dengan nama “style.css” di dalam folder “onphpid-theme” lalu isi file style.css dengan code berikut :

Lalu Simpan.

keempat : Buka menu Appearance > Themes. pastikan terdapat theme yang bernama Onphpid Themes di list theme seperti gambar berikut :

Kelima : aktifkan Onphpid Themes dengan klik tombol Active dan setelah aktif akan tampak seperti ini.

Sampai disini theme yang baru saja kita buat sudah berhasil kita aktifkan, Namun jangan bingung ketika kalian klik visit atau buka halaman web, web masih blank atau kosong putih bersih karena memang di file index belum ada apa apanya alias kosong.

Agar halaman website kita tidak blank isilah file index.php dengan code berikut :

Dengan kode diatas maka halaman depan website kita menampilkan “Theme WP”.

Sebelum Kita akhiri sesi perkenalan bagian pertama pembuatan theme wordpress ini onphpid akan sedikit menjelaskan code-code yang ada di index.php dari language_attributes() hingga wp_footer(). Kode tersebut di kenal sebagai fungsi bawaan wordpress yang dibuat untuk mempermudah pengembangan wordpress dalam hal ini theme wp.

language_attributes()
adalah fungsi  yang output berupa lang=”…” jika wordpress kita set dalam bahasa inggris maka lang akan bernilai en-US (lang=”en-US”) jika kita set dalam bahasa indonesia lang akan bernila id-ID (lang=”id-ID”).

Untuk lebih jelas kalian bisa gunakan CTRL+U pada halaman http://localhost/theme-wp atau visit https://codex.wordpress.org/Function_Reference/language_attributes.

bloginfo('charset') fungsi  yang outputnya berupa endcode untuk halaman atau feed yang biasanya UTF-8.

bloginfo('pingback_url') yang outpunya berupa url menuju file xmlrpc.php.

bloginfo('name') outputnya adalah nama website.

untuk fungsi bloginfo() bisa kalian pelajari di https://developer.wordpress.org/reference/functions/bloginfo/

body_class() adalah fungsi yang bertugas men-generate attribute class (pada tag <body> ). atau check https://codex.wordpress.org/Function_Reference/body_class

wp_head() adalah fungsi  yang bertugas men-generate tag seperti title, link, style atau script dan harus diletakka sebelum tag </head>

wp_footer() hampir sama dengan wp_head() namun wp_footer() diletakkan sebelum </body>

wp_head() dan wp_footer() wajib dipasang agar theme kita compatible dengan wordpress.

Demikian Sesi Pertama kita dalam tutorial membuat theme wordpress untuk pemula apabila ada pertanyaan silahkan sampaikan melalui kolom komentar dan pada  sesi kedua kita akan belajar tentang Pengenalan Struktur Direktori dan File-file WordPress.

Alternative Query Untuk Datatables
Mengenal Struktur Direktori dan File-file WordPress

  • Infonya sangat bermanfaat gan, sampai saat ini masih belajar buat template, yang paling ribet ya pada function.php sama style.css -_- main main ke blog saya gan: idwebshare.net, di tunggu kunjungan baliknya hhe

  • Ramdani Pratama

    bermanfaat tutorialnya gan 😀 dibikin e-booknya gan 😀
    http://ramdani.web.id/

    • Insyalloh Gan.. Doain aja semoga saya ada kesempatan bikin ebook 😀

  • andri setia

    mas saya belum ngerti bagian “Lakukan hal yang sama pada Regenerate Thumbnails (By Alex Mills (Viper007Bond) )” maksudnya seperti apa karena saya tidak menemukan caranya
    terima kasih

    • Itu artinya cara install plugin regenerate thumbnails sama dengan cara install plugin fakerpress

    • andri setia

      terima kasih mas,..

    • ellutfiyah

      bang, kok install fakerpress nya ini failed update terus. kenapa yak ?

    • biasanya karena ada maslah time out request dari APACHE (XAMPP) alternatif yang bisa kamu gunakan adalah mendownload fakerpress secara langsung dari wordpress plugin repository kemudian extract di folder wp-content > plugins

  • Ediwin

    Nemu juga artikelnya..
    Terima kasih banyak mas, ini mau ikuti tutorialnya. semoga sukses sampe selesai.