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...

Membuat Themes Wordpress sendiri - Part 1

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 ) 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. header.php // File ini untuk membuat section header pada website
  2. index.php // File ini untuk mennyisipkan section-section yang kita buat
  3. footer.php // File ini untuk membuat section footer pada website
  4. sidebar.php // File ini untuk membuat section sidebar pada website
  5. 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 </div> <!-- #header END -->

Footer.php

Sekarang kita akan membuat footer.

Ketikan kode 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 membuat bagian sidebar pada website

Ketikan kode berikut : 

<div id="sidebar">
    Sidebar
</div>
<!-- #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>
</div> <?php endwhile; else: ?> <p> <?php _e('Maaf posting tidak tersedia'); ?></p> <?php endif; ?> </div>
<div class="clear"></div> <?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>
</div> <?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>
            </div>
            <!-- #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  


About Author

asep saepulloh

Kode itu alat perang, bung! :D


Comment & Discussions

  • Cecep Yusuf
    sep untuk gambarnya pake attribut aja sep manual di sourcenya: style="width: 100%"

    • asep saepulloh

      udah kang. oh iya usul nih kang. buat gambarnya klo diklik model popup gitu kang :D


    • Cecep Yusuf

      Wah ide yg bagus.. boleh tuh sep :)
      siap nanti dibuat popup kayaknya bagus


    • Cecep Yusuf

      Sep itu di atas gambarnya gepeng ya? Apa emang sy liat pake hp ya? :D


  • Andrian Tashi
    ijin mantau tutorialnya

  • Please LOGIN before if you want to give the comment.