Membuat Themes WordPress Sendiri – Part 1

Halo sobat jaco. Kali ini saya akan membahas bagaimana caranya menciptakan themes sendiri di CMS WordPress. Terkadang sobat jaco muak dengan themes-themes yang berbayar (khususnya sayaMembuat Themes Wordpress Sendiri - Part 1  ) padahal designnya gitu doang tapi dijualnya muahal..*curhat 

Oke beranjak dari kemuakan itulah saya ingin mengembangkan pada sobat jaco, bagaimana cara menciptakan themes sendiri di wordpress. Bahkan nanti sanggup kita jual di themeforest atau web2 lain 😀 menguntungkan bukan?

Oke pribadi kita mulai, pastikan sudah terinstallnya wordpress pada local anda bila belum terinstall silahkan ikuti tutorial sebelumnya disini. Hal yang pertama kita lakukan yaitu buatlah folder gres pada folder “jagowordpress/wp-content/themes/namaThemes” disini saya memperlihatkan nama foldernya yaitu “jagocoding” . Setelah itu buatlah file berikut :

  1. header.php // File ini untuk menciptakan section header pada website
  2. index.php // File ini untuk mennyisipkan section-section yang kita buat
  3. footer.php // File ini untuk menciptakan section footer pada website
  4. sidebar.php // File ini untuk menciptakan section sidebar pada website
  5. style.css // File ini untuk memperlihatkan style pada website

Nah, tahap ke satu.

Header.php

Sekarang kita akan menciptakan header pada website kita.

Ketikan instruksi berikut : 

<!DOCTYPE html><html lang="en"><head><title>Jagocoding</title>  </head><body>
<div id="container"><div id="header">Header</div><!-- #header END -->

Footer.php

Sekarang kita akan menciptakan footer.

Ketikan instruksi berikut :

<div id="footer">Copyright &copy; 2014 | <a href="http://www.jagocoding.com/">Jagocoding.com</a></div><!-- #footer END -->
</div>
<!-- #Container END --></body></html>

Sidebar.php

Sekarang kita menciptakan bab sidebar pada website

Ketikan instruksi berikut : 

<div id="sidebar">Sidebar</div><!-- #sidebar END -->

Index.php

Nah, kini kita akan menyisipkan section-section yang telah kita buat tadi dalam satu file, yaitu index.php (Main page)

Ketikan instruksi 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>
</div><?php endwhile; else: ?><p><?php _e('Maaf posting tidak tersedia'); ?></p><?php endif; ?></div>
<div class="clear"></div><?php get_footer(); ?>

Oke, kini 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 sanggup kita berikan apa saja, tetapi dihentikan memakai spasi. pola : get_header(‘member’); . Nah, secara otomatis function tersebut akan mencari nama file header-member.php. Ini sanggup kau gunakan untuk menciptakan halaman frontend yang dinamis. 

Selanjutnya.

<?php get_sidebar();?>

Sama halnya dengan function get_header() yang mempunyai optional parameter, function ini lebih diperuntukan untuk bab sidebar, nanti pada bab ini kita akan menciptakan arsip berita, widget dll.

Oke. selanjutnya 

<?php get_footer(); ?>

Sepertinya anda sudah tau ini untuk apa. Ya bener banget ini buat ambil hati gebetan kau sekarang! *hus! ngawur . Hehehe

Ini buat menyisipkan file footer.php . Yaps betul. get_footer() ini mempunyai optional parameter sama dengan get_header() dan get_sidebar().

Oke di function ini mungkin sahabar jaco gak pusing yah. sepakat kita lanjut ke klarifikasi 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>
</div><?php endwhile; else: ?><p><?php _e('Maaf posting tidak tersedia'); ?></p><?php endif; ?>

Oke. kini 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 menciptakan file css terlebih dahulu. Buka file style.css yang kau buat tadi.

Style.css

Masukan instruksi berikut : 

/*Theme Name: JagocodingTheme URI: jagocoding.comAuthor: Code4WarAuthor URI: code4war.comDescription: Simple clean websiteVersion: 0.1License: GNU General Public License v2 or laterLicense URI: gnu.org/licenses/gpl-2.0.htmlText Domain: Jagocoding*/

Lalu silahkan refresh halaman tadi 

Sahabar jaco akan melihat tampilan dan themes gres buatan kita sendiri 😀 Horeee!! 

Membuat Themes Wordpress Sendiri - Part 1

Loh kog gak ada gambarnya? Oke. itu akan kita bahas nanti. Sekarang kita masuk ke CSSnya terlebih dahulu ya sobat jacoMembuat Themes Wordpress Sendiri - Part 1

Untuk style silahkan gunakan kreatifitas kamu, dalam tutorial ini. Saya akan menciptakan layout simple dan silahkan kembangkan kembali berdasarkan selera kalian. 😀

 

/*Theme Name: JagocodingTheme URI: jagocoding.comAuthor: Code4WarAuthor URI: code4war.com/Description: Simple clean websiteVersion: 0.1License: GNU General Public License v2 or laterLicense URI: gnu.org/licenses/gpl-2.0.htmlText 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 kini bagaimana cara menyisipkan style.css di head tag?

sekarang coba rubah file header.php kau menjadi menyerupai 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></div><!-- #header END -->

Sekarang kita akan menciptakan screenshoot untuk themes kita pada halaman admin. Buatlah gambar dengan ukuran 880×660 pixel dengan extensi *.Jpg atau *.Png. Lalu simpan pada folder themes anda , yaitu dalam folder jagocoding.

BOOM!!!

Sekarang kau sudah berhasil menciptakan halaman utama dari themes kita sendiriMembuat Themes Wordpress Sendiri - Part 1  . Gimana gampang bukan?

Tutorial selanjutnya, kita akan membahas melebih dalam lagi wacana menciptakan 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 😀