Build Your Own Business Website header image

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

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment