Membuat Custom Theme di WordPress Dengan Bootstrap

Tutorial ini merupakan penjelasan singkat untuk membuat custom theme baru menggunakan framework CSS Bootstrap yang dapat digunakan pada WordPress.

Penjelasan di guide ini merupakan ringkasan singkat yang diambil dari Theme Development di codex WordPress. Developer disarankan untuk membaca codex tersebut secara lebih lengkap untuk mengetahui secara lebih mendalam struktur theme yang ada di WordPress.

1. Download Bootstrap

Link untuk download framework Bootstrap: http://getbootstrap.com/

download_bootstrap

 

Gunakan opsi pertama yaitu Download Bootstrap untuk mendownload source code yang sudah siap untuk langsung digunakan. Extract file tersebut, di dalamnya akan terdapat tiga folder yaitu css, fonts dan js.

2. Buat Folder Theme

Buat folder baru dengan nama theme yang ingin digunakan, untuk contoh ini nama yang digunakan adalah asclar.

Dari framework Bootstrap yang kita download sebelumnya, pindahkan isinya (css, fonts, js) ke dalam folder yang baru saja kita buat. Untuk folder css, yang dibutuhkan hanyalah file bootstrap.min.css dan bootstrap-theme.min.css. Untuk folder js, file yang dibutuhkan hanyalah boostrap.min.js. Buat folder baru yaitu img untuk menampung gambar yang mungkin kita gunakan di theme.

Untuk pembuatan theme baru, secara minimal yang diperlukan oleh WordPress hanya dua file yaitu style.css dan index.php.

style.css

File ini digunakan untuk menampung CSS utama yang digunakan oleh theme. Pada bagian paling atas dari file, masukan code sebagai berikut:

/*
	Theme Name: Asclar
	Theme URI: http://asclar.co.id
	Description: A starter theme for WordPress using Bootstrap framework
	Author: Asclar
	Author URI: http://asclar.co.id
	Version: 0.1
*/

WordPress akan membaca code tersebut secara valid untuk menentukan jenis theme yang digunakan oleh sistem dan ditampilkan dalam menu Appearance > Theme di backend.

index.php

WordPress menggunakan berbagai macam file untuk mengolah dan menampilkan data di website. File yang digunakan oleh website secara umum disebut dengan istilah page templates.

Untuk setiap fungsi yang dijalankan, WordPress akan mencoba mencari page template yang sesuai. Jika ditemukan, maka page template tersebut akan digunakan untuk menampilkan data. Jika tidak ditemukan, maka WordPress akan menggunakan index.php untuk semua fungsi yang tidak mempunyai page template yang sesuai. Berikut gambaran hierarki dari seluruh page templates yang ada di WordPress:

wp-template-hierarchy

Dapat dilihat di bagian paling kanan adalah index.php sebagai file dasar jika file di depannya tidak ditemukan dalam theme. Secara paling dasar, code yang diperlukan untuk ada di file index.php adalah sebagai berikut:

<?php get_header(); ?>

<?php if ( have_posts() ) { ?>
	<?php while ( have_posts() ) { the_post(); ?>
		<div class="section">
			<div class="jumbotron">
				<div class="container text-center">
					<h2><strong><?php the_title(); ?></strong></h2>
				</div>
			</div>
		</div>
		<div class="section">
			<div class="container">
				<?php the_content(); ?>
				<?php edit_post_link( 'Edit', '<p><span class="edit-link">', '</span></p>' ); ?>
			</div>
		</div>
	<?php } ?>
<?php } else { ?>
	<div class="section">
		<div class="jumbotron">
			<div class="container text-center">
				<h2><strong>404</strong></h2>
			</div>
		</div>
	</div>
	<div class="section">
		<?php _e('Sorry, currently there are no posts to show.'); ?>
	</div>
<?php } ?>

</section>

<?php get_footer(); ?>

Beberapa code yang digunakan seperti the_title() dan the_content() adalah fungsi khusus yang telah disiapkan oleh WordPress guna mempermudah developer dalam menampilkan informasi yang sesuai. Daftar lengkap fungsi yang dapat digunakan bisa dilihat di Template Tags yang ada di codex.

Untuk mengurangi adanya pengulangan code, terdapat fungsi get_header() dan juga get_footer() yang terdapat di bagian atas dan bawah file.

Tujuan dari kedua fungsi ini hanyalah memanggil file header.php dan footer.php. Jika kedua file tersebut tidak terdapat di theme maka WordPress akan menggunakan file default yang sudah ada di sistem. Sebaiknya kita membuat kedua file tersebut untuk melengkapi theme dasar kita.

header.php

Gunakan code sebagai berikut:

<!DOCTYPE html>
<!--[if lte IE 9 ]><html class="ie lt-ie9" <?php language_attributes(); ?>> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html <?php language_attributes(); ?>> <!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="description" content="<?php bloginfo( 'description' ); ?>">
<meta name="author" content="">
<title><?php bloginfo('name'); ?><?php wp_title( '|', true, 'left' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico" />
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/bootstrap.min.css" />
<script src="<?php echo get_template_directory_uri(); ?>/js/bootstrap.min.js"></script>
<?php wp_head(); ?>
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body <?php body_class(); ?>>

Code berikut merupakan standar HTML header untuk pengembangan website dengan menggunakan beberapa fungsi dari WordPress.

footer.php

Untuk footer.php, gunakan code sebagai berikut sebagai penutup dari halaman HTML:

<?php wp_footer(); ?>
</body>
</html>

3. Upload Theme

Strukur akhir dari folder theme yang baru saja dibuat adalah:

  • asclar
    • css
      • bootstrap.css
      • bootstrap-theme.css
    • fonts
      • glyphicons-halflings-regular.eot
      • glyphicons-halflings-regular.svg
      • glyphicons-halflings-regular.ttf
      • glyphicons-halflings-regular.woff
    • js
      • bootstrap.min.js
    • img
    • style.css
    • index.php
    • header.php
    • footer.php

Folder theme telah siap untuk digunakan. Ada dua cara untuk mengupload theme ke WordPress:

Melalui backend admin

Untuk menggunakan cara ini, kita akan mengupload theme menggunakan backend admin dari WordPress. Caranya adalah dengan meng-compress folder tersebut ke dalam format .zip, sehingga hasilnya menjadi arctabyte.zip. Login ke backend WordPress sebagai admin, lalu navigasi ke menu Appearance > Themes > Add New > Upload Theme. Pilih lokasi file theme yang sudah di compress lalu setelah berhasil maka theme kita akan muncul dan bisa di activate untuk digunakan oleh website.

Upload file ke folder WordPress

Cara kedua adalah dengan mengupload seluruh folder theme (tidak di compress) dan memindahkannya ke dalam WordPress.

Lokasi yang tepat untuk meletakkan folder theme adalah di: wordpress/wp-content/themes/

Setelah dicopy, login ke backend sebagai admin lalu navigasi ke menu Appearance > Themes. Theme yang kita buat akan muncul dan bisa di activate untuk digunakan oleh website.


Notice: WP_Query was called with an argument that is deprecated since version 3.1.0! "caller_get_posts" is deprecated. Use "ignore_sticky_posts" instead. in /home/asclarco/public_html/wp-includes/functions.php on line 4022

Related Posts: