A Simple and Complete Tutorial on How to Manage and Display Custom Post Types in WordPress

For YEARS, I’ve tried to tackle the mystery of Custom Post Types.  I would try using them, then get discouraged and do some type of work around.  Well this time I finally was able sort it all out!  Unfortunately, I couldn’t find many tutorials that we’re easy to understand so here’s my contribution.  Hope it helps anyone who’s trying to wrap their head around this.

What’s a custom post type and why would I need it?

I’ll start off with a scenario.  I want to create customized portfolio of projects jobs that contain a title, description, featured image, website URL location.  They want the jobs to be categorized by the types of projects, technologies AND project status.

Ok – no problem.  I’ll just use WordPress Posts!  Title, description, featured image, category — no problem.  Uh oh – there’s no area for the additional fields I want and only one option for categories!  Damnit!  I’m totally screwed…  Negative Ghostrider – you just need CPT’s.

Custom Post Types

Before I got into the wild world of wordpress, I wrote a lot of custom software.  When you write custom software you have to write what I call “AED” scripts or “Add, Edit, Delete”.  Another term is “CRUD” or “Create, Read, Update, Delete”.   These are the basic functions of storing data into a database.

The whole “post_type” things is so simple, yet SO confusing (especially to anyone new to WP) so here’s a simplified explanation:  Pages and posts are default “post_types” in WP.   If you want some kind of list that can’t be done using a page or a post you need to create a “custom post type”.  So we’ll add a 3rd post_type called “Absolute 0 Portfolio”

What the Hell are Taxonomies?

Taxonomies are…filters for post types.

Example: When you add a new post in WP, you see that you can assign that post to a category.  That category is a taxonomy for posts.

Based on the scenario above, our A0 Portfolio CPT will need 3 taxonomies:  Project Type, Technologies and Project Status

Finally

Make sure you have a child theme setup and it’s active – you’ll need to add this file to your child-theme directory in order to show your customized portfolio posts.  If you don’t currently have a child theme, I highly recommend using the plugin Child Theme Configurator by Lilaea Media – just type in “child theme” in plugins and it should be the first one to pop up.

So What’s the Plan?

• First, we’ll download the plugins we need to make this all happen.
• Next we’ll setup our custom post type and taxomonies.
• Then we’ll setup any custom fields we want for our CPT’s
• After that we’ll setup our dashboard to look just the way we want it.
• Next we’ll add some data and images.
• Finally, we’ll integrate it into the pages we need in the font end.

LET’S DO DIS!

<?php

get_header();

$is_page_builder_used = et_pb_is_pagebuilder_used( get_the_ID() );

?>

<div id="main-content">

<?php if ( ! $is_page_builder_used ) : ?>

<div class="container">
<div id="content-area" class="clearfix">
<div id="left-area">

<?php endif; ?>

<?php while ( have_posts() ) : the_post(); ?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

<?php if ( ! $is_page_builder_used ) : ?>

<h1 class="entry-title main_title"><?php the_title(); ?></h1>
<?php
$thumb = '';

$width = (int) apply_filters( 'et_pb_index_blog_image_width', 1080 );

$height = (int) apply_filters( 'et_pb_index_blog_image_height', 675 );
$classtext = 'et_featured_image';
$titletext = get_the_title();
$thumbnail = get_thumbnail( $width, $height, $classtext, $titletext, $titletext, false, 'Blogimage' );
$thumb = $thumbnail["thumb"];

if ( 'on' === et_get_option( 'divi_page_thumbnails', 'false' ) && '' !== $thumb )
print_thumbnail( $thumb, $thumbnail["use_timthumb"], $titletext, $width, $height );
?>

<?php endif; ?>

<div class="entry-content">
<?php
the_content();

if ( ! $is_page_builder_used )
wp_link_pages( array( 'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'Divi' ), 'after' => '</div>' ) );
?>
</div> <!-- .entry-content -->

<?php
if ( ! $is_page_builder_used && comments_open() && 'on' === et_get_option( 'divi_show_pagescomments', 'false' ) ) comments_template( '', true );
?>

</article> <!-- .et_pb_post -->

<?php endwhile; ?>

<?php if ( ! $is_page_builder_used ) : ?>

</div> <!-- #left-area -->

<?php get_sidebar(); ?>
</div> <!-- #content-area -->
</div> <!-- .container -->

<?php endif; ?>

</div> <!-- #main-content -->

<?php

get_footer();