Download - Custom Post Type - Create and Display
![Page 1: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/1.jpg)
Creating and DisplayingCustom Post Types
![Page 2: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/2.jpg)
Welcome to my WordPress Lab.
This is where I test WP stuff.
* * *
Today we are going to create a Custom Post Type called Portfolio.
![Page 3: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/3.jpg)
![Page 4: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/4.jpg)
If I have to write more than 4 lines of code, my head explodes
![Page 5: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/5.jpg)
Custom Post Type UIPlugin:
![Page 6: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/6.jpg)
Custom Post Type called Portfolio
C r e a t e D i s p l a y
![Page 7: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/7.jpg)
Here’s what it will look like
Demo
![Page 8: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/8.jpg)
Let’s Create
![Page 9: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/9.jpg)
C r e a T e : P o r T f o L I o
And here it is
Download
Activate
Install
Add New
![Page 10: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/10.jpg)
C r e a T e : P o r T f o L I o
portfolio
Portfolio
![Page 11: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/11.jpg)
C r e a T e : P o r T f o L I o
Change to True
Advanced Options
Scroll down to continue
![Page 12: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/12.jpg)
C r e a T e : P o r T f o L I o
![Page 13: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/13.jpg)
C r e a T e : P o r T f o L I o
work_type
Work Type
Next: Create a Taxonomy
![Page 14: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/14.jpg)
C r e a T e : P o r T f o L I o
Associate Taxonomy with Portfolio
![Page 15: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/15.jpg)
C r e a T e : P o r T f o L I o
![Page 16: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/16.jpg)
Demo
Show the posts you have created
![Page 17: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/17.jpg)
The first time = 404
Settings>Permalinks and then update your present permalink structure by just clicking on the Save Changes button
![Page 18: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/18.jpg)
Learn to Display
![Page 19: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/19.jpg)
CPT : What is it?
![Page 20: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/20.jpg)
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
![Page 21: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/21.jpg)
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
![Page 22: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/22.jpg)
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
![Page 23: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/23.jpg)
See, it really works
Demo
![Page 24: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/24.jpg)
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
![Page 25: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/25.jpg)
To make your CPT posts look different from your single and archive posts
that appear in your blog.
SoWhy?
![Page 26: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/26.jpg)
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
![Page 27: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/27.jpg)
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
![Page 28: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/28.jpg)
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; ?>
![Page 29: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/29.jpg)
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
![Page 30: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/30.jpg)
Thank you Becky Davis
CSS and the Body Class
More Display Fun
![Page 31: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/31.jpg)
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
![Page 32: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/32.jpg)
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
![Page 33: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/33.jpg)
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;
}
![Page 34: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/34.jpg)
Sidebar Navigation
Shows links to Work Type Terms
![Page 35: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/35.jpg)
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
![Page 36: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/36.jpg)
D I S P L a y : S I D e B a r
Custom Sidebars Taxonomy List Widget
Work Type
Work Type
![Page 37: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/37.jpg)
Let’s see the sidebar in action
Demo
![Page 38: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/38.jpg)
another way to Display:
Page Template!
bye bye archive-portfolio.php
![Page 39: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/39.jpg)
Why a Page? more control with design
easier to add to a menu
easier to add custom sidebars
![Page 40: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/40.jpg)
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*/
![Page 41: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/41.jpg)
D I S P L a y : T e m P L a T e S / P a g e
![Page 42: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/42.jpg)
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
![Page 43: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/43.jpg)
Using the plugin Grid FX
D I S P L a y : T e m P L a T e S
![Page 44: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/44.jpg)
Here’s the Page with grid x plugin
Demo
![Page 45: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/45.jpg)
![Page 46: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/46.jpg)
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
![Page 47: Custom Post Type - Create and Display](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b436a14a7959586c8b45db/html5/thumbnails/47.jpg)
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.