Bagaimana Cara Membuat Theme WordPress

Ingin membuat theme wordpress? Anda berada di tempat yang tepat karena saya akan menjelaskannya kepada Anda bagaimana saya membuatnya. Di sini Anda akan belajar dasar cara membuat theme WordPress, keamanan, loop dan dasar-dasar coding lainnya.

Seperti yang Anda ketahui, sebelumnya saya menggunakan Genesis Framework di blog ini. Kemudian karena theme buatan saya sendiri sudah jadi, maka saya beralih menggunakannya. Karena saya senang memakai karya sendiri.

Sungguh, perubahan theme ini bukan karena Genesis tidak bagus tetapi saya ingin memakai theme buatan sendiri. Saya masih menggunakan Genesis di blog saya yang lain.

Resourses yang Anda butuhkan:

Underscores atau _s
Bootstrap

Dari Starter Theme Ke Theme yang Bagus!

Oke, underscore adalah theme starter. Jadi itu bukan benar-benar theme sehingga Anda tidak disarankan menggunakannya sebagai theme untuk blog yang aktif. Meski pun Anda bisa menginstallnya.

Berikut penjelasan _s di situs mereka sendiri:

Hi. I’m a starter theme called _s, or underscores, if you like. I’m a theme meant for hacking so don’t use me as a Parent Theme. Instead try turning me into the next, most awesome, WordPress theme out there. That’s what I’m here for.

My ultra-minimal CSS might make me look like theme tartare but that means less stuff to get in your way when you’re designing your awesome theme. Here are some of the other more interesting things you’ll find here …

Hal pertama yang saya lakukan adalah meloading CSS dan JS dari Bootstrap. Jangan meloading file-file tersebut secara langsung menambahkannya di file header.php. Tetapi Anda disarankan memakai function yang ada, karena itu merupakan cara teraman.

wp_enqueue_style( $handle, $src, $deps, $ver, $media );wp_enqueue_style( $handle );wp_register_script( $handle, $src, $deps, $ver, $in_footer );wp_enqueue_script( $handle );

Penjelasan:
$handle : nama dari style atau scripts. Harus unik
$src : lokasi URI file.
$depts : optional. array dari nama $handle yang harus diloading sebelum file ini.
$ver : versi scrtips
$media : string style, contoh all, print dll.

Pertama masukkan file bootstrap Anda _s. Dan buat folder baru dengan nama css, masukkan css bootstrap di situ. Karena di _s sudah ada file js, masukkan saja file js bootstrap di situ. Anda bisa memilih versi minimalize(compress).

Sekarang kita loading file tersebut dengan mengubah functions enqueue underscore. Kita akan memisah enqueue style dan scripts di dua fungsi berbeda. Meski pun bisa langsung dari satu fungsi seperti yang digunakan _s. Alasannya untuk mengorganisir functions kita.

/*** get_template_directori_uri = URI dari theme kita* get_stylesheet_directory_uri() = URI child theme* theme style, menggunakan fungsi get_stylesheet_directory_uri() agar style dari child theme terloading* secara otomatis jika ada child theme yang aktif untuk theme kita. Jika tidak ada maka style.css kita* yang akan aktif*/
function syaiful_add_theme_stylesheets() {
// bootstrapwp_register_style( ‘bootstrap’, get_template_directory_uri() . ‘/css/bootstrap.css’ );wp_enqueue_style( ‘bootstrap’ );
// bootstrap-responsivewp_register_style( ‘bootstrap-responsive’, get_template_directory_uri() . ‘/css/bootstrap-responsive.css’ );wp_enqueue_style( ‘bootstrap-responsive’ );
wp_register_style( ‘syaiful-themes’, get_stylesheet_directory_uri() . ‘/style.css’ );wp_enqueue_style( ‘syaiful-themes’ );
} // end add_theme_stylesheetsadd_action( ‘wp_enqueue_scripts’, ‘syaiful_add_theme_stylesheets’ );

Klik save. Sekarang File-file css itu akan terloading secara otomatis. Untuk melihatnya, Anda tinggak klik kanan kemudian view source code.

Sekarang mari loading js yang kita butuhkan.

/*** Imports all theme scripts and dependencies required for managing the behavior of the theme.*/function syaiful_add_theme_scripts() {
// jquerywp_enqueue_script( ‘jquery’ );
// bootstrapwp_register_script( ‘bootstrap’, get_template_directory_uri() . ‘/js/bootstrap.js’, array( ‘jquery’ ) );wp_enqueue_script( ‘bootstrap’ );
if ( is_singular() && comments_open() && get_option( ‘thread_comments’ ) )wp_enqueue_script( ‘comment-reply’ );
} // end add_theme_scripts
add_action( ‘wp_enqueue_scripts’, ‘syaiful_add_theme_scripts’ );

Klik save. Sejak css dan js itu terloading. Kita bisa menggunakan scaffolding dari Bootstrap. Berikut contoh yang bisa ada gunakan.

<div id=”wrapper”><div class=”container”><div class=”row”><div id=”primary” class=”span8″><div id=”content” role=”main”>…………………your code here.
</div></div></div></div></div>

Membuat Functions:

Saya memiliki ekspektasi theme yang saya buat memiliki fitur post format, jadi saya menambahkan function ini:

add_theme_support( ‘post-formats’, array(‘aside’,‘chat’,‘link’,‘audio’,‘gallery’,‘status’,‘quote’,‘image’,‘video’,) );

Kemudian Anda bisa mendesain struktur post masing-masing. Biasanya developer membuat file yang diberi nama content.php, content-aside.php, content-link.php dll. Kemudian agar loop kita terintregrasi dengan format yang telah kita buat di file content-aside.php, content-image.php dll, maka kita harus menggunakan trik sederhana. Berikut contoh loop yang bisa Anda pakai di single.php dan index.php

<?php if ( have_posts() ) : ?>
<?php /* The loop */ ?><?php while ( have_posts() ) : the_post(); ?><?php get_template_part( ‘content’, get_post_format() ); ?><?php endwhile; ?>
<?php get_template_part( ‘pagination’ ); ?>
<?php else : ?><?php get_template_part( ‘content’, ‘none’ ); ?><?php endif; ?>

Yup kita memakai get_template_part( ‘content’, get_post_format() );. Karena nama file kita content-$format.php. Anda juga bisa memberi nama loop-$fomat.php jadi untuk format video, kita memberi nama file itu loop-video.php. Kemudian kita memanggilnya dengan get_template_part( ‘loop’, get_post_format() );.

Keamanan:

Perhatikan security di theme Anda. Selalu validasi data. Untuk memasukkan url, semisal link credit di footer anda harus menggunakan esc_url( $url ). Berikut contoh search form yang saya buat yang berbasis bootstrap, dan menjaganya agar tetap mengikuti sistem security WordPress.

<form>……<input id=”s” class=”span2 search-query” type=”search” name=”s” placeholder=”<?php echo esc_attr_x( ‘Search’, ‘placeholder’, ‘syaiful’ ); ?>”><form>

Di atas saya menggunakan fungsi esc_attr_x()