Title: Like slider
Last modified: August 31, 2016

---

# Like slider

 *  [Atom90](https://wordpress.org/support/users/atom90/)
 * (@atom90)
 * [10 years, 2 months ago](https://wordpress.org/support/topic/like-slider/)
 * Hello i need to create section where is 2 person
    2 square orange its active 
   person with descripton grey its second person How i can do it maybe plugin or
   smth
 * Screen:
    [http://i982.photobucket.com/albums/ae307/okruszek90/Zrzut%20ekranu%202016-02-22%20o%2011.23.08_zpszms0hbfv.png](http://i982.photobucket.com/albums/ae307/okruszek90/Zrzut%20ekranu%202016-02-22%20o%2011.23.08_zpszms0hbfv.png)
 * actual code
    I create custom post type:
 *     ```
       /**
        * Register team Post Type.
        *
        * @since 1.0.0
        * @return null.
        */
       function team_register_post_type() {
   
       	register_post_type('team', array(
   
       		'labels' => array(
       		  'name' => __('Team', 'muse' ),
       		  'singular_name' => __('Team', 'muse' ),
       		  'all_items' => __( 'Wszystkie'),
       		),
   
       		'public' => false,
       		'show_ui' => true,
       		'menu_position' => 15,
       		'menu_icon'	=> 'dashicons-groups',
       		'has_archive' => false,
       		'supports' => array(
       		    'title',
       		    'editor',
       		    'thumbnail',
       		    'page-attributes'
       		),
   
       		'rewrite' => false,
       		'publicly_queryable' => false,
       		'show_in_nav_menus' => false,
       		'exclude_from_search' => true,
       		'query_var' => false,
       		'can_export' => false,
       		)
   
       	);
       }
   
       /**
        * Disable "show post" message
        *
        * @since 1.0.0
        * @return null.
        */
       function team_messages($messages) {
       	$messages['team'] = array(
       		0 => '',
       		1 => __('team updated.', 'muse'),
       		6 => __('team published.', 'muse'),
       		7 => __('team saved.', 'muse')
       	);
   
       	return $messages;
       }
   
       /**
        * Add team "position meta-box"
        *
        * @since 1.0.0
        * @return null.
        */
       function team_position_box() {
       	add_meta_box(
       		'team_position_box',
       		__( 'position', 'muse' ),
       		'team_position_box_content',
       		'team',
       		'normal',
       		'default'
       	);
       }
   
       /**
        * Build content for "position meta-box"
        *
        * @since 1.0.0
        * @return null.
        */
       function team_position_box_content($post) {
         wp_nonce_field( plugin_basename( __FILE__ ), 'team_position_box_content_nonce' );
         $meta = get_post_meta($post->ID, '_position_name', true);
   
         echo '<table class="form-table">';
       	echo '<tr>';
       	echo '<th><label for="position_name">'.__('Enter position', 'muse').'</label></th>';
       	echo '<td><input type="text" id="position_name" name="position_name" value="'.$meta.'"/><td>';
         echo '</table>';
       }
   
       /**
        * Update meta box for "position meta-box"
        *
        * @since 1.0.0
        * @return null.
        */
       function team_position_box_save($post_id) {
   
         if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
         return;
   
         if (!isset($_POST['team_position_box_content_nonce']) OR !wp_verify_nonce($_POST['team_position_box_content_nonce'], plugin_basename( __FILE__ ) ) )
         return;
   
         if ( 'page' == $_POST['post_type'] ) {
           if ( !current_user_can( 'edit_page', $post_id ) )
           return;
         } else {
           if ( !current_user_can( 'edit_post', $post_id ) )
           return;
         }
         $position_name = $_POST['position_name'];
         update_post_meta( $post_id, '_position_name', $position_name );
       }
   
       //////
       /**
        * Add team "id_name meta-box"
        *
        * @since 1.0.0
        * @return null.
        */
       function team_id_box() {
       	add_meta_box(
       		'team_id_box',
       		__( 'ID', 'muse' ),
       		'team_id_box_content',
       		'team',
       		'normal',
       		'default'
       	);
       }
   
       /**
        * Build content for "position meta-box"
        *
        * @since 1.0.0
        * @return null.
        */
       function team_id_box_content($post) {
         wp_nonce_field( plugin_basename( __FILE__ ), 'team_id_box_content_nonce' );
         $meta = get_post_meta($post->ID, '_id_name', true);
   
         echo '<table class="form-table">';
       	echo '<tr>';
       	echo '<th><label for="id_name">'.__('Enter ID', 'muse').'</label></th>';
       	echo '<td><input type="text" id="id_name" name="id_name" value="'.$meta.'"/><td>';
         echo '</table>';
       }
   
       /**
        * Update meta box for "position meta-box"
        *
        * @since 1.0.0
        * @return null.
        */
       function team_id_box_save($post_id) {
   
         if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
         return;
   
         if (!isset($_POST['team_id_box_content_nonce']) OR !wp_verify_nonce($_POST['team_id_box_content_nonce'], plugin_basename( __FILE__ ) ) )
         return;
   
         if ( 'page' == $_POST['post_type'] ) {
           if ( !current_user_can( 'edit_page', $post_id ) )
           return;
         } else {
           if ( !current_user_can( 'edit_post', $post_id ) )
           return;
         }
         $id_name = $_POST['id_name'];
         update_post_meta( $post_id, '_id_name', $id_name );
       }
   
       /**
        * Actions and filters.
        */
       add_action('init', 'team_register_post_type');
       add_filter('post_updated_messages', 'team_messages');
       add_action('add_meta_boxes', 'team_position_box');
       add_action('save_post', 'team_position_box_save' );
       add_action('add_meta_boxes', 'team_id_box');
       add_action('save_post', 'team_id_box_save' );
       ```
   
 * and page template:
 *     ```
       $team = new WP_query(
       		array(
       			'post_type'      => 'team',
       			'order'          => 'ASC',
       			'orderby'        => 'menu_order',
       			'posts_per_page' => -1
   
       		)
       	);
   
       	$i = 1;
       	$photo_array = array();
   
       ?>
   
       	<?php if ($team->have_posts()) : ?>
   
       		<?php while ($team->have_posts()) : $team->the_post() ?>
       		<?php	$photo_array[$i] = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );;
       							$i++; ?>
       							<?php endwhile; ?>
       	<?php endif; ?>
   
       	<div class="row">
   
       							<div class="col-xs-12 col-sm-7 ">
       								<div class="slider">
       									<div class="large">
   
       										<img  class="kasia_l img-responsive" src="<?php print_r($photo_array[1]);?>" />
       										<img class="ryszard_l img-responsive" src="<?php print_r($photo_array[2]);?>" />
       										<div class="small">
       											<img class="ryszard_s img_small img-responsive" src="<?php print_r($photo_array[2]);?>" />
       											<img  class="kasia_s img_small img-responsive" src="<?php print_r($photo_array[1]);?>" />
       										</div>
       									</div>
   
       								</div>
       							</div>
   
       							<div class="col-xs-12 col-sm-5">
       								<?php if ($team->have_posts()) : ?>
   
       		<?php while ($team->have_posts()) : $team->the_post() ?>
   
       			<?php $ID = get_post_meta(get_the_ID(), '_id_name', true)?>
       								<div id="<?php echo $ID ?>">
       									<div class="title">
       										<h3><?php the_title() ?> <span>CEO</span></h3>
       										<?php $position = get_post_meta(get_the_ID(), '_position_name', true)?>
       										<span><?php echo $position ?></span>
       									</div>
       									<p>
   
       										<?php the_content() ?>
   
       									</p>
       								</div>
       <?php endwhile; ?>
       	<?php endif; ?>
   
       							</div>
       						</div>
       ```
   
 * js:
 *     ```
       //slider swap
       function slider(){
       	$('.kasia_s').bind('click', function(event){
       		event.preventDefault();
       		$('.kasia_l').fadeIn();
       		$('.ryszard_l').hide();
       		$('.kasia_s').hide();
       		$('.ryszard_s').fadeIn();
       		$('#kasia').fadeIn();
       		$('#ryszard').hide();
       	});
       	$('.ryszard_s').bind('click', function(event){
       		event.preventDefault();
       		$('.ryszard_l').fadeIn();
       		$('.kasia_l').hide();
       		$('.kasia_s').fadeIn();
       		$('.ryszard_s').hide();
       		$('#ryszard').fadeIn();
       		$('#kasia').hide();
       	});
       }
       ```
   
 * maybe u know how to to this easier and better

The topic ‘Like slider’ is closed to new replies.

 * 0 replies
 * 1 participant
 * Last reply from: [Atom90](https://wordpress.org/support/users/atom90/)
 * Last activity: [10 years, 2 months ago](https://wordpress.org/support/topic/like-slider/)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics