Hướng Dẫn Tạo Child Theme WordPress

Child Theme là gì?

Child Theme có nghĩa là Theme con, kế thừa mọi chức năng từ Theme cha. Các bạn có thể tùy biến chức năng mà không phải lo nghĩ bị mất code nếu sai này update theme.

Hướng dẫn tạo child theme

Hầu hết các theme mới hiện nay đều có sẵn child theme trong source code. Tuy nhiên, một số theme cũ thì không có. Khi đó, nếu các bạn muốn tùy biến, thêm, sửa, xóa code thì có thể làm theo cách dưới đây để tạo 1 child theme.

Bước 1: Kiểm Tra Theme Cha

Mở file style.css từ theme cha (đường dẫn sẽ là tên-theme/style.css) các bạn sẽ thấy nguyên 1 đống text nằm trong phần comment như hình dưới, đó là những thông tin để định nghĩa một theme.

Dinh nghia theme cha

Chú ý 2 phần chính là Theme Nam và Text Domain. Như hình trên Theme Name là Cura là mình sẽ tạo Child Theme có tên là Cura Child.

Bước 2: Tạo Child Theme

Như ví dụ trên theme cha nằm trong thư mục cura thì mình sẽ tạo thư mục cura-child cho theme con. Trong thư mục cura-child, tạo 1 file style.css, sau đó thêm vào đoạn thông tin như theme cha (phần nằm trong comment) nhưng chú ý cho mình những điểm sau:
Theme Name nên là tên Theme cha + child (cura-child) và Template chính là Text Domain của theme cha (như ví dụ trên thì đó là cura).

/*
Theme Name: Cura Child
Theme URI: https://cura.radiantthemes.com/
Author: RadiantThemes
Author URI: https://radiantthemes.com
Template: cura
Description: Cura was designed for Health, Medical, Clinics, Hospitals, Skincare, Pet clinic, healthcare, and Pharmacy business. Cura is 100% responsive medical & healthcare WordPress theme. It comes with Elementor, Mega menu and Slider Revolution premium plugin. Cura is ecommerce & translation ready. It has nicely designed event calendar/timetable for clinics. For Physician, Healthcare & Medical Clinic business Cura is a nice choice. Cura is loaded with header & footer builder which means you have possibility to create unlimited header and footer layouts. You can edit header/footer and even blogs within Elementor. It's optimized for fast loading & performance.
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: cura-child
Tags: clinic, health, healthcare, treatment center, skin care, skin clinic, therapy, life coach, coaching, veterinary clinic, doctor, hospital, blog, shop, woocommerce, theme-options, left-sidebar, right-sidebar, header options, sticky post, translation ready, threaded comments

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Cura is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

Bước 3: Tạo file functions.php

Trong thư mục child theme, tạo tiếp file functions.php. Sau đó add đoạn code này vào để enqueue style từ theme cha:

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

function enqueue_parent_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

Vậy là xong. Tạo Child Theme thật đơn giản và chả có gì khó khăn cho những bạn mới làm quen với WordPress.

Leave a Comment