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