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.
Things to know
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
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!
Let’s grab the plugins we’ll need
|Plugin||What’s it for…
|Custom Post Type UI||This is where we’ll create our CPT and Taxomonies||Free|
|Advanced Custom Fields||This is where we’ll add any special fields we want to add to the CPT||Free|
|Post List View Custom||This is a really nice function that allows you to customize the way the your CPT List displays in the dashboard||Free|
|Portfolio Posts Pro Plugin||Perhaps the most critical piece: this little gem from Brad Crawford makes all of your CPT dreams come true with a sweet module that plugs right into the divi theme. – Trust me when I say – I’m a cheap ass. But this plugin is worth it’s weight in gold!||$15 for a year of support or $39 lifetime|
|Custom Content Shortcode||This is what will allow us to customize each individual portfolio post dynamically!||Free|
<?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();