Hướng dẫn Thiết Kế Theme WordPress Chi Tiết Từ A-Z Dành Cho Người Mới Bắt Đầu

Trong thế giới WordPress, theme chính là linh hồn của giao diện website. Dù bạn là một nhà phát triển chuyên nghiệp hay một người mới bắt đầu làm quen với mã nguồn mở này, việc thiết kế theme WordPress sẽ là hành trình giúp bạn hiểu rõ cách một website hoạt động từ bên trong. Nếu bạn từng tự hỏi “Làm sao để tạo theme WordPress của riêng mình từ con số 0?”, thì bài viết này chính là lời giải chi tiết nhất bạn đang tìm kiếm. Chúng tôi sẽ đồng hành cùng bạn qua từng bước, từ khâu lên ý tưởng đến khi hoàn thiện giao diện và tùy biến theme bằng ngôn ngữ PHP, HTML, CSS — tất cả đều minh bạch và thực chiến.

Bước 1: Lên Ý Tưởng Thiết Kế Theme WordPress

Trước khi viết một dòng code nào, bạn cần một bản vẽ phác thảo ý tưởng giao diện. Ví dụ, nếu bạn định phát triển một website tin tức, thì bố cục nên được tổ chức chặt chẽ và trực quan để người dùng dễ dàng tiếp cận thông tin.

Ý tưởng mẫu: Thiết kế theme WordPress dành cho trang tin tức.

Bố cục cơ bản gồm 4 phần chính:

• Header: Bao gồm tiêu đề trang và thanh điều hướng (menu).
  
• Main Content: Nơi hiển thị bài viết chính.
  
• Sidebar: Chứa các widget hỗ trợ như bài viết mới, chuyên mục, tìm kiếm.
  
• Footer: Phần chân trang bao gồm thông tin bản quyền và các widget bổ sung.
  

Bạn có thể tham khảo một số theme nổi tiếng như Astra hoặc GeneratePress để hiểu cách bố cục chuyên nghiệp hoạt động.

Bước 2: Tạo Cấu Trúc Thư Mục Cho Theme WordPress

Sau khi đã có ý tưởng, chúng ta sẽ xây dựng thư mục theme với các tệp tin cơ bản.

1. Tạo thư mục theme

Truy cập đường dẫn:
/wp-content/themes/
Tạo một thư mục mới, ví dụ: doankhien

2. Tạo tệp style.css

Đây là tệp bắt buộc, khai báo thông tin theme:

/*

* Theme Name: doankhien

* Theme URI: https://mdigi.vn/

* Author: Nguyen Doan Khien MDIGI

* Author URI: https://mdigi.vn/author/doankhien/

* Version: 1.0

* License: GNU General Public License v2 or later

* License URI: http://www.gnu.org/licenses/gpl-2.0.html

* Tags: basic, two-column, post-format

* Text Domain: doankhien

* Language Folder: /languages

*/

3. Tạo các tệp template cơ bản

Bạn cần tạo các tệp sau trong thư mục theme:

• functions.php
  
• index.php
  
• header.php
  
• footer.php
  
• page.php
  
• single.php
  
• sidebar.php
  
• content.php
  
• content-none.php
  
• archive.php
  
• search.php
  
• author.php
  
• 404.php
  

Ngoài ra, tạo thêm thư mục templates/ để chứa các template tùy chỉnh như full-width.php, contact.php.

Bước 3: Viết Code Cho Tệp functions.php

Nếu ví theme WordPress là một cơ thể, thì tệp functions.php chính là bộ não điều khiển mọi chức năng trong đó. Đây là tệp rất quan trọng và gần như bắt buộc phải có nếu bạn muốn theme hoạt động đúng cách.

Tệp này sẽ giúp bạn:

• Bật các tính năng mà theme hỗ trợ (như ảnh đại diện, định dạng bài viết, menu…)
  
• Tạo các vùng widget như sidebar, footer
  
• Load ngôn ngữ, CSS, và nhiều tiện ích khác
  

1. Tạo tệp functions.php

Bạn hãy tạo một tệp mới tên là functions.php trong thư mục theme của bạn (ví dụ: /wp-content/themes/doankhien/functions.php).

Mở file đó và thêm đoạn mã sau:

<?php

// Khai báo đường dẫn đến thư mục theme

define(‘THEME_URL’, get_stylesheet_directory());

// Thiết lập chiều rộng nội dung mặc định nếu chưa được khai báo

if (!isset($content_width)) {

    $content_width = 620;

}

Giải thích đơn giản:

• THEME_URL: là biến dùng để lưu đường dẫn tới thư mục theme, sẽ được dùng sau này để nạp file, ảnh…
  
• $content_width: dùng để xác định chiều rộng tối đa mà phần nội dung có thể hiển thị. Ví dụ như khi bạn chèn hình ảnh, video, chúng sẽ không bị vượt ra ngoài vùng nội dung.
  

2. Tạo hàm doankhien_theme_setup() để khởi tạo chức năng theme

if (!function_exists(‘doankhien_theme_setup’)) {

    function doankhien_theme_setup() {

        // Nạp file ngôn ngữ

        $language_folder = THEME_URL . ‘/languages’;

        load_theme_textdomain(‘doankhien’, $language_folder);

        // Bật tính năng ảnh đại diện

        add_theme_support(‘post-thumbnails’);

        // Bật tính năng tự động tạo <title> trong <head>

        add_theme_support(‘title-tag’);

        // Bật định dạng bài viết (Post Format)

        add_theme_support(‘post-formats’, array(‘image’, ‘video’, ‘gallery’, ‘quote’, ‘link’));

        // Bật tính năng background tùy chỉnh

        $default_background = array(‘default-color’ => ‘#e8e8e8’);

        add_theme_support(‘custom-background’, $default_background);

        // Đăng ký vị trí menu

        register_nav_menu(‘primary-menu’, __(‘Primary Menu’, ‘doankhien’));

        // Đăng ký sidebar chính

        $sidebar = array(

            ‘name’          => __(‘Main Sidebar’, ‘doankhien’),

            ‘id’            => ‘main-sidebar’,

            ‘description’   => ‘Khu vực sidebar chính của theme Doankhien’,

            ‘class’         => ‘main-sidebar’,

            ‘before_title’  => ‘<h3 class=”widgettitle”>’,

            ‘after_title’   => ‘</h3>’,

        );

        register_sidebar($sidebar);

    }

    // Gắn hàm khởi tạo vào hook ‘init’ của WordPress

    add_action(‘init’, ‘doankhien_theme_setup’);

}

Giải thích đơn giản từng phần:

3. Vì sao cần dùng add_action()?

Dòng:

add_action(‘init’, ‘doankhien_theme_setup’);

Có nghĩa là: Khi WordPress khởi động (ở giai đoạn init), nó sẽ gọi hàm doankhien_theme_setup() mà bạn đã viết ở trên.

Lưu ý: Phải gắn đúng vào hook (init hoặc after_setup_theme) tùy trường hợp. Ở ví dụ này, init là đủ cho người mới.

4. Mẹo dành cho người mới

• Không viết code trực tiếp vào các file template như index.php, header.php để hiển thị chức năng.
  Hãy tạo hàm trong functions.php rồi gọi lại. Việc này giúp bạn dễ quản lý, dễ sửa lỗi và dễ mở rộng sau này.
  

Một ví dụ thực tế

Giả sử bạn đang thiết kế cho một blog tin tức cá nhân. Bạn muốn người dùng có thể:

• Xem ảnh đại diện bài viết
  
• Có menu điều hướng
  
• Có sidebar để đặt widget
  
• Đổi màu nền theo ý thích
  

Thì chỉ cần dùng đoạn functions.php ở trên là đủ đáp ứng các nhu cầu đó — bạn không cần cài thêm plugin nào cả!

Bước 4: Tạo File header.php – Phần Đầu Trang Của Website

header.php là file chịu trách nhiệm hiển thị phần đầu tiên của website, bao gồm: khai báo HTML, tiêu đề website, logo, mô tả, menu điều hướng,…

1. Cấu trúc cơ bản bạn cần viết:

<!DOCTYPE html>

<html <?php language_attributes(); ?>>

<head>

    <meta charset=”<?php bloginfo(‘charset’); ?>” />

    <link rel=”profile” href=”http://gmgp.org/xfn/11″/>

    <link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>”/>

    <?php wp_head(); ?>

</head>

<body <?php body_class(); ?>>

<div id=”container”>

• wp_head() là đoạn mã cực kỳ quan trọng, giúp WordPress và các plugin khác chèn thêm những phần tử cần thiết vào thẻ <head>.
  
• body_class() giúp tự động thêm các class khác nhau cho trang, hỗ trợ thiết kế CSS.
  

2. Tạo logo và tên website bằng hàm riêng

Trong file functions.php, bạn viết hàm sau:

function doankhien_header() {

    ?>

    <div class=”site-name”>

        <?php if (is_home()) { ?>

            <h1><a href=”<?php echo home_url(); ?>”><?php bloginfo(‘name’); ?></a></h1>

        <?php } else { ?>

            <p><a href=”<?php echo home_url(); ?>”><?php bloginfo(‘name’); ?></a></p>

        <?php } ?>

    </div>

    <div class=”site-description”><?php bloginfo(‘description’); ?></div>

    <?php

}

Sau đó gọi hàm này trong header.php:

<div class=”logo”>

    <?php doankhien_header(); ?>

</div>

3. Tạo menu điều hướng

Cũng trong functions.php, bạn tạo một hàm để hiển thị menu:

function doankhien_menu($menu) {

    wp_nav_menu(array(

        ‘theme_location’ => $menu,

        ‘container’ => false,

        ‘menu_class’ => $menu

    ));

}

Và gọi trong header.php:

<?php doankhien_menu(‘primary-menu’); ?>

Bước 5: Tạo File footer.php – Phần Chân Trang

footer.php là nơi kết thúc trang web. Nó chứa các widget chân trang, bản quyền, và đóng các thẻ HTML như </body>, </html>.

1. Hiển thị 4 cột widget ở chân trang:

<div id=”footer-widgets”>

    <aside class=”fatfooter”>

        <div><?php dynamic_sidebar(‘first-footer-widget-area’); ?></div>

        <div><?php dynamic_sidebar(‘second-footer-widget-area’); ?></div>

        <div><?php dynamic_sidebar(‘third-footer-widget-area’); ?></div>

        <div><?php dynamic_sidebar(‘fourth-footer-widget-area’); ?></div>

    </aside>

</div>

Các widget này bạn đã đăng ký trong functions.php rồi nhé.

2. Hiển thị bản quyền

<div id=”footer”>

    <div id=”copyrights”>

        &copy; <?php echo date(‘Y’); ?> <a href=”<?php echo home_url(); ?>”><?php bloginfo(‘name’); ?></a>

    </div>

</div>

<?php wp_footer(); ?>

</body>

</html>

Lưu ý: wp_footer() giúp WordPress chèn các đoạn mã cần thiết cuối trang, rất quan trọng!

Bước 6: Tạo File index.php – Trang Chủ Cơ Bản

Đây là file quan trọng nhất trong theme. Nó dùng làm trang chủ mặc định khi chưa có trang nào khác thay thế.

1. Gọi phần header và footer

<?php get_header(); ?>

<div class=”content”>

    <div id=”main-content”>

        <!– Nội dung sẽ hiển thị tại đây –>

    </div>

    <div id=”sidebar”>

        <?php get_sidebar(); ?>

    </div>

</div>

<?php get_footer(); ?>

2. Hiển thị danh sách bài viết bằng vòng lặp WordPress

Trong #main-content, bạn thêm đoạn code sau:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    <?php get_template_part(‘content’, get_post_format()); ?>

<?php endwhile; else : ?>

    <?php get_template_part(‘content’, ‘none’); ?>

<?php endif; ?>

• get_template_part(‘content’, get_post_format()): tự động gọi file content.php, content-image.php, content-video.php… tùy theo định dạng bài viết.
  
• Nếu không có bài viết nào, nó sẽ gọi file content-none.php.
  

Bước 7: Tạo File content.php – Hiển Thị Bài Viết Riêng Lẻ

Đây là phần dùng để trình bày mỗi bài viết riêng lẻ trên trang chủ hoặc trang lưu trữ.

Cấu trúc HTML cơ bản:

<article id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>

    <div class=”entry-thumbnail”><?php doankhien_thumbnail(‘thumbnail’); ?></div>

    <div class=”entry-header”>

        <?php doankhien_entry_header(); ?>

        <?php doankhien_entry_meta(); ?>

    </div>

    <div class=”entry-content”>

        <?php doankhien_entry_content(); ?>

        <?php (is_single() ? doankhien_entry_tag() : ”); ?>

    </div>

</article>

Các hàm gọi trong functions.php như sau:

• doankhien_thumbnail() hiển thị ảnh đại diện
  
• doankhien_entry_header() hiển thị tiêu đề bài viết
  
• doankhien_entry_meta() hiển thị ngày tháng, tác giả, chuyên mục
  
• doankhien_entry_content() hiển thị nội dung chính
  
• doankhien_entry_tag() hiển thị tag (chỉ khi xem chi tiết bài viết)
  

Bước 8: Tạo Post Format – Hiển Thị Bài Viết Theo Định Dạng Riêng

Post Format giúp bạn hiển thị bài viết theo các kiểu khác nhau như: hình ảnh (image), video (video), trích dẫn (quote), liên kết (link)…

Ví dụ: content-image.php

<article id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>

    <div class=”entry-thumbnail”><?php doankhien_thumbnail(‘large’); ?></div>

    <div class=”entry-header”><?php doankhien_entry_header(); ?></div>

    <div class=”entry-content”><?php doankhien_entry_content(); ?></div>

</article>

Ví dụ: content-video.php

<article id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>

    <div class=”entry-header”><?php doankhien_entry_header(); ?></div>

    <div class=”entry-content”><?php the_content(); ?></div>

</article>

Gợi ý nhỏ: Nếu bạn tạo blog cá nhân, hãy tận dụng Post Format để làm cho trang của bạn phong phú hơn.

Bước 9: Viết Code Cho Các Trang Bài Viết (single.php) Và Trang Tĩnh (page.php)

single.php – Hiển thị bài viết chi tiết

Đây là file dùng để hiển thị một bài viết cụ thể, ví dụ như khi bạn click vào một bài trong danh sách bài viết. File này giúp bài viết hiển thị nội dung đầy đủ, kèm tên tác giả và phần bình luận.

Các bước thực hiện:

1. Tạo file single.php trong thư mục theme.
   
2. Copy lại cấu trúc của file index.php.
   
3. Thêm đoạn code hiển thị thông tin tác giả và khung bình luận:
   

<?php get_template_part(‘author-bio’); ?>

<?php comments_template(); ?>

page.php – Hiển thị trang tĩnh như Giới thiệu, Liên hệ

Tệp page.php tương tự single.php nhưng không cần phần bình luận hoặc tác giả (vì đây là các trang tĩnh không cần tương tác).

Bước 10: Viết Code Cho Các Trang Lưu Trữ, Tìm Kiếm Và Trang Lỗi 404

archive.php – Trang lưu trữ bài viết

Hiển thị danh sách bài viết theo danh mục (category), thẻ (tag), hoặc ngày đăng. Ví dụ: khi người dùng click vào danh mục “Tin tức”, thì archive.php sẽ hiển thị tất cả bài trong mục này.

Tính năng nên có:

• Tiêu đề hiển thị tên danh mục hoặc tag.
  
• Mô tả danh mục/tag nếu có.
  
• Danh sách bài viết.
  

author.php – Trang cá nhân của từng tác giả

Hiển thị các bài viết do một tác giả cụ thể viết. Bạn có thể thêm ảnh đại diện và phần giới thiệu về tác giả để tạo sự chuyên nghiệp và đáng tin cậy.

<div class=”author-box”>

  <div class=”author-avatar”><?php echo get_avatar(get_the_author_meta(‘ID’)); ?></div>

  <h3><?php printf(‘Tác giả: <a href=”%1$s”>%2$s</a>’, get_author_posts_url(get_the_author_meta(‘ID’)), get_the_author()); ?></h3>

  <p><?php echo get_the_author_meta(‘description’); ?></p>

</div>

search.php – Trang kết quả tìm kiếm

Hiển thị các bài viết liên quan đến từ khóa mà người dùng đã nhập vào khung tìm kiếm.

Nên có:

• Tiêu đề “Kết quả tìm kiếm cho từ khóa: …”
  
• Danh sách bài viết khớp từ khóa.
  
• Số lượng bài viết tìm được.
  

404.php – Trang báo lỗi không tìm thấy

Đây là trang hiện ra khi người dùng truy cập một đường dẫn sai. Bạn nên hiển thị:

• Dòng thông báo lỗi như “404 – Không tìm thấy trang”.
  
• Gợi ý người dùng sử dụng ô tìm kiếm.
  
• Liệt kê các chuyên mục hoặc bài viết phổ biến để giữ chân người truy cập.
  

Bước 11: Viết Code Cho Tệp sidebar.php – Thanh Bên Website

Sidebar là phần cột bên cạnh bài viết, thường chứa các tiện ích như:

• Bài viết mới nhất
  
• Tìm kiếm
  
• Chuyên mục
  
• Quảng cáo
  

Cách hiển thị sidebar:

Trong file sidebar.php, bạn chèn đoạn code sau:

<?php 

if (is_active_sidebar(‘main-sidebar’)) {

  dynamic_sidebar(‘main-sidebar’); 

} else {

  _e(‘Chưa có widget nào. Vào Giao diện -> Widget để thêm.’, ‘doankhien’);

}

?>

Giải thích đơn giản:

• is_active_sidebar() kiểm tra xem sidebar đã có widget chưa.
  
• dynamic_sidebar() hiển thị các widget đó.
  

Sau đó vào phần quản trị WordPress: Giao diện -> Widget để kéo các tiện ích vào thanh sidebar này.

Bước 12: Viết CSS Cho Giao Diện Theme

CSS là phần quyết định giao diện có đẹp hay không.

Cách nhúng CSS vào theme

Trong file functions.php, bạn tạo một hàm như sau:

function doankhien_style(){

  wp_register_style(‘main-style’, get_template_directory_uri().”/style.css”, array(), false, ‘all’);

  wp_enqueue_style(‘main-style’);

}

add_action(‘wp_enqueue_scripts’,’doankhien_style’);

Hàm trên giúp WordPress tự động load file style.css bạn đã viết.

Viết CSS cơ bản

Trong file style.css, bạn viết các dòng như:

body {

  font-size: 16px;

  font-family: Arial, sans-serif;

}

#main-content {

  width: 615px;

  float: left;

}

#sidebar {

  width: 300px;

  float: right;

}

Gợi ý hay: Bạn có thể dùng công cụ như Chrome DevTools để kiểm tra và điều chỉnh CSS theo thời gian thực.

Bước 13: Tạo File Ngôn Ngữ Đa Dạng Cho Theme (Đa ngôn ngữ)

Tại sao cần?

Khi thiết kế theme chuyên nghiệp, bạn nên hỗ trợ nhiều ngôn ngữ để có thể mở rộng thị trường hoặc giúp người dùng dễ sử dụng hơn.

Cách thực hiện

1. Tải phần mềm PoEdit.

2. Mở tệp style.css, khai báo dòng:

* Text Domain: doankhien

* Language Folder: /languages

3. Trong PoEdit:

• Tạo tệp mới > chọn ngôn ngữ (ví dụ: Vietnamese).
  
• Lưu với tên: vi.po trong thư mục /languages/ của theme.
  
• Sau khi lưu sẽ tạo ra thêm file vi.mo.
  

4. Vào WordPress admin: Settings → General → Site Language → chọn Tiếng Việt.

Lời nhắn cho người mới bắt đầu:

Bạn không cần giỏi tất cả mọi thứ để bắt đầu. Chỉ cần hiểu cấu trúc cơ bản, biết cách tạo các file cần thiết, và chỉnh sửa từng chút một theo nhu cầu thực tế. Mỗi theme bạn tự tay hoàn thành là một dấu mốc trưởng thành trong hành trình làm web chuyên nghiệp.

Nếu bạn kiên trì đến bước này — thì xin chúc mừng, bạn đã vượt qua rào cản lớn nhất!

Phụ Lục: Những Lỗi Phổ Biến Khi Thiết Kế Theme WordPress

Câu Hỏi Thường Gặp (FAQs)

1. Có thể thiết kế theme mà không biết PHP không?

Có thể, nhưng sẽ rất hạn chế. Bạn cần nắm ít nhất kiến thức cơ bản về PHP để hiểu cách WordPress load template.

2. Theme tự viết có SEO tốt hơn theme mua không?

Điều này tùy thuộc vào cách bạn tối ưu theme. Tuy nhiên, theme tự viết sẽ loại bỏ những thành phần thừa giúp tăng tốc độ tải trang — một yếu tố quan trọng trong SEO.

3. Theme viết tay có dùng được với Elementor không?

Có, nhưng bạn cần khai báo các vùng tương thích. Tuy nhiên, nếu đã dùng Elementor thì việc viết theme thủ công thường không cần thiết nữa.

Tư Vấn Từ Chuyên Gia

“Một theme chuẩn cần đảm bảo 3 yếu tố: sạch về mã, nhẹ về tải, và dễ mở rộng.” — Nguyễn Đức Trọng, Giảng viên WordPress tại FUNiX.

Lời Kết

Thiết kế theme WordPress là hành trình học hỏi không ngừng. Qua từng dòng code, bạn sẽ không chỉ tạo ra một giao diện cho riêng mình, mà còn hiểu sâu hơn về cách WordPress vận hành. Không chỉ là một kỹ năng — nó còn là nền tảng để bạn phát triển các sản phẩm số chuyên nghiệp.

Nếu bạn đang phân vân có nên bắt đầu không, hãy nhớ: Không bao giờ là quá sớm hoặc quá muộn để làm chủ một công cụ mạnh mẽ như WordPress. Bắt đầu hôm nay — từng bước một!

Chúc bạn thành công trên hành trình lập trình giao diện WordPress!