team slider code for post tipe

PHOTO EMBED

Tue Feb 17 2026 17:01:40 GMT+0000 (Coordinated Universal Time)

Saved by @Ahtisham



/*========================================
= Custom Post Type: Our Team             =
========================================*/
function create_our_team_post_type() {

    $labels = array(
        'name'               => _x( 'Our Team', 'Post type general name', 'textdomain' ),
        'singular_name'      => _x( 'Team Member', 'Post type singular name', 'textdomain' ),
        'menu_name'          => __( 'Our Team', 'textdomain' ),
        'add_new_item'       => __( 'Add New Member', 'textdomain' ),
        'edit_item'          => __( 'Edit Member', 'textdomain' ),
        'all_items'          => __( 'All Members', 'textdomain' ),
        'featured_image'     => __( 'Member Photo', 'textdomain' ),
        'set_featured_image' => __( 'Set member photo', 'textdomain' ),
    );

    $args = array(
        'labels'       => $labels,
        'public'       => true,
        'show_ui'      => true,
        'show_in_menu' => true,
        'menu_icon'    => 'dashicons-groups',
        'rewrite'      => array( 'slug' => 'our-team' ),
        'has_archive'  => true,
        'supports'     => array( 'title', 'editor', 'thumbnail' ),
    );

    register_post_type( 'our_team', $args );
}
add_action( 'init', 'create_our_team_post_type' );


/*========================================
= Designation Meta Box                   =
========================================*/
function add_team_designation_metabox() {
    add_meta_box(
        'team_designation',
        'Designation',
        'team_designation_callback',
        'our_team',
        'normal',
        'high'
    );
}
add_action( 'add_meta_boxes', 'add_team_designation_metabox' );

function team_designation_callback( $post ) {
    wp_nonce_field( 'team_designation_nonce', 'team_designation_nonce' );
    $designation = get_post_meta( $post->ID, '_team_designation', true );
    ?>
    <input type="text"
           name="team_designation"
           value="<?php echo esc_attr( $designation ); ?>"
           style="width:100%; padding:8px;"
           placeholder="Enter Designation (e.g. CEO, Developer)">
    <?php
}

function save_team_designation_metabox( $post_id ) {
    if ( ! isset( $_POST['team_designation_nonce'] ) ) return;
    if ( ! wp_verify_nonce( $_POST['team_designation_nonce'], 'team_designation_nonce' ) ) return;
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;

    if ( isset( $_POST['team_designation'] ) ) {
        update_post_meta(
            $post_id,
            '_team_designation',
            sanitize_text_field( $_POST['team_designation'] )
        );
    }
}
add_action( 'save_post', 'save_team_designation_metabox' );


/*========================================
= Enqueue Slick Slider CSS & JS          =
========================================*/
function enqueue_team_slider_assets() {

    wp_enqueue_style( 'slick-css', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css' );
    wp_enqueue_style( 'slick-theme-css', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css' );

    wp_enqueue_script( 'slick-js', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js', array('jquery'), '1.8.1', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_team_slider_assets' );


/*========================================
= Our Team Slider Shortcode              =
========================================*/
function our_team_slider_shortcode() {

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

    if ( ! $query->have_posts() ) {
        return '<p>No team members found.</p>';
    }

    ob_start();
    $counter = 1;
    ?>

    <div class="team-slider">
        <?php while ( $query->have_posts() ) : $query->the_post(); 
            $designation = get_post_meta( get_the_ID(), '_team_designation', true );
        ?>
            <div class="team-slide">
                <div class="team-card">

                    <?php if ( has_post_thumbnail() ) : ?>
                        <div class="team-image">
                            <?php the_post_thumbnail( 'full' ); ?>
                        </div>
                    <?php endif; ?>

                    <div class="team-content">

                      

                        <h4 class="team-title"><?php the_title(); ?></h4>

                        <?php if ( $designation ) : ?>
                            <span class="team-designation">
								<p> <?php echo esc_html( $designation ); ?></p>
                            </span>
                        <?php endif; ?>

                        <div class="team-description">
                            <?php the_content(); ?>
                        </div>

                    </div>
                </div>
            </div>
        <?php 
            $counter++;
        endwhile; ?>
    </div>

    <script>
    jQuery(document).ready(function($){
        $('.team-slider').slick({
            slidesToShow: 3,
            slidesToScroll: 1,
            arrows: false,
            dots: false,
            autoplay: false,
           
        
          
            responsive: [
                { 
                    breakpoint: 1024, 
                    settings: { centerPadding: '30%' } 
                },
                { 
                    breakpoint: 768,  
                    settings: { centerPadding: '15%' } 
                }
            ]
        });
    });
    </script>

    <?php
    wp_reset_postdata();
    return ob_get_clean();
}
add_shortcode( 'our_team_slider', 'our_team_slider_shortcode' );
content_copyCOPY