Bài 3: 📖 Hướng dẫn tự tay tạo theme trắng 100% cho WordPress trên Hostinger

Bạn đang muốn tự tay làm theme WordPress của riêng mình mà không dùng theme tải sẵn?
Hãy thử tự code một theme trắng hoàn toàn để làm chủ mọi dòng code trong website của bạn! 🚀

Trong bài viết này, mình sẽ hướng dẫn bạn từng bước để tự tạo theme WordPress trống, code từng file trực tiếp trên Hostinger.

Nội dung bài viết

🎯 Mục tiêu:

Tạo theme WordPress trắng 100%, tự code từng file.
Khi hoàn thành, theme sẽ hiển thị trên Dashboard để kích hoạt như một theme bình thường.

🧩 Bước 1: Tạo thư mục theme trên Hostinger

Đăng nhập vào Hostinger → Vào File Manager.
Truy cập thư mục:

swiftSao chépChỉnh sửa/public_html/wp-content/themes/

Bấm New Folder, đặt tên thư mục theme của bạn, ví dụ:

nginxSao chépChỉnh sửamytheme

🧩 Bước 2: Tạo các file cơ bản trong thư mục theme

Bên trong thư mục mytheme, bạn tạo những file sau:

Tên file	Vai trò	Ghi chú
`style.css`	Khai báo thông tin theme	Bắt buộc để WordPress nhận diện theme
`index.php`	File hiển thị chính	Bắt buộc
`functions.php`	Thêm chức năng theme	Tạo sau cũng được, nhưng nên tạo luôn
`header.php`	Phần đầu trang web	Không bắt buộc nhưng nên có
`footer.php`	Phần chân trang web	Không bắt buộc nhưng nên có

👉 Cách tạo file:
Bấm New File → Gõ tên file → OK

🧩 Bước 3: Thêm nội dung cơ bản vào từng file

📄 style.css

Rất quan trọng! Phải có đoạn này thì WordPress mới nhận diện được theme.

cssSao chépChỉnh sửa/*
Theme Name: My Custom Theme
Theme URI: https://yourwebsite.com
Author: Bạn
Author URI: https://yourwebsite.com
Description: Theme trắng bạn tự code từ đầu.
Version: 1.0
Text Domain: mytheme
*/

📄 index.php

phpSao chépChỉnh sửa<?php
// Gọi phần đầu trang
get_header();
?>

<h1>Chào mừng đến với Theme trắng của tôi!</h1>
<p>Bạn đang sử dụng theme do chính bạn tự tay code 🎉</p>

<?php
// Gọi phần chân trang
get_footer();
?>

📄 functions.php

phpSao chépChỉnh sửa<?php
// Thêm chức năng cơ bản cho theme
function mytheme_setup() {
    add_theme_support('title-tag'); // Cho phép WordPress tự đặt tiêu đề trang
}
add_action('after_setup_theme', 'mytheme_setup');
?>

📄 header.php

phpSao chépChỉnh sửa<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo('charset'); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
  <h2>Header của tôi</h2>
</header>

📄 footer.php

phpSao chépChỉnh sửa<footer>
  <p>© 2025 - Theme trắng của bạn.</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>

🧩 Bước 4: Kích hoạt theme trong WordPress

Vào Dashboard WordPress.
Vào Giao diện (Appearance) → Giao diện (Themes).
Theme “My Custom Theme” sẽ xuất hiện.
Bấm Kích hoạt (Activate).

🎉 Chúc mừng! Theme bạn tự code đã hoạt động thành công 🎉

🎯 Sau khi hoàn thành, bạn sẽ học được:

Hiểu rõ cấu trúc file của một theme WordPress gốc.
Làm chủ mọi dòng code trong theme.
Tự do mở rộng: thêm menu, CSS, layout, chức năng bán hàng…

✅ Gợi ý nâng cấp:

Thêm file screenshot.png để có hình thumbnail trong Dashboard.
Viết thêm CSS để trang đẹp hơn.
Mở rộng functions.php để thêm menu, ảnh đại diện, hoặc các tính năng khác.

👉 Bước tiếp theo dành cho bạn:

Sau khi làm xong theme trắng, mình gợi ý bạn học tiếp các bước này:

Làm responsive luôn, để trang hiển thị đẹp trên điện thoại.
Kết nối WooCommerce nếu bạn định mở shop bán hàng.
Tạo template page riêng cho Trang chủ hoặc Trang sản phẩm để làm landing page bán hàng đẹp hơn.

Cứ làm xong tới đâu, bạn báo mình! Mình sẽ hướng dẫn bạn bước tiếp theo thật chắc tay 🚀