Tutorial Membuat Theme WordPress Dari Awal

Sebarinn yukkShare on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on Pinterest

Jika kamu sampai di halaman ini, saya akan berasumsi bahwa kamu sudah menemukan bahwa WordPress adalah sebuah platform CMS yang versatile! (Setidaknya menurut saya dan kamu) Dan kamu mulai tertarik untuk mempelajarinya lebih lanjut. Maka langkah ‘benar’ selanjutnya adalah mengetahui cara membuat theme / template wordpress.

Banyak tutorial mengenai cara membuat template wordpress, apakah tutorial saya ini sama saja seperti tutorial lainnya? Well, silahkan teman-teman berkomentar setelah membacanya ya.

Ok, disini saya akan mencoba berbagi tutorial/cara membuat theme wordpress sederhana dari awal Dan garis besar pembahasan saya akan meliputi:

1. Struktur HTML theme wordpress

2. File-file dasar pada sebuah wordpress theme: header, footer, index, function

3. File-file dasar pada sebuah wordpress theme 2: single page template, sidebar template, 404 page template, category template, comment template, search page template

4. Struktur fallback

5. Membuat page template sendiri, mengenal template part

6. Pedoman dasar membuat CSS theme wordpress yang baik: reset CSS

Namun sebelumnya, kita perlu mengenal tool yang akan membantu proses pembuatan wordpress theme, anggap lah ini adalah alat dan bahan dalam membuat kue. Apa saja tool tersebut:

  • WordPress (tentu saja), download versi terbaru dari wordpress.org
  • Webserver lokal (bisa XAMPP untuk pengguna windows, MAMP untuk pengguna Mac, Apache, dll)
  • Dummy content, nanti setelah instalasi wordpress selesai, bisa diisi konten sample. Saya suka menggunakan Lorem ipsum generator biar cepet. (google lorem ipsum generator)
  • Text editor, untuk mengedit file-file php (text editor free: sublime text, notepad++)
  • Browser (hellawww), saya biasa pakai chrome, tinggal klik kanan-> inspect element, kalau mau periksa error dan struktur html.
  • Pengetahuan dasar HTML, CSS, dan PHP. Yes,the good thing about WordPress adalah ramah untuk pemula seperti kita-kita.

Ok, sudah siap semua alat dan bahannya? Mari kita download wordpress, install web server, text editor ready, dan segelas kopi. Baru lanjut ke point berikutnya:

1. Mengenal HTML theme wordpress

Folder template wordpress ada di root/wp-content/themes/namatemplate

Struktur html halaman wordpress pada umumnya :

< html>
< head>

 
< body>
<div id="wrapper" class="hfeed">
    <div id="header">
        <div id="masthead">
 
            <div id="branding">
            </div><!-- #branding -->
 
            <div id="access">
            </div><!-- #access -->
 
        </div><!-- #masthead -->
    </div><!-- #header -->
 
    <div id="main">
        <div id="container">
 
            <div id="content">
            </div><!-- #content -->
 
        </div><!-- #container -->
 
        <div id="primary" class="widget-area">
        </div><!-- #primary .widget-area -->
 
        <div id="secondary" class="widget-area">
        </div><!-- #secondary -->
    </div><!-- #main -->
 
    <div id="footer">
        <div id="colophon">
 
            <div id="site-info">
            </div><!-- #site-info -->
 
        </div><!-- #colophon -->
    </div><!-- #footer -->
</div><!-- #wrapper -->


Html diatas, akan didistribusikan kedalam :
index.php
header.php
sidebar.php
footer.php
yang akan dijelaskan dipoint berikutnya

2. File-file dasar pada sebuah wordpress theme: header, footer, index, function

2.1 header.php

masukkan sebagian kode html di atas kedalam header.php seperti ini:

< html>
< head>

< body>
<div id="wrapper" class="hfeed">
    <div id="header">
        <div id="masthead">
 
            <div id="branding">
            </div><!-- #branding -->
 
            <div id="access">
            </div><!-- #access -->
 
        </div><!-- #masthead -->
    </div><!-- #header -->
 
    <div id="main">

2.2 footer.php

dan bagian kode html ini kedalam footer.php:

</div><!-- #main -->
 
    <div id="footer">
        <div id="colophon">
 
            <div id="site-info">
            </div><!-- #site-info -->
 
        </div><!-- #colophon -->
    </div><!-- #footer -->
</div><!-- #wrapper -->


2.3 index.php

untuk index.php masukkan html berikut:

< ? php get_header(); ? >
<div id="container">
 
    <div id="content">
    </div><!-- #content -->
 
</div><!-- #container -->
 
<div id="primary" class="widget-area">
</div><!-- #primary .widget-area -->
 
<div id="secondary" class="widget-area">
</div><!-- #secondary -->

< ? php get_footer(); ? >

fungsi php get_header() dan get_footer() untuk apa? yep untuk menginclude file header.php dan footer.php

2.4 Style.css

File ini yang akan menjadi deskripsi template kamu di dashboard sewaktu memilih theme. Kode awal ini harus selalu ada disetiap style.css. Karena wordpress membaca identitas template dari sini.

/*
Theme Name: Your Theme
Theme URI: http://example.com/example/
Description: A search engine optimized website framework for WordPress.
Author: You
Author URI: http://example.com/
Version: 1.0
Tags: Comma-separated tags that describe your theme
.
Your theme can be your copyrighted work.
Like WordPress, this work is released under GNU General Public License, version 2 (GPL).
http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
.
*/

2.5 function.php

tempat kamu menyimpan semua fungsi php yang akan digunakan template, juga definisi script JS atau jQuery sebaiknya dilakukan disini. Untuk sekarang kosong dulu tidak apa-apa.

Kamu sekarang bisa buka browser, akses wordpress kamu, login, dan ganti theme wordpress dengan yang baru kamu buat. Yep, selamat yah atas template wordpress baru kamu!

Siap lanjut point berikutnya? saya napas dulu yaa

3. File-file dasar pada sebuah wordpress theme 2: single page template, sidebar template, 404 page template, category template, comment template, search page template

to be confirmed 🙂

Sebarinn yukkShare on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on Pinterest
  • asep kurnia

    mana lanjutannya?

  • Ruddy

    GAJELAS BENER !

  • Raka

    gk bermutu samasekali

  • liat komenya kok ndak jadi downloaf..kalau dah bagus hubungi aku yah ha ha