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 :

Sidebar.php Sekarang kita membuat bagian sidebar pada website Ketikan kode berikut :

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 : Oke, sekarang saya jelaskan sedikit tentang function-function pada Wordpress .

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. 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 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. :
endwhile; else: ?>

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 :