--> Skip to main content
Home Blog Wordpress Cara Membuat Themes Wordpress Sendiri

Cara Membuat Themes Wordpress Sendiri

Setelah browsing kesana kemari di internet, akhirnya nemu juga yang sharing cara Cara Membuat Themes Wordpress Sendiri. Tutorial yang dibuat oleh kang Asep Saepullah ini ada di situs jagoancoding.com, kalo saya tulis ulang disini biar bisa jadi catatan saya sendiri biar gak lupa.hehehe. Kan sesuai dengan judulnya, yaitu catatanku. 


Oke langsung saja sobat, untuk membuat theme wordpress sendiri yang perlu dipersiapkan adalah instal wordpress di localhost. Jika belum punya installer wordpress, bisa langsung saja klik di wordpress.org. Jika belum punya server, bisa menggunakan xampp atau yang sejenisnya.
CARA BUAT THEMES WORDPRESS SENDIRI

Pertama yaitu dengan membuat folder baru pada folder "wordpressmu/wp-content/themes/namaThemes", tentu saja di folder htdocs ya.. Disini saya memberikan nama foldernya dengan "wordpressmu" . Setelah itu buatlah file berikut :

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

1. Header.php

Di file header.php, ketika kode berikut:
<html lang="en">
    <head>
        <title>Jagocoding</title> 
    </head>
    <body><br>        <div id="container">
        <div id="header">
            Header
        </div>
        

2. Footer.php

Di file footer.php isikan dengan baris kode berikut ini:

1
2
3
4
5
6
<div id="footer">
    Copyright © 2014 | <a href="http://bloginidotcom/">bloginidotcom</a>
</div>
<br></div><br>
</body>
</html>

3.Sidebar.php

Pada sidebar.php tulis kode php sebagai berikut:
1
2
3
4
<div id="sidebar">
    Sidebar
</div>

4. Index.php
Index.php inilah yang berfungsi sebagai media untuk menggambar, karena file-file lain yang sudah kita siapkan sebelumnya yaitu header, footer dan sidebar akan disisipkan di index.php. (Index menjadi halaman utama). Pada index.php tulis juga dengan kode berikut ini:

    
"content">

    if (have_posts()) :
            while (have_posts()) : the_post(); ?>
              
class="list-posting">

                

                

Posted on 'F jS, Y') ?>

                '(more...)')); ?>

             
            
            endwhile;
          else: ?>
            
                'Maaf posting tidak tersedia'); ?>
    endif; ?>
    

class="clear">

Penjelasan untuk file index.php

1

Fungsi diatas adalah untuk 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. 

1
Fungsi get_sidebar() untuk menyisipkan file sidebar.php. Fungsi ini lebih untuk berbagai widget seperti categori, sub karegory, archive, iklan dan lain-lain.

1

fungsi get_footer() untuk menyisipkan file footer.php.

1
2
3
4
5
6
7
8
9
10
11
if (have_posts()) : // Cek apakah terdapat posting 
            while (have_posts()) : // Jika ada, lakukan looping data

             the_post(); // Retrieves data pada proses looping ?>
              
                

// Mencetak judul posting ?>

                

Posted on 'F jS, Y'); // Membuat Tanggal posting ?>

                '(more...)')); // Menampilkan cuplikan/headline posting  ?>

              
            
            endwhile;
          else: ?>
            
                'Maaf posting tidak tersedia'); ?>
    endif; ?>

Setelah membuat file dengan kode-kode diatas, selanjutnya adalah mempercantik halaman-halamannya menggunakan css (cascade style sheet).
/*
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;
}

simpan dengan namanya style.css, setelah sisipkan css di header.
<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="">
    </head>
    <body>
        <div id="container">
            <div id="header">
                <h1><span class="red">Jago</span><span class="blue">coding</span></h1>
            </div>
            
Cara membuat themes wordpress sendiri yang cukup sederhana dan mudah. Kalau mau lebih lengkipnya bisa kunjungi di jagoancoding.com

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar