Create Your Own Theme Page-Builder in Minutes

In this talk you will see a portfolio site developed and learn how to code your own fast and beautiful page-builder to make it happen. Plus you will see how to create custom post types, use repeater fields, build a REST API, and more.

Oh, and you will not need a single WordPress plugin.

https://github.com/kevindees/page-builder-talk

Transcript

1. TYPEROCKET CREATE A PAGE BUILDER
2. https://goo.gl/i24Uei
3. CODING MODERN DESIGN IS HARD
4. KEVIN DEES @KEVINDEES
5. ROBOJUICE
6. MODULAR BASED DESIGN
7. PAGE BUILDERS
9. INSTALL TYPEROCKET USING COMPOSER
10. composer create-project --prefer-dist typerocket/typerocket
11. LETS MAKE A PORTFOLIO SITE
12. DEMO
13. 1. Take Screenshots and Make Thumbnails 2. Define Admin Components 3. Setup Visuals
17. <h1>Review</h1> <?php /** @var \TypeRocket\Elements\Form $form */ echo $form->repeater('Reviews')->setFields([ $form->text('Full Name', ['maxlength' => 60]), $form->text('Company', ['maxlength' => 60]), $form->select('Stars')->setOptions( range(1,5), 'flat' ), $form->textarea('Review', ['maxlength' => 300]), ]);
18. <?php if( !empty($data['reviews']) && count($data['reviews']) > 1 ) : $reviews = $data['reviews']; ?> <!--====== Review Section Start ======--> <section class="review-section spad"> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="review-carousel"> <?php foreach($reviews as $review) : ?> .... <?php endforeach; ?> </div> </div> </div> </div> </section> <!--====== Review Section End ======--> <?php endif; ?>
19. <?php foreach($reviews as $review) : ?> <div class="single-review"> <h2><?= esc_html($review['full_name']); ?></h2> <h3><?= esc_html($review['company']); ?></h3> <div class="revew-stars"> <?php $range = range(1, (int) $review['stars'] ); // range(1, 4) // > [1,2,3,4] $stars = array_pad( $range, 5, null); // array_pad([1,2], 4, 0) // > [1,2,0,0] foreach ($stars as $star) { $star = $star ? 'fa-star' : 'fa-star-o'; echo "<i class=\"fa {$star}\"></i>"; } ?> </div> <?= esc_autop($review['review']); ?> </div> <?php endforeach; ?>
21. <h1>Promotion</h1> <?php /** @var \TypeRocket\Elements\Form $form */ echo $form->textarea('Call Out', ['maxlength' => 30]); echo $form->image('Background');
22. <!--====== promotion Section Start ======--> <?php $img_src = wp_get_attachment_image_src( (int) $data['background'], 'full')[0]; ?> <section class="promotion-section spad"> <div class="promotion-bg" style="background-image: url(<?= esc_url($img_src); ?>)"></div> <div class="spacial-circle wow flipInY" data-wow-delay="0.4s"> <div class="circle-content"> <h2><?= esc_nl2br( $data['call_out'] ?? 'Contact Me<br> Below' ); ?></h2> </div> </div> </section> <!--====== promotion Section End ======-->
23. function esc_nl2br($string) { return nl2br( esc_html($string) ); }
25. REGISTER POST TYPE php galaxy make:model -c post Work 1. Fields: Title, Image, Type (Illustration, Branding, Fashion) 2. Custom Admin Column: Image
26. $work = tr_post_type('Work'); $work->setIcon('pencil'); $work->setTitlePlaceholder('Enter project title here'); $work->setAdminOnly(); $work->setArgument('supports', ['title']); $work->setTitleForm(function() { $form = tr_form(); echo $form->image('Image'); echo $form->select('Type')->setOptions( portfolio_types() ); }); $work->addColumn('type', true, 'Type', function($value) { echo array_flip( portfolio_types() )[$value]; }); $work->addColumn('image', false, 'Image', function($value) { echo wp_get_attachment_image($value, 'thumbnail'); });
27. function portfolio_types() { return [ 'Illustrations' => 'ill', 'Branding' => 'brand', 'Graphics' => 'graph', ]; }
28. <h1>Portfolio</h1> <?php /** @var \TypeRocket\Elements\Form $form */ echo $form->text('Headline');
30. tr_route()->post('/contact/send', 'send@Contact'); tr_route()->get('/contact/thanks', 'thanks@Contact');
31. class ContactController extends Controller { public function send() { // TODO: Save the fields } public function thanks() { return tr_view('contact.thanks'); } }
32. <form action="/contact/send" id="con_form" method="POST"> <?= tr_hidden_form_fields(); ?> <input type="text" name="tr[name]" value="<?= tr_old_field('name'); ?>" required placeholder="Your Name*"> <input type="email" name="tr[email]" value="<?= tr_old_field('email'); ?>" required placeholder="Your Email*"> <textarea id="massage" name="tr[message]" required placeholder="Your Massage*"></textarea> <div class="text-center"> <button type="submit" id="send-form">Send A Massage</button> </div> <?php tr_old_fields_remove(); ?> </form>
33. class ContactController extends Controller { public function send() { $fields = $this->request->getFields(); $options = [ 'email' => 'required|email', 'name' => 'required|min:3', 'message' => 'required|min:4', ]; $validator = tr_validator($options, $fields ); $redirect = tr_redirect(); if( ! $validator->passed() ) { $redirect ->back() ->withFields($fields) ->with( [ 'errors' => $validator->getErrors() ] ); } // TODO: Save the fields return $redirect->toUrl('/contact/thanks'); } .... }
34. <?php get_header(); ?> <div class="container pad-container"> <h1>Thanks!</h1> <p>Your Email was sent!</p> </div> <?php get_footer(); ?>
35. -- Run At: 1506045563 -- Description: Table for contact for messages. -- >>> Up >>> CREATE TABLE `{!!prefix!!}contacts` ( `id` int(11) unsigned NOT NULL AUTO_INCREMENT, `name` varchar(255) DEFAULT NULL, `email` varchar(255) DEFAULT NULL, `message` blob, `created_at` datetime DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; -- >>> Down >>> DROP TABLE IF EXISTS `{!!prefix!!}contacts`;
36. $fields = $this->request->getFields(); .... $contact = new Contact(); $contact->save($fields);
37. $settings = ['capability' => 'administrator']; $contacts = tr_page('Contact', 'index', 'Contacts', $settings); $contacts->setIcon('send'); $contacts->useController();
38. class ContactController extends Controller { .... public function index() { return tr_view('contact.index'); } }
39. <?php $table = tr_tables(); $table->setColumns('name', [ 'name' => [ 'sort' => true, 'label' => 'Name' ], 'email' => [ 'label' => 'Email Address' ], 'message' => [ 'label' => 'Message' ] ]); $table->render();
40. class Kernel extends \TypeRocket\Http\Kernel { protected $middleware = [ 'hookGlobal' => [], 'resourceGlobal' => [ AuthRead::class, Middleware\VerifyNonce::class ], 'noResource' => [ AuthAdmin::class ], 'user' => [ IsUserOrCanEditUsers::class ], 'post' => [ OwnsPostOrCanEditPosts::class ], 'page' => [ OwnsPostOrCanEditPosts::class ], ..... 'tag' => [ CanManageCategories::class ], 'contact' => [] ]; }