Chapter 3: WordPress Specific PHP — Convert Static HTML Template into WordPress (Part 1 & 2)

Ringkasan

Dua video ini membahas cara mengubah halaman HTML/CSS statis menjadi WordPress theme yang hidup. Kita akan meng-copy HTML dari template statis ke file-file theme WordPress, memindahkan folder aset (CSS, images, JS), dan memuat file-file tersebut melalui functions.php.

Konsep Utama

Kita tidak menulis CSS dari nol — kita menggunakan template HTML/CSS yang sudah jadi
Tugas kita: mengintegrasikan HTML statis ke dalam theme WordPress, lalu mengganti konten hardcoded dengan data dinamis dari WordPress

Step-by-Step

Step 1: Download Template Statis

Kunjungi: github.com/learnwebcode/university-static
Klik Download ZIP → Extract
Buka file index.html di browser untuk preview

Template ini 100% statis — tidak ada PHP, tidak terhubung ke WordPress. Link-nya tidak berfungsi.

Step 2: Copy Header HTML ke Theme

Buka index.html (file yang didownload) di text editor
Cari elemen <header> di bawah <body>
Copy seluruh elemen <header>...</header>
Buka header.php di folder theme WordPress
Paste di bawah tag <body>, gantikan headline placeholder

📄 header.php — setelah diubah:

html

<!DOCTYPE html>
<html>
  <head>
    <?php wp_head(); ?>
  </head>
  <body>
    <header>
      <!-- ... semua HTML header dari template statis ... -->
    </header>

Di index.html, scroll ke bawah, cari elemen <footer>...</footer>
Copy seluruh elemen footer
Buka footer.php di folder theme
Paste menggantikan dummy paragraph, tetapi jaga wp_footer(), </body>, dan </html>

📄 footer.php — setelah diubah:

html

    <footer>
      <!-- ... semua HTML footer dari template statis ... -->
    </footer>

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

Step 4: Pindahkan Folder Aset ke Theme

Dari folder template yang didownload, pindahkan 4 folder ke dalam folder theme WordPress:

📁 fictional-university-theme/
  ├── 📁 build/       ← ⭐ CSS & JS yang sudah di-compile
  ├── 📁 css/         ← ⭐ CSS tambahan
  ├── 📁 images/      ← ⭐ Gambar/foto
  ├── 📁 src/         ← ⭐ Source files
  ├── 📄 index.php
  ├── 📄 header.php
  ├── 📄 footer.php
  ├── 📄 functions.php
  ├── 📄 style.css
  └── ...

Step 5: Update `functions.php` — Load CSS Files

Ubah functions.php untuk memuat CSS dari folder build/:

📄 functions.php — versi baru:

php

<?php

function university_files() {
    wp_enqueue_style('university_main_styles', get_theme_file_uri('/build/style-index.css'));
    wp_enqueue_style('university_extra_styles', get_theme_file_uri('/build/index.css'));
    wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
    wp_enqueue_style('custom-google-fonts', '//fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:100,300,400,400i,700,700i');
}

add_action('wp_enqueue_scripts', 'university_files');

Penjelasan setiap wp_enqueue_style():

#	Nickname	File/URL	Tujuan
1	`university_main_styles`	`/build/style-index.css`	CSS utama layout & komponen
2	`university_extra_styles`	`/build/index.css`	CSS tambahan
3	`font-awesome`	URL eksternal CDN	Icon library (untuk ikon sosmed di footer, dll)
4	`custom-google-fonts`	URL eksternal Google Fonts	Custom font (Roboto)

Fungsi baru yang diperkenalkan:

Fungsi	Kegunaan
`get_theme_file_uri('/path/to/file')`	Mengembalikan URL absolut ke file di dalam folder theme. Lebih fleksibel dari `get_stylesheet_uri()` karena bisa menunjuk ke subfolder/file apapun

Catatan style.css: Kita tidak lagi memuat style.css untuk styling (isinya cuma comment info theme). CSS sebenarnya ada di folder build/.

Step 6: Load JavaScript File

Tambahkan di dalam function university_files():

php

function university_files() {
    wp_enqueue_script('main-university-js', get_theme_file_uri('/build/index.js'), array('jquery'), '1.0', true);

    wp_enqueue_style('university_main_styles', get_theme_file_uri('/build/style-index.css'));
    wp_enqueue_style('university_extra_styles', get_theme_file_uri('/build/index.css'));
    wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
    wp_enqueue_style('custom-google-fonts', '//fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:100,300,400,400i,700,700i');
}

Penjelasan wp_enqueue_script() — 5 argumen:

php

wp_enqueue_script('main-university-js', get_theme_file_uri('/build/index.js'), array('jquery'), '1.0', true);
//                  ↑ nickname            ↑ lokasi file                          ↑ dependencies   ↑ versi ↑ load di footer?

Argumen	Nilai	Penjelasan
1 — Nickname	`'main-university-js'`	Nama bebas untuk script ini
2 — Lokasi	`get_theme_file_uri('/build/index.js')`	URL ke file JS
3 — Dependencies	`array('jquery')`	Script lain yang harus dimuat sebelum script ini. Gunakan `null` jika tidak ada dependency
4 — Version	`'1.0'`	Nomor versi script
5 — In Footer?	`true`	`true` = load sebelum `</body>` (lebih baik untuk performa). `false` = load di `<head>`

Step 7: Copy Konten Homepage ke `index.php`

Dari index.html template statis, copy semua HTML antara </header> dan <footer>
Di index.php, hapus loop code lama, paste HTML statis

📄 index.php — struktur baru:

php

<?php get_header(); ?>

<!-- paste semua HTML homepage dari template statis di sini -->
<!-- (page banner, welcome area, slideshow, blog section, dll) -->

<?php get_footer(); ?>

Step 8: Fix Path Gambar dengan `get_theme_file_uri()`

Gambar di template statis pakai path relatif (images/library-hero.jpeg), tapi di WordPress path-nya berbeda.

Sebelum (tidak berfungsi):

html

<div style="background-image: url(images/library-hero.jpeg)">

Sesudah (berfungsi):

html

<div style="background-image: url(<?php echo get_theme_file_uri('/images/library-hero.jpeg'); ?>)">

Fungsi	Kegunaan
`get_theme_file_uri('/images/library-hero.jpeg')`	Menghasilkan URL lengkap ke file di folder theme, contoh: `http://fictionaluniversity.local/wp-content/themes/fictional-university-theme/images/library-hero.jpeg`

Lakukan ini untuk SEMUA gambar di template — termasuk gambar slideshow di bagian bawah homepage.

Hasil Akhir

Setelah semua step selesai:

Homepage memiliki design yang lengkap (header, konten, slideshow, footer)
CSS dan font sudah ter-load
Icon Font Awesome muncul di footer
Slideshow berjalan berkat JavaScript yang dimuat
Gambar tampil dengan path yang benar

Poin Penting

get_theme_file_uri() adalah fungsi kunci untuk mereferensikan file apa pun di dalam folder theme
wp_enqueue_style() untuk CSS, wp_enqueue_script() untuk JavaScript — jangan load manual pakai tag <link> atau <script>
Gunakan wp_head() dan wp_footer() agar WordPress bisa inject aset secara otomatis
Memindahkan template statis ke WordPress pada dasarnya adalah: copy HTML → paste ke template files → ganti hardcoded content dengan fungsi PHP WordPress

Chapter 3: WordPress Specific PHP — Convert Static HTML Template into WordPress (Part 1 & 2) ​

Ringkasan ​

Konsep Utama ​

Step-by-Step ​

Step 1: Download Template Statis ​

Step 2: Copy Header HTML ke Theme ​

Step 3: Copy Footer HTML ke Theme ​

Step 4: Pindahkan Folder Aset ke Theme ​

Step 5: Update functions.php — Load CSS Files ​

Step 6: Load JavaScript File ​

Step 7: Copy Konten Homepage ke index.php ​

Step 8: Fix Path Gambar dengan get_theme_file_uri() ​

Hasil Akhir ​

Poin Penting ​

Chapter 3: WordPress Specific PHP — Convert Static HTML Template into WordPress (Part 1 & 2)

Ringkasan

Konsep Utama

Step-by-Step

Step 1: Download Template Statis

Step 2: Copy Header HTML ke Theme

Step 3: Copy Footer HTML ke Theme

Step 4: Pindahkan Folder Aset ke Theme

Step 5: Update `functions.php` — Load CSS Files

Step 6: Load JavaScript File

Step 7: Copy Konten Homepage ke `index.php`

Step 8: Fix Path Gambar dengan `get_theme_file_uri()`

Hasil Akhir

Poin Penting