TypeRocket 3.0: Unleash WordPress and be amazing (Wilmington NC)

TypeRocket 3 is the WordPress framework for developers. Build sites and themes fast, custom and beautiful. Ever wanted WordPress to use composer? Want to build component based designs? Want to have a forms API with model binding, custom routes, controllers,
use themes outside of public view to boost security, have a custom console to build your own CLI commands, make post types/taxonomies/meta boxes with one line of code, or create use custom tables? All this is just the beginning of TypeRocket 3 for WordPress. Get theme options and advanced SEO with Twitter cards out of the box. You may not need a single plugin for your next site. TypeRocket 3 has completely reimagined what developing WordPress sites can be without sacrificing speed, stability or breaking WordPress
core. Come and see what making WordPress sites is like in Modern PHP.

Transcript

1. TYPEROCKET 3.0
   UNLEASH WORDPRESS AND BE AMAZING
   

   View Slide

2. View Slide

3. MAYBE NOT THAT AMAZING
   

   View Slide

4. I'M KEVIN DEES THE CREATOR OF
   TYPEROCKET
   @KEVINDEES
   

   View Slide

5. HOW CAN YOU BE AMAZING
   WITH TYPEROCKET?
   

   View Slide

6. Your WordPress admin can be clean and easy to use.
   

   View Slide

7. View Slide

8. Build Custom Themes with Less Code
   

   View Slide

9. View Slide

10. View Slide

11. View Slide

12. Clients may never have confusion over plugins.
    

    View Slide

13. View Slide

14. You can take security to the next level.
    

    View Slide

15. WORDPRESS... SECURE?
    

    View Slide

16. ENOUGH TO SATISFY RON?
    

    View Slide

17. View Slide

18. MIND BLOWING?
    

    View Slide

19. SHOW ME HOW!
    MAKING A CUSTOM APPLICATION
    

    View Slide

20. SETUP
    DOWNLOADING AND INSTALLING
    

    View Slide

21. HTTPS://TYPEROCKET.COM/DOCS/V3/
    INSTALLATION/
    

    View Slide

22. LARAVEL HOMESTEAD
    HTTPS://LARAVEL.COM/DOCS/5.3/HOMESTEAD
    

    View Slide

23. http://tr.test
    TO
    ~/Code/trtest/wordpress
    

    View Slide

24. COMPOSER
    HTTPS://GETCOMPOSER.ORG/
    

    View Slide

25. DOWNLOADING
    composer create-project --prefer-dist
    typerocket/typerocket
    ROOTING
    php galaxy use:root {db} {user} {pass}
    

    View Slide

26. DOWNLOADING TYPEROCKET
    composer create-project --prefer-dist
    typerocket/typerocket
    

    View Slide

27. View Slide

28. ROOTING TYPEROCKET
    php galaxy use:root trtest homestead secret
    

    View Slide

29. View Slide

30. WRAP IT UP
    CREATE DB AND INSTALL WP
    

    View Slide

31. View Slide

32. View Slide

33. INSTALLATION
    COMPLETE
    

    View Slide

34. LETS CODE: PART 1
    1. Post Types
    2. Dashboard Meta Box
    3. Taxonomy Custom Fields
    4. Theme Options
    5. Profile Fields
    

    View Slide

35. POST TYPES
    HOOKS NOT REQUIRED
    

    View Slide

36. View Slide

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

    View Slide

38. Icons
    

    View Slide

39. View Slide

40. FORMS
    AND FIELDS
    

    View Slide

41. $form = tr_form('person', 'update', 1);
    

    View Slide

42. $form->text('Field Name');
    

    View Slide

43. $form->text('field_name');
    

    View Slide

44. FIELD TYPES
    ▸ Select
    ▸ Gallery
    ▸ Radio
    ▸ Checkbox
    ▸ And more...
    

    View Slide

45. ADVANCED FIELDS
    ▸ Repeaters
    ▸ Builder
    ▸ Matrix
    ▸ Search
    ▸ And more...
    

    View Slide

46. $form->repeater('Speakers')->setFields([
    $form->image('Photo'),
    $form->text('Name'),
    $form->text('Slides URL')
    ]);
    

    View Slide

47. // 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);
    

    View Slide

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

    View Slide

49. View Slide

50. MODELS
    POST TYPE
    

    View Slide

51. php galaxy make:model -c post Person
    

    View Slide

52. View Slide

53. View Slide

54. namespace App\Models;
    use \TypeRocket\Models\WPPost;
    class Person extends WPPost
    {
    protected $postType = 'person';
    }
    

    View Slide

55. class Person extends WPPost
    {
    protected $postType = 'person';
    // Only save these fields
    protected $fillable = [
    'photo',
    'post_content',
    'job_title'
    ];
    }
    

    View Slide

56. View Slide

57. View Slide

58. 
    // Image
    $img_id = tr_posts_field('photo');
    echo wp_get_attachment_image($img_id, 'full');
    ?>
    
    
    
    

    View Slide

59. DASHBOARD
    META BOX
    

    View Slide

60. // Dashboard Box
    $dash = tr_meta_box('Dashboard Box');
    $dash->addScreen('dashboard');
    $dash->setCallback(function() {
    echo "Your Content!";
    });
    

    View Slide

61. View Slide

62. TAXONOMY
    CUSTOM FIELDS
    

    View Slide

63. php galaxy make:model -c term Department
    

    View Slide

64. // Remember The Taxonomy
    $dep = tr_taxonomy('Department')->apply($person);
    // Add Fields
    $dep->setMainForm(function() {
    $form = tr_form();
    echo $form->text('Location');
    });
    

    View Slide

65. View Slide

66. THEME OPTIONS
    FOR GLOBAL THINGS
    

    View Slide

67. View Slide

68. WORDPRESS
    OPTIONS
    

    View Slide

69. $form = tr_form('option');
    $from->text('Option One');
    $from->text('Option Two');
    

    View Slide

70. wp_options
    +------------+----+
    | option_one | '' |
    +------------+----+
    | option_two | '' |
    +------------+----+
    

    View Slide

71. $form->getGroup('theme_options');
    $from->text('Opt 1');
    $from->text('Opt 2');
    

    View Slide

72. wp_options
    +---------------+-------------------------------------+
    | theme_options | array('opt_1' => '', 'opt_2' => '') |
    +---------------+-------------------------------------+
    

    View Slide

73. Theme Options
    $form = tr_form();
    $form->useJson()->setGroup( $this->getName() );
    ?>
    
    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();
    ?>
    
    

    View Slide

74. View Slide

75. PROFILE
    USER FIELDS
    

    View Slide

76. add_action('tr_user_profile', function($user) {
    $form = tr_form();
    echo $form->text('Job Title');
    echo $form->gallery('Photo Gallery');
    });
    

    View Slide

77. View Slide

78. LETS CODE: PART 2
    1. Page Builder
    2. Custom Resource
    3. Kernel and Middleware
    

    View Slide

79. PAGE BUILDER
    

    View Slide

80. View Slide

81. STRUCTURE
    1. resources/visuals/builder - Front-end
    2. resources/components/builder - Backend and Forms
    3. wordpress/assets/components/builder. - Thumbnails
    

    View Slide

82. View Slide

83. BACKEND
    ▸ resources/visuals/builder/content.php
    ▸ wordpress/assets/components/builder/
    content.png
    

    View Slide

84. Content Component
    /** @var $form \TypeRocket\Elements\Form */
    echo $form->text('Headline');
    echo $form->editor('Content');
    

    View Slide

85. View Slide

86. VISUAL
    ▸ resources/visuals/builder/content.php
    ▸ Fields from the backend are accessible through the $data
    variable.
    

    View Slide

87. 
    
    
    
    
    

    View Slide

88. TEMPLATE
    page.php
    

    View Slide

89. get_header();
    if( tr_posts_field("use_builder") == '1') {
    tr_components_field('builder');
    } else {
    get_template_part('pageloop');
    }
    get_footer();
    

    View Slide

90. RESOURCES
    CUSTOM DB TABLES
    

    View Slide

91. View Slide

92. // Seat Resource
    $page = tr_resource_pages('Seat');
    $page->setIcon('plane');
    $page->setArgument('position', 10);
    

    View Slide

93. DB COLUMNS
    1. ID
    2. Person's ID
    3. Number
    4. Price
    

    View Slide

94. 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;
    

    View Slide

95. php galaxy make:model -c base Seat
    

    View Slide

96. namespace App\Models;
    use \TypeRocket\Models\Model;
    class Seat extends Model
    {
    protected $resource = 'seats';
    }
    

    View Slide

97. 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() { }
    }
    

    View Slide

98. VIEWS
    

    View Slide

99. View Slide

100. INDEX
     

     View Slide

101. public function index() {
     return tr_view('seats.index');
     }
     

     View Slide

102. $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();
     

     View Slide

103. ADD
     

     View Slide

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

     View Slide

105. // 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();
     

     View Slide

106. EDIT
     

     View Slide

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

     View Slide

108. 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();
     

     View Slide

109. DESTROY
     

     View Slide

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

     View Slide

111. View Slide

112. MODEL
     RELATIONSHIPS
     

     View Slide

113. class Seat extends Model
     {
     protected $resource = 'seats';
     // Belongs To Person
     public function person()
     {
     return $this->belongsTo( Person::class, 'persons_id' );
     }
     }
     

     View Slide

114. class Person extends WPPost
     {
     protected $postType = 'person';
     // ...
     public function seats()
     {
     return $this->hasMany( Seat::class, 'persons_id' );
     }
     }
     

     View Slide

115. SHOW
     

     View Slide

116. public function show($id) {
     $seat = new \App\Models\Seat();
     $seat->findOrDie($id);
     $person = $seat->person()->get();
     return tr_view('seats.show', compact('seat', 'person'));
     }
     

     View Slide

117. Seat Number number; ?>
     Price: $price; ?>
     Person's Name: post_title; ?>
     

     View Slide

118. KERNEL
     SECURING CUSTOM DATA
     

     View Slide

119. View Slide

120. 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 ]
     ];
     }
     

     View Slide

121. class Kernel extends \TypeRocket\Http\Kernel
     {
     protected $middleware = [
     // ...
     'person' =>
     [ OwnsPostOrCanEditPosts::class ],
     'seat' =>
     [ AuthAdmin::class ]
     ];
     }
     

     View Slide

122. STACK PHP
     HTTP://STACKPHP.COM/MEDIA/
     

     View Slide

123. UNDER THE HOOD
     

     View Slide

124. PSR-4
     HTTP://WWW.PHP-FIG.ORG/PSR/PSR-4/
     

     View Slide

125. ORM
     OBJECT-RELATIONAL MAPPING
     

     View Slide

126. OOP
     SOLID
     

     View Slide

127. WANT MORE?
     

     View Slide

128. TYPEROCKET.COM
     ▸ Forms and All Fields
     ▸ Commands
     ▸ Front-end Fields
     ▸ Custom Routes
     ▸ And way more!
     

     View Slide

129. TYPEROCKET 3.0
     UNLEASH WORDPRESS AND BE AMAZING
     

     View Slide