Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. <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]), ]);
  2. <?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; ?>
  3. <?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; ?>
  4. <!--====== 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 ======-->
  5. REGISTER POST TYPE php galaxy make:model -c post Work 1.

    Fields: Title, Image, Type (Illustration, Branding, Fashion) 2. Custom Admin Column: Image
  6. $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'); });
  7. class ContactController extends Controller { public function send() { //

    TODO: Save the fields } public function thanks() { return tr_view('contact.thanks'); } }
  8. <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>
  9. 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'); } .... }
  10. -- 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`;
  11. $settings = ['capability' => 'administrator']; $contacts = tr_page('Contact', 'index', 'Contacts',

    $settings); $contacts->setIcon('send'); $contacts->useController();
  12. <?php $table = tr_tables(); $table->setColumns('name', [ 'name' => [ 'sort'

    => true, 'label' => 'Name' ], 'email' => [ 'label' => 'Email Address' ], 'message' => [ 'label' => 'Message' ] ]); $table->render();
  13. 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' => [] ]; }