Share Code tạo Element Danh Mục Bài Viết mới xuất hiện trong UX Builder Theme Flatsome

Code phía dưới sẽ giúp tạo một cái Element Danh Mục Bài Viết mới xuất hiện trong UX Builder như ảnh trên cho theme Flatsome:
Kết quả sau khi sử dụng ta được

Đây là code, code này sẽ chèn vào functions.php của child-theme nhé!

// Đăng ký custom element vào UX Builder với danh mục động
function flatsome_register_custom_element_danhmuc() {
    if (function_exists('add_ux_builder_shortcode')) {
        // Lấy danh sách các danh mục (categories)
        $categories = get_categories(['hide_empty' => false]);
        $category_options = [];


        foreach ($categories as $category) {
            $category_options[$category->term_id] = $category->name;
        }


        add_ux_builder_shortcode('danhmuc', [
            'name' => __('Danh Mục Bài Viết', 'flatsome'),
            'category' => __('Custom Elements', 'flatsome'),
            'info' => __('Hiển thị danh sách bài viết theo danh mục.', 'flatsome'),
            'options' => [
                'id' => [
                    'type' => 'select',
                    'heading' => __('Chọn Danh Mục', 'flatsome'),
                    'options' => $category_options,
                    'default' => '',
                ],
                'limit' => [
                    'type' => 'slider',
                    'heading' => __('Số lượng bài viết', 'flatsome'),
                    'default' => 5,
                    'min' => 1,
                    'max' => 20,
                ],
            ],
        ]);
    }
}
add_action('init', 'flatsome_register_custom_element_danhmuc');


// Xử lý render nội dung của element
function ux_builder_render_danhmuc($atts, $content = null) {
    $atts = shortcode_atts([
        'id' => '',
        'limit' => 5,
    ], $atts);


    return do_shortcode('[danhmuc id="' . esc_attr($atts['id']) . '" limit="' . intval($atts['limit']) . '"]');
}
add_shortcode('danhmuc', 'ux_builder_render_danhmuc');


function danhmuc_shortcode($atts) {
    $atts = shortcode_atts(array(
        'id' => '', // ID danh mục
        'limit' => 5 // Số lượng bài viết hiển thị
    ), $atts);


    $query_args = array(
        'cat' => $atts['id'],
        'posts_per_page' => $atts['limit']
    );


    $query = new WP_Query($query_args);


    if ($query->have_posts()) {
        ob_start();


        // Chèn CSS trực tiếp
        echo '<style>
            .danhmuc_posts {
                display: flex;
                flex-direction: column;
                gap: 15px;
            }
            .danhmuc_item {
                display: flex;
                flex-direction: column;
                gap: 10px;
                border-bottom: 1px solid #eee;
                padding-bottom: 15px;
            }
            .danhmuc_thumb {
                width: 100%;
                max-width: 120px;
                height: 80px;
                flex-shrink: 0;
                border-radius: 5px;
                object-fit: cover;
            }
            .danhmuc_content {
                display: flex;
                flex-direction: row;
                gap: 15px;
            }
            .danhmuc_title {
                font-size: 100%;
                font-weight: 600;
                color: #333;
                line-height: 1.2;
            }
.danhmuc_title:hover {color: red;}
            .danhmuc_excerpt {
                font-size: 90%;
                color: #666;
                margin-top: 5px;
                line-height: 1;
            }
            .danhmuc_button {
                font-size: 80%;
                color: #fff!important;
                background-color: #44951E;
                border: none;
                border-radius: 99px;
                padding: 2px 10px;
                text-decoration: none;
                display: inline-block;
                margin-top: 10px;
            }
            .danhmuc_button:hover {
                background-color: green;
            }
        </style>';


        // Bắt đầu render HTML
        echo '<div class="danhmuc_posts">';
        while ($query->have_posts()) {
            $query->the_post();
            echo '<div class="danhmuc_item">';
            echo '<div class="danhmuc_content">';
            echo '<img src="' . get_the_post_thumbnail_url(null, 'thumbnail') . '" class="danhmuc_thumb" alt="' . get_the_title() . '">';
            echo '<div>';
            echo '<a href="' . get_the_permalink() . '" class="danhmuc_title">' . get_the_title() . '</a>';
            echo '<div class="danhmuc_excerpt">' . wp_trim_words(get_the_excerpt(), 10, '...') . ' <a href="' . get_the_permalink() . '" class="danhmuc_button">Xem tiếp</a></div>';
            echo '';
            echo '</div>';
            echo '</div>'; // Kết thúc .danhmuc_content
            echo '</div>'; // Kết thúc .danhmuc_item
        }
        echo '</div>';


        wp_reset_postdata();
        return ob_get_clean();
    } else {
        return '<p>Không có bài viết nào.</p>';
    }
}
add_shortcode('danhmuc', 'danhmuc_shortcode');
// Đăng ký element mới vào UX Builder
function register_ux_builder_element_danhmuc() {
    if (function_exists('ux_builder_register_element')) {
        ux_builder_register_element('Danhmuc_Element', [
            'name' => __('Danh Mục Bài Viết', 'flatsome'),
            'category' => __('Custom Elements', 'flatsome'),
            'options' => [
                'id' => [
                    'type' => 'textfield',
                    'heading' => __('ID Danh Mục', 'flatsome'),
                    'default' => '',
                ],
                'limit' => [
                    'type' => 'slider',
                    'heading' => __('Số lượng bài viết', 'flatsome'),
                    'default' => 5,
                    'min' => 1,
                    'max' => 20,
                ],
            ],
        ]);
    }
}
add_action('init', 'register_ux_builder_element_danhmuc');


// Tạo class xử lý shortcode trong UX Builder
if (!class_exists('Danhmuc_Element')) {
    class Danhmuc_Element {
        public static function render($options) {
            // Gọi shortcode danhmuc đã tạo
            $id = isset($options['id']) ? esc_attr($options['id']) : '';
            $limit = isset($options['limit']) ? intval($options['limit']) : 5;


            return do_shortcode('[danhmuc id="' . $id . '" limit="' . $limit . '"]');
        }
    }
}