├── .editorconfig ├── .gitignore ├── LICENSE ├── README.md ├── YourPackage ├── LICENSE ├── README.md ├── composer.json └── src │ └── YourPackageProvider.php ├── api ├── wpbones │ └── v2 │ │ └── route.php └── wpkirk │ └── v1 │ └── route.php ├── assets ├── banner-1544x500.afdesign ├── icon-256x256.afdesign └── readme.md ├── bones ├── bootstrap ├── autoload.php └── plugin.php ├── composer.json ├── composer.lock ├── config ├── api.php ├── custom.php ├── flags.yaml ├── menus.php ├── options.php ├── plugin.php └── routes.php ├── database ├── migrations │ ├── .gitkeep │ ├── 2015_12_12_134527_create_products_table.php │ └── 2024_10_10_134527_create_books_table.php └── seeders │ ├── BookSeeder.php │ └── ProductSeeder.php ├── deploy.php ├── functions.php ├── gulpfile.js ├── languages ├── it_IT.pot ├── wp-kirk-es_ES.mo ├── wp-kirk-es_ES.po ├── wp-kirk-it_IT-2fa1a8b4d52e5c72f54dd47636d2e1f4.json ├── wp-kirk-it_IT.mo ├── wp-kirk-it_IT.po ├── wp-kirk.mo ├── wp-kirk.po └── wp-kirk.pot ├── namespace ├── package-lock.json ├── package.json ├── pages └── custom_page.php ├── plugin ├── API │ └── WPKirkV1Controller.php ├── Ajax │ └── MyAjax.php ├── Console │ ├── Commands │ │ └── SampleCommand.php │ └── Kernel.php ├── CustomPostTypes │ ├── .gitkeep │ └── MyCustomPostType.php ├── CustomTaxonomyTypes │ └── MyCustomTaxonomy.php ├── Http │ └── Controllers │ │ ├── AssetsController.php │ │ ├── Controller.php │ │ ├── Dashboard │ │ ├── DashboardController.php │ │ └── DashboardResourceController.php │ │ ├── EloquentProduct.php │ │ ├── EloquentUser.php │ │ ├── ExampleAPIController.php │ │ ├── ExampleBladeController.php │ │ ├── ExampleDatabaseController.php │ │ ├── ExampleEloquentController.php │ │ ├── ExampleModelController.php │ │ ├── ExampleModelNoPrefixController.php │ │ ├── ExampleTable.php │ │ ├── ExampleTableController.php │ │ ├── ReactApplicationController.php │ │ └── SearchTable.php ├── Models │ ├── MyPluginBooks.php │ └── MyPluginProducts.php ├── Shortcodes │ └── MyShortcodes.php ├── Widgets │ └── MyWidget.php ├── activation.php ├── deactivation.php └── updated.php ├── public ├── apps │ ├── app-rtl.css │ ├── app.asset.php │ ├── app.css │ └── app.js ├── css │ ├── prism.css │ ├── wp-kirk-common.css │ ├── wp-kirk-dashboard.css │ ├── wp-kirk-variables.css │ ├── wp-kirk-widget.css │ └── wp-kirk.css ├── images │ ├── wpbones-logo-menu.png │ └── wpbones-logo.png └── js │ ├── prism.js │ ├── wp-kirk-main.js │ ├── wp-kirk-test.js │ └── wp-react-component.js ├── readme.txt ├── resources ├── assets │ ├── apps │ │ ├── app.jsx │ │ ├── app.module.scss │ │ └── components │ │ │ ├── Demo.jsx │ │ │ ├── Mantine.jsx │ │ │ ├── Overview.jsx │ │ │ ├── Settings.jsx │ │ │ └── Settings.module.css │ ├── css │ │ ├── prism.css │ │ ├── wp-kirk-common.less │ │ ├── wp-kirk-dashboard.less │ │ ├── wp-kirk-variables.less │ │ ├── wp-kirk-widget.less │ │ └── wp-kirk.scss │ └── js │ │ ├── prism.js │ │ ├── wp-kirk-main.js │ │ ├── wp-kirk-test.ts │ │ └── wp-react-component.jsx └── views │ ├── blade │ └── demo.blade.php │ ├── dashboard │ ├── api.php │ ├── assets.php │ ├── custom_page.php │ ├── database.php │ ├── eloquent.php │ ├── first_custom_page.php │ ├── html.php │ ├── index.php │ ├── model-no-prefix.php │ ├── model.php │ ├── options.php │ ├── optionsresview.php │ ├── optionsview.php │ ├── package.php │ ├── react-app.php │ ├── second.php │ ├── second_custom_page.php │ └── table.php │ └── widgets │ ├── form.php │ └── index.php └── wp-kirk.php /.editorconfig: -------------------------------------------------------------------------------- 1 | # This file is for unifying the coding style for different editors and IDEs 2 | # editorconfig.org 3 | 4 | # WordPress Coding Standards 5 | # https://make.wordpress.org/core/handbook/coding-standards/ 6 | 7 | root = true 8 | 9 | [*] 10 | charset = utf-8 11 | end_of_line = lf 12 | insert_final_newline = true 13 | trim_trailing_whitespace = true 14 | indent_style = tab 15 | 16 | [*.{yml,yaml}] 17 | indent_style = space 18 | indent_size = 2 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | resources/assets/vendor/ 3 | vendor/ 4 | .cache/ 5 | .php-cs-fixer.cache 6 | release.sh 7 | storage 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 |
3 |
resources/assets/css
directory."
263 | msgstr ""
264 |
265 | #: resources/views/dashboard/assets.php:30
266 | msgid "The files .css
, .scss
, and .less
will be compiled and you will find the css compiled in the public/css
directory."
267 | msgstr ""
268 |
269 | #: resources/views/dashboard/assets.php:31
270 | msgid "Next, you can include your styles by using the usual way"
271 | msgstr ""
272 |
273 | #: resources/views/dashboard/assets.php:42
274 | msgid "Javascript files work in the same way as styles. You can create your javascript files in the resources/assets/js
directory."
275 | msgstr ""
276 |
277 | #: resources/views/dashboard/assets.php:43
278 | msgid "You can find more details in the Assets documentation."
279 | msgstr ""
280 |
281 | #: resources/views/dashboard/assets.php:47
282 | msgid "You may use gulp to compile simple React components. you will be able to compile .jsx files and .tsx files. The compiled files will be in the public/js
directory."
283 | msgstr ""
284 |
285 | #: resources/views/dashboard/assets.php:49
286 | msgid "React component is a JavaScript file that contains a component. It can be a simple component or a complex one. You can use it to create a custom page or a custom widget. Now it's available to use in your WordPress environment."
287 | msgstr ""
288 |
289 | #: resources/views/dashboard/assets.php:51
290 | msgid "Step 1 - create a placeholder"
291 | msgstr ""
292 |
293 | #: resources/views/dashboard/assets.php:53
294 | msgid "We create a placeholder div
with an id
."
295 | msgstr ""
296 |
297 | #: resources/views/dashboard/assets.php:57
298 | msgid "Step 2 - include the JavaScript file"
299 | msgstr ""
300 |
301 | #: resources/views/dashboard/assets.php:59
302 | msgid "In the Dashboard controller we include the JavaScript file. It's a simple example, but you can include it in a more complex way."
303 | msgstr ""
304 |
305 | #: resources/views/dashboard/assets.php:71
306 | msgid "Step 3 - create the React component"
307 | msgstr ""
308 |
309 | #: resources/views/dashboard/assets.php:73
310 | msgid "In the"
311 | msgstr ""
312 |
313 | #: resources/views/dashboard/assets.php:73
314 | msgid "directory we create a new file"
315 | msgstr ""
316 |
317 | #: resources/views/dashboard/assets.php:73
318 | msgid "with the following content:"
319 | msgstr ""
320 |
321 | #: resources/views/dashboard/assets.php:111
322 | msgid "Step 4 - compile"
323 | msgstr ""
324 |
325 | #: resources/views/dashboard/assets.php:113
326 | msgid "Run the following command to compile the JavaScript file:"
327 | msgstr ""
328 |
329 | #: resources/views/dashboard/assets.php:117
330 | msgid "Step 5 - check the result below"
331 | msgstr ""
332 |
333 | #: resources/views/dashboard/custom_page.php:11
334 | msgid "Hello, I'm a Custom Page defined in"
335 | msgstr ""
336 |
337 | #: resources/views/dashboard/custom_page.php:11
338 | msgid "folder"
339 | msgstr ""
340 |
341 | #: resources/views/dashboard/custom_page.php:13
342 | msgid "You may create a PHP file in"
343 | msgstr ""
344 |
345 | #: resources/views/dashboard/custom_page.php:13
346 | msgid "folder and name it"
347 | msgstr ""
348 |
349 | #: resources/views/dashboard/custom_page.php:38
350 | msgid "Back"
351 | msgstr ""
352 |
353 | #: resources/views/dashboard/database.php:17
354 | #: resources/views/dashboard/database.php:24
355 | msgid "Query Builder"
356 | msgstr ""
357 |
358 | #: resources/views/dashboard/database.php:18
359 | #: resources/views/dashboard/database.php:34
360 | msgid "Example"
361 | msgstr ""
362 |
363 | #: resources/views/dashboard/database.php:26
364 | msgid "WP Bones's database query builder provides a convenient, fluent interface to creating and running database queries. It can be used to perform most database operations in your WordPress instance."
365 | msgstr ""
366 |
367 | #: resources/views/dashboard/database.php:47
368 | msgid "You can find more"
369 | msgstr ""
370 |
371 | #: resources/views/dashboard/database.php:47
372 | msgid "example here"
373 | msgstr ""
374 |
375 | #: resources/views/dashboard/eloquent.php:18
376 | msgid "You may include the Eloquent ORM to provide a beautiful, simple ActiveRecord implementation for working with your database. Each database table has a corresponding \"Model\" which is used to interact with that table. Models allow you to query for data in your tables, as well as insert new records into the table."
377 | msgstr ""
378 |
379 | #: resources/views/dashboard/eloquent.php:20
380 | msgid "You may install Eloquent ORM in your plugin by using"
381 | msgstr ""
382 |
383 | #: resources/views/dashboard/eloquent.php:24
384 | msgid "As we are using the complete illuminate database package, for further documentation on using the various database facilities this library provides, consult the"
385 | msgstr ""
386 |
387 | #: resources/views/dashboard/eloquent.php:24
388 | #: resources/views/dashboard/eloquent.php:94
389 | msgid "Laravel framework documentation"
390 | msgstr ""
391 |
392 | #: resources/views/dashboard/eloquent.php:26
393 | msgid "Query WordPress users table"
394 | msgstr ""
395 |
396 | #: resources/views/dashboard/eloquent.php:34
397 | #: resources/views/dashboard/eloquent.php:63
398 | msgid "Output"
399 | msgstr ""
400 |
401 | #: resources/views/dashboard/eloquent.php:40
402 | msgid "Find"
403 | msgstr ""
404 |
405 | #: resources/views/dashboard/eloquent.php:42
406 | msgid "Of course, you'll be able to use all eloquent features"
407 | msgstr ""
408 |
409 | #: resources/views/dashboard/eloquent.php:53
410 | msgid "Custom Table"
411 | msgstr ""
412 |
413 | #: resources/views/dashboard/eloquent.php:55
414 | msgid "Alongside the WordPress table you may use eloquent for your custom database table"
415 | msgstr ""
416 |
417 | #: resources/views/dashboard/eloquent.php:69
418 | msgid "and get single column value"
419 | msgstr ""
420 |
421 | #: resources/views/dashboard/eloquent.php:80
422 | msgid "Loop into"
423 | msgstr ""
424 |
425 | #: resources/views/dashboard/eloquent.php:94
426 | msgid "For further documentation on using the various database facilities this library provides, consult the"
427 | msgstr ""
428 |
429 | #: resources/views/dashboard/index.php:12
430 | msgid "Hello, I'm the first %s view"
431 | msgstr ""
432 |
433 | #: resources/views/dashboard/index.php:17
434 | #: resources/views/dashboard/index.php:68
435 | msgid "Passing data to view"
436 | msgstr ""
437 |
438 | #: resources/views/dashboard/index.php:18
439 | #: resources/views/dashboard/index.php:74
440 | msgid "Configuration"
441 | msgstr ""
442 |
443 | #: resources/views/dashboard/index.php:19
444 | #: resources/views/dashboard/index.php:84
445 | msgid "Plugin information"
446 | msgstr ""
447 |
448 | #: resources/views/dashboard/index.php:20
449 | #: resources/views/dashboard/index.php:97
450 | msgid "Custom Pages"
451 | msgstr ""
452 |
453 | #: resources/views/dashboard/index.php:25
454 | msgid "Welcome to the WP Bones template WordPress plugin"
455 | msgstr ""
456 |
457 | #: resources/views/dashboard/index.php:26
458 | msgid "This is a simple template plugin for WordPress. It is based on the WP Bones framework."
459 | msgstr ""
460 |
461 | #: resources/views/dashboard/index.php:27
462 | msgid "It is a plugin that shows most of the features of the WP Bones framework. It is a good starting point for creating your own plugin."
463 | msgstr ""
464 |
465 | #: resources/views/dashboard/index.php:35
466 | msgid "This view is displayed by a Controller connected to the menu you have selected."
467 | msgstr ""
468 |
469 | #: resources/views/dashboard/index.php:36
470 | msgid "The menu is defined in the"
471 | msgstr ""
472 |
473 | #: resources/views/dashboard/index.php:36
474 | #: resources/views/dashboard/index.php:53
475 | #: resources/views/dashboard/index.php:66
476 | msgid "file."
477 | msgstr ""
478 |
479 | #: resources/views/dashboard/index.php:53
480 | msgid "The controller is located in the"
481 | msgstr ""
482 |
483 | #: resources/views/dashboard/index.php:66
484 | msgid "The HTML part view is located in the"
485 | msgstr ""
486 |
487 | #: resources/views/dashboard/index.php:70
488 | msgid "You may get variable from the controller. For example, the variable"
489 | msgstr ""
490 |
491 | #: resources/views/dashboard/index.php:70
492 | msgid "is"
493 | msgstr ""
494 |
495 | #: resources/views/dashboard/index.php:75
496 | msgid "Get the"
497 | msgstr ""
498 |
499 | #: resources/views/dashboard/index.php:75
500 | msgid "configuration by using"
501 | msgstr ""
502 |
503 | #: resources/views/dashboard/index.php:79
504 | msgid "It will return"
505 | msgstr ""
506 |
507 | #: resources/views/dashboard/index.php:85
508 | msgid "You may get the plugin information by using"
509 | msgstr ""
510 |
511 | #: resources/views/dashboard/index.php:99
512 | msgid "To create a custom pages without a menu, you may config the"
513 | msgstr ""
514 |
515 | #: resources/views/dashboard/index.php:99
516 | #: resources/views/dashboard/index.php:104
517 | msgid "file in the"
518 | msgstr ""
519 |
520 | #: resources/views/dashboard/index.php:101
521 | msgid "folder of the Plugin"
522 | msgstr ""
523 |
524 | #: resources/views/dashboard/index.php:104
525 | msgid "For example, you may create a"
526 | msgstr ""
527 |
528 | #: resources/views/dashboard/index.php:105
529 | msgid "folder of the plugin"
530 | msgstr ""
531 |
532 | #: resources/views/dashboard/index.php:107
533 | msgid "Here is an example of"
534 | msgstr ""
535 |
536 | #: resources/views/dashboard/index.php:140
537 | msgid "You can get the custom page URL by using"
538 | msgstr ""
539 |
540 | #: resources/views/dashboard/index.php:147
541 | msgid "Custom Page"
542 | msgstr ""
543 |
544 | #: resources/views/dashboard/second.php:12
545 | msgid "Hello, I'm a second view"
546 | msgstr ""
547 |
548 | #: resources/views/dashboard/second.php:14
549 | msgid "You can localize me"
550 | msgstr ""
551 |
552 | #: resources/views/dashboard/second.php:16
553 | msgid "Click me for Ajax logged"
554 | msgstr ""
555 |
556 | #: resources/views/dashboard/second.php:17
557 | msgid "Click me for Ajax trusted"
558 | msgstr ""
559 |
560 | #: resources/views/dashboard/second.php:18
561 | msgid "Click me for Ajax notLogged"
562 | msgstr ""
563 |
564 | #: public/apps/app.js:1
565 | msgid "The %s is a collection of React components that are designed to be simple, easy to use, and accessible. The library is built with TypeScript and has a small bundle size, making it a great choice for building modern web applications."
566 | msgstr ""
567 |
568 | #: public/apps/app.js:1
569 | msgid "Some of the key features of Mantine include:"
570 | msgstr ""
571 |
572 | #: public/apps/app.js:1
573 | msgid "Simple and easy-to-use components"
574 | msgstr ""
575 |
576 | #: public/apps/app.js:1
577 | msgid "Accessible design and keyboard navigation"
578 | msgstr ""
579 |
580 | #: public/apps/app.js:1
581 | msgid "Dark mode support"
582 | msgstr ""
583 |
584 | #: public/apps/app.js:1
585 | msgid "Customizable styles and themes"
586 | msgstr ""
587 |
588 | #: public/apps/app.js:1
589 | msgid "Support for TypeScript"
590 | msgstr ""
591 |
592 | #: public/apps/app.js:1
593 | msgid "Small bundle size"
594 | msgstr ""
595 |
596 | #: public/apps/app.js:1
597 | msgid "Active development and community support"
598 | msgstr ""
599 |
600 | #: public/apps/app.js:1
601 | msgid "And much more!"
602 | msgstr ""
603 |
604 | #: public/apps/app.js:1
605 | msgid "In this Demo we are using the %s to create a simple tabbed interface. And we are using the %s to handle the routing."
606 | msgstr ""
607 |
608 | #: public/apps/app.js:1
609 | msgid "This is a React component that is rendered inside a div with the id react-app."
610 | msgstr ""
611 |
612 | #: public/apps/app.js:1
613 | msgid "The component was created using the official WordPress package for React"
614 | msgstr ""
615 |
616 | #: public/apps/app.js:1
617 | msgid "Obviously, this is a very simple example, but it should give you a good starting point for creating more complex interfaces. And remember, you can use any React library you want, not just Mantine."
618 | msgstr ""
619 |
620 | #: public/apps/app.js:1
621 | msgid "Swimming challenge"
622 | msgstr ""
623 |
624 | #: public/apps/app.js:1
625 | msgid "32 km / week"
626 | msgstr ""
627 |
628 | #: public/apps/app.js:1
629 | msgid "Progress"
630 | msgstr ""
631 |
632 | #: public/apps/app.js:1
633 | msgid "4 days left"
634 | msgstr ""
635 |
636 | #: public/apps/app.js:1
637 | msgid "Overview"
638 | msgstr ""
639 |
640 | #: public/apps/app.js:1
641 | msgid "Mantine UI"
642 | msgstr ""
643 |
644 | #: public/apps/app.js:1
645 | msgid "Settings"
646 | msgstr ""
647 |
648 | #: public/apps/app.js:1
649 | msgid "Say Hello, Mantine Application"
650 | msgstr ""
651 |
--------------------------------------------------------------------------------
/languages/wp-kirk-es_ES.mo:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wpbones/WPKirk/fea4527c268d0f5600cb31092cfe7c6a22725b90/languages/wp-kirk-es_ES.mo
--------------------------------------------------------------------------------
/languages/wp-kirk-es_ES.po:
--------------------------------------------------------------------------------
1 | msgid ""
2 | msgstr ""
3 | "Project-Id-Version: WP Kirk\n"
4 | "POT-Creation-Date: 2024-09-05 12:17+0200\n"
5 | "PO-Revision-Date: 2024-09-05 12:18+0200\n"
6 | "Last-Translator: \n"
7 | "Language-Team: Giovambattista Fazioli user_nicename: {{ $user->user_nicename }}
33 |user_email: {{ $user->user_email }}
34 | @endforeach'; 35 | 36 | 37 | return WPKirk() 38 | ->view('blade.demo', ['users' => User::all(), 'code' => $code, 'controller' => $controller]) 39 | ->withAdminStyle('prism') 40 | ->withAdminScript('prism') 41 | ->withAdminStyle('wp-kirk-common'); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /plugin/Http/Controllers/ExampleDatabaseController.php: -------------------------------------------------------------------------------- 1 | view('dashboard.database') 11 | ->withAdminStyle('prism') 12 | ->withAdminScript('prism') 13 | ->withAdminStyle('wp-kirk-common'); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /plugin/Http/Controllers/ExampleEloquentController.php: -------------------------------------------------------------------------------- 1 | view('dashboard.eloquent') 11 | ->withAdminStyle('prism') 12 | ->withAdminScript('prism') 13 | ->withAdminStyle('wp-kirk-common'); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /plugin/Http/Controllers/ExampleModelController.php: -------------------------------------------------------------------------------- 1 | view('dashboard.model') 11 | ->withAdminStyle('prism') 12 | ->withAdminScript('prism') 13 | ->withAdminStyle('wp-kirk-common'); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /plugin/Http/Controllers/ExampleModelNoPrefixController.php: -------------------------------------------------------------------------------- 1 | view('dashboard.model-no-prefix') 11 | ->withAdminStyle('prism') 12 | ->withAdminScript('prism') 13 | ->withAdminStyle('wp-kirk-common'); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /plugin/Http/Controllers/ExampleTable.php: -------------------------------------------------------------------------------- 1 | 'Name', 20 | 'description' => 'Description', 21 | ]; 22 | } 23 | 24 | public function getItems($args = []): array 25 | { 26 | $fake = []; 27 | 28 | for ($i = 0; $i < 20; $i++) { 29 | $fake[] = [ 30 | 'id' => "Disco {$i}", 31 | 'description' => 'Some description...', 32 | ]; 33 | } 34 | 35 | return $fake; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /plugin/Http/Controllers/ExampleTableController.php: -------------------------------------------------------------------------------- 1 | view('dashboard.table')->with('table', $table); 19 | } 20 | 21 | public function loadFluentExample() 22 | { 23 | WPTable::name('Books') 24 | ->columns([ 25 | 'id' => 'Name', 26 | 'description' => 'Description', 27 | ]) 28 | ->screenOptionLabel('Rows') 29 | ->registerScreenOption(); 30 | } 31 | 32 | public function indexFluentExample() 33 | { 34 | $items = []; 35 | 36 | for ($i = 0; $i < 20; $i++) { 37 | $items[] = [ 38 | 'id' => "Book {$i}", 39 | 'description' => 'Some description...', 40 | ]; 41 | } 42 | 43 | $table = WPTable::name('Books') 44 | ->title('My Awesome Books') 45 | ->columns([ 46 | 'id' => 'Name', 47 | 'description' => 'Description', 48 | ]) 49 | ->setItems($items); 50 | 51 | return WPKirk()->view('dashboard.table')->with('table', $table); 52 | } 53 | 54 | public function loadSearchExample() 55 | { 56 | SearchTable::registerScreenOption(); 57 | } 58 | 59 | public function indexSearchExample() 60 | { 61 | $table = new SearchTable(); 62 | 63 | return WPKirk()->view('dashboard.table')->with('table', $table); 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /plugin/Http/Controllers/ReactApplicationController.php: -------------------------------------------------------------------------------- 1 | view('dashboard.react-app')->withAdminAppsScript('app'); 10 | } 11 | 12 | public function reactSettings() 13 | { 14 | return WPKirk() 15 | ->view('dashboard.react-app') 16 | ->withAdminAppsScript('app', true, 'ReactApp', [ 17 | 'tab' => 'settings', 18 | ]); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /plugin/Http/Controllers/SearchTable.php: -------------------------------------------------------------------------------- 1 | title = __('My amazing list of Cakes', 'wp-kirk'); 18 | 19 | $this->name = 'cakes'; 20 | } 21 | 22 | public function getColumnsAttribute(): array 23 | { 24 | return [ 25 | 'id' => 'Name', 26 | 'description' => __('Description', 'wp-kirk'), 27 | 'ingredients' => __('Ingredients', 'wp-kirk'), 28 | ]; 29 | } 30 | 31 | public function getItems($args = []) 32 | { 33 | $fakes = []; 34 | 35 | $ingredients = ['Cream', 'Vodka', 'Choccolate', 'Milk']; 36 | 37 | for ($i = 0; $i < 10; $i++) { 38 | shuffle($ingredients); 39 | 40 | $fakes[] = [ 41 | 'id' => "Cake {$i}", 42 | 'description' => 'Some description...', 43 | 'ingredients' => $ingredients[0], 44 | ]; 45 | } 46 | 47 | $currentView = $this->getCurrentView(); 48 | 49 | if ($currentView !== 'all') { 50 | $filtered = []; 51 | 52 | foreach ($fakes as $fake) { 53 | if (strtolower($fake['ingredients']) == $currentView) { 54 | $filtered[] = $fake; 55 | } 56 | } 57 | 58 | $fakes = $filtered; 59 | } 60 | 61 | $search = $this->getSearchValue(); 62 | 63 | if ($search) { 64 | $filtered = []; 65 | 66 | foreach ($fakes as $fake) { 67 | if (strtolower($fake['id']) == strtolower($search)) { 68 | $filtered[] = $fake; 69 | } 70 | } 71 | 72 | $fakes = $filtered; 73 | } 74 | 75 | return $fakes; 76 | } 77 | 78 | public function getCurrentView() 79 | { 80 | if (isset($_REQUEST['ingredients']) && !empty($_REQUEST['ingredients'])) { 81 | return $_REQUEST['ingredients']; 82 | } 83 | 84 | return parent::getCurrentView(); 85 | } 86 | 87 | public function getSearchBoxButtonLabelAttribute() 88 | { 89 | return __('Search Cakes'); 90 | } 91 | 92 | public function getViews() 93 | { 94 | return [ 95 | 'cream' => 'Cream', 96 | ]; 97 | } 98 | 99 | public function getViewCountCream(): int 100 | { 101 | $count = 0; 102 | 103 | foreach ($this->items as $item) { 104 | if ($item['ingredients'] == 'Cream') { 105 | $count++; 106 | } 107 | } 108 | 109 | return $count; 110 | } 111 | 112 | public function getViewQueryArgCream(): array 113 | { 114 | return [ 115 | 'ingredients' => 'cream', 116 | ]; 117 | } 118 | 119 | public function getBulkActionsForView($view) 120 | { 121 | return [ 122 | 'delete' => __('Delete'), 123 | 'keep_on_trash' => __('Keep Trash'), 124 | 'fill_withChoccolate' => __('Choccolate'), 125 | ]; 126 | } 127 | 128 | public function processBulkActionDelete($items) 129 | { 130 | // TODO: delete items 131 | 132 | $this->successMessage = 'Done, deleted ' . implode(',', $items); 133 | 134 | $this->warningMessage = 'Calm! This is a demo'; 135 | } 136 | } 137 | -------------------------------------------------------------------------------- /plugin/Models/MyPluginBooks.php: -------------------------------------------------------------------------------- 1 | 'myShortcodeMethod', 16 | 'wpbones_is_category' => 'wpBonesIsCategory', 17 | ]; 18 | 19 | /** 20 | * Example of shortcode. 21 | * 22 | * @param array $atts Optional.Attribute into the shortcode 23 | * @param null $content Optional. HTML content 24 | * 25 | * @return string 26 | */ 27 | public function myShortcodeMethod($atts = [], $content = null) 28 | { 29 | // Default values for shortcode 30 | $defaults = [ 31 | 'computer' => false, 32 | ]; 33 | 34 | $atts = shortcode_atts($defaults, $atts, 'wp_kirk'); 35 | 36 | return 'Computer, engage'; 37 | } 38 | 39 | public function wpBonesIsCategory($atts = [], $content = null) 40 | { 41 | global $post; 42 | 43 | $defaults = [ 44 | 'post_type' => false, 45 | 'taxonomy' => false, 46 | 'category' => false, 47 | ]; 48 | 49 | $atts = shortcode_atts($defaults, $atts, 'wpBonesIsCategory'); 50 | 51 | if ( 52 | empty($atts['post_type']) || 53 | empty($atts['taxonomy']) || 54 | empty($atts['category']) 55 | ) { 56 | return $content; 57 | } 58 | 59 | if ( 60 | $post->post_type === $atts['post_type'] && 61 | has_term($atts['category'], $atts['taxonomy']) 62 | ) { 63 | return $content; 64 | } 65 | 66 | return ''; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /plugin/Widgets/MyWidget.php: -------------------------------------------------------------------------------- 1 | 'WP Kirk Demo Widget Description']; 33 | 34 | /** 35 | * Optional. Passed to wp_register_widget_control() 36 | * 37 | * - width: required if more than 250px 38 | * - height: currently not used but may be needed in the future 39 | * 40 | * @var array 41 | */ 42 | public $control_options = [ 43 | 'width' => 400, 44 | 'height' => 350, 45 | ]; 46 | 47 | public function update($new_instance, $old_instance) 48 | { 49 | $old_instance['title'] = $new_instance['title']; 50 | 51 | return $old_instance; 52 | } 53 | 54 | public function viewForm($instance): string 55 | { 56 | $instance = array_merge($this->defaults(), $instance); 57 | 58 | return WPKirk() 59 | ->view('widgets.form') 60 | ->with(['instance' => $instance, 'widget' => $this]); 61 | } 62 | 63 | /** 64 | * Return a key pairs array with the default value for widget. 65 | * 66 | * @return array 67 | */ 68 | public function defaults(): array 69 | { 70 | return ['title' => 'My Title']; 71 | } 72 | 73 | public function viewWidget($args, $instance) 74 | { 75 | return WPKirk() 76 | ->view('widgets.index') 77 | ->with(['args' => $args, 'instance' => $instance]) 78 | ->withStyles('wp-kirk-widget'); 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /plugin/activation.php: -------------------------------------------------------------------------------- 1 | array('react', 'react-dom', 'wp-i18n'), 'version' => 'b73ed3bb5195820fb11f'); 2 | -------------------------------------------------------------------------------- /public/css/prism.css: -------------------------------------------------------------------------------- 1 | code[class*=language-],pre[class*=language-]{color:#ccc;background:0 0;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}pre[class*=language-].line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}div.code-toolbar{position:relative}div.code-toolbar>.toolbar{position:absolute;z-index:10;top:.3em;right:.2em;transition:opacity .3s ease-in-out;opacity:0}div.code-toolbar:hover>.toolbar{opacity:1}div.code-toolbar:focus-within>.toolbar{opacity:1}div.code-toolbar>.toolbar>.toolbar-item{display:inline-block}div.code-toolbar>.toolbar>.toolbar-item>a{cursor:pointer}div.code-toolbar>.toolbar>.toolbar-item>button{background:0 0;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}div.code-toolbar>.toolbar>.toolbar-item>a,div.code-toolbar>.toolbar>.toolbar-item>button,div.code-toolbar>.toolbar>.toolbar-item>span{color:#bbb;font-size:.8em;padding:0 .5em;background:#f5f2f0;background:rgba(224,224,224,.2);box-shadow:0 2px 0 0 rgba(0,0,0,.2);border-radius:.5em}div.code-toolbar>.toolbar>.toolbar-item>a:focus,div.code-toolbar>.toolbar>.toolbar-item>a:hover,div.code-toolbar>.toolbar>.toolbar-item>button:focus,div.code-toolbar>.toolbar>.toolbar-item>button:hover,div.code-toolbar>.toolbar>.toolbar-item>span:focus,div.code-toolbar>.toolbar>.toolbar-item>span:hover{color:inherit;text-decoration:none} -------------------------------------------------------------------------------- /public/css/wp-kirk-common.css: -------------------------------------------------------------------------------- 1 | .wp-kirk pre{border-radius:6px}.wp-kirk code.inline{border-radius:3px;font-size:.9em;padding:2px 6px}.wp-kirk.wp-kirk-sample p{font-size:16px}.clearfix:after,.clearfix:before{display:table!important;line-height:0!important;content:""!important}.clearfix:after{clear:both!important}.wp-kirk-align{display:block;clear:both}.wp-kirk-align-left{text-align:left}.wp-kirk-toc{float:left;position:fixed;background-color:#fff;padding:8px;border:1px solid #ddd;width:180px}.wp-kirk-toc-content{float:right;width:calc(100% - 220px)}@media (max-width:1000px){.wp-kirk-toc{float:none;position:relative;width:auto}.wp-kirk-toc li{margin-right:12px;float:left}.wp-kirk-toc-content{float:none;width:auto}} -------------------------------------------------------------------------------- /public/css/wp-kirk-dashboard.css: -------------------------------------------------------------------------------- 1 | .wp-kirk-dashboard{color:red}.wp-kirk-textarea-code{font-family:"Courier New",Courier,monospace;width:100%;min-height:100px} -------------------------------------------------------------------------------- /public/css/wp-kirk-variables.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpbones/WPKirk/fea4527c268d0f5600cb31092cfe7c6a22725b90/public/css/wp-kirk-variables.css -------------------------------------------------------------------------------- /public/css/wp-kirk-widget.css: -------------------------------------------------------------------------------- 1 | .wp-kirk-widget-title{color:red} -------------------------------------------------------------------------------- /public/css/wp-kirk.css: -------------------------------------------------------------------------------- 1 | .text{color:#333;font-size:16px} -------------------------------------------------------------------------------- /public/images/wpbones-logo-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpbones/WPKirk/fea4527c268d0f5600cb31092cfe7c6a22725b90/public/images/wpbones-logo-menu.png -------------------------------------------------------------------------------- /public/images/wpbones-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpbones/WPKirk/fea4527c268d0f5600cb31092cfe7c6a22725b90/public/images/wpbones-logo.png -------------------------------------------------------------------------------- /public/js/wp-kirk-main.js: -------------------------------------------------------------------------------- 1 | !function(t){"use strict";alert("Hi there, and Hello World!\n The jQuery version is "+t().jquery),t("#ajax-trusted").on("click",function(){t.post(ajaxurl,{action:"trusted"},function(t){alert(t)})}),t("#ajax-logged").on("click",function(){t.post(ajaxurl,{action:"logged"},function(t){alert(t)})}),t("#ajax-notLogged").on("click",function(){t.post(ajaxurl,{action:"notLogged"},function(t){alert(t)})})}(jQuery); -------------------------------------------------------------------------------- /public/js/wp-kirk-test.js: -------------------------------------------------------------------------------- 1 | var testAlert=function(){alert("Hello, World!")}; -------------------------------------------------------------------------------- /public/js/wp-react-component.js: -------------------------------------------------------------------------------- 1 | "use strict";var _excluded=["children","primary"];function _slicedToArray(e,t){return _arrayWithHoles(e)||_iterableToArrayLimit(e,t)||_unsupportedIterableToArray(e,t)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(e,t){var r;if(e)return"string"==typeof e?_arrayLikeToArray(e,t):"Map"===(r="Object"===(r=Object.prototype.toString.call(e).slice(8,-1))&&e.constructor?e.constructor.name:r)||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?_arrayLikeToArray(e,t):void 0}function _arrayLikeToArray(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r{__('Some of the key features of Mantine include:', 'wp-kirk')}
17 |
18 |
19 |
36 |
15 | {__( 16 | 'This is a React component that is rendered inside a div with the id react-app.', 17 | 'wp-kirk', 18 | )} 19 |
20 |21 | {__( 22 | 'The component was created using the official WordPress package for React', 23 | 'wp-kirk', 24 | )}{' '} 25 | 26 | @wordpress/scripts 27 | 28 | . 29 |
30 | 31 |32 | {__( 33 | 'Obviously, this is a very simple example, but it should give you a good starting point for creating more complex interfaces. And remember, you can use any React library you want, not just Mantine.', 34 | 'wp-kirk', 35 | )} 36 |
37 | > 38 | ); 39 | }; 40 | -------------------------------------------------------------------------------- /resources/assets/apps/components/Settings.jsx: -------------------------------------------------------------------------------- 1 | import { 2 | Badge, 3 | Group, 4 | Paper, 5 | Progress, 6 | rem, 7 | Text, 8 | ThemeIcon, 9 | } from '@mantine/core'; 10 | import { IconSwimming } from '@tabler/icons-react'; 11 | import { __ } from '@wordpress/i18n'; 12 | import classes from './Settings.module.css'; 13 | 14 | export function Settings() { 15 | return ( 16 |22 | This is a simple React component rendered in a WordPress plugin. It is a counter that increments every time you 23 | click the button. 24 |
25 | 26 |Starting from version 1.4.0, you can use blade templates in your plugin.
8 |We're using the BladeOne template engine. BladeOne is a standalone version of Blade Template Engine that uses a single PHP file and can be ported and used in different projects. It allows you to use blade template outside Laravel.
9 | 10 |In this example, we have created a classic Controller. The same one used in the other examples.
11 | 12 |{{ $controller }}
13 |
14 | We created a folder /resources/views/blade
for clarity, but any other folder would be fine. In the example, we passed the WordPress User
model as a parameter
Finally, we have inserted the Blade directives into our file /resources/views/blade/demo.blade.php
{{ $code }}
19 |
20 | The result is:
21 | 22 | @foreach ($users as $user) 23 |user_nicename: {{ $user->user_nicename }}
24 |user_email: {{ $user->user_email }}
25 | @endforeach 26 | 27 |For more information, please visit the BladeOne Wiki pages.
28 | 29 | /api
/api/vendor/v1
39 |
40 |
41 |
42 |
43 | route.php
44 |
/api/vendor/v1/route.php
47 |
48 | route.php
<?php
51 | use WPKirk\WPBones\Routing\API\Route;
52 |
53 | Route::get('/example', function () {
54 | return 'Hello World!';
55 | });
56 |
57 |
58 |
60 |
61 |
62 |
63 | get
, post
, put
,
64 | patch
, delete
65 | WP_REST_Server
class.
66 |
route.php
post
<?php
71 | use WPKirk\WPBones\Routing\API\Route;
72 |
73 | Route::post('/example', function () {
74 | return 'Hello World!';
75 | });
76 |
77 |
78 |
79 | Route::get()
, Route::post()
, ::request()
route.php
::request()
<?php
84 | use WPKirk\WPBones\Routing\API\Route;
85 |
86 | Route::request('get', '/get_request', function () {
87 | return 'Hello World!';
88 | });
89 |
90 | // HTTP verb is case insensitive
91 | Route::request('GET', '/get_request', function () {
92 | return 'Hello World!';
93 | });
94 |
95 | // you may use both strings and arrays
96 | Route::request(['get'], '/get_request', function () {
97 | return 'Hello World!';
98 | });
99 |
100 | // you may use multiple HTTP verbs
101 | Route::request(['get', 'POST'], '/multiple', function () {
102 | return 'Hello World!';
103 | });
104 |
105 |
107 | resources/assets/css directory.', 'wp-kirk'); ?>
30 |.css, .scss
, and .less
will be compiled and you will find the css compiled in the public/css
directory.', 'wp-kirk'); ?>
public function assets()
34 | {
35 | return WPKirk()
36 | ->view('dashboard.assets')
37 | ->withAdminStyle('my-styles');
38 | }
39 |
40 | resources/assets/js directory.', 'wp-kirk'); ?>
43 |Assets documentation.', 'wp-kirk'); ?>
44 | 45 | 46 | 47 |public/js directory.', 'wp-kirk'); ?>
48 | 49 | 50 | 51 | 52 | 53 |div with an id
.', 'wp-kirk'); ?>
<div id="react-test"></div>
56 |
57 |
58 |
59 |
60 |
61 | public function assets()
62 | {
63 | return WPKirk()
64 | ->view('dashboard.assets')
65 | ->withAdminStyle('wp-kirk-common')
66 | ->withAdminStyle('prism')
67 | ->withAdminScript('prism')
68 | ->withAdminScript('wp-react-component', ['wp-element']); // wp-element is a dependency
69 | }
70 |
71 |
72 |
73 | resources/assets/js/
wp-react-component.js
const { render, useState } = wp.element;
76 |
77 | const WordPressButton = ({ children, primary, ...others }) => {
78 | return (
79 | <button className={`button ${primary ? "button-primary" : ""}`} {...others}>
80 | {children}
81 | </button>
82 | );
83 | };
84 |
85 | const FlexContainer = ({ children, justifyContent, alignItems, gap }) => {
86 | return <div style={{ display: "flex", justifyContent: "alignItems", gap }}>{children}</div>;
87 | };
88 |
89 | const MyComponent = () => {
90 | const [count, setCount] = useState(0);
91 |
92 | return (
93 | <div>
94 | <h2>Hello, React World!</h2>
95 | <p>
96 | This is a simple React component rendered in a WordPress plugin. It is a counter that increments every time you
97 | click the button.
98 | </p>
99 |
100 | <FlexContainer gap={14} alignItems="center">
101 | <WordPressButton onClick={() => setCount(count + 1)}>Click me</WordPressButton>
102 | <span>{count}</span>
103 | </FlexContainer>
104 | </div>
105 | );
106 | };
107 |
108 | render(<MyComponent />, document.getElementById("react-test"));
109 |
110 |
111 |
112 |
113 |
114 |
115 | npm run build
116 |
117 |
118 |
119 | pages
pages
custom_page.php
.
<?php
16 |
17 | use WPKirk\WPBones\Routing\Pages\Support\Page;
18 |
19 | class CustomPage extends Page
20 | {
21 | public function title(): string
22 | {
23 | return "Hello, Custom Page!";
24 | }
25 |
26 | public function render()
27 | {
28 | return $this->plugin
29 | ->view('dashboard.custom_page')
30 | ->withAdminStyle('prism')
31 | ->withAdminScript('prism')
32 | ->withAdminStyle('wp-kirk-common');
33 | }
34 | }
35 |
36 |
40 | composer install illuminate/database
23 |
24 |
25 |
26 |
27 |
28 | <?php
29 | use WPKirk\Http\Controllers\User;
30 |
31 | var_dump(User::all());
32 |
33 |
36 |
37 |
38 | <?php
45 | use WPKirk\Http\Controllers\User;
46 |
47 | var_dump(User::find(1)->user_email);
48 |
49 | user_email
51 | ); ?>
52 |
53 |
54 |
55 |
56 |
57 | <?php
58 | use WPKirk\Http\Controllers\Product;
59 |
60 | var_dump(Product::find([3,4]));
61 |
62 |
65 |
66 |
67 | <?php
72 | use WPKirk\Http\Controllers\Product;
73 |
74 | var_dump(Product::find(3)->name);
75 |
76 | name
78 | ); ?>
79 |
80 |
81 |
82 | <?php
83 | use WPKirk\Http\Controllers\Product;
84 |
85 | Product::all()->each(function ($e) {
86 | var_dump($e->id);
87 | });
88 |
89 |
90 | each(function ($e) {
91 | var_dump($e->id);
92 | }); ?>
93 |
94 |
95 | Below an example of how to post some data to the same page
18 | 19 |Current Method
21 |
22 | <form method="post">
23 | <button class="button button-hero button-primary">Post Here</button>
24 | </form>
25 |
26 |
29 |
30 | Below, how to send a post message to a different custom page
35 | 36 |<form method="post" action="<?php echo $plugin->getPageUrl('second_custom_page') ?>">
37 | <button class="button button-hero button-primary">Test Post</button>
38 | </form>
39 |
40 |
44 |
45 | You may also use the pages
folder to create your own pages.
<a class="button button-hero button-primary" href="<?php echo $plugin->getPageUrl('custom_page') ?>">Load custom page</a>
52 |
53 |
56 | Here you'll find some example about HTML support.
34 | 35 |You can render a HTML component in different ways
38 | 39 |echo WPKirk\Html::button( "Hello, world!" );
40 |
41 | $html = WPKirk\Html::button( "Hello, world!" )->html();
50 | echo $html;
51 |
52 |
53 | By explicit render()
method
WPKirk\Html::button( "Hello, world!" )->render();
63 |
64 | You can use the attributes in several ways
72 | 73 |$button = WPKirk\Html::button( "Hello, world!" );
74 | $button->class = 'button button-primary';
75 | echo $button;
76 |
77 | Of course, you may use the fluent way
86 | 87 |echo WPKirk\Html::button( "Hello, world!" )->class( 'button' );
88 |
89 | echo WPKirk\Html::button( "Hello, world!" )->class( 'button button-primary’);
94 |
95 | echo WPKirk\Html::button( "Hello, world!" )->class( [ 'button', 'button-primary' ] );
102 |
103 | echo WPKirk\Html::button( [ 'content' => "Hello, world!", 'class' => 'button button-hero' ] );
111 |
112 | You may change the HTML component styles immediately by using style()
echo WPKirk\Html::button("Hello, world!")->style('color', 'red')
126 |
127 | echo WPKirk\Html::button("Hello, world!")->style('color', 'red', 'font-weight', 'bold')
132 |
133 | echo WPKirk\Html::button("Hello, world!")->style([ 'background-color' => 'red', 'color' => 'white' ])
143 |
144 | echo WPKirk\Html::a('Click me')->href('http://undolog.com')
158 |
159 | echo WPKirk\Html::button('Hello, world!')->class('button button-primary')
168 |
169 | echo WPKirk\Html::form()->acceptcharset('ISO-8859-1')
180 |
181 | echo WPKirk\Html::input()->type('text')->value('Hello')
190 |
191 | echo WPKirk\Html::checkbox()->name('myname')->value('Hello')
200 |
201 | The HTML markup output consists in two input fields in order to support the unchecked value as well
206 | 207 |<input type="hidden" name="myname" value="off" />
208 | <input type="checkbox" name="myname" value="Hello" />
209 |
210 |
211 | To use a select
you have to define the options as well. Below, you'll see different ways to do that.
216 | The first
217 | one is using the option
component
echo WPKirk\Html::select(WPKirk\Html::option('Item')->html())
220 |
221 | You may use also options
fluent way
echo WPKirk\Html::select()->options([ 'Item 1', 'Item 2' ])
228 |
229 | <select>
234 | <option selected="selected">Item 1</option>
235 | <option>Item 2</option>
236 | </select>
237 |
238 | Options with array keys
239 | 240 |echo WPKirk\Html::select()->options([ 'item-1' => 'Item 1', 'item-2' => 'Item 2' ])
241 |
242 | <select>
250 | <option value="item-1">Item 1</option>
251 | <option value="item-2">Item 2</option>
252 | </select>
253 |
254 |
255 | Preselect an option
256 | 257 |echo WPKirk\Html::select()->options([ 'item-4' => 'Item 4', 'item-5' => 'Item 5'])->selected('item-5')
258 |
259 | Multiple select
266 | 267 |multiple method to enable multiple selection', 'wp-kirk') ?>
268 | 269 |echo WPKirk\Html::select()
270 | ->multiple(true)
271 | ->options([
272 | 'item-1' => 'Item 1',
273 | 'item-2' => 'Item 2',
274 | 'item-3' => 'Item 3',
275 | 'item-4' => 'Item 4',
276 | 'item-5' => 'Item 5'
277 | ])
278 | ->selected('item-2,item-1');
279 |
280 |
281 |
282 | echo WPKirk\Html::select()
296 | ->multiple(true)
297 | ->options([
298 | 'item-1' => 'Item 1',
299 | 'item-2' => 'Item 2',
300 | 'item-3' => 'Item 3',
301 | 'item-4' => 'Item 4',
302 | 'item-5' => 'Item 5'
303 | ])
304 | ->selected(['item-2', 'item-4']);
305 |
306 | echo WPKirk\Html::textarea('Hi there, How are you?')
324 |
325 | echo WPKirk\Html::datetime([ 'name' => 'finalStart' ])
336 |
337 | 'finalStart']); ?>
338 |
339 | echo WPKirk\Html::datetime()->complete(true)
340 | complete(true); ?>
341 |
342 | echo WPKirk\Html::datetime()->value('now')
343 | value('now'); ?>
344 |
345 | echo WPKirk\Html::datetime()->now(true)
346 | now(true); ?>
347 |
348 | echo WPKirk\Html::datetime()->now(true)->clear(true)
349 | now(true)->clear(true); ?>
350 |
351 | echo WPKirk\Html::datetime()->value(time() + (60 * 60))
352 | value(time() + 60 * 60); ?>
353 |
354 | echo WPKirk\Html::datetime()->value("2015-11-10 12:13")
355 | value('2015-11-10 12:13'); ?>
356 | You may also set any custom attributes in the HTML component
363 | 364 |echo WPKirk\Html::button('Click me!')->attributes('hello', 'world')
365 |
366 | The HTM -------------------------------------------------------------------------------- /resources/views/dashboard/index.php: -------------------------------------------------------------------------------- 1 | 9 | 10 |
config/menus.php
return [
39 | 'wp_kirk_slug_menu' => [
40 | 'menu_title' => 'WP Kirk Menu',
41 | 'capability' => 'read',
42 | 'icon' => 'wpbones-logo-menu.png',
43 | 'items' => [
44 | [
45 | 'menu_title' => __('Main View', 'wp-kirk'),
46 | 'route' => [
47 | 'get' => 'Dashboard\DashboardController@firstMenu',
48 | ],
49 | ],
50 | ...
51 |
52 |
53 | /plugin/Http/Controllers/Dashboard/DashboardController.php
class DashboardController extends Controller {
56 | public function firstMenu() {
57 | return WPKirk()
58 | ->view('dashboard.index')
59 | ->withAdminStyle('wp-kirk-common')
60 | ->withAdminStyle('prism')
61 | ->withAdminScript('prism')
62 | ->with('my_inject_variable', 'Captain');
63 | }
64 | }
65 |
66 | resources/views/dashboard/index.php
my_inject_variable
71 |
custom
<?php echo $plugin->config('custom.sample') ?>
78 |
79 |
80 |
81 | config("custom.sample"); ?>
82 |
83 | <?php echo $plugin->Author ?> // Author; ?>
89 |
90 | <?php echo $plugin->Description ?> // Description; ?>
91 |
92 | <?php echo $plugin->Version ?> // Version; ?>
93 |
94 | <?php echo $plugin->TextDomain ?> // TextDomain; ?>
95 |
96 | route.php
100 | config
101 |
102 |
route.php
config
105 |
route.php
<?php
110 | /*
111 | |--------------------------------------------------------------------------
112 | | Custom page routes
113 | |--------------------------------------------------------------------------
114 | |
115 | | Here is where you can register all page routes for your custom view.
116 | | Then you will use $plugin->getPageUrl( 'custom_page' ) to get the URL.
117 | |
118 | */
119 |
120 | return [
121 |
122 | 'first_custom_page' => [
123 | 'title' => 'Title of page',
124 | 'capability' => 'read',
125 | 'route' => [
126 | 'get' => 'Dashboard\DashboardController@customPage',
127 | 'post' => 'Dashboard\DashboardController@customPage',
128 | ]
129 | ],
130 | 'second_custom_page' => [
131 | 'title' => 'Second',
132 | 'capability' => 'read',
133 | 'route' => [
134 | 'post' => 'Dashboard\DashboardController@secondCustomPage',
135 | ]
136 | ],
137 | ];
138 |
139 |
140 |
141 |
142 | getPageUrl("first_custom_page"); ?>
143 |
144 | <?php echo $plugin->getPageUrl( 'first_custom_page' ) ?> //
145 |
146 | 147 | "> 148 |
149 | 150 | getMenuUrl("assets"); ?> 151 |<?php echo $plugin->getMenuUrl( 'assets' ) ?> //
152 |
153 |
156 |
157 | getMenuUrl(5); ?>
158 | <?php echo $plugin->getMenuUrl(5) ?> //
159 |
162 |
163 | view( 'dashboard.index', [ 'var' => 'value' ] );
7 | |
8 | -->
9 |
14 |
15 | In your Plugin you may use the Database Model class instead of the Query 30 | Builder.
31 |To use the Model convection you need to extend the Model class:
32 | 33 |<?php
34 | namespace WPKirk\Models;
35 |
36 | use WPKirk\WPBones\Database\Model;
37 |
38 | class MyPluginBooks extends Model
39 | {
40 | }
41 |
42 |
43 | We don't support the automatic plural naming of the table at the moment. Anyway, the default table name will be
44 | the "snake case" of the class name. For example, the class Users
will be associated with the table
45 | users
. The class UsersLogged
will be associated with the table
46 | users_logged
.
47 |
If your model's corresponding database table does not fit this convention, you may manually specify the model's
50 | table name by defining a table
property on the model:
<?php
53 | namespace WPKirk\Models;
54 |
55 | use WPKirk\WPBones\Database\Model;
56 |
57 | class MyPluginBooks extends Model
58 | {
59 | protected $table = 'my_plugin_products';
60 | protected $usePrefix = false;
61 | }
62 |
63 | <?php MyPluginBooks::all()
66 |
67 |
68 |
69 |
70 | dump(); ?>
71 |
72 |
73 |
74 | You can find more example 76 | here> 77 | 78 |
In your Plugin you may use the Database Model class instead of the Query 28 | Builder.
29 |To use the Model convection you need to extend the Model class:
30 | 31 |<?php
32 | namespace WPKirk\Models;
33 |
34 | use WPKirk\WPBones\Database\Model;
35 |
36 | class MyPluginProducts extends Model
37 | {
38 | }
39 |
40 |
41 | We don't support the automatic plural naming of the table at the moment. Anyway, the default table name will be
42 | the "snake case" of the class name. For example, the class Users
will be associated with the table
43 | users
. The class UsersLogged
will be associated with the table
44 | users_logged
.
45 |
If your model's corresponding database table does not fit this convention, you may manually specify the model's
48 | table name by defining a table
property on the model:
<?php
51 | namespace WPKirk\Models;
52 |
53 | use WPKirk\WPBones\Database\Model;
54 |
55 | class MyPluginProducts extends Model
56 | {
57 | protected $table = 'my_plugin_products';
58 | }
59 |
60 | <?php MyPluginProducts::all()
63 |
64 |
65 |
66 |
67 | dump(); ?>
68 |
69 |
70 |
71 | You can find more example 73 | here> 74 | 75 |
Here you can see he current options are:
33 | 34 |echo $plugin->options;
35 |
36 | options; ?>
37 |
38 | As you can see you'll be able to get the options by using the dot notation
40 | 41 |echo $plugin->options->get( 'General.option_2'); // options->get(
42 | 'General.option_2'
43 | ); ?>
44 |
45 | You may also store null
values
$value = $plugin->options->get( 'General.option_5'); echo is_null($value) ? 'null' : $value; // options->get(
48 | 'General.option_5'
49 | );
50 | echo is_null($value) ? 'null' : $value ?>
51 |
52 | You may also retrieve an option sub-branch as an Array
echo $plugin->options['General'];
56 |
57 | options['General'],
59 | true
60 | ); ?>
61 |
62 | as well as
63 | 64 |echo $plugin->options->get( 'General.option_3');
65 |
66 | options->get('General.option_3')
68 | ); ?>
69 |
70 | You may also avoid to use the get()
method, instead of use
echo $plugin->options->get( 'General.option_3.sub_option_of_3'); // options->get(
74 | 'General.option_3.sub_option_of_3'
75 | ); ?>
76 |
77 | you may use
78 | 79 |echo $plugin->options[ 'General.option_3.sub_option_of_3' ]; // options['General.option_3.sub_option_of_3']; ?>
81 |
82 | Of course, you'll be able to define any default value if the branch/key doesn't exist.
84 | 85 |echo $plugin->options->get( 'General.doNotExists', 'default' ); // options->get(
86 | 'General.doNotExists',
87 | 'default'
88 | ); ?>
89 |
90 |
91 | You may update any options and branch tree in the same way, by using the dot notation
94 | 95 |$plugin->options->set( 'Special.Name', null );
96 |
97 | options->set('Special.Name', null); ?>
98 | options; ?>
99 |
100 | $plugin->options->set( 'Special.Name', 'John' );
101 |
102 | options->set('Special.Name', 'John'); ?>
103 | options; ?>
104 |
105 | options->set(
106 | 'General.option_3.sub_option_of_3',
107 | 'FooBar'
108 | ); ?>
109 |
110 | $plugin->options->set( 'General.option_3.sub_option_of_3', 'FooBar' );
111 |
112 | options; ?>
113 |
114 | Of course, you may also change the type of the stored key. Below, we're going to use and Array
116 | instead of the previous string
$plugin->options->set( 'Special.Name', [ 'John', 'Good' ] );
121 |
122 | options; ?>
123 |
124 | and again...
125 | 126 | options['Special.Name'] = ['Robin', 'Hood']; ?> 127 | 128 |$plugin->options[ 'Special.Name' ] = [ 'Robin', 'Hood' ];
129 |
130 | options; ?>
131 |
132 |
133 | Of course, adding new options will work in the same way by using the dot notation
136 | 137 | options->set('Special.null_value', null); ?> 138 | 139 |$plugin->options->set( 'Special.null_value', null );
140 |
141 | options; ?>
142 |
143 | options->set('Special.time', time()); ?>
144 |
145 | $plugin->options->set( 'Special.time', time() );
146 |
147 | options; ?>
148 |
149 | options['Special.timeZone'] = time(); ?>
150 |
151 | $plugin->options[ 'Special.timeZone' ] = time();
152 |
153 | options; ?>
154 |
155 | options['what-you-like'] = 'Simply is best'; ?>
156 |
157 | $plugin->options[ 'what-you-like' ] = 'Simply is best';
158 |
159 | options; ?>
160 |
161 |
162 | In accordance with the options structure, you may also update a whole subset of options instead of changing 165 | them individually.
166 | 167 | options->update([ 168 | 'General' => [ 169 | 'option_4' => [ 170 | 'color' => 'red', 171 | 'background' => 'transparent', 172 | 'images' => null 173 | ], 174 | ], 175 | ]); ?> 176 | 177 |$plugin->options->update(
178 | [ 'General' =>
179 | [ 'option_4' =>
180 | [ 'color' => 'red', 'background' => 'transparent', 'images' => null ]
181 | ]
182 | ]
183 | );
184 |
185 | options; ?>
186 |
187 |
188 | Of course, you may use the mass feature for the insert as well
191 | 192 | options->update([ 193 | 'General' => [ 194 | 'option_5' => [ 195 | 'color' => 'red', 196 | 'background' => 'transparent', 197 | 'images' => null 198 | ], 199 | ], 200 | ]); ?> 201 | 202 |$plugin->options->update(
203 | [ 'General' =>
204 | [ 'option_5' =>
205 | [ 'color' => 'red', 'background' => 'transparent', 'images' => null ]
206 | ]
207 | ]
208 | );
209 |
210 |
211 | options; ?>
212 |
213 |
214 |
215 | To delete an option, you have to use the delete()
method
$plugin->options->delete( 'General.option_4' );
223 |
224 | options; ?>
225 |
226 | Finally, you may delete all
228 | 229 | options->delete(); ?> 230 | 231 |$plugin->options->delete();
232 |
233 | options; ?>
234 |
235 |
236 | Don't worry, we can reset everything by using the original file
239 | 240 | options->reset(); ?> 241 | 242 |$plugin->options->reset();
243 |
244 | options; ?>
245 |
246 | Here you can try the ability to handle a form for the options.
14 | 15 |The current options are:
16 | 17 |echo $plugin->options;
18 |
19 | options; ?>
20 |
21 |
22 | 24 | 25 |
26 |Here we're using a very useful HTML markup to display and handle the form fields.
30 |First of all we may use the nonce in this way
31 | 32 |wp_nonce_field('Options');
33 |
34 | The we may use special form fields
35 | 36 |<form action="" method="post">
37 | <?php wp_nonce_field('Options'); ?>
38 | <div>
39 | <label for="General/option_1">General.option_1</label>
40 | <input type="hidden" name="General/option_1" value="false" />
41 | <input type="checkbox" name="General/option_1" id="General/option_1" <?php
42 | checked('true', $plugin->options->get('General.option_1')) ?>
43 | value="true"/>
44 | </div>
45 | <div>
46 | <label for="General/option_2">General.option_2</label>
47 | <input type="hidden" name="General/option_2" value="false" />
48 | <input type="checkbox" name="General/option_2" id="General/option_2" <?php
49 | checked('true', $plugin->options->get('General.option_2')) ?>
50 | value="true"/>
51 | </div>
52 | <div>
53 | <label for="Special/Name">Special.Name</label>
54 | <input type="text" name="Special/Name" id="Special/Name"
55 | value="<?php echo $plugin->options->get('Special.Name') ?>" />
56 | </div>
57 | <div>
58 | <label for="General/option_3/sub_option_of_3">General/option_3/sub_option_of_3</label>
59 | <input type="text" name="General/option_3/sub_option_of_3" id="General/option_3/
60 | sub_option_of_3"
61 | value="<?php echo $plugin->options->get('General.option_3.sub_option_of_3') ?>" />
62 | </div>
63 | <button class="button button-primary">Update</button>
64 | </form>
65 |
66 |
67 |
110 |
111 | 19 | Let me show you some useful package that you can use as extension of main framework. 20 |
21 |22 | You'll find the complete list and the documentation of all packages in the official package repository. 24 |
25 | 26 |<?php WPKirk\YourPackage\YourPackageProvider::yourPackageMethod(); ?>
30 |
31 |
32 |
33 | 37 | Here we are using the Pure CSS Tabs package. 38 | To install it, you cn use: 39 |
40 | 41 |php bones require wpbones/pure-css-tabs
42 |
43 |
74 |
75 |
76 |
81 |
82 |
83 | Content for Database
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 | Content for Posts
93 |
94 |
95 |
96 |
97 |
98 |
99 |
* The tabs are responsive, try to resize your browser and you'll see them switch to accordion 106 | layout
107 | 108 |113 | Here we are using the Pure CSS Switch package. 114 | To install it, you cn use: 115 |
116 | 117 |php bones require wpbones/pure-css-switch
118 |
119 | The you may use
120 | 121 |echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-1' );
122 |
123 | You may add a left label
124 | 125 |126 |
echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-2' )
127 | ->left_label( 'Swipe me' );
128 | left_label('Swipe me'); ?>
131 |
132 |
133 | as well as a right label
134 | 135 |136 |
echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-3' )
137 | ->right_label( 'Swipe me' );
138 | right_label('Swipe me'); ?>
141 |
142 |
143 |
144 | Of course, you may use both left and right label
147 |
echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-4' )
148 | ->left_label( 'Swipe me' )
149 | ->right_label( 'Swipe me' );
150 | left_label('Swipe me')
154 | ->right_label('Swipe me'); ?>
155 |
156 |
157 | You may preselect the default status by checked
echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-5' )
160 | ->left_label( 'Swipe me' )
161 | ->checked( true );
162 |
163 |
186 |
187 | as well as the disabled
of the component
echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-6' )
190 | ->left_label( 'Swipe me' )
191 | ->disabled( true );
192 |
193 | 194 | left_label('Swipe me') 198 | ->disabled(true); ?> 199 |
200 | 201 |You may change the appearance by theme
echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-7' )
204 | ->theme( 'flat-square' );
205 |
206 | 207 | theme('flat-square'); ?> 210 |
211 | 212 |Mode select
(default is switch
)
echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-8' )
215 | ->left_label( 'Turn left' )
216 | ->right_label( 'Turn right' )
217 | ->mode( 'select' );
218 |
219 | 220 | left_label('Turn left') 224 | ->right_label('Turn right') 225 | ->mode('select'); ?> 226 |
227 | 228 |You may use this package to extend WP Bones with a Mobile Detect Library.
233 | 234 |php bones require wpbones/useragent
237 |
238 | I advise to use this command instead of composer require
because doing this an automatic renaming
239 | will done.
composer require wpbones/useragent
244 |
245 | You may also to add "wpbones/useragent": "^1.0"
in the composer.json
file of your
246 | plugin:
{
249 | "require": {
250 | "php": ">=7.2",
251 | "wpbones/wpbones": "~0.8",
252 | "wpbones/useragent": "~1.0"
253 | },
254 | }
255 |
256 | and run
257 | 258 |composer install
259 |
260 | You will be able to use wpbones_user_agent()
function to get an instance of Mobile Detect.
For example
264 | 265 |
266 | if (wpbones_user_agent()->isMobile()) {
267 | echo "You're by Mobile";
268 | } else {
269 | echo "You're by Desktop";
270 | }
271 |
272 | isMobile()): ?>
273 | You're by Mobile
You're by Desktop
Here are some examples of what you can do with this package.
281 | 282 |For example, you can use the following methods:
283 | 284 |
285 | // Basic detection.
286 | wpbones_user_agent()->isMobile();
287 | wpbones_user_agent()->isTablet();
288 |
289 | // Magic methods.
290 | wpbones_user_agent()->isIphone();
291 | wpbones_user_agent()->isSamsung();
292 | // [...]
293 |
294 | // Alternative to magic methods.
295 | wpbones_user_agent()->is('iphone');
296 |
297 | // Find the version of component.
298 | wpbones_user_agent()->version('Android');
299 |
300 |
301 | You may also
302 | 303 |
304 | // Any mobile device (phones or tablets).
305 | if ( wpbones_user_agent()->isMobile() ) {
306 |
307 | }
308 |
309 | // Any tablet device.
310 | if( wpbones_user_agent()->isTablet() ){
311 |
312 | }
313 |
314 | // Exclude tablets.
315 | if( wpbones_user_agent()->isMobile() && !wpbones_user_agent()->isTablet() ){
316 |
317 | }
318 |
319 | // Check for a specific platform with the help of the magic methods:
320 | if( wpbones_user_agent()->isiOS() ){
321 |
322 | }
323 |
324 | if( wpbones_user_agent()->isAndroidOS() ){
325 |
326 | }
327 |
328 | // Alternative method is() for checking specific properties.
329 | // WARNING: this method is in BETA, some keyword properties will change in the future.
330 | wpbones_user_agent()->is('Chrome')
331 | wpbones_user_agent()->is('iOS')
332 | wpbones_user_agent()->is('UCBrowser')
333 | wpbones_user_agent()->is('Opera')
334 | // [...]
335 |
336 |
337 | # The version of the file is 1.0.0
350 | version: "1.0.0"
351 | example:
352 | # Enable or disable the Example feature
353 | enabled: true
354 | # Throttle request time in minutes
355 | # By setting this value to 0, the feature will be disabled
356 | throttle: 5
357 | # Request timeout
358 | timeout: 0)
359 |
360 |
361 |
362 | wpbones_flags()->flags('flag_name')
363 |
364 |
365 | wpbones_flags()->flags('flag_name.sub_flag')
366 |
367 |
368 | WPkirk()->flags('version'); // flags('version'); ?>
369 | WPkirk()->flags('example.throttle'); // flags('example.throttle'); ?>
370 | WPkirk()->flags('example.miss', 'default-value'); // flags('example.miss', 'default-value'); ?>
371 |
372 |
373 |
374 | Current Method
15 |
16 | <form method="post" action="<?php echo $plugin->getPageUrl('first_custom_page') ?>">
17 | <button class="button button-hero button-primary">Back</button>
18 | </form>
19 |
20 |
24 |
25 | 4 | 6 | 11 |
12 | 13 | log()->info('Widget args backend', $instance); ?> 14 | 15 |