Custom Post Type - Create and Display

Creating and DisplayingCustom Post Types

Welcome to my WordPress Lab.

This is where I test WP stuff.

* * *

Today we are going to create a Custom Post Type called Portfolio.

If I have to write more than 4 lines of code, my head explodes

Custom Post Type UIPlugin:

Custom Post Type called Portfolio

C r e a t e D i s p l a y

Here’s what it will look like

Demo

Let’s Create

C r e a T e : P o r T f o L I o

And here it is

Download

Activate

Install

Add New

C r e a T e : P o r T f o L I o

portfolio

Portfolio

C r e a T e : P o r T f o L I o

Change to True

Advanced Options

Scroll down to continue

C r e a T e : P o r T f o L I o

C r e a T e : P o r T f o L I o

work_type

Work Type

Next: Create a Taxonomy

C r e a T e : P o r T f o L I o

Associate Taxonomy with Portfolio

C r e a T e : P o r T f o L I o

Demo

Show the posts you have created

The first time = 404

Settings>Permalinks and then update your present permalink structure by just clicking on the Save Changes button

Learn to Display

CPT : What is it?

It’s not a post. But it acts like a post It displays content on a Single post page

It can display content on an Archive page

It’s not a page. But it acts like a page It’s not heirarchical

You can assign it a page template

Normally, it can’t access categories that were created by the Post

D I S P L a y : T e m P L a T e S

Start with 3 exisiting files

single.php

archive.php

taxonomy.php

D I S P L a y : T e m P L a T e S

add a slug to the name

single-portfolio.php

archive-portfolio.php

taxonomy-work_type.php

See, it really works

Demo

Template HierarchyT H e m a g I C o f :

a r C H I v e P o S T :

archive-portfolio.php

archive.php

index.php

T a x o n o m y P o S T :

taxonomy-work_type-logo.php

taxonomy-work_type.php

taxonomy.php

archive.php

index.php

S I n g L e P o S T :

single-portfolio.php

single.php

index.php

To make your CPT posts look different from your single and archive posts

that appear in your blog.

SoWhy?

taxonomy-work_type.php

Page Title

Thumbnail

Post Title

D I S P L a y : m o D I f y T H e T e m P L a T e

get_header(); ?> <section id=”primary” class=”content-area”> <div id=”content” class=”site-content” role=”main”>

<?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post();?> <?php endwhile; twentyfourteen_paging_nav(); else : get_template_part( ‘content’, ‘none’ ); endif; ?>

</div><!-- #content --> </section><!-- #primary --><?php get_sidebar(); ?><?php get_footer(); ?>

the loop

Thumbnail

Post Title

Page Title

<?php if ( have_posts() ) : ?> <h1 class=”tax-title”><span>Work Type: </span>

<?php $term_list = wp_get_post_terms($post->ID, ‘work_type’, array(“fields” => “names”)); $x = $term_list[0]; echo “$x”; ?>

</h1> <?php while ( have_posts() ) : the_post();?> <div class=”grid”>

<?php echo the_post_thumbnail(‘portfolio-thumb’); ?>

<h4><a href=”<?php the_permalink(); ?>”> <?php the_title(); ?></a></h4>

</div> <?php endwhile; twentyfourteen_paging_nav(); else : get_template_part( ‘content’, ‘none’ ); endif; ?>

D I S P L a y : m o D I f y T H e T e m P L a T e S

the_post_thumbnail(); // without parameter -> ‘post-thumbnail’

the_post_thumbnail(‘thumbnail’); // Thumbnail (default 150px x 150px max)

the_post_thumbnail(‘medium’); // Medium resolution (default 300px x 300px max)

the_post_thumbnail(‘large’); // Large resolution (default 640px x 640px max)

the_post_thumbnail(‘full’); // Full resolution (original size uploaded)

//Enable support for Post Thumbnails

add_image_size( ‘portfolio-thumb’, 250, 250, true );

https://codex.wordpress.org/

functions.php

Thank you Becky Davis

CSS and the Body Class

More Display Fun

D I S P L a y : C S S a n D B o D y C L a S S

H1.page-title

D I S P L a y : C S S a n D B o D y C L a S S

Use chrome inspector tool to find body class

class = .post-type-archive-portfolio

D I S P L a y : C S S a n D B o D y C L a S S

.post-type-archive-portfolio #primary h1.entry-title

{

font-weight:700; font-size:15px; letter-spacing: .15em;

border: 1px #ccc dotted; padding: 20px;

}

Sidebar Navigation

Shows links to Work Type Terms

D I S P L a y : S I D e B a r

2 Plugins Custom Sidebars

Taxonomy* List Widget

*Posts use Categories // Custom Post Types use Taxonomy/Terms

D I S P L a y : S I D e B a r

Custom Sidebars Taxonomy List Widget

Work Type

Work Type

Let’s see the sidebar in action

Demo

another way to Display:

Page Template!

bye bye archive-portfolio.php

Why a Page? more control with design

easier to add to a menu

easier to add custom sidebars

D I S P L a y : T e m P L a T e S / P a g e

Look familiar?

DUPLICaTe: page.php

rename: page-portfolio.php

oPen anD aDD: /* Template Name: Portfolio Page*/

D I S P L a y : T e m P L a T e S / P a g e

or

Add php code to the template Use a Plugin: Grid FX

<?php$args = array( ‘post_type’ => ‘portfolio’, ‘posts_per_page’ => 10 );$loop = new WP_Query($args);?>

<?phpwhile ( $loop->have_posts() ) : $loop->the_post();get_template_part( ‘content’, get_post_format() );endwhile;twentyfourteen_paging_nav();wp_reset_postdata();?>

D I S P L a y : T e m P L a T e S / P a g e

Using the plugin Grid FX

D I S P L a y : T e m P L a T e S

Here’s the Page with grid x plugin

Demo

r e S o U r C e S

Custom Post Type UI

Custom Sidebars

Grid FX

Taxonomy List Widget

Post Types Order

Regenerate Thumbnails

Plugins

r e S o U r C e S

U r B a n D I C T I o n a r y :

You can find anything on the Internet if you are willing to look for it long enough.