Child theme WordPress — classic vs block theme child

Sửa code theme premium trực tiếp là cách nhanh nhất mất toàn bộ tùy biến khi parent theme auto-update — đặc biệt Astra Pro, Flatsome, Avada release mỗi 2-4 tuần. Child theme là layer override tách biệt, giữ mọi customize qua mọi parent update.

Bài này giải thích child theme là gì, 4 use case nên dùng, cấu trúc tối thiểu, pattern enqueue đúng thứ tự, và khác biệt classic vs block theme child trong context 2026.

Child theme là gì và 4 use case nên dùng

Child theme là một theme WordPress kế thừa toàn bộ template, function, và style từ một theme khác (gọi là parent). Child theme chỉ chứa file override cho những thứ cần customize — mọi file khác inherit từ parent.

Khi parent theme update, mọi file trong child theme được giữ nguyên — không bị overwrite. Đây là cách an toàn duy nhất để customize theme premium hoặc theme bên thứ ba theo WordPress Codex chính thức.

Bốn use case nên tạo child theme

Không phải mọi tùy biến đều cần child theme. Bốn use case dưới là ngưỡng kinh nghiệm — nếu em rơi vào 1 trong 4 trường hợp này, child theme là approach đúng.

• Customize theme premium (Astra Pro, Flatsome, Avada): theme premium update mỗi 2-4 tuần — sửa trực tiếp là mất hết — child theme override style.css và 1-2 template là an toàn dài hạn.
• Override 5-10 file template từ theme có sẵn: không cần build theme custom 40-80 giờ — tiết kiệm 80-90% effort, vẫn giữ feature parent.
• Test thay đổi lớn trước khi commit theme chính: child theme là sandbox — switch active sang child trong staging, rollback nhanh nếu bug, không touch theme production.
• Multiple sub-brand cùng base theme: 1 parent theme và 3 child theme cho 3 brand subsidiary — share core component, override style và content theo brand riêng.

Khi KHÔNG nên dùng child theme

Child theme thêm complexity nhỏ — không phải mọi project đều cần. Hai trường hợp dưới đây nên skip child theme để tránh over-engineering.

• Theme custom build từ đầu: theme do team em chính chủ control toàn bộ source — child theme thêm layer thừa, không giải quyết problem nào thực sự.
• Customize trên 50% file template: override quá nhiều file đồng nghĩa rebuild theme từ đầu hợp lý hơn — child theme dày bằng parent là tín hiệu kiến trúc sai.
• Theme miễn phí không có ai maintain: nếu parent theme đã abandoned và không có dev maintain, child theme chỉ trì hoãn vấn đề — nên migrate sang theme khác.

Cấu trúc child theme tối thiểu — style.css header và functions.php

Child theme tối thiểu chỉ cần 2 file: style.css với header đặc biệt báo đây là child của parent nào, và functions.php rỗng hoặc có code custom enqueue style parent.

WordPress nhận diện child theme qua field Template trong style.css header. Field này là giá trị folder name của parent — không phải Theme Name hiển thị, mà tên folder vật lý.

style.css header bắt buộc

Đoạn header dưới đây là minimum cho child theme hoạt động. Field Template bắt buộc — giá trị phải khớp đúng folder name parent theme, case-sensitive.

/*
Theme Name:   Web22 Child
Template:     web22-2026
Version:      1.0.0
Description:  Child theme cho Web22 2026
Author:       Web22.dev
Text Domain:  web22-child
*/

Nếu sai folder name trong field Template, WordPress sẽ báo “The parent theme is missing” và child không activate được. Đây là sai lầm số 1 khi setup child theme lần đầu.

Cấu trúc folder tối thiểu

Cấu trúc folder dưới là tối thiểu cần thiết. Tất cả file khác sẽ inherit từ parent — override đồng nghĩa copy file đó từ parent vào child folder cùng path.

wp-content/themes/web22-child/
├── style.css           // header và custom CSS (optional)
├── functions.php       // custom code và enqueue parent
├── screenshot.png      // 1200x900, hiện trong Appearance → Themes
└── languages/          // .pot/.po/.mo nếu cần i18n riêng

screenshot.png chuẩn 1200×900

WordPress hiển thị screenshot.png trong Admin → Appearance → Themes. Kích thước chuẩn cộng đồng là 1200×900 pixel PNG.

File này không serve frontend nên không ảnh hưởng SEO hay performance.

• Kích thước 1200×900: standard cho theme card admin — kích thước khác có thể hiển thị méo hoặc crop sai.
• Format PNG hoặc JPG: PNG khuyến nghị cho icon vector — JPG cho ảnh photo có gradient.
• Dung lượng dưới 200KB: không cần ảnh quá nặng — admin load chậm khi có nhiều theme cùng có screenshot 1MB+.

Override template từ parent — pattern copy và customize

WordPress template hierarchy check child theme TRƯỚC parent theme khi resolve template cho mỗi request. File same name trong child = override file parent đó.

Pattern này áp dụng cho mọi file template .php trong cấu trúc theme — single.php, page.php, header.php, footer.php, sidebar.php, và file template cụ thể như single-{post-type}.php.

Quy trình override an toàn 4 bước

Override sai pattern dẫn tới khó debug hoặc lost track of changes. Bốn bước dưới là chuẩn workflow team dev WordPress chuyên nghiệp.

1. Copy file từ parent: vd web22-2026/single-service.php sang web22-child/single-service.php
2. Edit file trong child theme — markup, hook call, layout — không touch parent gốc
3. Test trong staging environment trước khi push live, smoke test critical flow
4. Document override trong README hoặc comment đầu file để dev mới onboarding hiểu

Override partial — chỉ một template part

Thay vì copy toàn bộ template lớn, em có thể override chỉ một template part nhỏ như header, footer, sidebar, hay 1 block render. Cách này giữ override nhẹ và dễ maintain hơn.

// child/template-parts/blocks/hero.php
// Override block render template hoàn toàn
<section class="hero hero--child">
    <h1><?= esc_html(w22_block_field('heading')) ?></h1>
    <p class="hero-sub">
        <?= esc_html(w22_block_field('subheading')) ?>
    </p>
    // Custom markup khác parent
</section>

Track override để biết file nào đã sửa

Sau 6 tháng vận hành, em sẽ quên file nào đã override. Three pattern dưới giúp track override systematically.

• Comment header đầu file override: note version copy từ parent và lý do override — debug nhanh khi parent update phá child.
• README.md trong child folder: list mọi file override với date và lý do — dev mới onboarding hiểu được trong 15 phút.
• Git commit message rõ ràng: mỗi commit override note rõ “Override X for reason Y” — git log thành document tự nhiên.

Enqueue parent và child style đúng thứ tự — 3 method 2026

Đây là phần dễ sai nhất khi setup child theme. Enqueue sai thứ tự dẫn tới CSS child không override được parent — em đã sửa CSS nhưng frontend vẫn hiển thị style parent.

Ba method dưới phù hợp với 3 pattern parent theme khác nhau. Đọc cấu trúc enqueue của parent theme trước khi chọn method.

Method 1 — Parent dùng wp_enqueue_style cho main style

Pattern phổ biến nhất trong theme premium. Child enqueue parent style trước, child style sau với dependency parent để giữ thứ tự load đúng.

// child/functions.php
add_action('wp_enqueue_scripts', function () {
    $parent = wp_get_theme(get_template());

    wp_enqueue_style(
        'parent-style',
        get_template_directory_uri() . '/style.css',
        [],
        $parent->get('Version')
    );

    wp_enqueue_style(
        'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        ['parent-style'], // dependency để child load sau parent
        wp_get_theme()->get('Version')
    );
});

Method 2 — Parent có nhiều CSS file qua nhiều handle

Theme custom thường split CSS thành nhiều file qua nhiều handle (tokens, layout, components). Child không cần enqueue lại parent CSS, chỉ cần dependency vào parent handle.

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        ['w22-tokens', 'w22-layout'], // depend parent handle
        '1.0.0'
    );
}, 20); // priority 20 chạy sau parent (default 10)

Method 3 — @import (legacy, KHÔNG khuyến khích 2026)

Trước WordPress 4.7, pattern phổ biến là @import url('../parent/style.css') trong child style.css. Method này đã deprecated từ 2017.

• Render-blocking nặng: browser phải parse @import rồi mới download parent CSS — chậm hơn rõ rệt so với 2 wp_enqueue_style parallel.
• Không control version cache: không pass được version string cho cache busting — phải clear cache thủ công khi update.
• WordPress core khuyến nghị từ bỏ: mọi handbook chính thức 2018+ đều chỉ ra @import là anti-pattern — không có lý do giữ trong project mới.

Quản lý update parent theme — checklist verify 7 bước

Parent theme update có thể break child override. Đặc biệt khi parent rename function, đổi signature hook, hay refactor template structure — child override gọi function cũ sẽ fatal error.

Quy trình verify dưới đây là chuẩn workflow Web22 áp dụng cho mọi project có child theme. Skip bước nào cũng có nguy cơ production down.

Checklist 7 bước verify update

Bảy bước dưới phải làm tuần tự, không skip step. Mỗi step có vai trò riêng để bắt issue ở giai đoạn khác nhau của update.

1. Đọc changelog parent theme — tìm “breaking change”, “deprecated”, “removed function”
2. Backup site đầy đủ DB và uploads trước khi update — rollback plan bắt buộc
3. Test trên staging trước khi production — update parent staging, smoke test 30 phút
4. Check template override — diff file trong child với parent version mới có khác không
5. Check function override — parent có rename function hoặc hook child đang call không
6. Test critical user flow — homepage, single post, contact form, checkout, search
7. Push production off-peak hours kèm rollback plan rõ ràng nếu phát sinh issue

Tool track parent theme update

Manual track parent theme update tốn 1-2 giờ mỗi tháng. Vài tool dưới giúp tự động hoá phần lớn workflow này.

• WP Activity Log: notify ngay khi parent theme update, log đầy đủ file thay đổi — biết được khi nào cần verify mà không phải check thủ công.
• WP Rollback: rollback theme về version cũ trong 1 click nếu update break — backup plan đáng tin cậy hơn restore DB.
• Better WP Security: alert khi file template thay đổi không expected — bắt được trường hợp update gây sai file mà em không nhận.

Block theme child vs Classic theme child — context 2026

WordPress 5.9 (2022) introduce Block Theme với Full Site Editing và Site Editor. Child theme cho block theme khác classic ở 3 điểm cốt lõi về cấu trúc, style override, và admin UI.

Năm 2026, đa số theme mới được build dưới dạng block theme. Nếu parent là block theme, child cũng phải là block theme — không thể mix classic child với block parent.

Khác biệt cụ thể giữa hai pattern

Bốn khác biệt dưới ảnh hưởng trực tiếp tới cách viết child theme. Hiểu đúng giúp em chọn pattern phù hợp ngay từ đầu, không phải refactor sau.

• File template: classic dùng .php (single.php, page.php) — block dùng .html (templates/single.html, parts/header.html).
• Style override: classic enqueue CSS qua wp_enqueue_style — block override qua theme.json hoặc styles/*.json variation.
• Admin UI: classic dùng Customizer (Appearance → Customize) — block dùng Site Editor (Appearance → Editor).
• Inherit logic: block theme child auto-inherit theme.json parent — override field cụ thể chứ không replace toàn bộ.

Khi chọn block theme child trong 2026

Theme web22-2026 là hybrid (Block Editor ON với template classic .php). Child theme cho web22-2026 dùng pattern classic vì template chính vẫn là PHP (front-page.php, single-service.php).

Nếu parent là full Block Theme (Twenty Twenty-Four, Twenty Twenty-Five) thì child cũng phải là Block Theme — pattern cấu trúc và style override khác hoàn toàn.

Migration path từ classic sang block theme child

Project lâu dài nên migrate sang block theme khi có thể. Migration không phải drop-in replacement — cần plan rõ ràng và test kỹ trên staging.

• Audit template hiện tại: list mọi file PHP đang dùng — mapping sang HTML template tương ứng trong block theme.
• Migrate style sang theme.json: CSS variable token chuyển thành settings.color.palette và settings.typography.fontFamilies.
• Test Site Editor với editor flow: client phải dùng Site Editor thay Customizer — onboarding lại 1-2 buổi cho non-tech user.

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

Tài nguyên và bước tiếp theo

Child theme đúng pattern bảo vệ tùy biến qua mọi parent update và tiết kiệm 30-50 giờ dev so với rebuild theme từ đầu. Sau khi nắm cấu trúc cơ bản, mở rộng sang các topic kỹ thuật khác.

• functions.php best practice — 7 pattern theme WordPress scale — pattern functions.php cho child theme với enqueue đúng.
• Enqueue script style WordPress đúng cách — 4 hook + conditional load — 3 method enqueue parent style đúng thứ tự.
• Walker_Nav_Menu tùy biến — build mega menu WordPress — override Walker class từ parent qua child theme.
• Translate theme WordPress — i18n + .pot/.po/.mo workflow — child theme với text domain riêng và translation file.
• Dịch vụ thiết kế website WordPress chuyên nghiệp — gói thi công theme custom kèm setup child theme.

Cần đội Web22 setup child theme cho theme premium hoặc migrate từ classic sang block theme cho dự án của bạn? Thi công WordPress theo yêu cầu — block theme 2026 — bàn giao kèm document override, enqueue đúng thứ tự, rollback plan an toàn cho mọi parent update.