Cara Membuat Template WordPress Sendiri mulai dari Nol – Bagian 5 (Styling Template)

Tutorial ini merupakan tutorial terakhir tentang bagaimana cara membuat template WordPress, bagi yang sudah tertinggal atau melewatkan artikel-artikel sebelumnya, silahkan ikuti tutorial sebelumnya pada link berikut ini :

1. Bagian 1 : Intro & Registering Template
2. Bagian 2 : Frontpage, Header & Footer
3. Bagian 3 : Single Page
4. Bagian 4 : Menu Navigasi & Sidebar (Widget)
5. Bagian 5 : Styling Template

Pada tutorial ini kita akan melakukan Styling pada template WordPress yang sudah kita buat sebelumnya, jika kita lihat kembali pada template yang sudah kita buat, dari halaman header.php sampai footer.php dimana terdapat beberapa section utama diantaranya ialah :

Header Section

<header>
    <!--Section HEADER-->
    <div class="logo">
        .........
    </div>

    <div class="navigasi">
        .........
    </div>
</header>

 

Main Body Section

<main>
    <!--Section MAIN BODY-->
    <div class="konten">
        .........
    </div>

    <div class="sidebar">
        .........
    </div>
</main>

Footer Section

<footer>
    <!--Section FOOTER-->
    <div class="footer">
        ........
    </div>
</footer>

 

Untuk melakukan styling pada section-section tersebut silahkan masukan kode CSS berikut ke dalam file style.php yang ada dalam folder template WordPress yang kita buat :

/*
Theme Name: Tema Ku
Theme URI: https://agussuratna.net
Description: Tema ini untuk belajar membuat tema dari nol
Version: 0.1
Author: Agus Suratna
Author URI: https://agussuratna.net
*/

body {
    width: 920px;
    margin: 30px auto;
}

header,
main.konten,
main.sidebar,
footer {
    padding: 15px;
}

header {
    background: #99d9ea;
}

header,
main {
    margin-bottom: 15px;
}

main {
    display: inline-flex;
}

main .konten {
    background: #efe4b0;
    width: 70%;
    margin-right: 15px;
}

main .sidebar {
    background: #fd7e00;
    width: 30%;
}

footer {
    background: #c3c3c3;
    text-align: center;
}

ul {
    padding: 15px;
    margin: 0;
    list-style: none;
    background: #45b9da;
}

ul li a {
    color: #fff;
    padding: 0px 3px;
    text-decoration: none;
}

ul li a:hover {
    text-decoration: underline;
}

header ul li {
    display: inline-block;
}

h3.widget-title {
    margin-top: 0px;
}

table {
    width: 100%;
}

main .sidebar ul {
    padding-left: 5px;
}

main .sidebar li {
    margin-bottom: 15px;
}

Kode-kode CSS di atas hanyalah contoh saja, jika ingin tampilan templatenya berbeda dari tutorial ini, silahkan berkreasi sendiri. Pada tutorial ini tidak dibahas tentang kode-kode CSS tersebut, silahkan pelajari lagi tentang tutorial CSS.

Jika implementasi kode di atas sudah benar maka kurang lebih tampilan halaman website template WordPress yang kita buat akan seperti pada gambar di bawah ini :

Sekian tutorial pembuatan template WordPress kali ini, semoga bermanfaat, jika ada pertanyaan silahkan tuliskan di kolom komentar.