Setup Tema Worpress

September 6, 2026

Setelah di Step Pertama kita belajar Install WordPress Pakai Laragon, selanjutnya mari kita memulai membuat theme dari nol, artinya kita membuat tema custome, tanpa menggunakan tema yg disediakan oleh wordpress.

Pada langkah pertama, kita akan membuat struktur dasar sebuah custom theme WordPress dari nol.

Kita tidak menggunakan theme siap pakai sebagai dasar. Kita akan membuat folder theme sendiri dan menyiapkan file utama yang dibutuhkan.

1. Buat Folder Theme dan File Awal

wp-content/themes/aamblog

Struktur awal file

aamblog/
├── style.css
├── index.php
└── functions.php

2. Buat style.css

File style.css digunakan WordPress untuk mengenali informasi theme.

/*
Theme Name: AAMBLOG
Theme URI: http://aamblog.test
Author: Aam blog
Description: Custom WordPress theme yang dibuat dari nol.
Version: 1.0.0
*/

3. Buat index.php

File style.css digunakan WordPress untuk mengenali informasi theme.

<?php

echo '<h1>Hello Aam Blog</h1>';

Sekarang theme kita sudah mempunyai template dasar yang dapat dirender oleh WordPress.

4. Buat functions.php

Kita akan menggunakan file ini untuk menambahkan berbagai kemampuan theme pada langkah-langkah berikutnya.

<?php

function aamblog_setup()
{
    add_theme_support('title-tag');
}

add_action(
    'after_setup_theme',
    'aamblog_setup'
);

Aktifkan Themes aamweb

Aktifkan mealui Appearance → Themes → Activate

Hasilnya

cek di http://aamblog.test/

Menyiapkan Template HTML

Sebelum mulai membuat template WordPress, kita akan membuat tampilan website sederhana menggunakan HTML dan CSS terlebih dahulu. Tujuannya agar kita memahami struktur dasar sebuah website seperti header, menu, content, sidebar, dan footer. Setelah template HTML ini selesai, kita akan lanjut mengubahnya menjadi custom theme WordPress dengan menambahkan PHP dan fungsi-fungsi WordPress secara bertahap.

Saya akan ubah file style.css , seperti ini

/*
Theme Name: AAMBLOG
Theme URI: http://aamblog.test
Author: Aam blog
Description: Custom WordPress theme yang dibuat dari nol.
Version: 1.0.0
*/


* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f5f5f5;
    color: #333;
}

.container {
    width: 1100px;
    max-width: 90%;
    margin: auto;
}


/* Header */
.header {
    background: #222;
    color: white;
    padding: 30px 0;
}

.header h1 {
    margin: 0 0 5px;
}

.header p {
    margin: 0;
}


/* Navigation */

.navigation {
    background: white;
    border-bottom: 1px solid #ddd;
}

.navigation ul {
    display: flex;
    gap: 25px;
    list-style: none;
    margin: 0;
    padding: 15px 0;
}

.navigation a {
    color: #333;
    text-decoration: none;
}


/* Layout */
.layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 30px;
    padding: 40px 0;
}


/* Content */
.content {
    background: white;
    padding: 30px;
}

.post {
    margin-bottom: 40px;
}

.post:last-child {
    margin-bottom: 0;
}

.post h2 {
    margin-top: 0;
}

.date {
    color: #888;
    font-size: 14px;
}


/* Sidebar */
.sidebar {
    background: white;
    padding: 25px;
}

.sidebar h2 {
    margin-top: 0;
}

.sidebar h3 {
    margin-top: 30px;
}

.sidebar ul {
    padding-left: 20px;
}

.sidebar li {
    margin-bottom: 8px;
}

.sidebar a {
    color: #333;
}


/* Footer */
.footer {
    background: #222;
    color: white;
    text-align: center;

    padding: 25px 0;
}


/* Mobile */
@media (max-width: 768px) {
    .layout {
        grid-template-columns: 1fr;
    }
    .navigation ul {
        flex-direction: column;
        gap: 10px;
    }
}

Lalu saya ubah juga halaman / file index.php seperti ini :

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Website Saya</title>

    <link rel="stylesheet" href="style.css">
</head>

<body>

    <!-- Header -->
    <header class="header">
        <div class="container">
            <h1>Website Saya</h1>
            <p>Belajar Membuat Website</p>
        </div>
    </header>


    <!-- Navigation -->
    <nav class="navigation">
        <div class="container">

            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>

        </div>
    </nav>


    <!-- Main Content -->
    <main class="container">

        <div class="layout">

            <!-- Content -->
            <section class="content">

                <article class="post">

                    <h2>Judul Artikel Pertama</h2>

                    <p class="date">
                        8 September 2026
                    </p>

                    <p>
                        Ini adalah contoh isi artikel.
                        Nantinya bagian ini akan digunakan
                        untuk menampilkan konten dari WordPress.
                    </p>

                    <p>
                        Kita membuat struktur HTML sederhana
                        terlebih dahulu sebelum memasukkan PHP
                        dan fungsi WordPress.
                    </p>

                </article>


                <article class="post">

                    <h2>Judul Artikel Kedua</h2>

                    <p class="date">
                        7 September 2026
                    </p>

                    <p>
                        Ini adalah artikel kedua sebagai
                        contoh tampilan halaman blog.
                    </p>

                </article>

            </section>


            <!-- Sidebar -->
            <aside class="sidebar">

                <h2>Sidebar</h2>

                <h3>Artikel Terbaru</h3>

                <ul>
                    <li><a href="#">Artikel Pertama</a></li>
                    <li><a href="#">Artikel Kedua</a></li>
                    <li><a href="#">Artikel Ketiga</a></li>
                </ul>

                <h3>Kategori</h3>

                <ul>
                    <li><a href="#">WordPress</a></li>
                    <li><a href="#">PHP</a></li>
                    <li><a href="#">Web Development</a></li>
                </ul>

            </aside>

        </div>

    </main>


    <!-- Footer -->
    <footer class="footer">

        <div class="container">

            <p>
                &copy; 2026 Website Saya
            </p>

        </div>

    </footer>

</body>
</html>

Theme WordPress dari nol