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