Membuat Template Homepage

September 8, 2026

WordPress memiliki beberapa file yang dapat digunakan untuk halaman depan.

Untuk pembelajaran dasar, kita akan menggunakan front-page.php , file ini digunakan khusus untuk halaman depan website.

Struktur theme menjadi:

aamblog/
├── style.css
├── functions.php
├── index.php
└── front-page.php --> baru

Jika file front-page.php ini tersedia, WordPress akan menggunakannya untuk menampilkan homepage.

Membuat File `front-page.php`

<?php get_header(); ?>

<main>
    <h1>Selamat Datang di Website Saya</h1>

    <p>Ini adalah halaman homepage.</p>
</main>

<?php get_footer(); ?>

Penjelasan :

get_header(); untuk mengambil file header.php
get_footer(); untuk mengambil file footer.php

Hasil nya menjadi seperti ini

Membuat file baru `header.php , footer.php,` dan `sidebar.php`

header.php

header.php adalah file yang digunakan untuk menyimpan bagian atas atau pembuka struktur HTML website.

Tujuannya supaya bagian yang sama, seperti <html>, <head>, logo, dan navigasi, tidak perlu ditulis berulang-ulang di setiap template.

header.php
<!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="<?php echo get_stylesheet_uri(); ?>">

    <?php wp_head(); ?>
</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>

footer.php

wp_footer() adalah hook WordPress yang digunakan untuk memasukkan kode atau script sebelum tag </body> ditutup.

footer.php

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

        <div class="container">

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

        </div>

    </footer>
    
    <?php wp_footer(); ?>
</body>
</html>

sidebar.php

Cara memanggilnya di thema : <?php get_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>

Ubah File `front-page.php`

<?php get_header(); ?>

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

    <div class="layout">

        <!-- Content -->
        <section class="content">
            <h1>Selamat Datang di Website Saya</h1>
            <p>Ini adalah halaman homepage.</p>
        </section>

        <!-- Sidebar -->
        <?php get_sidebar(); ?>

    </div>
</main>

<?php get_footer(); ?>

Tampilan menjadi seperti ini

Mengambil data dari WordPress Settings

Dari gambar, kita ingin mengambil :

Site Title → Aam Website
Tagline → Sebuah ruang untuk mencatat proses belajar, eksper...
Site Icon → favicon/logo
WordPress Address (URL) → https://aamweb.my.id

1. Site Title & Tagline

file header.php kita ubah menjadi:

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

    <title><?php bloginfo('name'); ?></title>

    <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

    <?php wp_head(); ?>
</head>

<body>

    <!-- Header -->
    <header class="header">
        <div class="container">
            <h1><?php bloginfo('name'); ?></h1>
            <p><?php bloginfo('description'); ?></p>
        </div>
    </header>

.............

bloginfo() digunakan untuk mengambil informasi dasar website dari pengaturan WordPress.

2. Site Icon

Site Icon otomatis digunakan WordPress sebagai favicon selama wp_head() dipanggil. Jadi tidak perlu menambahkan kode <img> apa pun. Cukup sekarang upload gambar / icon aja di setinga tersebut

Tetap seperti ini:

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

    <title><?php bloginfo('name'); ?></title>

    <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

    <?php wp_head(); ?>
</head>

Perhatikan:

<?php wp_head(); ?>

Ini yang penting. selama itu ada maka otomatis tampil icon favicon

Membuat File front-page.php