How to Create a WordPress Custom Post Type | 2 Easy Method

Published by Gurjit on October 8, 2023
Categories: BLOG WORDPRESS

A WordPress Custom Post type manages content that can not be manageable by the default post types provided in WordPress.
A WordPress custom post type helps to save and display content that has many fields. It categorizes and displays your content attractively and flexibly.

Table of Contents

What is a Custom Post Type?

A WordPress Custom Post Type is used to create a post of a type that meets your content demands.

By default, WordPress has the following types of posts:

Post: blog post
Page: static page
Attachment: attached media
Revision: post-revision
Navigation Menu:

If our content does not fit into any of the types we listed above, you can create a custom WordPress post type.

For example, on a school website, we want to publish events that are organized in the school. For that, we have to create a WordPress custom post type.
In this custom post type, we can add some custom fields.
In the custom field, we can add event date, event time, event type, event span, event pictures, event participants, event titles, and many more.
All these fields are not possible to include in a normal post. So it is important to create a WordPress custom post type.
A WordPress custom post type also shows an input field to enter data according to the post’s needs.

The data is automatically formatted in a WordPress custom post type.
So it is very beneficial to show data on a page saved using a WordPress custom post type.

By adding a WordPress custom type, we can convert it into a CMS.

How to Create a WordPress Custom Post Without a Plugin

If you do not know the technicalities of WordPress themes don’t worry just follow the steps. It is an easy guide to add code for a WordPress custom post.

Follow the steps below to create a custom post type on a WordPress website:

Accessing the Theme Files Editor in WordPress Dashboard.

In WordPress’s left sidebar search for appearance, hover on it, and then click Theme File Editor, See the image below.

Locating the function.php File, and Inserting a WordPress Custom Post Code

Now find the function.php file in the right sidebar under the Theme Files title.

Insert the code shown below.




function gsta_save_post_event_meta($post_id, $post)
{


	if( !isset( $_POST['gsta_event_nonce'] ) || !wp_verify_nonce( $_POST['gsta_event_nonce'], basename(__FILE__) ) ) {
		return $post_id;
	}


	$post_type = get_post_type_object($post->post_type);

	if( !current_user_can($post_type->cap->edit_post, $post_id) ) {
	   return $post_id;
		}

	$event_date = (isset($_POST['gsta_event_date'])) ? sanitize_text_field($_POST['gsta_event_date']) : '';
	
	update_post_meta($post_id, 'gsta_event_date', $event_date);
}



add_action('save_post_event', 'gsta_save_post_event_meta', 10, 2);






function gsta_post_event_type()
{

	register_post_type('events', array(
		'rewrite' => array('slug' => 'events'),
		'has_archive' => true,
		'public' => true,
		'show_in_rest' => true, // to use new version of post editior
		'labels' => array(
			'name' => 'Alpine Events',
			'add_new_item' => 'Add New Event',
			'edit_item' => 'Edit Event',
			'all_items' => 'All Events',
			'singular_name' => 'Event'
		),
		
		'menu_icon' => 'dashicons-calendar'
	));
}

add_action('init', 'gsta_post_event_type');


function render_html_form_callback_fun()
{

	global $post;
	$post_id = $post->ID;
	wp_nonce_field(basename(__FILE__), 'gsta_event_nonce');


$current_date = date("Y/m/d");

	$event_date = (!empty(get_post_meta($post_id,'gsta_event_date',true))) ? get_post_meta($post_id,'gsta_event_date',true) : $current_date;

?>

<form>
    <label for="eventdate">Event date:</label>
    <input type="date" id="gsta_event_date" name="gsta_event_date" value="<?php echo date('Y-m-d',strtotime($event_date)) ?>"/>

</form>
<?php
}


function gsta_event_meta_box_callback_func()
{

	add_meta_box(
		'Event-date-id',
		'Event Date',
		'render_html_form_callback_fun',
		'event',
		'normal',
		'default'
	);
}

add_action('add_meta_boxes_event', 'gsta_event_meta_box_callback_func');

After inserting the code you will see a new menu Alpine Events for a WordPress custom post in the left sidebar.

You can add new Event custom posts by clicking Add New.

Form To Fill Information of Custom Post

In the custom event post, we have created fields for the title, body, and date

You can fill these fields as below in the picture.

You will see the next screen to publish an event type post.

Fill Event title and Event body, and select Event Date.

And click Publish

Viewing All Custom Posts.

Now you can view all published custom event posts by clicking All Events.

You can edit and delete custom posts, like normal posts.

Just hover the mouse over the post title and it will show the menu.

Creating a Page to List All Custom Posts

Now follow the steps to create a page template to list all post-type events.

Create an archive-events.php page.

This page lists all custom post events type.

Paste the following code on the page.

<?php get_header();   ?>


        <div class="page-content">
        <div class="container">

        <h1> News and Event </h1>
<?php 
while(have_posts()){

    the_post();
    ?>
   <h2><a href="<?php echo the_permalink(); ?>"> <?php the_title(); ?></a> </h2>
                    <p><?php echo wp_trim_words(get_the_content(),18); ?> </p>
    
    <?php }  ?>

            </div>
</div>


<?php get_footer();   ?>

Now to fetch the page you can type the URL as https://yourdomain.com/events

This will show your page with the list of all event type posts.

Creating a Single Page to View Custom Post

To display post we have to create a page, follow the steps to create page.

Create a page template single-events.php and paste the following code.

<?php get_header();   ?>
<!--about -->
<div class="page-content">

    <div class="container">

        <?php
                   
                    while(have_posts()){
                         the_post();
                        ?>
        <h1><a href="<?php echo the_permalink(); ?>"> <?php the_title(); ?></a> </h1>
        <p><?php  the_content(); ?> </p>
        <?php  }
                    ?>
        <a href="<?php echo get_post_type_archive_link('event'); ?>">All event </a>

    </div>
</div>



<?php get_footer();   ?>

Now you can view the custom post by clicking the “Events” link of event post list page.

Conclusion

Custom post type is used to add flexibility to your WordPress post. By using a WordPress custom post type we can manage complex kinds of content to fit in website to suit your needs.

In this article we have all the steps created to display custom posts, we hope it will help you to create custom post types easily.