Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom...
Transcript of Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom...
![Page 1: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/1.jpg)
Building Unique Templates with Custom Post Types (CPT) in WordPress
1
Madison PHP Conference 2017 https://joind.in/talk/e4043
![Page 2: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/2.jpg)
Hi, I’m AndreaWeb : andrearoenning.com Twitter: @andreaincode
Slides & Feedback:https://joind.in/talk/e4043
2
![Page 3: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/3.jpg)
3
I’m the Web Developer & Designerat Forte in Madison, WI
We launched a redesign of our flagship website forteresearch.com on August 25th.
It’s built on WordPress.
![Page 4: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/4.jpg)
spacer.gif
4
(I’ve been working on the web for a a long time)
![Page 5: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/5.jpg)
“WordPress is just a blogging platform.”
5
— me, a while back
![Page 6: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/6.jpg)
“WordPress themes and plugins are bloated and hard to work with.”
6
— me, not that long ago
![Page 7: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/7.jpg)
but Custom Post Types have opened my eyes.
7
![Page 8: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/8.jpg)
“WordPress is a great tool to build a custom website!”
8
— me, today
![Page 9: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/9.jpg)
• Create a better content entry experience for the CMS administrators
Why use Custom Post Types?
9
• Ability to query and sort your custom data
• Develop custom layouts specific to your data
• Lighten up your database by removing the HTML from the WordPress editor
![Page 10: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/10.jpg)
Possible uses for CPT
• Testimonials
• Webinars
• eBooks
• Advertisements
10
• Job Postings
• Conference Sessions
• Portfolio Pieces
• Content Carousels
![Page 11: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/11.jpg)
WisconsinVerbs.com theme from this talk(Pardon the sandbox)
Themehttps://github.com/andreawetzel/WisconsinVerbsThemeV01
Plugin (Gist) bit.ly/wi-verbs-cpt
11
![Page 12: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/12.jpg)
CPT Steps:
1.First, create your Custom Post Type
2.Next, add some data in your WordPress admin panel
3.Third, template your custom theme page to display the data
12
![Page 13: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/13.jpg)
…by adding code to your theme’s functions.php
13
1. Creating Custom Post Types
For example, see line 191: https://github.com/andreawetzel/WisconsinVerbsThemeV01/blob/master/functions.php
![Page 14: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/14.jpg)
14
1
131415
7 8 9101112
1 2 3 4 5 6
)
'labels' => array( 'name' => __( 'Products' ), 'singular_name' => __( 'Product' ) ), 'public' => true, // Public single page? True = yes 'has_archive' => true, // Post type archive listing? True = yes
<?php add_action( 'init', 'create_post_type' ); function create_post_type() { register_post_type( 'acme_product', // Your Custom Post Type array(
001‑simple‑cpt.phpl
001‑simple‑cpt.php 15�1 LF UTF‑8 PHP 0 files 3 updatesE �
Add CPT directly in functions.php https://codex.wordpress.org/Post_Types#Custom_Post_Types
![Page 15: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/15.jpg)
More Custom Post Type Settings https://codex.wordpress.org/Function_Reference/register_post_type
15
49
50
43
44
45
46
47
48
37
38
39
40
41
42
31
32
33
34
35
36
25
26
27
28
29
30
19
20
21
22
23
24
17
18
}
'menu_icon' => 'dashicons-location-alt',
)
);
}
add_action( 'init', 'wiverb_post_types' );
),
'public' => true,
'show_in_menu' => true,
'exclude_from_search' => true,
'has_archive' => true,
'supports' => array('title', 'editor', 'thumbnail', 'revisions', 'page-attributes'),
'edit_item' => __('Edit Trail'),
'new_item' => __('New trail'),
'view_item' => __('View trail'),
'search_items' => __('Search trails'),
'not_found' => __('No trails were found'),
'not_found_in_trash' => ('No trails found in trash')
register_post_type( 'wiverb_hike',
array(
'labels' => array(
'name' => __( 'Hiking Trails' ),
'singular_name' => __( 'Hiking Trail' ),
'add_new_item' => __('Add New Trail'),
function wiverb_post_types() {
global $wp_rewrite;
/*
* Hiking Trail listing
*/
* Adds custom post types and taxonomies
*/
002‑hiking‑trail‑plugin.phpl
Final/002‑hiking‑trail‑plugin.php 41�31 LF UTF‑8 PHP 0 filesE
![Page 16: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/16.jpg)
• thumbnail (Featured Image)
• page-attributes (To set a custom order)
• revisions (Save your revisions in the DB)
16
supports 'supports' => array('title', 'editor', 'thumbnail', 'revisions', 'page-attributes'),
Why rebuild the wheel when you can use built-in WP Functionality?
![Page 17: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/17.jpg)
• Roll your own 'get_template_directory_uri() . "youricon.png"'
• Use a Dashicon 'menu_icon' => 'dashicons-clipboard'
17
menu_icon No more pushpins please.https://developer.wordpress.org/resource/dashicons
![Page 18: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/18.jpg)
18
![Page 19: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/19.jpg)
What if you have lots of Custom Post Types?
19
![Page 20: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/20.jpg)
20
Nesting your CPT in the Admin Panel
![Page 21: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/21.jpg)
21
register_post_type( 'not_in_menu', ... 'public' => true, 'has_archive' => true, 'show_in_menu' => false,
...)
Nesting your CPT in the Admin Panel First, don’t show the Post Type in the menu itself
![Page 22: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/22.jpg)
22
Nesting your CPT in the Admin Panel https://codex.wordpress.org/Administration_Menus for more information
103
•
104
105
106
107
98
99
100
101
102
•
92
93
94
95
96
97
•
87
88
89
90
91
•
83
84
•
85
86
77
78
79
80
81
82
72
73
74
75
76
echo '<li><a href="'. home_url()
.'/wp-admin/edit.php?post_type=wiverb_bike">Biking Trails</a></li>';
echo '</ul>';
echo '</div>';
}
}
}
echo '<div class="wrap">';
echo '<h2>Trails</h2><p>Edit trails by selecting from the list below';
echo '<ul>';
echo '<li><a href="'. home_url()
.'/wp-admin/edit.php?post_type=wiverb_hike">Hiking Trails</a></li>';
/**
* Add content to the admin trails top-level page
*/
function wiverbs_trails_page() {
if ( !current_user_can( 'edit_posts' ) ) {
wp_die( __( 'You do not have sufficient permissions to access this page.' ) );
'edit_posts', 'edit.php?post_type=wiverb_bike');
}
add_action( 'admin_menu', 'wiverbs_trails_menu' );
}
if(!function_exists('wiverbs_trails_page')) {
'wiverbs_trails_page', 'dashicons-location-alt', 5 );
add_submenu_page('wiverbs_trails', 'Hiking Trails', 'Hiking Trails',
'edit_posts', 'edit.php?post_type=wiverb_hike');
add_submenu_page('wiverbs_trails', 'Biking Trails', 'Biking Trails',
if(!function_exists('wiverbs_trails_menu')) {
/**
* Adds admin nav & subnav
*/
function wiverbs_trails_menu() {
add_menu_page( 'Trails', 'Trails', 'edit_posts', 'wiverbs_trails',
/*
* Admin Controls
*/
003‑trails‑nested‑plugin.p…l
Final/003‑trails‑nested‑plugin.php 72�1 LF UTF‑8 PHP 0 filesE
![Page 23: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/23.jpg)
23
Nesting your CPT in the Admin Panel
![Page 24: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/24.jpg)
108
103
•
104
105
106
107
98
99
100
101
102
•
92
93
94
95
96
97
•
87
88
89
90
91
•
83
84
•
85
86
77
78
79
80
81
82
75
76
echo '<li><a href="'. home_url()
.'/wp-admin/edit.php?post_type=wiverb_bike">Biking Trails</a></li>';
echo '</ul>';
echo '</div>';
}
}
}
echo '<div class="wrap">';
echo '<h2>Trails</h2><p>Edit trails by selecting from the list below';
echo '<ul>';
echo '<li><a href="'. home_url()
.'/wp-admin/edit.php?post_type=wiverb_hike">Hiking Trails</a></li>';
/**
* Add content to the admin trails top-level page
*/
function wiverbs_trails_page() {
if ( !current_user_can( 'edit_posts' ) ) {
wp_die( __( 'You do not have sufficient permissions to access this page.' ) );
'edit_posts', 'edit.php?post_type=wiverb_bike');
}
add_action( 'admin_menu', 'wiverbs_hikes_menu' );
}
if(!function_exists('wiverbs_trails_page')) {
'wiverbs_trails_page', 'dashicons-location-alt', 5 );
add_submenu_page('wiverbs_trails', 'Hiking Trails', 'Hiking Trails',
'edit_posts', 'edit.php?post_type=wiverb_hike');
add_submenu_page('wiverbs_trails', 'Biking Trails', 'Biking Trails',
if(!function_exists('wiverbs_hikes_menu')) {
/**
* Adds admin nav & subnav
*/
function wiverbs_hikes_menu() {
add_menu_page( 'Trails', 'Trails', 'edit_posts', 'wiverbs_trails',
*/
003‑trails‑nested‑plugin.p…l
Final/003‑trails‑nested‑plugin.php 76�1 LF UTF‑8 PHP 0 filesE
24
Nesting your CPT in the Admin Panel https://codex.wordpress.org/Administration_Menus
![Page 25: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/25.jpg)
25
Nesting your CPT in the Admin Panel https://codex.wordpress.org/Administration_Menus
![Page 26: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/26.jpg)
Custom Subdirectories
To achieve the url: http://wisconsinverbs.com/trails/hiking/
'rewrite' => array( 'slug' => 'trails/hiking' ),
'has_archive' => ‘trails/hiking'
26
![Page 27: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/27.jpg)
Custom Subdirectories: REMINDER
27
*Remember to flush/rebuild your permalinks after this change
Either manually or by adding a flush to your theme or plugin activation
https://codex.wordpress.org/Function_Reference/flush_rewrite_rules
![Page 28: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/28.jpg)
But what if you change themes?
28
![Page 29: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/29.jpg)
…you could build your CPT code into a custom plugin.
29
1. Creating Custom Post Types
![Page 31: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/31.jpg)
31
Creating CPT Manually: Create a Plugin https://developer.wordpress.org/plugins/the-basics/header-requirements/
![Page 32: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/32.jpg)
32
My Pick: CPT UI https://wordpress.org/plugins/custom-post-type-ui
1. Creating Custom Post Types
…you could use a third party Custom Post Type management plugin.
![Page 33: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/33.jpg)
33
![Page 34: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/34.jpg)
34
![Page 35: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/35.jpg)
35
CPT Steps:
1.First, create your Custom Post Type
2.Next, add some data in your WordPress admin panel
3.Third, template your custom theme page to display the data
![Page 36: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/36.jpg)
36
![Page 37: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/37.jpg)
What if you want more fields than WordPress’s title & description?
37
![Page 38: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/38.jpg)
• Core WordPress Custom Fieldshttps://codex.wordpress.org/Custom_Fields
• Advanced Custom Fields Plugin (ACF) https://www.advancedcustomfields.com
38
Custom Fields
![Page 39: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/39.jpg)
39
ACF Plugin admin (Free version)
Standard field types
![Page 40: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/40.jpg)
ACF Plugin: Assign custom fields to your Custom Post Type locations
40
![Page 41: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/41.jpg)
41
<?php the_field('trail_link'); ?>
ACF Plugin
![Page 42: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/42.jpg)
42
ACF Plugin
<?php get_header(); ?><div class="container"> <div class="row"> <div class="col-xs-12 blog-post-single add-btm-margin"> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <section <?php post_class() ?> id="post-<?php the_ID(); ?>"> <div class="row"> <div class="col-md-6"> <h1>Bike Trail: <?php the_title(); ?></h1> <?php the_content(); ?> <p> <a href="<?php the_field('trail_link'); ?>"> <?php the_field('trail_link'); ?> </a> </p> <?php $trail_link = get_field('trail_link'); if ($trail_link) { echo ('<p><a href="' . $trail_link . '">' . $trail_link. '</a></p>'); } ?> </div> <div class="col-md-6"> <?php if ( has_post_thumbnail() ) { ?> <a href="<?php the_permalink(); ?>"> <?php the_post_thumbnail('medium'); ?></a> <?php } ?> </div> <div class="col-xs-12"> <p><a href="<?php echo get_post_type_archive_link( 'wiverb_bike' ); ?>"> More Bike Trails </a></p> </div> </div> </section> <?php endwhile; endif; ?> </div> </div></div><?php get_footer(); ?>
123456789
101112131415161718192021222324252627282930313233343536373839404142434445464748
wiverb‑cpt‑… single‑wiverb_bike.php l * Settings sidebar.php archive‑wiv… functions.p…l l l l l
wp‑content/themes/verbs2014/single‑wiverb_bike.php 23�60 LF UTF‑8 PHP master 2 1 file� 8 6 E
or
![Page 43: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/43.jpg)
*This just scratches the surface of developing themes using custom fields.
43
https://www.advancedcustomfields.com
![Page 44: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/44.jpg)
44
CPT Steps:
1.First, create your Custom Post Type
2.Next, add some data in your WordPress admin panel
3.Third, template your custom theme page to display the data
![Page 45: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/45.jpg)
WordPress Template Hierarchy
If your CPT is set 'public' => true, your content will display on one of your default WordPress template pages such as index.php or single.php
https://developer.wordpress.org/themes/basics/template-hierarchy
45
![Page 46: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/46.jpg)
WordPress Template Hierarchyhttps://developer.wordpress.org/themes/basics/template-hierarchy
46
index.php is the default
![Page 47: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/47.jpg)
WordPress Template Hierarchy
This is easily overridden by creating a single-your_post_type.php page.
The same concept applies for your archive page.
https://developer.wordpress.org/themes/basics/template-hierarchy
47
![Page 48: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/48.jpg)
Using single-wiverb_hike.php to display wiverb_hike CPT
48
get_post_type_archive_link( 'wiverb_hike' );
![Page 49: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/49.jpg)
49
1
25
26
27
28
29
30
19
20
21
22
23
24
13
14
15
16
17
18
7
8
9
10
11
12
1
2
3
4
5
6
<?php endwhile; endif; ?>
</div>
</div>
</div>
<?php get_footer(); ?>
<p><a href="<?php echo get_post_type_archive_link( 'wiverb_hike' ); ?>">
More Hiking Trails
</a></p>
</div>
</div>
</section>
<?php
if ( has_post_thumbnail() ) { ?>
<a href="<?php the_permalink(); ?>"> <?php the_post_thumbnail('medium'); ?></a>
<?php } ?>
</div>
<div class="col-xs-12">
<div class="row">
<div class="col-md-6">
<h1>Hiking Trail: <?php the_title(); ?></h1>
<?php the_content(); ?>
</div>
<div class="col-md-6">
<?php get_header(); ?>
<div class="container">
<div class="row">
<div class="col-xs-12 blog-post-single add-btm-margin">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<section <?php post_class() ?> id="post-<?php the_ID(); ?>">
single‑wiverb_hike.phpl
wp‑content/themes/verbs2014/single‑wiverb_hike.php 30�1 LF UTF‑8 PHP master 1 4 files� 8 6 E
![Page 50: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/50.jpg)
Using archive-wiverb_hike.php
https://github.com/andreawetzel/WisconsinVerbsThemeV01 50
![Page 51: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/51.jpg)
If you want to display data from your Custom Post Types on a WordPress page, you can create a second WP_Query call and loop through it.
Loop Examplehttps://codex.wordpress.org/Post_Types#Querying_by_Post_Type
Setting Parameters https://codex.wordpress.org/Class_Reference/WP_Query#Multiple_Loops
Querying Custom Post Types in a Page
51
![Page 52: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/52.jpg)
Using template-trails.php
52
![Page 53: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/53.jpg)
53
1
373839404142
313233343536
252627282930
192021222324
131415161718
7 8 9101112
1 2 3 4 5 6
'order' => 'asc' ); $query2 = new WP_Query( $args ); if ( $query2->have_posts() ) { ?> <div class="row"> <?php while ( $query2->have_posts() ) {
<?php // Second query to display hiking and biking trails $args = array( 'post_type' => array('wiverb_hike', 'wiverb_bike'), 'posts_per_page' => '6', 'orderby' => 'title',
<?php endwhile; endif; ?> <? wp_reset_postdata(); ?> </div> </div> </div>
<div class="col-md-8"> <div class="page-content"> <?php if ( have_posts() ) : while ( have_posts() ): the_post(); // Display page content as intro ?> <?php the_content(); ?>
</div> </div> </div></div><div class="container"> <div class="row">
<?php get_header(); ?><div class="title-bg hero-title-bg"> <div class="container"> <div class="row"> <div class="archive-leader col-sm-12"> <h1><?php wp_title( '' ); ?></h1>
<?php/***Template Name: Trails Template*/?>
template‑trails.phpl
wp‑content/themes/verbs2014/template‑trails.php 71�1 LF UTF‑8 PHP master 1 7 files� 8 6 E
�
![Page 54: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/54.jpg)
1
66
60
61
62
63
64
65
54
55
56
57
58
59
48
49
50
51
52
53
42
43
44
45
46
47
36
37
38
39
40
41
31
32
33
•
34
35
29
30
<?php } //End While
wp_reset_postdata(); ?>
</div>
<?php } //End if ?>
</div>
<?php get_footer(); ?>
<?php echo get_the_post_thumbnail($query2->post->ID, 'thumbnail') ?>
</a></div>
<div class="trl-link"><a href="<?php echo get_the_permalink($query2->post->ID);?>">
<?php echo get_the_title($query2->post->ID); ?>
</a></div>
</div>
$postTypeClass = 'bg-red';
break;
} ?>
<div class="col-sm-3">
<div class="trl-tag <?php echo $postTypeClass ?>"><?php echo $postTypeText; ?></div>
<div><a href="<?php echo get_the_permalink($query2->post->ID);?>">
case 'wiverb_hike':
$postTypeText = 'Hike';
$postTypeClass = 'bg-blue';
break;
case 'wiverb_bike':
$postTypeText = 'Bike';
if ( $query2->have_posts() ) { ?>
<div class="row">
<?php while ( $query2->have_posts() ) {
$query2->the_post();
$postType = get_post_type(get_the_ID());
switch($postType){
<?php
// Second query to display hiking and biking trails
$args = array( 'post_type' => array('wiverb_hike', 'wiverb_bike'), 'posts_per_page' => '6',
'orderby' => 'title', 'order' => 'asc' );
$query2 = new WP_Query( $args );
</div>
template‑trails.phpl
wp‑content/themes/verbs2014/template‑trails.php 29�9 LF UTF‑8 PHP master 1 7 files� 8 6 E
54
![Page 55: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/55.jpg)
55
![Page 56: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/56.jpg)
…you could make a shortcode to display your CPT content on multiple pages
[template part="template-part-hello"]
https://github.com/halfempty/template-part-shortcode
56
![Page 57: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/57.jpg)
57
![Page 58: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/58.jpg)
58
So, to recap1.First, create your Custom Post Type
• Use the theme’s functions.php
• Custom Plugin
• Third Party Plugin
2.Next, add some data in your WordPress admin panel
• This is the easy part
3.Third, template your custom theme page to display the data
• Create a custom single or archive page
• Use a second WP_Query call
• Consider using a shortcode for easy access to your content
![Page 59: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/59.jpg)
Custom Post Typesin the wild
59
![Page 60: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/60.jpg)
60
A simple case: Upcoming conference listinghttps://forteresearch.com/contact-us/see-us-at
![Page 61: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/61.jpg)
61
A simple case: Upcoming conference listing
![Page 62: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/62.jpg)
Leadership Page: Before Custom Post Types
62
![Page 63: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/63.jpg)
Before Custom Post Types:
63
• Difficult for staff to edit HTML or use the WordPress Editor WYSIWYG without “Breaking” the page
• Everything was sorted manually, meaning a lot of HTML edits were needed for each addition or removal.
• It didn’t feel like a good use of a CMS.
![Page 66: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/66.jpg)
66
Leadership Page: After Custom Post Types
![Page 67: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/67.jpg)
Designing with CPT in Mind
67
![Page 68: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/68.jpg)
What to consider when designing a new website:
• What design elements do we see repeating?
68
• What content will need its own page?
• Is there content that will need to be re-sorted or searched?
• Is there content that will need to be syndicated or displayed on other websites, rss feeds or apps?
![Page 69: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/69.jpg)
Content first
• Having a content-first approach speeds up the design and development process.
• You can create a map of your content types and the fields they will include as an early deliverable for your client or team.
69
![Page 70: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/70.jpg)
Questions?
70
Web : andrearoenning.com Twitter: @andreaincode
Slides & Feedback:https://joind.in/talk/e4043
![Page 71: Building Unique Templates with Custom Post Types (CPT) in … · 2017. 9. 19. · * Adds custom post types and taxonomies */ 002‑hiking‑trail‑plugin.php l Final/002‑hiking‑trail‑plugin.php](https://reader034.fdocuments.us/reader034/viewer/2022051815/603b186da4c6a323f03a10c0/html5/thumbnails/71.jpg)
Madison Dev Community-Madison PHP Meetup -WordPress Madison Meetup -MadJS -Web Designer Meetup -Women in Tech -Codecinella Tech Talks
…and so many more!
71