TypeRocket 3.0 - Unleash WordPress and Be Amazing

In this talk, we walk through version 3.0 of TypeRocket at WordCamp Raleigh 2016.

Transcript

1. TYPEROCKET 3.0 UNLEASH WORDPRESS AND BE AMAZING
3. MAYBE NOT THAT AMAZING
4. I'M KEVIN DEES THE CREATOR OF TYPEROCKET @KEVINDEES
5. HOW CAN YOU BE AMAZING WITH TYPEROCKET?
6. Your WordPress admin can be clean and easy to use.
8. Build Custom Themes with Less Code
12. Clients may never have confusion over plugins.
14. You can take security to the next level.
15. WORDPRESS... SECURE?
16. ENOUGH TO SATISFY RON?
18. MIND BLOWING?
19. SHOW ME HOW! MAKING A CUSTOM APPLICATION
20. SETUP DOWNLOADING AND INSTALLING
21. LARAVEL HOMESTEAD HTTPS://LARAVEL.COM/DOCS/5.3/HOMESTEAD
22. http://tr.test TO ~/Code/trtest/wordpress
23. COMPOSER HTTPS://GETCOMPOSER.ORG/
24. DOWNLOADING composer create-project --prefer-dist typerocket/typerocket ROOTING php galaxy use:root {db} {user} {pass}
25. DOWNLOADING TYPEROCKET composer create-project --prefer-dist typerocket/typerocket
27. ROOTING TYPEROCKET php galaxy use:root trtest homestead secret
29. WRAP IT UP CREATE DB AND INSTALL WP
32. INSTALLATION COMPLETE
33. LETS CODE: PART 1 1. Post Types 2. Dashboard Meta Box 3. Taxonomy Custom Fields 4. Theme Options 5. Profile Fields
34. POST TYPES HOOKS NOT REQUIRED
36. // Make Post Type $person = tr_post_type('Person', 'Team'); // Set Icon $person->setIcon('users'); // Title Only $person->setArgument('supports', ['title'] ); // Set Placeholder Text $person->setTitlePlaceholder('Enter full name here');
37. Icons
39. FORMS AND FIELDS
40. $form = tr_form('person', 'update', 1);
41. $form->text('Field Name');
42. $form->text('field_name');
43. FIELD TYPES ▸ Select ▸ Gallery ▸ Radio ▸ Checkbox ▸ And more...
44. ADVANCED FIELDS ▸ Repeaters ▸ Builder ▸ Matrix ▸ Search ▸ And more...
45. $form->repeater('Speakers')->setFields([ $form->image('Photo'), $form->text('Name'), $form->text('Slides URL') ]);
46. // Meta Box With Fields $box = tr_meta_box('Team Details')->apply($person); $box->setCallback(function() { $form = tr_form(); echo $form->text('Job Title'); }); // Taxonomy $dep = tr_taxonomy('Department')->apply($person);
47. // Inline Fields $person->setTitleForm( function() { $form = tr_form(); echo $form->image('Photo'); // Save To Builtin Posts Table $editor = $form->editor('post_content'); echo $editor->setLabel('About Person'); } );
49. MODELS POST TYPE
50. php galaxy make:model -c post Person
53. <?php namespace App\Models; use \TypeRocket\Models\WPPost; class Person extends WPPost { protected $postType = 'person'; }
54. class Person extends WPPost { protected $postType = 'person'; // Only save these fields protected $fillable = [ 'photo', 'post_content', 'job_title' ]; // Format photo as an integer protected $format = [ 'photo' => 'intval' ]; }
57. <?php while( have_posts() ) : the_post(); ?> <?php // Image $img_id = tr_posts_field('photo'); echo wp_get_attachment_image($img_id, 'full'); ?> <h3><?php echo tr_posts_field('job_title'); ?></h3> <?php the_content(); ?> <?php endwhile; ?>
58. DASHBOARD META BOX
59. // Dashboard Box $dash = tr_meta_box('Dashboard Box'); $dash->addScreen('dashboard'); $dash->setCallback(function() { echo "<p>Your Content!</p>"; });
61. TAXONOMY CUSTOM FIELDS
62. php galaxy make:model -c term Department
63. // Remember The Taxonomy $dep = tr_taxonomy('Department')->apply($person); // Add Fields $dep->setMainForm(function() { $form = tr_form(); echo $form->text('Location'); });
65. THEME OPTIONS FOR GLOBAL THINGS
67. WORDPRESS OPTIONS
68. $form = tr_form('option'); $from->text('Option One'); $from->text('Option Two');
69. wp_options +------------+----+ | option_one | '' | +------------+----+ | option_two | '' | +------------+----+
70. $form->getGroup('theme_options'); $from->text('Opt 1'); $from->text('Opt 2');
71. wp_options +---------------+-------------------------------------+ | theme_options | array('opt_1' => '', 'opt_2' => '') | +---------------+-------------------------------------+
72. <h1>Theme Options</h1> <?php $form = new \TypeRocket\Elements\Form(); $form->useJson()->setGroup( $this->getName() ); ?> <div class="typerocket-container"> <?php echo $form->open(); // Sections $about = $form->text('Company Name'); $api = $form->password( 'Google Maps API Key'); $save = $form->submit( 'Save' ); // Tabs tr_tabs() ->setSidebar( $save ) ->addTab( 'About', $about ) ->addTab( 'APIs', $api ) ->render( 'box' ); echo $form->close(); ?> </div>
74. PROFILE USER FIELDS
75. add_action('tr_user_profile', function($user) { $form = tr_form(); echo $form->text('Job Title'); echo $form->gallery('Photo Gallery'); });
77. LETS CODE: PART 2 1. Page Builder 2. Custom Resource 3. Kernel and Middleware 4. Front-end Fields and Routes
78. PAGE BUILDER
80. STRUCTURE 1. resources/visuals/builder - Front-end 2. resources/components/builder - Backend and Forms 3. wordpress/assets/components/builder. - Thumbnails
82. BACKEND ▸ resources/visuals/builder/content.php ▸ wordpress/assets/components/builder/ content.png
83. <h1>Content Component</h1> <?php /** @var $form \TypeRocket\Elements\Form */ echo $form->text('Headline'); echo $form->editor('Content');
85. VISUAL ▸ resources/visuals/builder/content.php ▸ Fields from the backend are accessible through the $data variable.
86. <div class="builder-content"> <h2><?php echo esc_html($data['headline']); ?></h2> <hr /> <?php echo wpautop( $data['content'] ); ?> </div>
87. TEMPLATE page.php
88. get_header(); if( tr_posts_field("use_builder") == '1') { tr_components_field('builder'); } else { get_template_part('pageloop'); } get_footer();
89. RESOURCES CUSTOM DB TABLES
91. // Seat Resource $page = tr_resource_pages('Seat'); $page->setIcon('plane'); $page->setArgument('position', 10);
92. DB COLUMNS 1. ID 2. Person's ID 3. Number 4. Price
93. CREATE TABLE `wp_seats` ( `id` int(11) unsigned NOT NULL AUTO_INCREMENT, `persons_id` bigint(20) DEFAULT NULL, `number` varchar(255) DEFAULT NULL, `price` double(10,2) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
94. php galaxy make:model -c base Seat
95. namespace App\Models; use \TypeRocket\Models\Model; class Seat extends Model { protected $resource = 'seats'; }
96. <?php namespace App\Controllers; use \TypeRocket\Controllers\Controller; class SeatController extends Controller { public function index() { } public function add() { } public function create() { } public function edit() { } public function update() { } public function destroy() { } }
97. INDEX
98. public function index() { return tr_view('seats.index'); }
99. VIEWS
101. $table = tr_tables(); $table->setColumns('number', [ 'number' => [ 'sort' => true, 'actions' => ['edit', 'view', 'delete'], 'label' => 'Seat Number' ], 'persons_id' => [ 'label' => 'Person', ], 'price' => [ 'label' => 'Price', ] ]); $table->render();
102. ADD
103. public function add() { $form = tr_form('seat', 'create'); return tr_view('seats.add', ['form' => $form]); } public function create() { $seat = new \App\Models\Seat(); $seat->number = $this->request->getFields('number'); $seat->price = $this->request->getFields('price'); $seat->persons_id = $this->request->getFields('persons_id'); $id = $seat->save(); // Redirect $this->response->flashNext('Seat created!'); return tr_redirect()->toPage('seat', 'edit', $id); }
104. // resources/pages/seats/add.php echo $form->open(); echo $form->text('Number'); echo $form->text('Price'); // Search Field echo $form->search('persons_id') ->setLabel('Person') ->setPostType('person'); echo $form->submit('Add'); echo $form->close();
105. EDIT
106. public function edit($id) { $form = tr_form('seat', 'update', $id); return tr_view('seats.edit', ['form' => $form]); } public function update($id) { $seat = new \App\Models\Seat(); $seat->findOrDie($id); // Find or Die $seat->number = $this->request->getFields('number'); $seat->price = $this->request->getFields('price'); $seat->persons_id = $this->request->getFields('persons_id'); $seat->save(); // Redirect $this->response->flashNext('Seat updated!'); return tr_redirect()->back(); }
107. <?php // resources/pages/seats/edit.php echo $form->open(); echo $form->text('Number'); echo $form->text('Price'); echo $form->search('persons_id') ->setLabel('Person') ->setPostType('person'); echo $form->submit('Update'); // changed echo $form->close();
108. DESTROY
109. public function destroy($id) { $seat = new \App\Models\Seat(); $seat->findOrDie($id); $seat->delete(); $this->response->setMessage('Seat Deleted: '.$seat->number); return tr_redirect()->back(); }
111. MODEL RELATIONSHIPS
112. class Seat extends Model { protected $resource = 'seats'; // Belongs To Person public function person() { return $this->belongsTo( Person::class, 'persons_id' ); } }
113. class Person extends WPPost { protected $postType = 'person'; // ... public function seats() { return $this->hasMany( Seat::class, 'persons_id' ); } }
114. SHOW
115. public function show($id) { $seat = new \App\Models\Seat(); $seat->findOrDie($id); $person = $seat->person()->get(); return tr_view('seats.show', compact('seat', 'person')); }
116. <h3>Seat Number <?php echo $seat->number; ?></h3> <p>Price: $<?php echo $seat->price; ?></p> <p>Person's Name: <?php echo $person->post_title; ?></p>
117. KERNEL MIDDLEWARE
119. class Kernel extends \TypeRocket\Http\Kernel { protected $middleware = [ 'hookGlobal' => [ AuthRead::class ], 'resourceGlobal' => [ AuthRead::class, Middleware\VerifyNonce::class ], 'noResource' => [ AuthAdmin::class ], 'user' => [ IsUserOrCanEditUsers::class ], 'post' => [ OwnsPostOrCanEditPosts::class ], // ... 'tag' => [ CanManageCategories::class ] ]; }
120. class Kernel extends \TypeRocket\Http\Kernel { protected $middleware = [ // ... 'person' => [ OwnsPostOrCanEditPosts::class ], 'seat' => [ AuthAdmin::class ] ]; }
121. php galaxy make:middleware Example
122. <?php namespace App\Http\Middleware; use \TypeRocket\Http\Middleware\Middleware; class Example extends Middleware { public function handle() { $request = $this->request; $response = $this->response; // Do stuff before controller is called $this->next->handle(); // Do stuff after controller is called } }
123. <?php class Example extends Middleware { public function handle() { $request = $this->request; $response = $this->response; $response->exitNotFound(); // Doing Stuff $this->next->handle(); } }
124. class Kernel extends \TypeRocket\Http\Kernel { protected $middleware = [ // ... 'seat' => [ AuthAdmin::class, Middleware\Example::class ] ]; }
125. FRONT-END FIELDS AND ROUTES
126. ENABLE // functions.php tr_frontend(); ROUTE // routes.php tr_route()->post('/seats', 'create@Seat');
127. <section class="typerocket-container"> <?php $form = tr_form('seat', 'create'); // Create $form->useRoute('post', 'seats'); // Route echo $form->open(); echo $form->text('Number'); echo $form->text('Price'); echo $form->search('persons_id') ->setLabel('Person') ->setPostType('person'); echo $form->submit('Add'); echo $form->close(); ?> </section>
129. ROUTES
130. tr_route()->set('/seats', 'index@Seat'); tr_route()->get('/seats/add', 'add@Seat'); tr_route()->post('/seats', 'create@Seat'); tr_route()->get('/seats/edit/{id}', 'edit@Seat'); tr_route()->put('/seats/{id}', 'update@Seat'); tr_route()->get('/seats/{id}', 'show@Seat'); tr_route()->delete('/seats/{id}', 'destroy@Seat');
131. // Remember Me public function show($id) { $seat = new \App\Models\Seat(); $seat->findOrDie($id); $person = $seat->person()->get(); return tr_view('seats.show', compact('seat', 'person')); }
132. FRONT-END VIEWS
133. 1. resources/views/seats/index.php 2. resources/views/seats/add.php 3. resources/views/seats/edit.php 4. resources/views/seats/show.php
134. THEMING
135. resources/assets
137. var templates = './wordpress/assets/templates'; // Your WordPress Templates SASS mix.sass('theme.scss'); mix.sass('admin.scss'); // Your WordPress Templates JS mix.scripts([ 'plugins.js', 'theme.js' ], templates + '/js/theme.js'); mix.scripts([ 'admin.js' ], templates + '/js/admin.js');
138. gulp watch
139. npm run prod
140. WANT MORE?
141. TYPEROCKET.COM ▸ Forms ▸ All Fields ▸ Commands ▸ IOC Resolver ▸ And way more!
142. TYPEROCKET 3.0 UNLEASH WORDPRESS AND BE AMAZING