Tổng hợp code tùy biến Search Form trong Genesis Child Theme

Trong bài này, mình sẽ hướng dẫn các bạn cách tùy biến Search Form (khung tìm kiếm) trong Genesis Framework và Child Theme một cách cực kỳ đơn giản. Bạn chỉ cần copy các đoạn code snippets giúp tùy biến khung tìm kiếm và thêm chúng vào file functions.php của child theme mà bạn đang sử dụng.

Lưu ý: Hãy backup lại file functions.php lại phòng khi xảy ra lỗi trong quá trình thực hiện nhé.

Code tùy biến Search Form Genesis

Với những đoạn code mình chia sẻ bên dưới bạn có thể thiết kế lại khung tìm kiếm trong Genesis theo phong cách riêng của mình.

1. Tùy biến dòng chữ trong khung nhập dữ liệu

Đoạn code dưới đây sẽ giúp bạn thay đổi dòng chữ “Search this website” xuất hiện trong khung tìm kiếm

// Tùy biến dòng chữ trong khung nhập dữ liệu tìm kiếm của Genesis
add_filter( 'genesis_search_text', 'favorite_search_text' );
function favorite_search_text( $text ) {
    return esc_attr( 'Tìm kiếm…' );
}

2. Tùy biến nút tìm kiếm

Sử dụng code dưới đây thay đổi nút button Search theo ý của bạn.

// Tùy biến nút tìm kiếm trong Genesis
add_filter( 'genesis_search_button_text', 'favorite_search_button_text' );
function favorite_search_button_text( $text ) {
    return esc_attr( 'Tìm kiếm' );
}

3. Tùy biến nhãn của khung tìm kiếm

// Tùy biến nhãn của khung tìm kiếm trong Genesis
add_filter( 'genesis_search_form_label', 'favorite_search_form_label' );
function favorite_search_form_label ( $text ) {
    return esc_attr( 'Tìm kiếm trên blog của tôi' );
}

4. Thêm khung tìm kiếm vào Menu

add_filter('wp_nav_menu_items', 'favorite_menu_extras', 10, 2);
/**
* @author Dinh Quyen Duong
* @example https://b1.brokengroundgame.com/tuy-bien-khung-tim-kiem-genesis/
* @copyright 2020 Quyền Dương IT
*/
function favorite_menu_extras($menu, $args) {
    if ('primary' !== $args->theme_location)
        return $menu;
        ob_start();
        get_search_form();
        $search = ob_get_clean();
        $menu .= '<li class="right search">' . $search . '</li>';
        return $menu;
}

Trên đây là toàn bộ những gì bạn cần để tùy biến khung tìm kiếm trong Genesis Framework theo phong cách của riêng bạn. Nếu bạn biết những đoạn code nào khác để tùy biến search form trong Genesis thì hãy chia sẻ nó dưới phần bình luận nhé. Chúc các bạn thành công!