Membuat Themes Wordpress sendiri - Part 1 Oleh: asep saepulloh Halo sahabat jaco. Kali ini saya akan membahas bagaimana caranya membuat themes sendiri di CMS Wordpress. Terkadang sahabat jaco muak dengan themes-themes yang berbayar (khususnya saya :p ) padahal designnya gitu doang tapi dijualnya muahal..*curhat Oke beranjak dari kemuakan itulah saya ingin ber... Halo sahabat jaco. Kali ini saya akan membahas bagaimana caranya membuat themes sendiri di CMS Wordpress. Terkadang sahabat jaco muak dengan themes-themes yang berbayar (khususnya saya :p ) padahal designnya gitu doang tapi dijualnya muahal..*curhat Oke beranjak dari kemuakan itulah saya ingin berbagi pada sahabat jaco, bagaimana cara membuat themes sendiri di wordpress. Bahkan nanti bisa kita jual di themeforest atau web2 lain :D menguntungkan bukan? Oke langsung kita mulai, pastikan sudah terinstallnya wordpress pada local anda jika belum terinstall silahkan ikuti tutorial sebelumnya disini. Hal yang pertama kita lakukan adalah buatlah folder baru pada folder "jagowordpress/wp-content/themes/namathemes" disini saya memberikan nama foldernya yaitu "jagocoding". Setelah itu buatlah file berikut : 1. 2. 3. 4. 5. header.php // File ini untuk membuat section header pada website index.php // File ini untuk mennyisipkan section-section yang kita buat footer.php // File ini untuk membuat section footer pada website sidebar.php // File ini untuk membuat section sidebar pada website style.css // File ini untuk memberikan style pada website Nah, tahap ke satu. Header.php Sekarang kita akan membuat header pada website kita. Ketikan kode berikut : <!DOCTYPE html> <html lang="en"> <head> <title>jagocoding</title> </head> <body> <div id="container"> <div id="header"> Header
<!-- #header END --> Footer.php Sekarang kita akan membuat footer. Ketikan kode berikut : <div id="footer"> Copyright 2014 <a href="http://www.jagocoding.com/">jagocoding.com</a> <!-- #footer END --> <!-- #Container END --> </body> </html> Sidebar.php Sekarang kita membuat bagian sidebar pada website Ketikan kode berikut : <div id="sidebar"> Sidebar <!-- #sidebar END --> Index.php Nah, sekarang kita akan menyisipkan section-section yang telah kita buat tadi dalam satu file, yaitu index.php (Main page) Ketikan kode berikut : <?php get_header();?> <?php get_sidebar();?> <div id="content"> <?php if (have_posts()) : while (have_posts()) : the_post();?> <div class="list-posting"> <h1><?php the_title();?></h1> <h4>posted on <?php the_time('f js, Y')?></h4> <p><?php the_content( ('(more...)'));?></p> <?php endwhile; else:?>
<p> <?php _e('maaf posting tidak tersedia');?></p> <?php endif;?> <div class="clear"> <?php get_footer();?> Oke, sekarang saya jelaskan sedikit tentang function-function pada Wordpress. <?php get_header();?> Menyisipkan file header.php pada file index.php (main page). Nah dalam function get_header terdapar satu parameter optional, yaitu name. Name disini bisa kita berikan apa saja, tetapi tidak boleh menggunakan spasi. contoh : get_header('member');. Nah, secara otomatis function tersebut akan mencari nama file header-member.php. Ini bisa kamu gunakan untuk membuat halaman frontend yang dinamis. Selanjutnya. <?php get_sidebar();?> Sama halnya dengan function get_header() yang memiliki optional parameter, function ini lebih diperuntukan untuk bagian sidebar, nanti pada bagian ini kita akan membuat arsip berita, widget dll. Oke. selanjutnya <?php get_footer();?> Sepertinya anda sudah tau ini untuk apa. Ya bener banget ini buat ambil hati gebetan kamu sekarang! *hus! ngawur. Hehehe Ini buat menyisipkan file footer.php. Yaps betul. get_footer() ini memiliki optional parameter sama dengan get_header() dan get_sidebar(). Oke di function ini mungkin sahabar jaco gak pusing yah. oke kita lanjut ke penjelasan berikutnya. : <?php if (have_posts()) : // Cek apakah terdapat posting while (have_posts()) : // Jika ada, lakukan looping data the_post(); // Retrieves data pada proses looping?> <div class="list-posting"> <h1><?php the_title(); // Mencetak judul posting?></h1> <h4>posted on <?php the_time('f js, Y'); // Membuat Tanggal posting?></h4> <p><?php the_content( ('(more...)')); // Menampilkan cuplikan/headline posting?></p> <?php
endwhile; else:?> <p> <?php _e('maaf posting tidak tersedia');?></p> <?php endif;?> Oke. sekarang bagaimana caranya kita mengaktifkan themes buatan kita? Saat kita membuka menu Appearance > Themes kita tidak melihat nama Themes yang kita buat. Untuk itu kita harus membuat file css terlebih dahulu. Buka file style.css yang kamu buat tadi. Style.css Masukan kode berikut : /* Theme Name: Jagocoding Theme URI: jagocoding.com Author: Code4War Author URI: code4war.com Description: Simple clean website Version: 0.1 License: GNU General Public License v2 or later License URI: gnu.org/licenses/gpl-2.0.html Text Domain: Jagocoding */ Lalu silahkan refresh halaman tadi Sahabar jaco akan melihat tampilan dan themes baru buatan kita sendiri :D Horeee!! Loh kog gak ada gambarnya? Oke. itu akan kita bahas nanti. Sekarang kita masuk ke CSSnya terlebih dahulu ya sahabat jaco :) Untuk style silahkan gunakan kreatifitas kamu, dalam tutorial ini. Saya akan membuat layout simple dan silahkan kembangkan kembali menurut selera kalian. :D /* Theme Name: Jagocoding Theme URI: jagocoding.com Author: Code4War Author URI: code4war.com/ Description: Simple clean website Version: 0.1 License: GNU General Public License v2 or later License URI: gnu.org/licenses/gpl-2.0.html
Text Domain: Jagocoding */.clear{ clear:both; body{ font-family: 'Open Sans', sans-serif; padding:0px; margin:0px; background: #EEE; #container{ background: #FFF; width: 1000px; margin: 0px auto; height: 100%; #header{ height: 140px; background: #1A4574; #header h1{ margin:0px; padding:0px; color:#fff; position:relative; left:20px; top:30px; #header.red{ background: #C10A1D; padding:5px; #header.blue{ background: #1C67B8; padding:5px; #sidebar{ width: 180px; padding:10px; float: left; #content{ width: 780px; float: left; padding:10px; #content.list-posting{ font-size:12px; border-bottom: 1px solid #CCC; margin-bottom: 10px;
#content.list-posting h1{ font-size:22px; #footer{ background: #333; color:#fff; font-size: 12px; text-align: center; padding:10px; #footer a{ color:#fff; Nah sekarang bagaimana cara menyisipkan style.css di head tag? sekarang coba rubah file header.php kamu menjadi seperti ini : <!DOCTYPE html> <html lang="en"> <head> <title><?php bloginfo('title'); // Mengambil informasi blog kamu, yaitu title?></title> <link href='http://fonts.googleapis.com/css?family=open+sans' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); // Menyisipkan file style.css?>"> </head> <body> <div id="container"> <div id="header"> <h1><span class="red">jago</span><span class="blue">coding</span></h1> <!-- #header END --> Sekarang kita akan membuat screenshoot untuk themes kita pada halaman admin. Buatlah gambar dengan ukuran 880x660 pixel dengan extensi *.Jpg atau *.Png. Lalu simpan pada folder themes anda, yaitu dalam folder jagocoding. BOOM!!! Sekarang kamu sudah berhasil membuat halaman utama dari themes kita sendiri :). Gimana mudah bukan? Tutorial selanjutnya, kita akan membahas melebih dalam lagi tentang membuat themes yang lebih
optimal :D. So, pantengin aja terus timeline saya yah :D. Oh iya klo ada pertanyaan silahkan isi komentar di bawah ini yah :D Tentang Penulis asep saepulloh Kode itu alat perang, bung! :D