WordPress is the number one content management system in the present world. One of the main reasons to be the number one is to easy handling. Event nonprogrammer can make a beautiful website with WordPress. There are several post types are supported in WordPress that can leverage your site more efficiently.
Normally we can see there are two different post type one is page and post. But the page is also a post type. Besides that, you can create unlimited custom post types as needed with and without plugins. If you are not a programmer and don’t have much experience in PHP then you can create custom post types with a plugin very easily.
If you wish to create a custom post type with a plugin click here to read the article and follow the instruction. Or if you are experienced in PHP then follow this article.
In this article we will cover these topics:
What is a custom post type in WordPress?
The custom post type is a feature of WordPress which helps you to create unlimited and separated post types than pages and default posts. Suppose you want to create portfolio options on your WordPress dashboard from where you can control all your portfolio elements. Or you want to create an event feature on your dashboard where you can add all your events for the future and show them in the front end.
The step-by-step guideline for creating a custom post type “event”.
To create a custom post type very easily follow the instruction below:
- Go to your dashboard
- Click on Appearance > Theme Editor
- Then go to functions.php
- Go all the way bottom of the page and paste the code given below.
function cw_post_type_event() {
$supports = array(
'title', // post title
'editor', // post content
'author', // post author
'thumbnail', // featured images
'excerpt', // post excerpt
'custom-fields', // custom fields
'comments', // post comments
'revisions', // post revisions
'post-formats', // post formats
);
$labels = array(
'name' => _x('Events', 'plural'),
'singular_name' => _x('Event', 'singular'),
'menu_name' => _x('Events', 'admin menu'),
'name_admin_bar' => _x('Events', 'admin bar'),
'add_new' => _x('Add New Event', 'add new'),
'add_new_item' => __('Add New Event'),
'new_item' => __('New Event'),
'edit_item' => __('Edit Event'),
'view_item' => __('View Event'),
'all_items' => __('All Event'),
'search_items' => __('Search Event'),
'not_found' => __('No Event found.'),
);
$args = array(
'supports' => $supports,
'labels' => $labels,
'public' => true,
'query_var' => true,
'rewrite' => array('slug' => 'event'),
'has_archive' => true,
'hierarchical' => false,
'menu_icon' => 'dashicons-calendar',
'taxonomies' => array( 'category' ),
);
register_post_type('event', $args);
}
add_action('init', 'cw_post_type_event');
/*Custom Post type end*/
As you can see I have created a post type called “event”. you can name it as you want just to replace the text “event” with your desired post type.
How to show them in frontend
To show all the events you have to create an event archive. and to show the single event you have to create a single event layout from the backend.
Follow the instructions below to create an event archive and single-page layout.
How to create event archive page layout:
- Go to the theme folder from cPanel(if you work on a live site) or go to the theme folder directly if you working on the local server. As you can see on the screenshot
- Then create a file called “archive-event.php”. If your custom post type name is different like “portfolio” then you have to name the file “archive-portfolio.php”.
- Click on the file and paste the code below.
$today = date('m/d/Y');
$customEvent = new Wp_Query(array(
'posts_per_page' => -1,
'post_type' => 'event',
'meta_key' => 'start_date',
'orderby' => 'meta_value_num',
'order' => 'ASC',
'meta_query' => array(
array(
'key' => 'start_date',
'compare' => '>=',
'value' => $today,
'type' => 'numeric',
)
)
));
?>
<div class="event-grid-wrapper">
<?php while($customEvent->have_posts()){
$customEvent->the_post();
$featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full');
?>
<div class="event-grid">
<a href= "<?php the_permalink(); ?>" ><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E"$featured_img_url" ? data-lazy-src="<?php echo"><noscript><img decoding="async" src="<?php echo "$featured_img_url" ?></noscript>" /></a>
<article class="event-grid-content">
<a class="event-title" href="<?php the_permalink(); ?>" ><h3 class="event-title"><?php the_title(); ?></h3></a>
<span class="event-meta">
<p><?php echo get_the_category_list(); ?> | </p>
<p><?php the_field('location') ?></p>
</span>
<span class="event-footer">
<p><i class="fas fa-calendar"></i> <?php $startDate = new DateTime( get_field('start_date')); echo $startDate->format('D. j. M'); ?> - <?php $startDate = new DateTime( get_field('end_date')); echo $startDate->format('D. j. M'); ?></p>
<a class="footer-link" href="<?php the_permalink(); ?>">Mere <i class="arrow fas fa-arrow-right"></i></a>
</span>
</article>
</div>
<?php }
?>
</div>
How to create a single event page layout:
To create a single event page layout follow the instructions below:
- In the same way, you have to go to the theme folder and create a file called “single-event.php”.
- And paste the code below.
<!-- main content -->
<div class="event-main-content">
<?php
while(have_posts()){
the_post();
$thumbnail = get_the_post_thumbnail_url(get_the_ID(),'full');
?>
<div class="content-area">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E"$thumbnail" ? data-lazy-src="<?php echo"><noscript><img decoding="async" src="<?php echo "$thumbnail" ?></noscript>" />
<article class="content-box">
<h2>
<?php the_title(); ?>
</h2>
<span class="event-meta">
<p><?php echo get_the_category_list(); ?> | </p>
<p><?php the_field('location') ?></p>
</span>
<p>
<?php the_content(); ?>
</p>
</article>
</div>
<?php }
?>
<div class="comments-wrapper-single">
<?php
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
?>
</div>
</div>
<!-- ./main content -->
Now you can design your page as you want by adding custom CSS. If you are still not comfortable then please watch the video tutorials
Do you know it is very easy to get current username in wordpress with just two line of code? Read this article to know about the procedure with code.