usergalaxy/userlist.php

<?php
/*
Plugin Name: UserGalaxy
Description: A special page with a list of users
Version: 1.0.0
Author: Alexander Yakovlev
Text Domain: usergalaxy
*/
if ( file_exists( dirname( __FILE__ ) . '/cmb2/init.php' ) ) {
	require_once dirname( __FILE__ ) . '/cmb2/init.php';
} elseif ( file_exists( dirname( __FILE__ ) . '/CMB2/init.php' ) ) {
	require_once dirname( __FILE__ ) . '/CMB2/init.php';
}

function imbb_posttype(){
  register_post_type( 'team',
    array(
      'labels' => array(
        'name' => __( 'Team' ),
        'singular_name' => __( 'Employee' )
      ),
      'public' => true,
      'has_archive' => false,
      'rewrite' => array(
        'slug' => 'team'
      ),
    )
  );
}

function imbb_register_metabox() {
  $prefix = 'imbb_';
	$cmb = new_cmb2_box( array(
		'id'            => $prefix . 'metabox',
		'title'         => esc_html__( 'Options', 'cmb2' ),
		'object_types'  => array( 'team', ), // Post type
  ));
	$cmb->add_field( array(
		'name' => esc_html__( 'Designation', 'cmb2' ),
		'desc' => esc_html__( 'Role in the team', 'cmb2' ),
		'id'   => $prefix . 'designation',
		'type' => 'text_small',
  ));
	$cmb->add_field( array(
		'name' => esc_html__( 'Portrait', 'cmb2' ),
		'desc' => esc_html__( 'Upload an image or enter a URL.', 'cmb2' ),
		'id'   => $prefix . 'image',
		'type' => 'file',
	) );
	$cmb->add_field( array(
		'name' => esc_html__( 'Level', 'cmb2' ),
    'desc' => esc_html__( 'A number from 0 to 3; 0 means galaxy center, 1 means first circle; max is 3', 'cmb2' ),
		'id'   => $prefix . 'level',
		'type' => 'text_small',
  ));
	$cmb->add_field( array(
		'name'    => esc_html__( 'Circle color', 'cmb2' ),
		'id'      => $prefix . 'color',
		'type'    => 'colorpicker',
		'default' => '#ffffff',
	));
}

function galaxyuser($post, $i) { ?>
  <a href="#" id="human-<?php echo $i ?>" target="_blank" class="humans">
    <img src="<?php echo get_post_meta( $post->ID, 'imbb_image', TRUE ) ?>" alt="<?php echo $post->post_title ?>"> 
    <div class="texts box">
      <?php echo $post->post_content; ?>
      <span class="name">
        <?php echo get_post_meta( $post->ID, 'imbb_designation', TRUE ); ?>
      </span>
    </div>
  </a> 
<?php
}
function imbb_usergalaxy() {
  wp_enqueue_style( 'imbb_style', plugin_dir_url( __FILE__ ) . '/stylesheets/style.css' );
  $query = get_posts(array(
    'post_type' => 'team',
    'post_status' => 'publish',
    'posts_per_page' => 10,
  ));
?>
<div class="all">
	<div class="imbb_container">
    <div class="circles circle-1">
<?php 
    $i = 1;
    foreach ($query as $post) {
      $color = get_post_meta( $post->ID, 'imbb_color', TRUE );
      if ($color === '#ffffff' || $color === '') {
        $color = 'rgb('.rand(0,255).', '.rand(0,255).', '.rand(0,255).')';
      }
?>
      <div class="small-circle small-<?php echo $i ?>" data-color="<?php echo $color ?>"></div>
<?php
      $i++;
    }
?>
      <div class="avatars">
<?php 
      $i = 1;
      $posts = [];
      foreach ($query as $post) {
        $level = get_post_meta( $post->ID, 'imbb_level', TRUE );
        if ($level === "") {
          $level = 3;
        } else {
          $level = (int) $level;
        }
        if (!isset($posts[$level])) {
          $posts[$level] = [];
        }
        $posts[$level][] = $post;
      } 
      foreach ($posts[3] as $post) {
        galaxyuser($post, $i);
        $i++;
      }
?>
      </div>
    </div>
		<div class="circles circle-2">
      <div class="avatars">
<?php if (isset($posts[2])) {
        foreach ($posts[2] as $post) {
          galaxyuser($post, $i);
          $i++;
        } 
      }
?>
      </div>
    </div>
		<div class="circles circle-3"> 
      <div class="avatars">
<?php if (isset($posts[1])) {
        foreach ($posts[1] as $post) {
          galaxyuser($post, $i);
          $i++;
        }
      }
?>
	    </div>
	  </div>
    <div class="circles circle-4">
      <div class="avatars">
<?php if (isset($posts[0])) {
  foreach ($posts[0] as $post) {
    echo '<img src="'.get_post_meta( $post->ID, 'imbb_image', TRUE ).'">';
    $i++;
  }
} ?>
     </div>
	 </div>
	</div>
</div>
<?php
  wp_reset_query();
  wp_reset_postdata();
}
function imbb_scripts() {
  wp_register_script( 'imbb_script', plugin_dir_url( __FILE__ ) . '/script.js', array('jquery'), '1.1.0', true );
  wp_enqueue_script( 'imbb_script' );
}

add_action( 'wp_enqueue_scripts', 'imbb_scripts' );
add_shortcode('usergalaxy', 'imbb_usergalaxy');
add_action( 'init', 'imbb_posttype' );
add_action( 'cmb2_admin_init', 'imbb_register_metabox' );