Lesson 8 – Build Templates with Custom Post Meta

Introduction

• The big idea
  • To create a landing page template that is easily reused with different content – without the end user having to use ANY code
  • This is achieved by creating custom post meta fields that the user can use to supply the content
  • Give the end user visual cues about what to do and what type of content to add
• What we will do
  • Create a childtheme from an existing child theme
  • Create a new template from an existing template
  • Create a bunch of post meta options
  • Add that post meta to the new template
• Learning objectives
  • How to create post meta
  • How to add post meta to a template.
  • How to sanitize data before output
  • How to supply default data when no actual data is provided

How to Create a Custom Child Theme from an Existing Child Theme

• Copy the child theme – rename the folder
• Change names in
  • functions.php
  • style.css
• Replace the screenshot
• Create the templates directory
• Create the video landing page template
• Setup File Constants
• Add some child theme images
• Install child theme
• Add header image

Planning the Meta Boxes

• Call to action title
• Video
  • Video title
  • Video embed
• Optin
  • Optin title
  • Optin text
  • Optin embed code
• Testimonial – x 4
  • headline
  • Name
  • image
  • text
• Benefits – x 3
  • Image
  • Headline
  • Text
• 2nd Call
• 2nd Optin
  • Optin title
  • Optin text
  • Optin embed code

Add the Meta Box API to the Child Theme

• Why use this method?
  • It simplifies the process
  • It takes care of security
• create the folder structure
• add the files
• Create a custom File Constant
  • get_stylesheet_directory()
  • get_stylesheet_directory_uri()
• include the files
  • init
• Review the types of meta boxes available

Create the First Meta Box

• Create a new file
• Create a function – filter
  • takes a variable $meta_boxes
  • returns the variable
• Require the file
• Add the filter hook
• Anatomy of the meta box array
  • Array key
  • id
  • title
  • pages
  • context
  • priority
  • show names
  • fields
• Section title
• Text area small
  • Name
  • desc
  • id
  • type

Assign this metabox to the landing page template

• The show_on filter
• Wiki –
• How to find the template slug
• Add the show-on filter as an array

Create the Video Section

• section title
• Headline – text
• Video embed – oembed
• Optin title – textarea small
• Optin text – text area small
• Optin form code – textarea code

Create the Testimonial Section

• section title
• testimonial ttle – text large
• textimonial text – wysisyg – with option for rows – 5
• name – text medium
• image – file

Create the Benefits Section

• section title
• benefit ttle – text large
• benefit text – wysisyg – with option for rows – 5
• image – file

Create the Final Call to Action Section

• section title
• Headline – text areas small
• Optin title – textarea small
• Optin text – text area small
• Optin form code – textarea code

Basic Modification of the Video Landing Page template

• Change body class filter
• Remove header removal
• Remove the page headline meta
  • function – genesis_post_info
  • hook – genesis_entry_header
• Remove the footer removal

Using the Post Meta in the Template

• get_post_meta
• syntax
• sanitization
  • wp_kses_post
• set fallback
• swap out the title –
• filter – genesis_post_title_text
• add content

Add the Video Call to Action Section to the Template

• sanitize
  • wp_kses_post
  • esc_html
• setup defaults
• Column configuration
  • column wrapper
  • columns
  • first
• Set default embed
• Add action – genesis_entry_content
• Add content

Add the Testimonial Section to the Template

• Create image size
• Setup a default image html
• sanitze
  • wp_get_attachment_image();
  • syntax
• Setup foreach loop
• Setup condition for showing default content on the first testimonial
• wpautop filter
• Add action – genesis_entry_content
• Add content

Add the Benefits Section to the Template

• Create image size
• Setup a default image html
• sanitze
  • wp_get_attachment_image();
  • syntax
• Setup foreach loop
• Setup condition for showing default content on the first testimonial
• wpautop filter
• Add action – genesis_entry_content
• Add content

Add the 2nd Call to action Section to the Template

• sanitization
• HTML – use div instead of section
• Add action – genesis_entry_content
• Add content

Add the Horizontal Optin to the Template

• sanitization
• HTML – use div instead of section
• Add action – genesis_entry_content
• Add content

Question and Answer