Membuat Tema WordPress Sederhana

(1)

Membuat Tema WordPress Sederhana

posted by Yusuf Syaifudin on November 10, 2014

Ok, jadi sepertinya saya masih punya hutang sama teman saya tentang janji mau nulis gimana caranya bikin tema WordPress.. Berawal dari pembicaraan “mas, ini ada … blablablabla …, tapi masalahnya minta ada section berita”, terus saya jawab “ya udah pakai WordPress aja!”

Kenapa WordPress? Alasan yang paling umum (dan akan saya gunakan disini) ialah karena:

 gratis

 komunitasnya aktif dan banyak (jadi kalo mau development tinggal googling nemu deh)

 dipakai oleh banyak website baik company atau individu

 de-el-el (yang intinya saya males googling dan silahkan googling sendiri “why wordpress”)

Ok then, udah cukup basa-basinya, sekarang saya mau melunasi hutang saya. Jadi, kali ini kita mau belajar membuat WordPress Theme using Twitter Bootstrap. Mau nanya lagi kenapa bootstrap? duh, googling aja deh, intinya biar mainstream gampang gitu sih :/

Pertama, Install WordPress dan siapkan assets

<p>Your browser does not support iframes.</p>

langkah pertama banget yang perlu dilakukan ialah menginstall WordPress di local server kita, mau pakai Xampp yang udah mainstream monggo, mau pakai nginx juga boleh.. Untuk langkah installasinya cukup mudah, download wordpress https://wordpress.org/download/ ->

ekstrak ke folder dimana local server membaca file kamu (kalau xampp biasanya htdocs) lalu jalankan localhost/wordpress. Masukkan konfigurasi nama database, username database, password database. Kemudian atur nama situs, username dan password. Selesai

langkah selanjutnya yang perlu kita lakukan ialah mendownload twitter bootstrap dari sini: http://getbootstrap.com dan html5boilerplate dari sini http://www.html5boilerplate.com

Kedua, Inisialisasi Tema

Coba kita mulai development tema kita.

Note:

(2)

lokasi situs diasumsikan di localhost/wordpress sehingga asumsikan juga bahwa wordpress kamu install di <dir>/xampp/htdocs/wordpress

Sekarang coba masuk ke direktori wordpress/wp_content/themes, setelah itu coba buat sebuah folder dengan nama mytheme. Folder mytheme ini merupakan area kerja kita dimana semua file untuk keperluan tema ditempatkan. Sebenarnya penamaannya bebas, karena wordpress pada dasarnya akan men-scan semua folder yang ada di themes.

Sekarang masuk ke folder mythemes yang sudah dibuat tadi. Ekstrak file .zip dari

html5boiler plate ke folder ini, kemudian ekstrak juga bootstrap di folder ini. Setelah itu, kita akan mendapatkan struktur sebagai berikut:

- css - doc - fonts - img - js

- 404.html - index.html

Ubah file 404.html dan index.html menjadi 404.php dan index.php

Setelah itu, buatlah file style.css dan tulis komentar berikut diatasnya:

/*

Theme Name: WordPress Theme Boilerplate Theme URI: http://yusyaif.com

Author: Yusuf Syaifudin

Author URI: http://yusyaif.com

Description: WordPress Theme Boilerplate is just a boilerplate for later development, using Bootstrap Framework

Version: 1.0

License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: wp boilerplate

*/

Ketiga, aktifkan tema

(3)

Sekarang, coba masuk ke halaman admin wordpress, kemudian masuk ke Appereance ->

Themes, maka tema baru akan muncul. Karena di style.css tadi Theme Name-nya

ialah WordPress Theme Boilerplate maka nama tema yang akan muncul adalah WordPress Theme Boilerplate. Kemudian silahkan klik Activate.

Tema baru terdeteksi di halaman admin WordPress

Sekarang coba kunjungi halaman wordpress Anda, misal disini localhost/wordpress, maka akan muncul halaman default HTML5Boilerplate. Sampai disini kita sudah berhasil membuat tema, tapi blank theme :p karena semua css, js atau image bahkan bawaan default

html5boilerplate pun belum terdeteksi (karena link yang digunakan secara default ialah relative sedangkan path relative-nya salah jika mengikuti base url). Untuk itu kita perlu meng-load semua file css dan js baik dari html5boilerplate ataupun bootstrap (dan jangan lupa style.css yang kita buat tadi).

Keempat, mulai coding tema

Untuk membuat tema yang kita buat benar-benar me-load semua aset css atau js, wordpress memiliki cara tersendiri. Sebenarnya kita dapat saja menuliskan kode berikut:

>/css/normalize.css">

atau

>/js/vendor/modernizr-2.6.2.min.js"></script>

(4)

tapi ini bukanlah cara yang diajarkan WordPress kepada kita. Untuk me-load script, wordpress memiliki fungsi bernama wp_enqueue_script(). Untuk itu, buatlah file bernama functions.php (ingat ‘s’). Kemudian isi tuliskan kode PHP berikut:

/*

* Add header script in tag <head>

* written by Yusuf Syaifudin <[email protected]>

*/

function header_scripts() {

wp_register_style('normalize', get_template_directory_uri() . '/css/normalize.css', '', '1.1.3');

wp_register_style('main', get_template_directory_uri() . '/css/main.css', '', '4.3.0');

wp_register_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css', '', '3.3.0');

wp_register_style('bootstrap-theme', get_template_directory_uri() . '/css/bootstrap-theme.min.css', '', '3.3.0');

wp_register_style('style', get_template_directory_uri() . '/style.css', '', '1.0.0');

wp_enqueue_style(array('normalize', 'main', 'bootstrap', 'bootstrap-theme', 'style'));

// modernizr

wp_register_script('modernizr', get_template_directory_uri() . '/js/vendor/modernizr-2.6.2.min.js');

wp_enqueue_script(array('modernizr'));

}

add_action( 'wp_enqueue_scripts', 'header_scripts' );

/*

* Add footer script before </body>

* written by Yusuf Syaifudin <[email protected]>

*/

function footer_scripts() {

// true in 5th parameter is to force script print in bottom wp_register_script('jquery-cdn',

'//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', '', '1.10.2', true);

wp_register_script('bootstrap-script', get_template_directory_uri() . '/js/bootstrap.min.js', '', '3.3.0', true);

wp_register_script('plugins-script', get_template_directory_uri() . '/js/plugins.js', '', '0', true);

wp_register_script('main-script', get_template_directory_uri() . '/js/main.js', '', '0', true);

wp_enqueue_script(array('jquery-cdn', 'bootstrap-script', 'plugins-script', 'main- script'));

}

add_action( 'wp_enqueue_scripts', 'footer_scripts' );

Lalu hapus tag <link> dan <script> yang ada di antara <head> menjadi

<?php wp_header(); ?>

(5)

dan semua <script> atau <style> (jika ada) sebelum tag penutup </body> menjadi

<?php wp_footer(); ?>

Kelima, templating

Anda sudah me-load segala aset, Anda bisa saja mulai menulis kode HTML dan mulai mendesain blog Anda, tapi saya yakin ini akan memusingkan Anda kedepannya. Maka, saya akan mengajarkan kepada Anda bagaimana membuat template berjalan lebih rapi.

Sekarang buatlah file header.php dan pindahkan kode dari <!doctype html> hingga <body>

ke file ini

<?php /**

* The Header template for our theme *

* Displays all of the <head> section and everything up till <body>

*

* @package WordPress */

?>

<!DOCTYPE html>

<html class="no-js">

<head>

<?php wp_head(); ?>

</head>

<body>

<!--[if lt IE 7]>

<p class="browsehappy">You are using an <strong>outdated</strong> browser.

Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>

<![endif]-->

dan pindahkan dari </body> sampai </html> ke footer.php:

<?php /**

* The template for displaying the footer *

* Contains footer content and all scripts in footer.

*

(6)

wp_footer(); ?>

(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=

function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;

e=o.createElement(i);r=o.getElementsByTagName(i)[0];

e.src='//www.google-analytics.com/analytics.js';

r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));

ga('create','UA-XXXXX-X');ga('send','pageview');

</script>

</body>

</html>

Maka, di file index.php hanya tinggal kode berikut:

<p>Hello world! This is HTML5 Boilerplate.</p>

Hapus saja kode itu, lalu ganti dengan memanggil kode berikut:

<?php get_header(); ?>

<?php get_footer(); ?>

Yap, sekarang kita benar-benar bisa mendesain halaman blog/web kita.

Keenam, membuat navigasi

Sekarang mulai dengan membuat navigasi. Lagi-lagi agar kita lebih terstruktur, maka saya menyarankan Anda membuat file navigation.php yang berisi navigasi Anda, lalu panggil fungsi berikut diantara get_header() dan get_footer().

<?php get_template_part( 'navigation' ); ?>

Dan berikut ialah isi dari navigation.php:

<?php /**

* The navigation template file *

?>

(7)

<span class="sr-only">Toggle navigation</span>

</button>

<a class="navbar-brand" href="<?php echo site_url(); ?

>"><?php echo bloginfo('name'); ?></a>

</div>

<?php foreach (getMenu() as $menu) : ?>

<li><a href="<?php echo $menu['url']; ?

>" class="item"><?php echo $menu['title']; ?></a></li>

<?php endforeach; ?>

</ul>

</div>

</div>

</nav>

Disini saya memanggil fungsi yang tidak standar dari wordpress, saya menambahkan fungsi sendiri, untuk itu tambahkan kode berikut di file functions.php:

/*

* Add custom menu feature */

function register_menu() {

register_nav_menu( 'primary', 'Primary Menu' );

}

add_action('init', 'register_menu');

/**

* Get List page using $wpdb

* Written by Yusuf Syaifudin <[email protected]>

* Written at Saturday, November 8, 2014 2:25AM */

function getPages($post_type = 'page' ) {

global $wpdb;

$where = get_posts_by_author_sql( $post_type, true );

$pages = $wpdb->get_results( "SELECT ID, post_title FROM $wpdb->posts $where" );

foreach ($pages as $p) { $response[] = array(

'id' => $p->ID,

'title' => $p->post_title,

'url' => get_site_url() . '?page_id=' . $p->ID

);

}

return $response;

}

(8)

/**

* Get all menu object as array * fallback to getPages()

* Written by Yusuf Syaifudin <[email protected]>

* Written at Saturday, November 8, 2014 14:05PM *

* --- * usage:

* <?php foreach (getMenu() as $menu) : ?>

* <a href="<?php echo $menu['url']; ?>" class="item"><?php echo $menu['title']; ?

></a>

* <?php endforeach; ?>

* */

function getMenu() {

$menu_name = 'primary';

if ( ( $locations = get_nav_menu_locations() ) &&

isset( $locations[ $menu_name ] ) ) {

$menu = wp_get_nav_menu_object( $locations[ $menu_name ] );

$menu_items = wp_get_nav_menu_items($menu->term_id);

if ($menu_items == false) { return getPages();

}

foreach ( (array) $menu_items as $key => $menu_item ) {

$menu_list[] = array(

'id' => $menu_item->ID, 'title' => $menu_item->title, 'url' => $menu_item->url );

} } else {

$menu_list = getPages();

}

// $menu_list now ready to output return $menu_list;

}

Ketujuh, membuat pesan selamat datang

Kita akan membuat jumbotron bawaan bootstrap 3 yang akan muncul hanya pada halaman awal saja, namun ketika sedang membaca tulisan pesan tersebut hilang dan hanya full page article. Untuk itu pada index.php tambahkan kode berikut:

<?php get_template_part( 'greetings' ); ?>

lalu buatlah file greetings.php berisi:

if ( is_front_page() && is_home() ): ?>

(9)

<h1>Hello, world!</h1>

<p>This is my great Website</p>

</div>

<?php endif; ?>

Kedelapan, membuat daftar post

Sekarang, kita akan menampilkan seluruh post yang ada di database wordpress. Caranya di file index.php kita akan me-looping content dari database. Berikut ialah isi file index.php secara lengkap:

<?php /**

* The main template file *

* @link http://codex.wordpress.org/Template_Hierarchy *

get_header(); ?>

<?php get_template_part( 'greetings' ); ?>

<?php if ( have_posts() ) : ?>

<?php while ( have_posts() ) : the_post(); ?>

<?php echo the_excerpt(); ?>

<br>

<a href="<?php echo the_permalink(); ?>" class="btn btn-primary">baca selengkapnya</a>

</div>

<hr>

<?php endwhile; ?>

<?php else : ?>

Sorry, no posts were found </div>

<?php endif; ?>

(10)

</div>

disitu terdapat perulangan (looping) dimana selama wordpress memiliki post untuk ditampilkan, ia akan menampilkannya untuk kita.

Kesembilan, membuat halaman baca

Kita sudah berhasil menampilkan seluruh tulisan, namun ketika kita klik baca selengkapnya, tulisanpun hanya akan menjadi satu dan textnya tetap terpotong (karena kita hanya

memanggil potongan tulisan saja dengan fungsi the_excerpt();). Untuk itu buatlah halaman baca dengan membuat file single.php dan page.php yang isinya ialah kode sebagai berikut:

<?php /**

* The Template for displaying all single posts *

get_header(); ?>

<?php if ( have_posts() ) : ?>

<?php while ( have_posts() ) : the_post(); ?>

<hr>

<?php echo the_content(); ?>

</div>

<?php endwhile; ?>

</div>

<?php endif; ?>

Kesepuluh, pelajari lebih jauh

Kita sudah memiliki halaman blog yang sangat-sangat sederhana. Kini kita perlu

meningkatkan skill membuat tema wordpress kita. Link referensi untuk mengetahui fungsi-

fungsi wordpress ialah

(11)

Membuat Tema WordPress Sederhana