Tự code theme WordPress từ con số không

Nhiều người nghĩ làm theme WordPress phải rất phức tạp, nhưng WordPress nhận diện một theme chỉ qua đúng hai file. Phần còn lại là cách bạn tổ chức code sao cho gọn, dễ bảo trì và đúng chuẩn. Bài này đi qua cấu trúc tối thiểu, các template tag (thẻ gọi dữ liệu), vòng lặp hiển thị bài viết và cách nạp CSS/JS đúng cách theo tài liệu chính thức của WordPress năm 2026.

Khi nào nên tự code theme thay vì dùng theme có sẵn

Không phải dự án nào cũng cần tự code. Nếu bạn chỉ cần một blog hoặc landing đơn giản, một theme miễn phí trên kho WordPress.org là đủ. Tự viết theme từ đầu hợp lý khi:

• Giao diện có yêu cầu riêng mà không theme dựng sẵn nào khớp, hoặc khách cần một bố cục đặc thù.
• Bạn muốn kiểm soát hoàn toàn HTML xuất ra để tối ưu tốc độ và SEO, không gánh hàng nghìn dòng CSS thừa của theme đa năng.
• Site có cấu trúc dữ liệu riêng (sản phẩm, dự án, dịch vụ) cần template gắn với custom post type (loại nội dung tuỳ biến).

Nếu chỉ muốn chỉnh nhẹ một theme cha có sẵn, bạn không nên động vào file gốc mà nên dùng child theme để ghi đè an toàn. Tự code từ đầu là lựa chọn khi bạn cần làm chủ toàn bộ, như cách Web22 dựng theme riêng cho web22.dev để giữ markup gọn nhất có thể.

Cấu trúc tối thiểu của một theme

Theo Theme Handbook chính thức, một theme cổ điển (classic theme) chỉ bắt buộc hai file: style.css và index.php. Tạo một thư mục trong wp-content/themes/, ví dụ my-theme/, rồi thêm các file sau.

1. style.css — danh thiếp của theme

File này không chỉ chứa CSS, mà phần đầu (header comment) còn là nơi WordPress đọc thông tin nhận diện. Thiếu khối comment này, theme sẽ không hiện ra trong trang quản trị.

/*
Theme Name: My Theme
Theme URI: https://example.com/my-theme
Author: Ten Ban
Author URI: https://example.com
Description: Theme tu code tu dau.
Version: 1.0.0
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-theme
*/

Các trường Theme Name, Version, License, Text Domain, Requires PHP là bắt buộc nếu bạn định phát hành công khai. Text Domain quan trọng cho phần dịch — nó là khoá để gom các chuỗi cần dịch của theme. Nếu bạn cần đa ngôn ngữ, tìm hiểu thêm cách đưa chuỗi ra file dịch .po/.mo.

2. index.php — template dự phòng

Đây là template cuối cùng WordPress dùng khi không tìm thấy file phù hợp nào khác. Mọi loại trang (trang chủ, bài viết, lưu trữ) đều có thể rơi về index.php nếu thiếu template chuyên biệt — đó là lý do nó bắt buộc phải có.

3. functions.php — nơi khai báo chức năng

File này chạy mỗi lần WordPress tải theme. Đây là chỗ bạn khai báo support (hỗ trợ tính năng), menu, và nạp CSS/JS. Một bộ khung khởi đầu gọn gàng:

<?php
function my_theme_setup() {
    add_theme_support( 'title-tag' );
    add_theme_support( 'post-thumbnails' );
    register_nav_menus( array(
        'primary' => 'Menu chinh',
    ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Hàm add_theme_support( 'title-tag' ) trao quyền cho WordPress tự sinh thẻ <title> chuẩn SEO; post-thumbnails bật ảnh đại diện cho bài viết. Tất cả móc vào hook (điểm móc) after_setup_theme để chạy đúng thời điểm. Để hiểu sâu cơ chế hook, xem bài về action và filter trong WordPress.

The Loop — trái tim hiển thị nội dung

The Loop (vòng lặp chính) là đoạn PHP duyệt qua các bài viết mà WordPress đã truy vấn sẵn cho trang hiện tại, rồi in từng bài ra. Hầu như mọi template đều xoay quanh nó. Một index.php tối giản nhưng đầy đủ:

<?php get_header(); ?>

<main>
<?php
if ( have_posts() ) :
    while ( have_posts() ) :
        the_post();
        ?>
        <article <?php post_class(); ?>>
            <h2>
                <a href="<?php the_permalink(); ?>">
                    <?php the_title(); ?>
                </a>
            </h2>
            <div><?php the_excerpt(); ?></div>
        </article>
        <?php
    endwhile;
else :
    echo '<p>Chua co bai viet nao.</p>';
endif;
?>
</main>

<?php get_footer(); ?>

Trong đoạn này, các template tag làm việc giùm bạn: the_permalink() in đường dẫn bài, the_title() in tiêu đề, the_excerpt() in đoạn tóm tắt. the_post() phải gọi bên trong vòng lặp để WordPress nạp dữ liệu bài hiện tại — bỏ nó đi là các template tag sẽ in sai. post_class() tự thêm class CSS hữu ích vào thẻ article.

Hai hàm get_header() và get_footer() kéo nội dung từ header.php và footer.php — hai file bạn nên tách ra để dùng lại. Trong header.php nhớ gọi wp_head() ngay trước </head>, còn footer.php gọi wp_footer() trước </body>; đây là nơi WordPress và các plugin chèn CSS/JS của chúng.

Nạp CSS và JS đúng cách bằng enqueue

Sai lầm phổ biến của người mới là nhúng thẳng thẻ <link> hoặc <script> vào header.php. Cách đúng theo chuẩn WordPress là dùng enqueue (xếp hàng nạp tài nguyên) để WordPress quản lý thứ tự và tránh nạp trùng.

<?php
function my_theme_assets() {
    wp_enqueue_style(
        'my-theme-style',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get( 'Version' )
    );

    wp_enqueue_script(
        'my-theme-main',
        get_theme_file_uri( '/assets/js/main.js' ),
        array(),
        '1.0.0',
        true
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_assets' );

Tham số cuối của wp_enqueue_script để true nghĩa là nạp script ở cuối trang (trước </body>), giúp trang hiển thị nhanh hơn. get_stylesheet_uri() trỏ thẳng tới style.css, còn get_theme_file_uri() giúp lấy đường dẫn an toàn tới file trong theme. Việc gắn số version vào tham số thứ tư giúp trình duyệt nạp lại file mới khi bạn cập nhật, tránh kẹt cache. Đi sâu hơn về kỹ thuật này ở bài enqueue script và style chuẩn mực.

Mở rộng dần theo template hierarchy

Khi đã chạy được với ba file cốt lõi, bạn mở rộng bằng cách thêm các template chuyên biệt — và WordPress tự biết dùng file nào cho ngữ cảnh nào. Ví dụ: single.php cho trang bài viết đơn, page.php cho trang tĩnh, archive.php cho trang lưu trữ, 404.php cho trang không tìm thấy. Quy luật ưu tiên này gọi là template hierarchy (thứ bậc template), là kiến thức nền bạn phải nắm để code theme hiệu quả.

Năm 2026, ngoài theme cổ điển bằng PHP còn có hướng block theme dùng file HTML và cấu hình tập trung qua theme.json. Nếu bạn muốn theme tích hợp sâu với trình chỉnh sửa khối và Full Site Editing, hãy tìm hiểu cách dùng theme.json để quản lý màu, font, khoảng cách. Cả hai hướng đều hợp lệ; chọn hướng nào tuỳ độ phức tạp dự án và mức kiểm soát markup bạn cần.

Vài lưu ý để theme bền và sạch

• Luôn dùng prefix (tiền tố) riêng cho tên hàm (như my_theme_) để tránh đụng tên với plugin khác.
• Không truy vấn dữ liệu lung tung trong template; tận dụng The Loop có sẵn cho trang chính.
• Tách logic nặng ra khỏi file template, gom vào functions.php hoặc file include riêng cho dễ bảo trì.
• Kiểm tra theme với hằng số WP_DEBUG bật để bắt cảnh báo PHP sớm.

Câu hỏi thường gặp

Theme WordPress tối thiểu cần mấy file?

Chỉ cần hai file: style.css với khối comment thông tin và index.php làm template chính. Thêm functions.php khi cần khai báo chức năng và nạp tài nguyên.

Có cần biết React để code theme không?

Không, với theme cổ điển dùng PHP thì chỉ cần PHP, HTML, CSS. React chỉ cần khi bạn viết block tuỳ biến cho trình chỉnh sửa khối, một nhánh nâng cao hơn.

Tự code theme có chuẩn SEO hơn theme dựng sẵn không?

Không tự động chuẩn hơn, nhưng bạn kiểm soát được HTML xuất ra nên dễ giữ markup gọn, tốc độ tốt và cấu trúc heading hợp lý — những yếu tố nền cho SEO bền vững.

Nếu bạn cần một theme viết riêng theo đúng giao diện và cấu trúc dữ liệu của dự án thay vì gò ép vào theme đa năng, tham khảo dịch vụ code theme tuỳ biến hoặc tìm hiểu thêm về phát triển website WordPress tại Web22.