How to Create Shortcode for Custom Post Type to Display Posts

Creating a shortcode for custom post types is always a good choice, no matter if you are working on a custom WordPress theme or building a plugin.

When you create shortcodes for your custom post types, that means you are making it more useful and easy to the users. Here is the step by step guide to create shortcodes for custom post types and make them display by using that shortcode.

Advertisement

But, before jumping into creating a shortcode for the custom post type, let’s first create a custom post type to make it more clear and easy to understand and then will create a shortcode for this.

Sounds good?… Let’s do this.

Create a Custom Post Type

At this point, I am assuming you must be aware of what is custom post type and how to create them.

So here, I am creating a Custom Post Type named “Movies”. Copy the code below and paste it in your theme’s functions.php file or in your plugin’s main file.

// First create a custom post type name 'Movies'

function diwp_movies_custom_post_type(){
	
	// Set labels for custom post type

    $labels = array(
					 'name' => 'Movies',
					 'singular_name' => 'Movie',
					 'add_new'	=> 'Add Movie',
					 'add_new_item' => 'Enter Movie Details',
					 'all_items' => 'All Movies',
					 'featured_image' => 'Add Poster Image',
					 'set_featured_image' => 'Set Poster Image',
					 'remove_featured_image' => 'Remove Poster Image'

				   );


    // Set Options for this custom post type;

    $args = array(	
    				'public' => true,
    				'label'       => 'Movies',
    				'labels'      => $labels,
    				'description' => 'Movies is a collection of movies and their info',
    				'menu_icon'	  => 'dashicons-video-alt2',	
    				'supports'   => array( 'title', 'editor', 'thumbnail'),
    				'capability_type' => 'page',
    				
    			 );

    register_post_type('movies', $args);

}

add_action( 'init', 'diwp_movies_custom_post_type' );

// Custom Post Type ends here.

After adding this code in your theme or plugin’s file, look into your WordPress admin area and you will see a custom post type “Movies” listed there. As shown in the image below.

create-shortcode-for-custom-post-type-in-wordpress-1

Note: Add some posts as data in this custom post “Movies” to see the results.

Create Shortcode for Custom Post Type

So far, I have successfully created a custom post type called “Movies”. Now let’s create a shortcode for this custom post type to display its posts.

So in this case, my custom post type is “Movies” and I will create a shortcode, that will display movies list.

Again, copy this code and paste it into your theme’s functions.php file or in your plugin’s specific file.

// >> Create Shortcode to Display Movies Post Types

function diwp_create_shortcode_movies_post_type(){

	$args = array(
					'post_type'      => 'movies',
					'posts_per_page' => '10',
					'publish_status' => 'published',
				 );

	$query = new WP_Query($args);

	if($query->have_posts()) :

		while($query->have_posts()) :

			$query->the_post() ;
					
		$result .= '<div class="movie-item">';
		$result .= '<div class="movie-poster">' . get_the_post_thumbnail() . '</div>';
		$result .= '<div class="movie-name">' . get_the_title() . '</div>';
		$result .= '<div class="movie-desc">' . get_the_content() . '</div>'; 
		$result .= '</div>';

		endwhile;

		wp_reset_postdata();

	endif;	

	return $result;			
}

add_shortcode( 'movies-list', 'diwp_create_shortcode_movies_post_type' ); 

// shortcode code ends here

By using the above code, I have created a shortcode named [movie-list] and this code will display the 10 recent movie info as a list.

Note: In the above code, for designing purpose and make things better aligned, I have used some CSS classes. You can find those CSS classes below. However, you can create your own CSS classes as well to make it fit as per your designs.

/* CSS Classes to use */

.movie-item{
 width: 100%;
 margin:0 auto;	
 clear: both;
 margin-bottom: 20px; 
 overflow: auto;
 border-bottom: #eee thin solid;
 padding-bottom: 20px;  
}

.movie-poster{
width: 160px;
float: left;
margin-right: 25px; 
}

.movie-poster img{
width: 100%;
height: auto;
}

.movie-name{
font-size: 35px;
}

Use Shortcode to Display Posts From Custom Post Type

Now I am in the last step of my goal, In this step, I am just going to use the shortcode [movie-list] on the page/post or wherever I want to display the list of movies.

After adding that shortcode, you will see a list of movies with their info as shown in the image below as a result.

create-shortcode-for-custom-post-type-in-wordpress-2

Note: Your result could be different from my results or shown in the image below, but yes this is the way to create a shortcode for custom post type and display posts from that custom post types by using shortcode.

That’s it! You’re done.

I hope this article helps you to understand how to create a shortcode for the custom post type.

Advertisement

Related Posts

Leave a Reply

Your email address will not be published.

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top