Viết một theme WordPress từ đầu là một quá trình bao gồm nhiều bước, từ việc tạo các tệp cơ bản đến việc thêm chức năng nâng cao. Hướng dẫn dưới đây sẽ giúp bạn từng bước tạo một theme WordPress đơn giản nhưng đầy đủ các tính năng cơ bản, kèm theo ví dụ mã cụ thể.

1. Thiết lập môi trường và tạo cấu trúc theme

Trước tiên, bạn cần một môi trường phát triển WordPress trên máy tính của mình. Các bước thiết lập môi trường bao gồm:

Cài đặt WordPress trên local bằng cách sử dụng các công cụ như XAMPP, MAMP, hoặc Local by Flywheel.
Tạo một thư mục mới cho theme của bạn trong thư mục wp-content/themes.

Ví dụ:

Tạo thư mục my-custom-theme trong wp-content/themes.
Bên trong thư mục theme, tạo các file cơ bản:
- style.css
- index.php
- functions.php

2. Tạo tệp `style.css`

Tệp style.css giúp định nghĩa kiểu dáng (CSS) và cũng là nơi chứa thông tin về theme của bạn, giúp WordPress nhận diện.

Cấu trúc của tệp `style.css`:

/*
 Theme Name: My Custom Theme
 Theme URI: http://example.com
 Author: Your Name
 Author URI: http://example.com
 Description: A simple custom theme
 Version: 1.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: my-custom-theme
*/

Sau khi khai báo phần meta này, bạn có thể thêm các quy tắc CSS cho giao diện website.

3. Tạo tệp `index.php`

Tệp index.php là file chính hiển thị nội dung của theme, bao gồm việc hiển thị các bài viết và trang của bạn. Đây là tệp mặc định nếu WordPress không tìm thấy các tệp mẫu khác như home.php hoặc single.php.

Ví dụ nội dung `index.php`:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?php bloginfo( 'name' ); ?></title>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

<header>
    <h1><?php bloginfo('name'); ?></h1>
    <p><?php bloginfo('description'); ?></p>
</header>

<div id="content">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            echo '<h2>' . get_the_title() . '</h2>';
            the_content();
        endwhile;
    else :
        echo '<p>No content found</p>';
    endif;
    ?>
</div>

<?php wp_footer(); ?>
</body>
</html>

4. Thêm `functions.php`

Tệp functions.php cho phép bạn thêm các chức năng tùy chỉnh vào theme. Bạn có thể sử dụng nó để thêm menu, widget, hoặc enqueue các file CSS/JavaScript.

Ví dụ nội dung `functions.php`:

<?php
// Đăng ký menu
function my_custom_theme_setup() {
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

// Đăng ký widget
function my_custom_widgets_init() {
    register_sidebar( array(
        'name'          => 'Sidebar',
        'id'            => 'sidebar-1',
        'before_widget' => '<div class="widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );
}
add_action( 'widgets_init', 'my_custom_widgets_init' );

// Enqueue CSS và JavaScript
function my_custom_enqueue_scripts() {
    wp_enqueue_style( 'style', get_stylesheet_uri() );
    wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/js/custom.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_enqueue_scripts' );
?>

5. Thêm file template khác

WordPress sử dụng các template khác nhau cho từng loại nội dung. Bạn có thể tạo thêm các tệp mẫu khác như single.php cho bài viết đơn, page.php cho trang, hoặc archive.php cho các trang lưu trữ.

Ví dụ `single.php` (hiển thị bài viết đơn lẻ):

<?php get_header(); ?>

<div id="content">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            echo '<h2>' . get_the_title() . '</h2>';
            the_content();
        endwhile;
    else :
        echo '<p>No content found</p>';
    endif;
    ?>
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Ví dụ `page.php` (hiển thị trang đơn lẻ):

<?php get_header(); ?>

<div id="content">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            echo '<h2>' . get_the_title() . '</h2>';
            the_content();
        endwhile;
    else :
        echo '<p>No content found</p>';
    endif;
    ?>
</div>

<?php get_footer(); ?>

6. Tạo tệp `header.php` và `footer.php`

Tệp header.php chứa phần đầu của trang web, bao gồm thẻ mở HTML, thông tin meta, và menu. Tệp footer.php chứa phần cuối trang.

Ví dụ `header.php`:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php wp_title(); ?></title>
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <header>
        <h1><?php bloginfo( 'name' ); ?></h1>
        <nav>
            <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
        </nav>
    </header>

Ví dụ `footer.php`:

    <footer>
        <p>&copy; <?php echo date( 'Y' ); ?> - <?php bloginfo( 'name' ); ?></p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

7. Sử dụng Widget và Sidebar

Tạo một tệp sidebar.php để hiển thị các widget được thêm qua WordPress Admin.

Ví dụ `sidebar.php`:

<div id="sidebar">
    <?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
        <?php dynamic_sidebar( 'sidebar-1' ); ?>
    <?php endif; ?>
</div>

8. Tùy chỉnh với Customizer

Bạn có thể thêm các tùy chọn tùy chỉnh thông qua Customizer để người dùng dễ dàng chỉnh sửa theme từ WordPress Admin.

Ví dụ:

function mytheme_customize_register( $wp_customize ) {
    $wp_customize->add_section( 'mytheme_colors' , array(
        'title'      => __( 'Theme Colors', 'mytheme' ),
        'priority'   => 30,
    ) );

    $wp_customize->add_setting( 'header_color' , array(
        'default'     => '#000000',
        'transport'   => 'refresh',
    ) );

    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_color', array(
        'label'      => __( 'Header Color', 'mytheme' ),
        'section'    => 'mytheme_colors',
        'settings'   => 'header_color',
    ) ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

9. Xử lý hình ảnh và thumbnail

Khi tạo theme, bạn cũng có thể sử dụng hình ảnh nổi bật (thumbnail) cho các bài viết.

Ví dụ:

// Hỗ trợ post thumbnail
add_theme_support( 'post-thumbnails' );

// Hiển thị thumbnail trong index.php
if ( has_post_thumbnail() ) {
    the_post_thumbnail();
}

Kết luận

Tạo theme WordPress từ đầu là một quá trình thú vị giúp bạn tùy chỉnh giao diện và chức năng của website. Hướng dẫn trên cung cấp cho bạn cái nhìn tổng quát và mã mẫu để bắt đầu. Sau khi nắm vững các bước cơ bản này, bạn có thể mở rộng với các tính năng nâng cao hơn như tùy chỉnh qua Customizer, tạo các post type riêng, hoặc tích hợp API.