Tonjoo Blog

Setelah membuat file index dengan looping-nya, step yang ke empat dalam pembuatan tema WordPress ini adalah membuat halaman single (single page). Untuk membuat single page, Anda perlu membuat file baru single.php melalui text editor.

Perlu diingat, nama file single.php ini nantinya tidak boleh diganti, karena WordPress sudah mempunyai paten nama file sendiri. Untuk mengetahui nama-nama file yang benar, Anda bisa check di sini.

Single page adalah bagian website WordPress yang berisi satu halaman saja. Misalnya ketika Anda membuka halaman utama pada sebuah website dan masuk ke satu artikel tertentu, Anda akan masuk ke single page.

Jadi, file single page ini berguna sebagai template untuk menampilkan satu artikel post atau post type yang lain yang belum mempunyai file single sendiri. Berikut tutorial selengkapnya!

Langkah 1: Membuat File Single Page

File single.php pada dasarnya sama seperti file index.php yang sebelumnya telah kita buat, karena memiliki fungsi dan attribute sama. Hanya saja, untuk file single.php ini tidak ada fungsi looping post.

Pada kode single ini, fungsi yang bisa kita highlight adalah if ( has_post_thumbnail() ). Fungsi lain yang juga penting dapat Anda lihat di sini. Kondisi ini berfungsi mengecek apakah artikel tersebut mempunyai featured image. Berikut cara penerapannya:

Membuat file single.php di text editor.

Simpan di folder (C:) > xampp (atau software local server yang Anda gunakan) > htdocs > testingdua (menyesuaikan nama web Anda) > themes > WordPress-theme-from-scratch. Beri nama single.php dan klik Create.

Tempat menyimpan file single.php.

Copy-Paste code single page ke file single.php yang telah Anda buat.

Template code single page.

Berikut code single page yang dapat Anda copy dan nantinya dapat dimodifikasi:

<?php /** * The template for displaying all single posts * * @package Tutorial */ get_header(); ?> <article class="blog-post px-3 py-5 p-md-5"> <?php while ( have_posts() ) : ?> <?php the_post(); ?> <div class="container single-col-max-width"> <header class="blog-post-header"> <h2 class="title mb-2"><?php the_title(); ?></h2> <div class="meta mb-3"> <span class="date"><?php tutorial_publish_date(); ?></span> <span class="time"><?php tutorial_reading_time(); ?></span> <span class="comment"><?php comments_popup_link( false, false, false, 'text-link' ); ?></span> </div> </header> <div class="blog-post-body"> <?php if ( has_post_thumbnail() ) : ?> <figure class="blog-banner"> <?php the_post_thumbnail( 'large', array( 'class' => 'img-fluid' ) ); ?> <?php tutorial_post_thumbnail_caption(); ?> </figure> <?php endif; ?> <?php the_content(); ?> </div> <?php tutorial_post_navigation(); ?> <div class="blog-comments-section"> <div id="disqus_thread"></div> </div><!--//blog-comments-section--> </div><!--//container--> <?php endwhile; ?> </article> <?php get_footer(); Read More

Setelah melewati step ke-2 pembuatan theme WordPress, yakni membuat file functions, header, dan footer, di step ke-3 ini kita belajar membuat Query Loop dan menggunakan filter hook.

Query Loop merupakan serangkain kode yang berfungsi untuk menampilkan list post yang telah kita inputkan ke dalam WordPress.

Selain itu, file index merupakan file default jika file template yang lain tidak ada, seperti archive dan single post. Maka, secara otomatis wordpress akan merender tampilan di file index.php.

Selain Menampilkan konten kita juga menampilkan atribute seperti judul, konten link ke single artikel dan fungsi fungsi kustom seperti menampilkan tanggal post tersebut dibuat serta durasi membaca artikel.

Langkah 1: Membuat Query Loop

Untuk memulai membuat query loop, Anda perlu mengganti code pada file index.php yang telah dibuat sebelumnya. Berikut langkah-langkah membuat query loop:

1. Kunjungi file index.php.
   
2. Ganti dengan code* yang dapat Anda copy seperti berikut ini:
   
3. Jika sudah, simpan code tersebut (Ctrl + S).

*Berikut code untuk query looping baru yang bisa Anda salin ke file index.php:

<?php /** * The main template file * * @package Tutorial */ get_header(); ?> <?php if ( have_posts() ) : ?> <section class="blog-list px-3 py-5 p-md-5"> <div class="container single-col-max-width"> <?php while ( have_posts() ) : ?> <?php the_post(); ?> <div class="item mb-5"> <div class="row g-3 g-xl-0"> <div class="col-2 col-xl-3"> <?php the_post_thumbnail( 'thumbnail', array( 'class' => 'img-fluid post-thumb' ) ); ?> </div> <div class="col"> <h3 class="title mb-1"><a class="text-link" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3> <div class="meta mb-1"> <span class="date"><?php tutorial_publish_date(); ?></span> <span class="time"><?php tutorial_reading_time(); ?></span> <span class="comment"><?php comments_popup_link( false, false, false, 'text-link' ); ?></span> </div> <div class="intro"><?php the_content(); ?></div> <a class="text-link" href="<?php the_permalink(); ?>">Read more &rarr;</a> </div><!--//col--> </div><!--//row--> </div><!--//item--> <?php endwhile; ?> <?php tutorial_posts_navigation(); ?> </div> </section> <?php endif; ?> <?php get_footer(); Read More

Pada tutorial membuat theme WordPress bagian 1 sebelumnya, Anda sudah berhasil membuat file index.php dan style.css sebagai base theme.

Namun tampilan dan fungsi dari tema tersebut masih sangat sederhana. Maka Anda perlu mengembangkannya agar memiliki tampilan menarik dan fitur yang dapat dikustom.
​
Untuk merealisasikannya, Anda perlu membuat file functions.php, file header dan file footer. Sebagai gambaran, di percobaan ini, kita masih membuat tema yang memililiki struktur sama dengan milik Xriley.

Ikuti tahap ke dua dalam pembuatan tema WordPress berikut ini!

Membuat File Functions.php

Pertama, Anda perlu membuat file function (fungsi). File ini berisi code program yang dirancang untuk menyelesaikan tugas tertentu.

Ada dua jenis function berdasarkan siapa yang membuat: (1) Built-in Function, dan (2) User Defined Function. Jenis fungsi yang pertama adalah jenis function bawaan.

Sedangkan User Defined Function adalah fungsi yang kita buat sendiri. Di sini, kita akan mempraktikkan pembuatan fungsi dengan pendekatan User Defined Function. Berikut langkahnya:

Membuat file functions.php di VS Code

Masuk ke folder (C:) > masuk ke folder xampp > pilih htdocs > pilih folder WordPress yang Anda buat. Di sini kami mengunnakan nama testingdua > pilih wp.content > pilih theme > pilih folder WordPress-theme-from-scratch.

Membuat file functions.php di VS Code

Jika sudah, file functions.php ini akan kita isi dengan tiga jenis code, (1) Define version dan direktori, (2) mendaftarkan fitur tema, dan (3) mengaktifkan CSS dan JS (JavaScript).

1. Define Version dan Directory

Penggunaan define dilakukan agar ke depannya code menjadi lebih rapi dan mudah saat ada pemanggilan fungsi tersebut. Pengisian fungsi define adalah untuk:

• TUTORIAL_VERSION berisi versi dari tema
• TUTORIAL_DIR berisi lokasi direct path tema
• TUTORIAL_URL berisi lokasi url path tema

Untuk melakukan code pada functions.php, mula-mula copy code define version dan directory berikut, dan masukkan ke dalam file functions.php.

<?php
/**
 * Tutorial functions and definitions
 *
 * @package Tutorial
 */

define( 'TUTORIAL_VERSION', wp_get_theme()->get( 'Version' ) );
define( 'TUTORIAL_DIR', get_template_directory() );
define( 'TUTORIAL_URL', get_template_directory_uri() );

Tampilannya adalah seperti di bawah ini:

Memasukkan code define version dan direktori ke dalam file functions.php

Selanjutnya, Anda bisa melakukan coding manual pada file tersebut.

2. Mendaftarkan Fitur Tema

Apabila sudah membuat memasukkan code define dan directory, tahap selanjutnya adalah mendaftarkan fitur tema. Ada 3 fitur yang kita aktifkan, yakni:

• dd_theme_support( 'automatic-feed-links' ); fitur untuk menambah meta tag rss
• dd_theme_support( 'title-tag' ); fitur untuk menambah meta tag title artkiel
• dd_theme_support( 'posts-thumbnail' ); fitur untuk menambah featured image artikel

3 Fitur tersebut wajib diaktifkan di dalam pembuatan tema, agar fungsi – fungsi seo bisa berjalan. Untuk mengaktifkannya, silakan copy code berikut dan masukkan pada file functions.php.

/** * Sets up theme defaults and registers support for various WordPress features. */ function tutorial_setup() { /* * Make theme available for translation. * Translations can be filed in the /languages/ directory. * If you're building a theme based on Tutorial, use a find and replace * to change 'tutorial' to the name of your theme in all the template files. */ load_theme_textdomain( 'tutorial', TUTORIAL_DIR . '/languages' ); // Add default posts and comments RSS feed links to head. add_theme_support( 'automatic-feed-links' ); /* * Let WordPress manage the document title. * By adding theme support, we declare that this theme does not use a * hard-coded <title> tag in the document head, and expect WordPress to * provide it for us. */ add_theme_support( 'title-tag' ); /* * Enable support for Post Thumbnails on posts and pages. * * @link https://developer.wordpress.org/themes/functionality/ featured-images-post-thumbnails/ */ add_theme_support( 'post-thumbnails' ); } add_action( 'after_setup_theme', 'tutorial_setup' ); Read More

Saat ini banyak tersedia tema WordPress yang siap pakai baik gratis hingga berbayar. Tetapi ada kalanya kita butuh cara membuat theme WordPress sendiri.

Pembuatan template WordPress di sini dilakukan tanpa menggunakan hosting, namun dikembangkan melalui localhost. Sehingga, Anda tidak perlu menyewa hosting.

Lantas, bagaimana cara membuat template tema WordPress dari awal? Apa keuntungan membuat template WordPress? Berikut informasi dan tutorial selengkapnya.

Keuntungan Membuat Theme WordPress Sendiri

Mengembangkan tema WordPress sendiri memiliki beberapa keuntungan. Kecepatan dan keamanan adalah dua keuntungan pengembangan tema WordPress secara mandiri.

Untuk kecepatan, tema yang dikembangkan sendiri tentu lebih ringan karena hanya menggunakan fungsi dan library yang dibutuhkan saja. Sementara tema berbayar atau free sering kali memiliki banyak fungsi yang belum tentu kita gunakan.

Secara keamanan tema hasil pengembangan sendiri juga relatif lebih aman karena tidak ada yang memiliki source code tema tersebut. Hal ini menyebabkan reverse engineering tema untuk mencari celah keamanan menjadi lebih susah.

Dari pengalaman penulis, untuk mulai mengembangkan tema WordPress, sebaiknya kita mempunyai desain yang sudah selesai dikembangkan. Jadi, kita bisa mencontoh desain tersebut.

Setelah desain selesai dikembangkan, desain tersebut dapat dikonversi menjadi versi statik (HTML) terlebih dahulu atau langsung diimplementasikan pada tema WordPress. Hal ini sangat bergantung pada skill developer.

Untuk memudahkan tutorial ini, tema akan dikembangkan berdasarkan template “Dev-Blog” milik Xriley . Dengan kata lain, kita akan membuat tema WordPress yang mirip dengan template tersebut.

Persiapan Sebelum Membuat Theme WordPress

Sebelum mengembangkan template WordPress secara offline, Anda perlu melakukan persiapan berikut ini:

• Install WordPress kosong di server localhost. Ada dua jenis software server localhost yang kami rekomendasikan: WampServer dan XAMPP. WampServer untuk OS Windows. XAMPP bisa untuk Windows, Linux dan Mac OS. Baca cara install WordPress di WampServer atau cara install WordPress di XAMPP untuk memulai. Dalam tutorial ini, kami menggunakan XAMPP.
• Install Git.
• Install text editor. Kami sarankan menggunakan Sublime atau Visual Studio Code. Dalam tutorial ini, kami menggunakan Visual Studio Code (VS Code).
• Buka terminal untuk menjalankan git selain visual code.

Jika persiapan di atas sudah selesai, ikuti cara membuat template sendiri di WordPress berikut, mulai dari clone tema WordPress, membuat file CSS dan PHP sederhana, hingga menampilkan hasil tema di WordPress.

Langkah 1: Melakukan Clone Theme WordPress

Untuk memudahkan cara membuat template WordPress dari awal, kita akan melakukan clone theme WordPress Theme from Scratch milik Tonjoo. Jika sudah paham cara melakukan clone, langsung gunakan perintah berikut di Text Editor.

cd wp-content/theme
git clone https://github.com/tonjoo/WordPress-theme-from-scratch.git
cd themes/WordPress-theme-from-scratch
git log --oneline

Jika belum memahami cara melakukan clone, ikuti langkah-langkah berikut ini:

Buka file theme WordPress melalui Visual Studio Code (VS Code)

Buka Terminal dengan cara klik Toggle Panel di bagian kanan atas, nomor 2 dari kiri.

Membuka Terminal pada VS Code

Ketik perintah git clone > copy-paste url: https://github.com/tonjoo/WordPress-theme-from-scratch.git > klik Enter. Tunggu proses clone berhasil seperti di bawah. Clone merupakan proses penyalinan kode program yang nantinya akan kita modifikasi.

Melakukan clone theme dengan perintah git

Masuk ke folder code hasil clone dengan cara ketik perintah cd WordPress-theme-from-scratch > klik Enter.

Masuk ke folder hasil clone

Masuk ke daftar Commit dengan cara ketik perintah git log –oneline > klik Enter.

Masuk ke daftar Commit

Commit pada repository sudah disesuaikan dengan langkah-langkah pengembangan theme pada tutorial ini. Setelah Anda tekan Enter, daftar commit akan muncul seperti berikut ini:

60de019 (HEAD -> master, origin/master, origin/HEAD) Part 3, Step 2 156feb4 Part 3, Step 1 8efec1e Part 2, Step 2 : widget a23df50 Part 2, Step 1 : daftarkan menu di functions.php c6d005a Step 5 : Single.php 19c2493 Step 4 : Membuat Excerpt otomatis di functions.php 007c73f Step 3 : Query Loop fbde939 Step 2 : functions.php bf92316 Step 1 : Base Theme be0edf4 init commit Read More

Untuk menarik lebih banyak pelanggan ke toko online dapat dilakukan dengan cara membuat kupon diskon di WooCommerce. Ada beberapa langkah yang perlu dilakukan agar pembuatan kupon berhasil.

WooCommerce sendiri merupakan plugin WordPress gratis yang dapat digunakan untuk membangun website toko online. Plugin ini menyediakan banyak fitur pendukung e-commerce, salah satunya fitur kupon/voucher.

Lantas, bagaimana cara membuat kupon di WooCommerce tanpa menggunakan plugin tambahan? Bagaimana cara mengatur batasan penggunaan Kupon? Berikut tutorial selengkapnya! Read More

Cara mengatur pajak di WordPress dengan WooCommerce penting, karena akan memperngaruhi margin keuntungan dan membantu memenuhi kewajiban pajak yang diperlukan dalam bisnis Anda.

Terutama bagi yang baru install WooCommerce di WordPress untuk membuat toko online, Anda perlu melakukan beberapa konfigurasi fitur plugin ini, salah satunya adalah pajak.

Artikel ini membahas tentang cara mengaktifkan fitur pengaturan pajak di WooCommerce, menambahkan tarif pajak, hingga membuat pengecualian pada produk tertentu. Read More

Cara menambahkan variasi produk di WooCommerce penting jika Anda menjual suatu produk yang memiliki beberapa varian. Misalnya seperti baju X dengan opsi warna biru, merah, dan hijau.

Untuk membuat variasi produk, WooCommerce menyediakan fitur Variable Product. Sehingga Anda tak perlu membuat varian produk tersebut satu per satu.

Selain itu, Anda juga tidak perlu menginstall plugin WooCommerce terbaik tambahan. Lantas, bagaimana cara menambahkan produk di WooCommerce yang bervariasi? Mari kita simak! Read More

Mengembangkan toko online di WordPress sendiri membutuhkan plugin WooCommerce terbaik untuk memaksimalkan pengalaman pelanggan di website dan meningkatkan penjualan.

Namun, terlalu banyak plugin juga tidak bagus, karena dapat membuat website Anda menjadi lebih lambat ketika diload. Hal ini dikarenakan ukuran file websitenya besar.

Maka dari itu, Anda perlu memperhatikan plugin apa saja yang perlu diinstall. Sehingga ukuran website bisa lebih ringan ketika diakses penggunanya.

Lantas, apa saja plugin yang dibutuhkan untuk membuat e-commerce menggunakan WordPress? Berikut daftar rekomendasi plugin WooCommerce yang Anda perlukan. Read More

Cara install plugin WordPress di localhost dapat dilakukan secara manual, baik online maupun offline. Sehingga Anda dapat memilih metode sesuai dengan kondisi dan kebutuhan.

Metodenya bisa melalui dashboard wp-admin WordPress ataupun melalui folder web server yang ada di localhost Anda. Sehingga, Anda dapat memanfaatkan plugin WooCommerce terbaik, dan plugin penting lainnya.

Lantas, bagaimana cara install plugin WordPress dengan benar? Simak selengkapnya berikut ini.

Cara Install Plugin WordPress dengan Benar

Berikut tiga cara install plugin WordPress, yakni melalui menu Add Plugin, melalui opsi Upload, dan melalui folder web server di localhost Anda. Read More

Cara Mengatasi Error: MySQL shutdown unexpectedly dapat dilakukan dengan beberapa metode, mulai dari menghapus beberapa file folder data hingga membuat folder data_old. Read More