SlideShare a Scribd company logo

How to Build a Bespoke Page Builder in WordPress

•
•
Gerald Glynn
Gerald Glynn

This document discusses building a bespoke page builder for WordPress. It covers using Advanced Custom Fields to create custom fields that store metadata which can then be used to dynamically generate page content. The key benefits are that it allows marketing and content teams to create customized page designs and flows without needing coding skills, while reducing the back-and-forth between developers and other teams. Potential pitfalls discussed include performance optimizations and how to best structure fields and templates.

Related slideshows

Hello npm
Hello npmHello npm
Hello npm
 
State of the Web
State of the WebState of the Web
State of the Web
 
Static Websites - The Final Frontier
Static Websites - The Final FrontierStatic Websites - The Final Frontier
Static Websites - The Final Frontier
 
1 of 24
BUILDING A BESPOKE PAGE BUILDER H O W TO L E V E R AG E M E TA DATA F I E L D S TO E N A B L E C R E ATO R S TO C R E AT E TA I LO R E D CO N T E N T
MAIN GOAL Demonstrate how a regular WordPress Developer can build a Page Builder – nothing fancy going on here!
TOPICS COVERED • The Pain Point • The Solution • The Pitfalls
PAIN POINT MARKETING TEAMS • Generating Creative Campaigns • Want the freedom to implement their own Designs, User Journeys, etc. • Don't always know HTML & CSS • WYSIWYG Woes WEB DEVELOPERS • Working with multiple departments • Don't always have time to be coding all their Designs, User Journeys, etc. • There's often a lot back-&-forth • Hardcoded HTML can’t be easily
SO WHAT IS A PAGE BUILDER? • Visual Composer • Site Origin • Demo examples…
PROS & CONS • Have lots of features • Rendered by shortcodes – one DB call • Easy to use • Freedom • Noisy looking interface • Propriety clunky storage of data – Technology lock-in • Manage expectations • Design inconsistencies
SOLUTION // Build your own (I will now demo our Page Builder initially for about 10-12mins) Features include… – (Sections,) Rows & Columns – Building custom CTAs and adding them anywhere – Hero Images – Role-based Content – Geolocation-based Content – Working with A/B & Multivariate Testing platforms
MECHANISM // Advanced Custom Fields • Advanced Custom Fields (ACF) by Elliot Condon • No, I'm not paid to endorse him • What it is…demo time!
MECHANISM // Advanced Custom Fields Basic Fields • Text • Content Editor • Numbers • Selectors: – Dropdowns, – Checkboxes, – Radio Buttons, etc.
MECHANISM // Advanced Custom Fields Advanced Fields* • Repeater • Clone • Flexible Content! • Options Pages *Pro approx. $25
MECHANISM // Advanced Custom Fields • JSON storage of fields definitions • Source Control Management e.g. Git, Subversion, etc. • Field Groups stored in Database • Edit Page, Post, etc. rendered from JSON • Demo!
POST-META // Where this new content is stored WP Post :: e.g. Page, Post, CPT, etc. Post ID 1234 Title 7 Things You Should... Name/Slug 7-things-you-should-... Author Joe Bloggs Content "It's amazing how people..." Date Created 01-04-2017 Post Type post ⋮ WP Post Meta e.g. Subheading, Event Date, etc. Meta ID 5678 Post ID 1234 Key subtitle Value Number 2 will… WP Post Meta e.g. Subheading, Event Date, etc. Meta ID 5678 Post ID 1234 Key subtitle Value Number 2 will… WP Post Meta e.g. Subheading, Event Date, etc. Meta ID 5678 Post ID 1234 Key subtitle Value Number 2 will… WP Post Meta e.g. Subheading, Event Date, etc. Meta ID 5678 Post ID 1234 Key subtitle Value Number 2 will…
GRID LAYOUT // CSS Frameworks • CSS Frameworks are a great to get a Grid Layout quickly • Bootstrap & Zurb Foundation are the main examples.
https://www.drupal.org/sandbox/maskedjellybean/23121
How to Build a Bespoke Page Builder in WordPress
col-md-12 .col-md-6 .col-md-6 .col-md-3 .col-md-3 .col-md-4 .col-md-2 .col-md-2 .col-md-2 .col-md-2 .col-md-2 .col-md-2
col-md-12 .col-md-6 .col-md-6 .col-md-3 .col-md-3 .col-md-4 .col-md-2 .col-md-2 .col-md-2 .col-md-2 .col-md-2 .col-md-2 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1
col-md-12 .col-md-6 .col-md-6 .col-md-3 .col-md-3 .col-md-4 .col-md-2 .col-md-2 .col-md-2 .col-md-2 .col-md-2 .col-md-2 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1
MECHANISM // Behind the scenes • First let's take a look at how our Layouts are stored in the Database (Login into PhpMyAdmin and look at some content)
MECHANISM // Code structures • Explain how ACF works – Repeaters – Flexible Content – Demo code for template file routing
PITFALLS // Lots of learnings What are the issues • Performance :: Front-end – Page Caching • Performance :: Backend – Use collapsible Sections – Don't load Content Editors until clicked • Searching meta-data – Third-party ACF Add-ons
CONCLUSION WHY YOU SHOULD • Don't have a Developer spending time building 100s of pages • Save time WHY YOU SHOULDN'T • Maybe it's okay to have a Developer building 10s of pages • Quick one-off designs
FUTURE // Where next for bespoke Page Builders • Storing these pages as WP Content in HTML or JSON format • Leverage other Page Builders with Widgets
QUESTIONS ?

More Related Content

How to Build a Bespoke Page Builder in WordPress

  • 1. BUILDING A BESPOKE PAGE BUILDER H O W TO L E V E R AG E M E TA DATA F I E L D S TO E N A B L E C R E ATO R S TO C R E AT E TA I LO R E D CO N T E N T
  • 2. MAIN GOAL Demonstrate how a regular WordPress Developer can build a Page Builder – nothing fancy going on here!
  • 3. TOPICS COVERED • The Pain Point • The Solution • The Pitfalls
  • 4. PAIN POINT MARKETING TEAMS • Generating Creative Campaigns • Want the freedom to implement their own Designs, User Journeys, etc. • Don't always know HTML & CSS • WYSIWYG Woes WEB DEVELOPERS • Working with multiple departments • Don't always have time to be coding all their Designs, User Journeys, etc. • There's often a lot back-&-forth • Hardcoded HTML can’t be easily
  • 5. SO WHAT IS A PAGE BUILDER? • Visual Composer • Site Origin • Demo examples…
  • 6. PROS & CONS • Have lots of features • Rendered by shortcodes – one DB call • Easy to use • Freedom • Noisy looking interface • Propriety clunky storage of data – Technology lock-in • Manage expectations • Design inconsistencies
  • 7. SOLUTION // Build your own (I will now demo our Page Builder initially for about 10-12mins) Features include… – (Sections,) Rows & Columns – Building custom CTAs and adding them anywhere – Hero Images – Role-based Content – Geolocation-based Content – Working with A/B & Multivariate Testing platforms
  • 8. MECHANISM // Advanced Custom Fields • Advanced Custom Fields (ACF) by Elliot Condon • No, I'm not paid to endorse him • What it is…demo time!
  • 9. MECHANISM // Advanced Custom Fields Basic Fields • Text • Content Editor • Numbers • Selectors: – Dropdowns, – Checkboxes, – Radio Buttons, etc.
  • 10. MECHANISM // Advanced Custom Fields Advanced Fields* • Repeater • Clone • Flexible Content! • Options Pages *Pro approx. $25
  • 11. MECHANISM // Advanced Custom Fields • JSON storage of fields definitions • Source Control Management e.g. Git, Subversion, etc. • Field Groups stored in Database • Edit Page, Post, etc. rendered from JSON • Demo!
  • 12. POST-META // Where this new content is stored WP Post :: e.g. Page, Post, CPT, etc. Post ID 1234 Title 7 Things You Should... Name/Slug 7-things-you-should-... Author Joe Bloggs Content "It's amazing how people..." Date Created 01-04-2017 Post Type post ⋮ WP Post Meta e.g. Subheading, Event Date, etc. Meta ID 5678 Post ID 1234 Key subtitle Value Number 2 will… WP Post Meta e.g. Subheading, Event Date, etc. Meta ID 5678 Post ID 1234 Key subtitle Value Number 2 will… WP Post Meta e.g. Subheading, Event Date, etc. Meta ID 5678 Post ID 1234 Key subtitle Value Number 2 will… WP Post Meta e.g. Subheading, Event Date, etc. Meta ID 5678 Post ID 1234 Key subtitle Value Number 2 will…
  • 13. GRID LAYOUT // CSS Frameworks • CSS Frameworks are a great to get a Grid Layout quickly • Bootstrap & Zurb Foundation are the main examples.
  • 16. col-md-12 .col-md-6 .col-md-6 .col-md-3 .col-md-3 .col-md-4 .col-md-2 .col-md-2 .col-md-2 .col-md-2 .col-md-2 .col-md-2
  • 17. col-md-12 .col-md-6 .col-md-6 .col-md-3 .col-md-3 .col-md-4 .col-md-2 .col-md-2 .col-md-2 .col-md-2 .col-md-2 .col-md-2 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1
  • 18. col-md-12 .col-md-6 .col-md-6 .col-md-3 .col-md-3 .col-md-4 .col-md-2 .col-md-2 .col-md-2 .col-md-2 .col-md-2 .col-md-2 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1
  • 19. MECHANISM // Behind the scenes • First let's take a look at how our Layouts are stored in the Database (Login into PhpMyAdmin and look at some content)
  • 20. MECHANISM // Code structures • Explain how ACF works – Repeaters – Flexible Content – Demo code for template file routing
  • 21. PITFALLS // Lots of learnings What are the issues • Performance :: Front-end – Page Caching • Performance :: Backend – Use collapsible Sections – Don't load Content Editors until clicked • Searching meta-data – Third-party ACF Add-ons
  • 22. CONCLUSION WHY YOU SHOULD • Don't have a Developer spending time building 100s of pages • Save time WHY YOU SHOULDN'T • Maybe it's okay to have a Developer building 10s of pages • Quick one-off designs
  • 23. FUTURE // Where next for bespoke Page Builders • Storing these pages as WP Content in HTML or JSON format • Leverage other Page Builders with Widgets