Slide 1

Slide 1 text

經驗分享:使用Pods 框架及WPUF管理自定 義文章類型 Experience Sharing: Manage Custom Post Types Using Pods Framework and WPUF Victor K. Nip Hong Kong WordPress Meetup 2023-04-17

Slide 2

Slide 2 text

經驗分享 / Experience Sharing 在這次聚會中,Victor 將分享他使 用 Pods Framework 和 WP User Frontend 在 WordPress 中管理自定 義文章類型 (Custom Post Type - CPT) 的經驗。 在 WordPress 中, 許多“物件”(例如 WooCommerce 產品、輸入表單) 都是以創建它們的插件定義的 CPT 的文章存儲在數據庫中。 作為開 發人員,您也可以創建自己的 CPT, 例如職位空缺、地產廣告、藝術品 資料、員工履歷等,以滿足項目的 需要。 這次分享主題將包括如何 擴展標準文章和頁面的功能、如何 創建 CPT、如何在存檔頁面中顯示 CPT 文章列表、如何使用 Pod 模板 (即無需編寫 PHP)顯示 CPT 文章 的內容 。 In this meetup, Victor will share his experience in managing custom post types (CPTs) in WordPress using Pods Framework and WP User Frontend. In WordPress, many “things” (such as WooCommerce products, input forms) are stored in the database as a post of certain CPTs as defined by the plugins that create them. As a developer, you can also create your own CPTs, such as job ad, property listing, artwork information, employee record, etc., to suit the needs of your project. The topics in this meetup will include how to extend the features of standard posts and pages, how to create a CPT, how to show a listing of posts of a CPT in an archive page, how to show the contents of a post of a CPT using Pod Templates (i.e., without coding in PHP).

Slide 3

Slide 3 text

Agenda • What is custom post type? • Why use Pods Framework? • Demo: Extending existing post type • Why use WP User Frontend? • Demo: Using custom post type • Q&A

Slide 4

Slide 4 text

Custom Post Type • WordPress comes with some default post types: • Post, Page, Attachment, Revision, Nav Menu • Any post types you create, or created by a plugin, is a custom post type (CPT) • Examples: • Movie on a movie website • Job ad on a job board • Property ad on a property agent’s website • Artwork and artist on an art gallery website • WordPress itself does not have a CPT management function • Showing the custom contents of a CPT post on a webpage needs a custom template by default which requires HTML and PHP knowledge

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Pods Framework • The Pods Framework is a Content Development Framework for WordPress - It lets you create and extend content types that can be used for any project. Add fields of various types we've built in, or add your own with custom inputs, you have total control. • https://github.com/pods-framework/pods • https://pods.io/

Slide 7

Slide 7 text

Why Use Pods for CPT? • Extend functionality of existing post types • Create new custom post type • Pod Templates to display CPT posts • High quality (⭐⭐⭐⭐⭐) • Large community (>100,000 active installations) • Everything free

Slide 8

Slide 8 text

Installing Pods Framework

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Demo: Extending Existing Post Type Display a YouTube video before the main texts of a post

Slide 11

Slide 11 text

Why Extend Existing Post Type? • Add fields to an existing post type (including default post types and other custom post types created by plugins) • E.g., add a YouTube video field to Product (by WooCommerce) to demonstrate the usage of every single product • Custom listing of existing post types • E.g., products list of WooCommerce Products

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Create A Post • Post Title: Most-Viewed YouTube Video • Featured Image: https://i3.ytimg.com/vi/XqZsoesa 55w/maxresdefault.jpg • Post Content: "Baby Shark Dance", published June 17, 2016, is the most-viewed YouTube video with over 12 billion views. • YouTube video ID: XqZsoesa55w (URL of the video is https://www.youtube.com/watch ?v=XqZsoesa55w)

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

What’s Next? • Develop a template to: 1. Remove the dark Featured Image 2. Add the YouTube video before the texts (post content) 3. Add the Featured Image below the texts

Slide 25

Slide 25 text

https://developer.wordpress.org/themes/template-files-section/custom-post-type-template-files/

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

Magic Tag

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

Next: Associate the template to the CPT

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

WP User Frontend • Functions • Frontend post submission (for default and custom post types) • Content restrictions • Payments • Pay Per Post • Pro version offers extra field types and features • https://wordpress.org/plugins/wp-user- frontend/ • https://wedevs.com/wp-user-frontend-pro/

Slide 43

Slide 43 text

Installing WPUF

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

Demo: Using Custom Post Type for Event Registration

Slide 46

Slide 46 text

The Case Imagine you have to fill in a registration form to register yourself before you can come to this meetup. The organizer, Ivan, would require you to fill in a simple form with your name, phone, and email address, and he wants a photo of each registrant, too. He also wants to have an archive to list the registrants showing the photo and name of each registrant, and when the registrant is selected then all the filled information of the registrant will be shown on a single page. Finally, he wants to assign specific registered participants to certain positions and have a speaker page for publicity.

Slide 47

Slide 47 text

Steps Define Registration CPT Create Frontend Form Create Pod Template for Registration Create Pod Template for Registration Archive Page Define Position CPT Create Speaker Page

Slide 48

Slide 48 text

Steps Define Registration CPT Create Frontend Form Create Pod Template for Registration Create Pod Template for Registration Archive Page Define Position CPT Create Speaker Page

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

Why Not Always Define Fields in Pods Framework? • Pods Framework can handle fields created by other plugins • Form function, such as what WPUF provides, need to define the field types for a form to function, so there is no need to define the same field multiple times • Conflicting field definitions of the same field by different plugins will cause errors

Slide 55

Slide 55 text

Steps Define Registration CPT Create Frontend Form Create Pod Template for Registration Create Pod Template for Registration Archive Page Define Position CPT Create Speaker Page

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

Form Fields • Post Title -> Name (Required) • Email Address -> Email (Required) • Featured Image -> Photo (Required) • Text -> Phone

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

What’s captured?

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

Where is the Featured Image?

Slide 87

Slide 87 text

Steps Define Registration CPT Create Frontend Form Create Pod Template for Registration Create Pod Template for Registration Archive Page Define Position CPT Create Speaker Page

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

No content

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

No content

Slide 95

Slide 95 text

No content

Slide 96

Slide 96 text

Steps Define Registration CPT Create Frontend Form Create Pod Template for Registration Create Pod Template for Registration Archive Page Define Position CPT Create Speaker Page

Slide 97

Slide 97 text

Default Archive Page

Slide 98

Slide 98 text

Problems with Default Archive Page • One option is to replace the excerpt with the contents of the template, which restricts what and how you can show • The other option is to use a custom hook, which means you have to write PHP codes • Solution: Use a custom archive page

Slide 99

Slide 99 text

No content

Slide 100

Slide 100 text

No content

Slide 101

Slide 101 text

No content

Slide 102

Slide 102 text

Add another registration

Slide 103

Slide 103 text

No content

Slide 104

Slide 104 text

Create Registration Report

Slide 105

Slide 105 text

No content

Slide 106

Slide 106 text

Steps Define Registration CPT Create Frontend Form Create Pod Template for Registration Create Pod Template for Registration Archive Page Define Position CPT Create Speaker Page To demonstrate using a post as the value of a field

Slide 107

Slide 107 text

No content

Slide 108

Slide 108 text

No content

Slide 109

Slide 109 text

No content

Slide 110

Slide 110 text

No content

Slide 111

Slide 111 text

No content

Slide 112

Slide 112 text

Steps Define Registration CPT Create Frontend Form Create Pod Template for Registration Create Pod Template for Registration Archive Page Define Position CPT Create Speaker Page

Slide 113

Slide 113 text

No content

Slide 114

Slide 114 text

No content

Slide 115

Slide 115 text

No content

Slide 116

Slide 116 text

No content

Slide 117

Slide 117 text

No content

Slide 118

Slide 118 text

Special Notes on Using Pods Framework and WPUF Together • Pods Framework checks the data when data are saved by WPUF. Problems may arise if a field is defined differently in Pods and WPUF. • Some WPUF field types are not supported by Pods (e.g., Repeat Field Type) • For certain field types, Pods and WPUF store the data differently (e.g., Multiple Media Files)

Slide 119

Slide 119 text

Some Advanced Features Not Discussed • Pod Template • PHP codes can be inserted into a template • Magic Tag • Traversal notation: A field of a field which is a post type • E.g., the CPT is artwork, the artist name is {@artist.name} • Safe output: • E.g., make url’s safe {@permalink,esc_url} • E.g., remove all HTML tags {@post_content,strip_tags} • See https://docs.pods.io/displaying-pods/magic-tags/using-magic-tags/, https://docs.pods.io/displaying-pods/magic-tags/ • Pods Shortcodes • Parameters and SQL-like codes can be inserted • See https://docs.pods.io/displaying-pods/pods-shortcode/