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
   

   View Slide

2. https://goo.gl/i24Uei
   

   View Slide

3. CODING MODERN
   DESIGN IS HARD
   

   View Slide

4. KEVIN DEES
   @KEVINDEES
   

   View Slide

5. ROBOJUICE
   

   View Slide

6. MODULAR BASED DESIGN
   

   View Slide

7. PAGE BUILDERS
   

   View Slide

8. View Slide

9. INSTALL TYPEROCKET
   USING COMPOSER
   

   View Slide

10. composer create-project --prefer-dist
    typerocket/typerocket
    

    View Slide

11. LETS MAKE A PORTFOLIO SITE
    

    View Slide

12. DEMO
    

    View Slide

13. 1. Take Screenshots and Make Thumbnails
    2. Define Admin Components
    3. Setup Visuals
    

    View Slide

14. View Slide

15. View Slide

16. View Slide

17. Review
    /** @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]),
    ]);
    

    View Slide

18. if( !empty($data['reviews']) && count($data['reviews']) > 1 ) :
    $reviews = $data['reviews'];
    ?>
    
    
    
    
    
    
    
    ....
    
    
    
    
    
    
    
    
    

    View Slide

19. 
    
    = esc_html($review['full_name']); ?>
    = esc_html($review['company']); ?>
    
    $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 "";
    }
    ?>
    
    = esc_autop($review['review']); ?>
    
    
    

    View Slide

20. View Slide

21. Promotion
    /** @var \TypeRocket\Elements\Form $form */
    echo $form->textarea('Call Out', ['maxlength' => 30]);
    echo $form->image('Background');
    

    View Slide

22. 
    $img_src = wp_get_attachment_image_src( (int) $data['background'], 'full')[0];
    ?>
    
    
    
    
    = esc_nl2br( $data['call_out'] ?? 'Contact Me
    Below' ); ?>
    
    
    
    
    

    View Slide

23. function esc_nl2br($string) {
    return nl2br( esc_html($string) );
    }
    

    View Slide

24. View Slide

25. REGISTER POST TYPE
    php galaxy make:model -c post Work
    1. Fields: Title, Image, Type (Illustration, Branding, Fashion)
    2. Custom Admin Column: Image
    

    View Slide

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');
    });
    

    View Slide

27. function portfolio_types() {
    return [
    'Illustrations' => 'ill',
    'Branding' => 'brand',
    'Graphics' => 'graph',
    ];
    }
    

    View Slide

28. Portfolio
    /** @var \TypeRocket\Elements\Form $form */
    echo $form->text('Headline');
    

    View Slide

29. View Slide

30. tr_route()->post('/contact/send', 'send@Contact');
    tr_route()->get('/contact/thanks', 'thanks@Contact');
    

    View Slide

31. class ContactController extends Controller
    {
    public function send()
    {
    // TODO: Save the fields
    }
    public function thanks()
    {
    return tr_view('contact.thanks');
    }
    }
    

    View Slide

32. 
    = tr_hidden_form_fields(); ?>
    name="tr[name]"
    value="= tr_old_field('name'); ?>"
    required placeholder="Your Name*">
    name="tr[email]"
    value="= tr_old_field('email'); ?>"
    required placeholder="Your Email*">
    name="tr[message]"
    required placeholder="Your Massage*">
    
    Send A Massage
    
    
    
    

    View Slide

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');
    }
    ....
    }
    

    View Slide

34. 
    
    Thanks!
    Your Email was sent!
    
    
    

    View Slide

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`;
    

    View Slide

36. $fields = $this->request->getFields();
    ....
    $contact = new Contact();
    $contact->save($fields);
    

    View Slide

37. $settings = ['capability' => 'administrator'];
    $contacts = tr_page('Contact', 'index', 'Contacts', $settings);
    $contacts->setIcon('send');
    $contacts->useController();
    

    View Slide

38. class ContactController extends Controller
    {
    ....
    public function index()
    {
    return tr_view('contact.index');
    }
    }
    

    View Slide

39. $table = tr_tables();
    $table->setColumns('name', [
    'name' => [
    'sort' => true,
    'label' => 'Name'
    ],
    'email' => [
    'label' => 'Email Address'
    ],
    'message' => [
    'label' => 'Message'
    ]
    ]);
    $table->render();
    

    View Slide

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' => []
    ];
    }
    

    View Slide