Views

The views provide the UI and interaction with the end user. Usually, a view is a link in WordPress. The menus, for example, are a way to display a view.

Basic Usage

Views contain the HTML served by your plugin and separate your controller/plugin logic from your presentation logic. Views are stored in the resources/views directory. A view is usually bound with a menu. So, you will handle your view from an inside method of View Controller. In the Menus section, we have already used a View Controller in the menu array:

...
'route' => ['get' => 'Dashboard\DashboardController@firstMenu'],
...

Now, let’s see a simple View Controller used to display a view:

<?php
 
namespace WPKirk\Http\Controllers\Dashboard;
 
use WPKirk\Http\Controllers\Controller;
 
class DashboardController extends Controller {
 
  public function firstMenu()
  {
    return WPKirk()->view( 'dashboard.index' );
  }
}

The “Dot” notation provides a simple way to organize the views. In this example, we will have the following file structure resources/views/dashboard/index.php. The index.php file is the HTML/PHP file:

<div class="wrap">
  <h1>Hello, captain!</h1>
</div>

You may use any PHP code inside the view.

Passing Data To Views

As in Laravel, we can easily pass any data to the views:

return WPKirk()->view( 'dashboard.index' )->with( [ 'kirk' => 'Captain' ] );

So, inside your view, you can then access the data by using its corresponding keys, such as <?php echo $kirk; ?>.

<div class="wrap">
  <h1>Hello, <?php echo $kirk; ?>!</h1>
</div>

As an alternative to passing a complete array of data to the view, you may use the with() method to add individual pieces of data to the view:

return WPKirk()->view( 'dashboard.index' )->with( 'kirk', 'Captain' );

In addition, you will be able to get your plugin instance by the $plugin variable.

In this release, you’ll find the $plugin variable automatically set to the plugin instance. This variable is reserved.

Enqueue Styles and Scripts in Admin Area

You can enqueue all registered styles and scripts when a view is displayed. All styles and scripts files must be located in the public/ folder. The .css files will be found in the public/css/ folder, and the .js files will be found in the public/js/ folder.

Currently, you can use withAdminStyle() and withAdminScript() to enqueue styles and scripts in the admin area.

For example:

return WPKirk()->view( 'dashboard.index' )
               ->with( [ 'kirk' => 'Captain' ] )
               ->withAdminStyle( 'wp-kirk-common' );

The file public/css/wp-kirk-common.css will be registered and enqueued when the view is displayed.

return WPKirk()->view( 'dashboard.index' )
               ->with( [ 'kirk' => 'Captain' ] )
               ->withAdminScript( 'wp-kirk-common' );

The file public/js/wp-kirk-common.js will be registered and enqueued when the view is displayed.

Of course, you can setup both styles and scripts:

return WPKirk()->view( 'dashboard.index' )
               ->with( [ 'kirk' => 'Captain' ] )
               ->withAdminStyle( 'wp-kirk-common' )
               ->withAdminScript( 'wp-kirk-common' );

Both files will be registered and enqueued when the view is displayed.

Enqueue Style and Scripts in Theme

Also, you can enqueue scripts and styles just in the theme, for example when you will display a view for a widget. In this case, you can use withStyle() and withScript() fluent methods. All these methods accept three parameters: name, dependencies, and version:

For Example:

return WPKirk()->view( 'dashboard.index' )
               ->with( [ 'kirk' => 'Captain' ] )
               ->withStyle( 'wp-kirk-common', [ 'wp-kirk-colors' ], '1.0' );

The file public/css/wp-kirk-common.css will be registered and enqueued when the view is displayed.

return WPKirk()->view( 'dashboard.index' )
               ->with( [ 'kirk' => 'Captain' ] )
               ->withScript( 'wp-kirk-common', [ 'wp-kirk-colors' ], '1.0' );

The file public/js/wp-kirk-common.js will be registered and enqueued when the view is displayed.

Of course, you can setup both styles and scripts:

return WPKirk()->view( 'dashboard.index' )
               ->with( [ 'kirk' => 'Captain' ] )
               ->withStyle( 'wp-kirk-common', [ 'wp-kirk-colors' ], '1.0' )
               ->withScript( 'wp-kirk-common', [ 'wp-kirk-colors' ], '1.0' );

Both files will be registered and enqueued when the view is displayed.

Inline Stile and Scripts

You may add inline style to your view by using the withInlineStyle() method.

return WPKirk()->view( 'dashboard.index' )
               ->withAdminStyle( 'wp-kirk-common' )
               ->withInlineStyle('wp-kirk-common', 'body { background-color: #f00; }');

You may add inline scripts to your view by using the withInlineScript() method.

return WPKirk()->view( 'dashboard.index' )
               ->with( [ 'kirk' => 'Captain' ] )
               ->withAdminScript( 'wp-kirk-common' )
               ->withInlineScript('wp-kirk-common', 'console.log("Hello, Captain!");');

$myData = [
  'name' => 'Captain',
  'rank' => 'Captain'
];
 
return WPKirk()->view( 'dashboard.index' )
               ->with( [ 'kirk' => 'Captain' ] )
               ->withAdminScript( 'wp-kirk-common' )
               ->withInlineScript('wp-kirk-common', 'const kirk = ' . json_encode( $myData ) . ';');

You may use the inline script to pass the Ajax URL and any nonce values from PHP to JavaScript.

return WPKirk()->view( 'dashboard.index' )
               ->with( [ 'kirk' => 'Captain' ] )
               ->withAdminScript( 'wp-kirk-common' )
               ->withInlineScript('wp-kirk-common', 'const ajaxUrl = "' . admin_url('admin-ajax.php') . '";');

Ajax URL and nonce values are very common in WordPress development. You can use the inline script to pass these values to your JavaScript.

return WPKirk()->view( 'dashboard.index' )
               ->with( [ 'kirk' => 'Captain' ] )
               ->withAdminScript( 'wp-kirk-common' )
               ->withInlineScript('wp-kirk-common', 'const ajaxUrl = "' . admin_url('admin-ajax.php') . '"; const nonce = "' . wp_create_nonce('wp-kirk-nonce') . '";');

In these cases you may use a global variable to access the values in your scripts.

$globalData = [
  'ajaxUrl' => admin_url('admin-ajax.php'),
  'nonce' => wp_create_nonce('wp-kirk-nonce')
];
 
$globalObject = 'wpKirkGlobal';
 
return WPKirk()->view( 'dashboard.index' )
               ->with( [ 'kirk' => 'Captain' ] )
               ->withAdminScript( 'wp-kirk-common' )
               ->withInlineScript('wp-kirk-common', 'const ' . $globalObject . ' = ' . json_encode( $globalData ) . ';');

(function($) {
  'use strict';
  
  // Post data to the server
  $.ajax({
    url: wpKirkGlobal.ajaxUrl,
    type: 'POST',
    data: {
      action: 'wp_kirk_action',
      nonce: wpKirkGlobal.nonce
    },
    success: function(response) {
      console.log(response);
    }
  });
})(jQuery);

Localize Scripts

You may localize your scripts by using the withLocalizeScript() method. For example:

$localization_data = array(
    'greeting' => __('Hello, World!', 'wp-kirk'),
    'farewell' => __('Goodbye, World!', 'wp-kirk'),
    'ajax_url' => admin_url('admin-ajax.php'),
);
 
return WPKirk()->view( 'dashboard.index' )
               ->with( [ 'kirk' => 'Captain' ] )
               ->withAdminScript( 'wp-kirk-common' )
               ->withLocalizeScript('wp-kirk-common', 'wpKirkGlobal', $localization_data);

As you know, you will be able to access the wpKirkGlobal variable in your scripts. For example:

wp-kirk-common.js

(function($) {
  'use strict';
  
  alert(wpKirkGlobal.greeting);
 
})(jQuery);

Fragment

A very useful feature of View is the ability to include another View. For example, you could use the following:

<h1>
  Main view in file "/views/main.php"
</h1>
<?php echo WPKirk()->view( 'fragment' ) ?>

In the above example, we are going to load the /view/fragment.php view into the main view. This feature is very useful for loops or dynamic parts of a view. Let’s show a more complete example:

<!-- this main view: echo WPKirk()->view( 'main' )->with( 'items', $items ) -->
<h1>
  Main view in file "/views/main.php"
</h1>
<?php echo WPKirk()->view( 'list-items' ) ?>

In the /views/list-items.php you will find:

<ul>
<?php foreach( $items as $item ) : ?>
  <li><?php echo $item ?></li>
<?php endforach; ?>
</ul>

Of course, if you have used a folder for your views, you will have to add it to the fragment.

<h1>
  Main view in file "/views/dasboard/index.php"
</h1>
<?php echo WPKirk()->view( 'dashboard.list-items' ) ?>

Content

Of course, you may get the content of a view and use it in several ways. For example, to send an email.

$content = WPKirk()->view( 'dashboard.list-items' )
                   ->toHTML();

$content = WPKirk()->view( 'dashboard.list-items' )
                   ->render( true );

Ajax

You may wish to return a view or a fragment of a view as a JSON return. In this case, you can use:

wp_send_json_success(
  [
    'feedback' => WPKirk()->view( 'tools.index' )->render()
  ]
);

The render method will verify if the call is by Ajax and it will return the processed HTML.

Learn more about the View class

Logging ReactJS Components