roi-theme/wp-content/themes/apus-theme/inc/category-badge.php

<?php
/**
 * Category Badge Functions
 *
 * Display category badges for posts with configurable settings.
 *
 * @package Apus_Theme
 * @since 1.0.0
 */

// Exit if accessed directly
if (!defined('ABSPATH')) {
    exit;
}

/**
 * Get Category Badge HTML
 *
 * Returns HTML markup for the first category badge.
 * Can be configured to show/hide via theme customizer.
 *
 * @param int  $post_id     Optional. Post ID. Defaults to current post.
 * @param bool $force_show  Optional. Force display regardless of settings. Default false.
 * @return string HTML markup for category badge or empty string.
 */
function apus_get_category_badge($post_id = null, $force_show = false) {
    // Get post ID if not provided
    if (!$post_id) {
        $post_id = get_the_ID();
    }

    // Check if category badges are enabled
    if (!$force_show && !apus_is_category_badge_enabled()) {
        return '';
    }

    // Get categories
    $categories = get_the_category($post_id);

    // Return empty if no categories
    if (empty($categories)) {
        return '';
    }

    // Get first category
    $category = $categories[0];

    // Build badge HTML
    $output = '<div class="category-badge-wrapper">';
    $output .= sprintf(
        '<a href="%s" class="category-badge" rel="category tag">%s</a>',
        esc_url(get_category_link($category->term_id)),
        esc_html($category->name)
    );
    $output .= '</div>';

    return $output;
}

/**
 * Display Category Badge
 *
 * Echoes the category badge HTML.
 *
 * @param int  $post_id     Optional. Post ID. Defaults to current post.
 * @param bool $force_show  Optional. Force display regardless of settings. Default false.
 */
function apus_the_category_badge($post_id = null, $force_show = false) {
    echo apus_get_category_badge($post_id, $force_show);
}

/**
 * Check if Category Badge is Enabled
 *
 * @return bool True if enabled, false otherwise.
 */
function apus_is_category_badge_enabled() {
    return (bool) get_theme_mod('apus_category_badge_enabled', true);
}

/**
 * Register Category Badge Settings in Customizer
 *
 * Adds controls to enable/disable category badges.
 *
 * @param WP_Customize_Manager $wp_customize Theme Customizer object.
 */
function apus_category_badge_customizer($wp_customize) {
    // Add section
    $wp_customize->add_section('apus_category_badge', array(
        'title'    => __('Category Badge', 'apus-theme'),
        'priority' => 31,
    ));

    // Enable/Disable setting
    $wp_customize->add_setting('apus_category_badge_enabled', array(
        'default'           => true,
        'sanitize_callback' => 'wp_validate_boolean',
        'transport'         => 'refresh',
    ));

    $wp_customize->add_control('apus_category_badge_enabled', array(
        'label'       => __('Enable Category Badge', 'apus-theme'),
        'description' => __('Show the first category as a badge above the post title in single posts.', 'apus-theme'),
        'section'     => 'apus_category_badge',
        'type'        => 'checkbox',
    ));

    // Badge background color
    $wp_customize->add_setting('apus_category_badge_bg_color', array(
        'default'           => '#0073aa',
        'sanitize_callback' => 'sanitize_hex_color',
        'transport'         => 'postMessage',
    ));

    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'apus_category_badge_bg_color', array(
        'label'   => __('Badge Background Color', 'apus-theme'),
        'section' => 'apus_category_badge',
    )));

    // Badge text color
    $wp_customize->add_setting('apus_category_badge_text_color', array(
        'default'           => '#ffffff',
        'sanitize_callback' => 'sanitize_hex_color',
        'transport'         => 'postMessage',
    ));

    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'apus_category_badge_text_color', array(
        'label'   => __('Badge Text Color', 'apus-theme'),
        'section' => 'apus_category_badge',
    )));
}
add_action('customize_register', 'apus_category_badge_customizer');

/**
 * Output Category Badge Inline Styles
 *
 * Outputs custom CSS for category badge colors.
 */
function apus_category_badge_styles() {
    $bg_color = get_theme_mod('apus_category_badge_bg_color', '#0073aa');
    $text_color = get_theme_mod('apus_category_badge_text_color', '#ffffff');

    $css = "
    <style id='apus-category-badge-inline-css'>
        .category-badge-wrapper {
            margin-bottom: 1rem;
        }

        .category-badge {
            display: inline-block;
            background-color: {$bg_color};
            color: {$text_color};
            padding: 0.5rem 1rem;
            font-size: 0.875rem;
            font-weight: 600;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            border-radius: 4px;
            transition: opacity 0.2s ease;
        }

        .category-badge:hover {
            opacity: 0.8;
            color: {$text_color};
        }

        .category-badge:focus {
            outline: 2px solid {$bg_color};
            outline-offset: 2px;
        }
    </style>
    ";

    echo $css;
}
add_action('wp_head', 'apus_category_badge_styles');

/**
 * Customize Preview JS for Live Preview
 *
 * Adds live preview support for category badge color changes.
 */
function apus_category_badge_customize_preview_js() {
    ?>
    <script type="text/javascript">
    (function($) {
        // Background Color
        wp.customize('apus_category_badge_bg_color', function(value) {
            value.bind(function(newval) {
                $('.category-badge').css('background-color', newval);
            });
        });

        // Text Color
        wp.customize('apus_category_badge_text_color', function(value) {
            value.bind(function(newval) {
                $('.category-badge').css('color', newval);
            });
        });
    })(jQuery);
    </script>
    <?php
}
add_action('customize_preview_init', function() {
    add_action('wp_footer', 'apus_category_badge_customize_preview_js');
});