Custom Team Slider Kaise Banaye WordPress Me

September 1, 2025

परिचय (Introduction)

नमस्ते दोस्तों,

इस ट्यूटोरियल में मैं आपको बताऊँगा कि कैसे एक Custom Team Slider वर्डप्रेस में एक कस्टम वर्डप्रेस प्लगइन के ज़रिए बनाया जाता है।

इस प्लगइन में हम टीम मेंबर्स के लिए एक कस्टम टीम स्लाइडर (कैरोसेल स्लाइडर) बनाएँगे और “टीम” मेन्यू के अंदर एक सेटिंग्स सबमेन्यू जोड़ेंगे। इस सेटिंग्स पेज से आप स्लाइडर के ऑप्शन्स जैसे ऑटोप्ले, लूप, नैविगेशन एरो, डॉट्स और स्पीड को कॉन्फ़िगर कर पाएँगे।

हम एक शॉर्टकोड कॉपी बटन भी जोड़ेंगे ताकि आप आसानी से शॉर्टकोड को कॉपी कर वर्डप्रेस में कहीं भी पेस्ट कर सकें।

यह प्लगइन टीम मेंबर की डिटेल्स (रोल/डिज़िग्नेशन और सोशल मीडिया लिंक – Facebook, Twitter, LinkedIn) भी सपोर्ट करता है।

चलिए शुरू करते हैं।

1. फ़ोल्डर स्ट्रक्चर (Custom Team Slider)

सबसे पहले हमें plugins डायरेक्टरी के अंदर प्लगइन का फ़ोल्डर और मेन फाइल बनानी होगी।

-- plugins (folder)
   -- custom-team (folder)
      -- custom-team.php (file)

इसके बाद इस फाइल में प्लगइन हेडर डालते हैं:

/*
Plugin Name: Custom Team Members with Slider
Description: Manage Team members with Owl Carousel slider, social icons, and settings. Shortcode: [team_slider]
Version: 1.1
Author: Your Name
*/

2. प्लगइन बनाने के स्टेप्स (Steps for Plugin)

हम इस प्लगइन को स्टेप-बाय-स्टेप बनाएँगे:

टीम के लिए कस्टम पोस्ट टाइप (CPT) + थंबनेल्स
मेटाबॉक्स जोड़ना: रोल + सोशल लिंक्स
फ्रंट-एंड एसेट्स (Owl Carousel, FontAwesome, CSS/JS)
शॉर्टकोड बनाना: [team_slider]
एडमिन सबमेन्यू: स्लाइडर सेटिंग्स

3. कस्टम पोस्ट टाइप (CPT) + थंबनेल्स

हम एक कस्टम पोस्ट टाइप Team बनाएँगे।

इससे आप वर्डप्रेस डैशबोर्ड में टीम मेंबर्स को ऐड, एडिट, अपडेट और डिलीट कर सकते हैं। हर टीम मेंबर के लिए प्रोफ़ाइल पिक्चर (थंबनेल) भी सपोर्ट होगा।

// =====================================================
// 1) Register Team CPT + thumbnails
// =====================================================
function ct_register_team_cpt() {
    $labels = array(
        'name'               => 'Team',
        'singular_name'      => 'Team Member',
        'menu_name'          => 'Our Team',
        'name_admin_bar'     => 'Team Member',
        'add_new'            => 'Add New',
        'add_new_item'       => 'Add New Team Member',
        'new_item'           => 'New Team Member',
        'edit_item'          => 'Edit Team Member',
        'view_item'          => 'View Team Member',
        'all_items'          => 'All Team Members',
        'search_items'       => 'Search Team Members',
    );
    $args = array(
        'labels'       => $labels,
        'public'       => true,
        'show_ui'      => true,
        'show_in_menu' => true,
        'menu_icon'    => 'dashicons-groups',
        'supports'     => array('title', 'editor', 'thumbnail'),
    );
    register_post_type('team', $args);
}
add_action('init', 'ct_register_team_cpt');

function ct_enable_team_thumbs() {
    add_theme_support('post-thumbnails', array('team'));
}
add_action('after_setup_theme', 'ct_enable_team_thumbs');

Custom Team Slider

4. मेटाबॉक्स: रोल + सोशल लिंक्स

अब हम हर टीम मेंबर के लिए एक कस्टम मेटाबॉक्स जोड़ेंगे।

इसमें होंगे:

रोल / डिज़िग्नेशन
फेसबुक URL
ट्विटर URL
लिंक्डइन URL

// =====================================================
// 2) Metabox: Role + Social Links
// =====================================================
function ct_add_team_metabox() {
    add_meta_box(
        'ct_team_details',
        'Team Member Details',
        'ct_team_metabox_html',
        'team',
        'normal',
        'default'
    );
}
add_action('add_meta_boxes', 'ct_add_team_metabox');

function ct_team_metabox_html($post) {
    wp_nonce_field('ct_team_save_meta', 'ct_team_nonce');

    $role    = get_post_meta($post->ID, '_team_role', true);
    $fb      = get_post_meta($post->ID, '_team_fb', true);
    $twitter = get_post_meta($post->ID, '_team_twitter', true);
    $linkedin= get_post_meta($post->ID, '_team_linkedin', true);
    ?>
    <p>
        <label><strong>Role / Designation</strong></label><br>
        <input type="text" name="team_role" value="<?php echo esc_attr($role); ?>" style="width:100%">
    </p>
    <p>
        <label><strong>Facebook URL</strong></label><br>
        <input type="url" name="team_fb" value="<?php echo esc_url($fb); ?>" style="width:100%">
    </p>
    <p>
        <label><strong>Twitter URL</strong></label><br>
        <input type="url" name="team_twitter" value="<?php echo esc_url($twitter); ?>" style="width:100%">
    </p>
    <p>
        <label><strong>LinkedIn URL</strong></label><br>
        <input type="url" name="team_linkedin" value="<?php echo esc_url($linkedin); ?>" style="width:100%">
    </p>
    <?php
}

function ct_save_team_meta($post_id) {
    if (!isset($_POST['ct_team_nonce']) || !wp_verify_nonce($_POST['ct_team_nonce'], 'ct_team_save_meta')) {
        return;
    }
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
    if (isset($_POST['post_type']) && 'team' === $_POST['post_type']) {
        if (!current_user_can('edit_post', $post_id)) return;
    } else {
        return;
    }

    $fields = [
        'team_role'    => '_team_role',
        'team_fb'      => '_team_fb',
        'team_twitter' => '_team_twitter',
        'team_linkedin'=> '_team_linkedin',
    ];
    foreach ($fields as $form => $meta) {
        if (isset($_POST[$form])) {
            update_post_meta($post_id, $meta, sanitize_text_field($_POST[$form]));
        }
    }
}
add_action('save_post', 'ct_save_team_meta');

Custom Team Slider

5. फ्रंट-एंड एसेट्स

फ्रंट-एंड पर स्लाइडर चलाने के लिए हमें कुछ CSS और JS फाइलें लोड करनी होंगी:

Owl Carousel (स्लाइडर फ़ंक्शन के लिए)
Font Awesome (सोशल आइकॉन्स के लिए)
कस्टम CSS (कार्ड डिज़ाइन के लिए)

// =====================================================
// 3) Front-end assets (Owl Carousel + FontAwesome + styles)
// =====================================================
function ct_enqueue_team_assets() {
    // Owl Carousel
    wp_enqueue_style('owl-carousel', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css', array(), '2.3.4');
    wp_enqueue_style('owl-theme', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css', array('owl-carousel'), '2.3.4');
    wp_enqueue_script('owl-carousel', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js', array('jquery'), '2.3.4', true);

    // Font Awesome
    wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css', array(), '6.5.1');

    $css = '
    .ct-team-card { background:#fff; border:1px solid #eee; border-radius:12px; padding:24px; box-shadow:0 4px 12px rgba(0,0,0,0.06); text-align:center; }
    .ct-team-card .ct-photo { border-radius:50%; object-fit:cover; display:block; margin:0 auto 12px; }
    .ct-team-card .ct-name { font-weight:700; font-size:16px; margin:6px 0 0; }
    .ct-team-card .ct-role { color:#6c757d; font-size:13px; margin-bottom:10px; }
    .ct-team-card .ct-text { font-size:14px; color:#444; margin:8px 0; }
    .ct-team-card .ct-social a { margin:0 6px; color:#0073aa; font-size:18px; }
    .ct-team-card .ct-social a:hover { color:#111; }
    ';
    wp_add_inline_style('owl-carousel', $css);
}
add_action('wp_enqueue_scripts', 'ct_enqueue_team_assets');

6. शॉर्टकोड: `[team_slider]`

हम [team_slider] नाम का शॉर्टकोड बनाएँगे।

इस शॉर्टकोड को आप अपनी साइट के कहीं भी (पोस्ट, पेज या विजेट) इस्तेमाल कर सकते हैं।

स्लाइडर में दिखाई देगा:

टीम मेंबर की इमेज (या डिफ़ॉल्ट अवतार)
नाम और रोल
बायो / डिस्क्रिप्शन
सोशल मीडिया आइकॉन्स

// =====================================================
// 4) Shortcode: [team_slider]
// =====================================================
function ct_team_slider_shortcode() {
    $defaults = array(
        'items'      => 3,
        'autoplay'   => true,
        'loop'       => true,
        'speed'      => 3000,
        'nav'        => true,
        'dots'       => true,
        'image_size' => 120,
    );
    $settings = wp_parse_args(get_option('ct_team_slider_settings', array()), $defaults);

    $q = new WP_Query(array(
        'post_type'      => 'team',
        'posts_per_page' => -1,
        'post_status'    => 'publish',
    ));

    // Dummy team members if no posts exist
    $dummy_team = array(
        array(
            'name'    => 'Alice Johnson',
            'role'    => 'Project Manager',
            'text'    => 'Alice is responsible for managing projects and ensuring smooth delivery.',
            'fb'      => '#',
            'twitter' => '#',
            'linkedin'=> '#',
            'image'   => plugins_url('images/team1.png', __FILE__),
        ),
        array(
            'name'    => 'Robert Williams',
            'role'    => 'Lead Developer',
            'text'    => 'Robert specializes in backend development and WordPress customization.',
            'fb'      => '#',
            'twitter' => '#',
            'linkedin'=> '#',
            'image'   => plugins_url('images/team2.png', __FILE__),
        ),
        array(
            'name'    => 'Sophia Brown',
            'role'    => 'UI/UX Designer',
            'text'    => 'Sophia designs user-friendly and attractive web interfaces.',
            'fb'      => '#',
            'twitter' => '#',
            'linkedin'=> '#',
            'image'   => plugins_url('images/team3.png', __FILE__),
        ),
    );

    ob_start();
    ?>
    <div class="owl-carousel ct-team-slider">
        <?php if ($q->have_posts()): while ($q->have_posts()): $q->the_post();
            $img = get_the_post_thumbnail_url(get_the_ID(), 'thumbnail');
            if (!$img) {
                $img = 'https://via.placeholder.com/' . intval($settings['image_size']);
            }

            $role    = get_post_meta(get_the_ID(), '_team_role', true);
            $fb      = get_post_meta(get_the_ID(), '_team_fb', true);
            $twitter = get_post_meta(get_the_ID(), '_team_twitter', true);
            $linkedin= get_post_meta(get_the_ID(), '_team_linkedin', true);
            ?>
            <div class="ct-team-card">
                <img class="ct-photo" src="<?php echo esc_url($img); ?>"
                     alt="<?php echo esc_attr(get_the_title()); ?>"
                     style="width:<?php echo intval($settings['image_size']); ?>px;height:<?php echo intval($settings['image_size']); ?>px;object-fit:cover;border-radius: 50%!important;">

                <div class="ct-name"><?php echo esc_html(get_the_title()); ?></div>
                <?php if ($role): ?>
                    <div class="ct-role"><?php echo esc_html($role); ?></div>
                <?php endif; ?>
                <div class="ct-text"><?php echo wp_kses_post(get_the_content()); ?></div>

                <div class="ct-social">
                    <?php if ($fb): ?><a href="<?php echo esc_url($fb); ?>" target="_blank"><i class="fab fa-facebook-f"></i></a><?php endif; ?>
                    <?php if ($twitter): ?><a href="<?php echo esc_url($twitter); ?>" target="_blank"><i class="fab fa-twitter"></i></a><?php endif; ?>
                    <?php if ($linkedin): ?><a href="<?php echo esc_url($linkedin); ?>" target="_blank"><i class="fab fa-linkedin-in"></i></a><?php endif; ?>
                </div>
            </div>
        <?php endwhile; wp_reset_postdata();
        else:
            foreach ($dummy_team as $d): ?>
                <div class="ct-team-card">
                    <img class="ct-photo" src="<?php echo esc_url($d['image']); ?>"
                         alt="<?php echo esc_attr($d['name']); ?>"
                         style="width:<?php echo intval($settings['image_size']); ?>px;height:<?php echo intval($settings['image_size']); ?>px;object-fit:cover;border-radius: 50%!important;">

                    <div class="ct-name"><?php echo esc_html($d['name']); ?></div>
                    <div class="ct-role"><?php echo esc_html($d['role']); ?></div>
                    <div class="ct-text"><?php echo esc_html($d['text']); ?></div>

                    <div class="ct-social">
                        <?php if ($d['fb']): ?><a href="<?php echo esc_url($d['fb']); ?>" target="_blank"><i class="fab fa-facebook-f"></i></a><?php endif; ?>
                        <?php if ($d['twitter']): ?><a href="<?php echo esc_url($d['twitter']); ?>" target="_blank"><i class="fab fa-twitter"></i></a><?php endif; ?>
                        <?php if ($d['linkedin']): ?><a href="<?php echo esc_url($d['linkedin']); ?>" target="_blank"><i class="fab fa-linkedin-in"></i></a><?php endif; ?>
                    </div>
                </div>
            <?php endforeach;
        endif; ?>
    </div>

    <script>
    jQuery(document).ready(function($){
        $(".ct-team-slider").owlCarousel({
            items: <?php echo intval($settings['items']); ?>,
            autoplay: <?php echo !empty($settings['autoplay']) ? 'true' : 'false'; ?>,
            loop: <?php echo !empty($settings['loop']) ? 'true' : 'false'; ?>,
            nav: <?php echo !empty($settings['nav']) ? 'true' : 'false'; ?>,
            dots: <?php echo !empty($settings['dots']) ? 'true' : 'false'; ?>,
            autoplayTimeout: <?php echo intval($settings['speed']); ?>,
            margin: 20,
            responsive:{
                0:{items:1},
                768:{items:2},
                1024:{items:<?php echo intval($settings['items']); ?>}
            }
        });
    });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('team_slider', 'ct_team_slider_shortcode');

7. एडमिन सबमेन्यू: स्लाइडर सेटिंग्स

टीम मेन्यू के नीचे एक स्लाइडर सेटिंग्स सबमेन्यू बनेगा।

यहाँ से आप कॉन्फ़िगर कर सकते हैं:

एक बार में कितने आइटम्स दिखें
Autoplay on/off
ऑटोप्ले ऑन/ऑफ
लूप ऑन/ऑफ
नेविगेशन एरो ऑन/ऑफ
डॉट्स ऑन/ऑफ
ऑटोप्ले स्पीड (ms में)
इमेज साइज (px में)

साथ ही, यहाँ एक शॉर्टकोड कॉपी बटन भी मिलेगा ताकि आप तुरंत [team_slider] का इस्तेमाल कर सकें।

// =====================================================
// 5) Admin submenu: Slider Settings
// =====================================================
function ct_register_team_slider_settings_page() {
    add_submenu_page(
        'edit.php?post_type=team',
        'Slider Settings',
        'Slider Settings',
        'manage_options',
        'ct-team-slider-settings',
        'ct_team_slider_settings_page'
    );
}
add_action('admin_menu', 'ct_register_team_slider_settings_page');

function ct_team_slider_settings_page() {
    if (isset($_POST['save_ct_team_settings'])) {
        if (!current_user_can('manage_options')) { return; }

        $settings = array(
            'items'      => isset($_POST['items']) ? intval($_POST['items']) : 3,
            'autoplay'   => !empty($_POST['autoplay']),
            'loop'       => !empty($_POST['loop']),
            'speed'      => isset($_POST['speed']) ? intval($_POST['speed']) : 3000,
            'nav'        => !empty($_POST['nav']),
            'dots'       => !empty($_POST['dots']),
            'image_size' => isset($_POST['image_size']) ? max(40, intval($_POST['image_size'])) : 120,
        );
        update_option('ct_team_slider_settings', $settings);
        echo '<div class="updated"><p>Settings Saved.</p></div>';
    }

    $defaults = array(
        'items'      => 3,
        'autoplay'   => true,
        'loop'       => true,
        'speed'      => 3000,
        'nav'        => true,
        'dots'       => true,
        'image_size' => 120,
    );
    $settings = wp_parse_args(get_option('ct_team_slider_settings', array()), $defaults);
    ?>
    <div class="wrap">
        <h1>Team Slider Settings</h1>
        <form method="post">
            <table class="form-table">
                <tr>
                    <th scope="row">Items Visible</th>
                    <td><input type="number" name="items" min="1" max="10" value="<?php echo esc_attr($settings['items']); ?>"></td>
                </tr>
                <tr>
                    <th scope="row">Autoplay</th>
                    <td><input type="checkbox" name="autoplay" <?php checked($settings['autoplay'], true); ?>></td>
                </tr>
                <tr>
                    <th scope="row">Loop</th>
                    <td><input type="checkbox" name="loop" <?php checked($settings['loop'], true); ?>></td>
                </tr>
                <tr>
                    <th scope="row">Show Navigation Arrows</th>
                    <td><input type="checkbox" name="nav" <?php checked($settings['nav'], true); ?>></td>
                </tr>
                <tr>
                    <th scope="row">Show Dots</th>
                    <td><input type="checkbox" name="dots" <?php checked($settings['dots'], true); ?>></td>
                </tr>
                <tr>
                    <th scope="row">Autoplay Speed (ms)</th>
                    <td><input type="number" name="speed" min="1000" step="100" value="<?php echo esc_attr($settings['speed']); ?>"></td>
                </tr>
                <tr>
                    <th scope="row">Image Size (px)</th>
                    <td><input type="number" name="image_size" min="40" max="300" value="<?php echo esc_attr($settings['image_size']); ?>"></td>
                </tr>
            </table>
            <p><input type="submit" name="save_ct_team_settings" class="button-primary" value="Save Settings"></p>
        </form>

        <h2>Use this Shortcode</h2>
        <p>
            <input type="text" value="[team_slider]" id="ct-team-shortcode" readonly style="width:260px;">
            <button type="button" class="button"
                onclick="navigator.clipboard.writeText(document.getElementById('ct-team-shortcode').value)">Copy</button>
        </p>
    </div>
    <?php
}

Custom Team Slider

निष्कर्ष (Conclusion)

तो दोस्तों, हमने एक Custom Team Members Slider Plugin वर्डप्रेस में बना लिया। इसमें शामिल हैं:

टीम मेंबर्स के लिए कस्टम पोस्ट टाइप (CPT)
एक्स्ट्रा फ़ील्ड्स (रोल/डिज़िग्नेशन और सोशल लिंक्स)
फ्रंट-एंड एसेट्स (Owl Carousel + FontAwesome)
शॉर्टकोड [team_slider] जिससे आप कहीं भी स्लाइडर दिखा सकते हैं
एक सेटिंग्स पेज जिससे स्लाइडर को पूरी तरह से कस्टमाइज़ कर सकते हैं

अगर आपको वर्डप्रेस कस्टमाइज़ेशन के बारे में और सीखना है तो मेरी अन्य पोस्ट देख सकते हैं।

कोई दिक़्क़त आए तो मुझसे बेझिझक पूछें — मैं मदद के लिए हमेशा उपलब्ध हूँ।

धन्यवाद।

Author

Gallery

Contacts

Custom Team Slider Kaise Banaye WordPress Me

परिचय (Introduction)

1. फ़ोल्डर स्ट्रक्चर (Custom Team Slider)

2. प्लगइन बनाने के स्टेप्स (Steps for Plugin)

3. कस्टम पोस्ट टाइप (CPT) + थंबनेल्स

4. मेटाबॉक्स: रोल + सोशल लिंक्स

5. फ्रंट-एंड एसेट्स

6. शॉर्टकोड: `[team_slider]`

7. एडमिन सबमेन्यू: स्लाइडर सेटिंग्स

निष्कर्ष (Conclusion)

Admin

Leave a comment Cancel reply

Services

Company

Learn

Gallery

Contacts

परिचय (Introduction)

1. फ़ोल्डर स्ट्रक्चर (Custom Team Slider)

2. प्लगइन बनाने के स्टेप्स (Steps for Plugin)

3. कस्टम पोस्ट टाइप (CPT) + थंबनेल्स

4. मेटाबॉक्स: रोल + सोशल लिंक्स

5. फ्रंट-एंड एसेट्स

6. शॉर्टकोड: [team_slider]

7. एडमिन सबमेन्यू: स्लाइडर सेटिंग्स

निष्कर्ष (Conclusion)

Admin

How to Create a Custom Team Slider in WordPress

WordPress Me Custom Testimonial Slider Kaise Banaye

Leave a comment Cancel reply

Services

Company

Learn

6. शॉर्टकोड: `[team_slider]`