$30 off During Our Annual Pro Sale. View Details »

Create Your Own Theme Page-Builder in Minutes

Kevin Dees
September 22, 2017

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

Kevin Dees

September 22, 2017
Tweet

More Decks by Kevin Dees

Other Decks in Programming

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