✨ v1.9.0 Released - Review the release notes →
DocumentationCore ClassesView

View Class

This document explains the View class in WP Bones, responsible for rendering views. It shows how to access the View class instance from the Plugin class using the WPKirk()->view() method. The document details the render() method, which retrieves the view content, either as a string or directly rendered. It also highlights the ability to use views as fragments within other views, enhancing flexibility in view management.

Overview

The View class is responsible for rendering the views in WP Bones

Accessing the View Class

Usually you will get the instance of the View class from the Plugin Class. Here is an example of how to get the instance of the View class:

Your Controller
$view = WPKirk()->view( 'dashboard.index' );

Methods

render

/**
 * Get the view content.
 *
 * @param bool $asHTML Optional. Set to TRUE to get the content of view as string/html.
 * @return mixed
 */
public function render($asHTML = false)

The render method retrieves the content of the view. It can return the content as a string if the $asHTML parameter is set to true. This method handles the inclusion of scripts and styles depending on whether the view is rendered in the admin area or the theme.

Example:

$content = $view->render(true); // Get the view content as HTML

Usually you won’t use the render() method directly. Anyway, it could be useful if you want to get the view content as a string.

Your Controller
$html = WPKirk()->view( 'dashboard.index' )->render(true);

See also the toHTML() method.

💡

You can get the view by using echo directly in the controller. Here is an example of how to get the view content using echo:

Your Controller
echo WPKirk()->view( 'dashboard.index' );

Fragment

Remember that you can get any view in anytime. That’s useful for the fragment concept. You can get a view and use it in another view.

Your Controller
$fragment = WPKirk()->view( 'dashboard.fragment' )->render();
return WPKirk()->view( 'dashboard.index' )
               ->with( [ 'fragment' => $fragment ] );

Or inside your view directly

resources/views/dashboard/index.php
<div class="my-class">
    <h1>Hello, the main Dashboard view</h1>
    <?php echo WPKirk()->view( 'dashboard.fragment' )->render(); ?>
</div>

toHTML

/**
 * Return the content of view.
 *
 * @return string
 */
public function toHTML(): string

The toHTML method returns the rendered view content as a string. It is useful when you need to capture the output of a view for further processing or output.

Example:

$htmlContent = $view->toHTML(); // Get the view content as a string

with

/**
 * Data to pass to the view.
 *
 * @param mixed $data Array or single data.
 * @return $this
 * @example $instance->with(['foo' => 'bar'])
 * @example $instance->with('foo', 'bar')
 */
public function with($data): View

The with method allows you to pass data to the view. You can pass an associative array or individual key-value pairs.

Example:

$view->with(['title' => 'My Page'])->render();
Your Controller
return WPKirk()->view( 'dashboard.index' )
               ->with( 'kirk', 'Class' );

A variable named $kirk will be inject and available in the view file.

resources/views/dashboard/index.php
<div class="my-class">
    <h1>Hello, the main Dashboard view</h1>
     <?php echo $kirk; /* you will see Captain */ ?>
</div>

You may also pass an array of data to the view:

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

with multiple variables:

Your Controller
return WPKirk()->view( 'dashboard.index' )
               ->with( [ 'kirk' => 'Captain', 'spock' => 'Commander' ] );

withAdminAppsScript

/**
 * Load new Javascript (React bundle) resource in admin area.
 *
 * @param string $name Script handle the data will be attached to.
 * @param bool $module Optional. There is a module css.
 * @param string $variable Optional. Name for the JavaScript object
 * @param array $data Optional. The data itself. The data can be either a single or multi-dimensional array.
 * @return $this
 */
public function withAdminAppsScript($name, $module = true, $variable = '', $data = []): View

The withAdminAppsScript method enqueues a JavaScript resource in the admin area, typically used for React bundles. It can also localize scripts with additional data.

Example:

$view->withAdminAppsScript('my-react-app', true, 'MyAppData', ['key' => 'value']);

withAdminScript

/**
 * Load a new Javascript resource in admin area.
 *
 * @param string $name Name of script.
 * @param array $deps Optional. Array of slug deps
 * @param array $ver Optional. Version.
 * @return $this
 */
public function withAdminScript($name, $deps = [], $ver = []): View

The withAdminScript method enqueues a JavaScript file in the admin area, allowing for dependencies and versioning.

Example:

$view->withAdminScript('admin-script', ['jquery'], '1.0.0');
Your Controller
return WPKirk()->view( 'dashboard.index' )
               ->withAdminScript( 'wp-kirk-common' );

The file public/js/wp-kirk-common.js will be loaded in the admin area.

withAdminStyle

/**
 * Load a new css resource in admin area.
 *
 * @param string $name Name of style.
 * @param array $deps Optional. Array of slug deps
 * @param array $ver Optional. Version.
 * @return $this
 */
public function withAdminStyle($name, $deps = [], $ver = []): View

The withAdminStyle method enqueues a CSS file in the admin area, allowing for dependencies and versioning.

Example:

$view->withAdminStyle('admin-style', [], '1.0.0');
Your Controller
return WPKirk()->view( 'dashboard.index' )
               ->withAdminStyle( 'wp-kirk-common' );

The file public/css/wp-kirk-common.css will be loaded in the admin area.

withInlineScript

/**
 * Adds extra code to a registered script.
 *
 * @param string $name Name of the script will be attached to.
 * @param string $data String containing the JavaScript to be added.
 * @param string $position Optional. Whether to add the inline script before the handle or after. Default 'after'.
 * @return $this
 */
public function withInlineScript($name, $data, $position = 'after'): View

The withInlineScript method adds inline JavaScript to a registered script, allowing for additional logic or configuration.

Example:

$view->withInlineScript('my-script', 'console.log("Hello World");');
Your Controller
return WPKirk()->view( 'dashboard.index' )
               ->withAdminScript( 'wp-kirk-common' )
               ->withInlineScript('wp-kirk-common', 'console.log("Hello, Captain!");');

withInlineStyle

/**
 * Adds extra style to a registered style.
 *
 * @param string $name Name of the script will be attached to.
 * @param string $data String containing the JavaScript to be added.
 * @return $this
 */
public function withInlineStyle($name, $data): View

The withInlineStyle method adds inline CSS to a registered style, allowing for additional styling directly within the HTML.

Example:

$view->withInlineStyle('my-style', 'body { background-color: #f0f0f0; }');
Your Controller
return WPKirk()->view( 'dashboard.index' )
               ->withAdminStyle( 'wp-kirk-common' )
               ->withInlineStyle('wp-kirk-common', 'body { background-color: #ff0000; }');

withLocalizeScript

/**
 * Adds a new Localizes a script.
 *
 * @param string $handle Script handle the data will be attached to.
 * @param string $name Name for the JavaScript object
 * @param array $l10n The data itself. The data can be either a single or multi-dimensional array.
 * @return $this
 */
public function withLocalizeScript($handle, $name, $l10n): View

The withLocalizeScript method localizes a script by attaching PHP data to a JavaScript object, making it available in the script.

Example:

$view->withLocalizeScript('my-script', 'MyData', ['key' => 'value']);
Your Controller
$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);

withScript

/**
 * Load a new css resource in theme.
 *
 * @param string $name Name of script.
 * @param array $deps Optional. Array of slug deps
 * @param array $ver Optional. Version.
 * @return $this
 */
public function withScript($name, $deps = [], $ver = []): View

The withScript method enqueues a JavaScript file in the theme, allowing for dependencies and versioning.

Example:

$view->withScript('theme-script', ['jquery'], '1.0.0');

withStyle

/**
 * Load a new css resource in theme.
 *
 * @param string $name Name of style.
 * @param array $deps Optional. Array of slug deps
 * @param array $ver Optional. Version.
 * @return $this
 */
public function withStyle($name, $deps = [], $ver = []): View

The withStyle method enqueues a CSS file in the theme, allowing for dependencies and versioning.

Example:

$view->withStyle('theme-style', [], '1.0.0');
PluginOverview
WP Bones

WP Bones is a lightweight framework that offers tools and guidelines to simplify WordPress plugin development. Bones aims to allow you to write plugins in a manner similar to developing a Laravel framework application.

HIGHLIGHTS
Release Notes
Getting Started
Internationalization
Core Classes
Core Plugin Files
FAQs
Routing
Blade Templates
Bones Console
Database
Eloquent ORM
RESOURCES
WP Bones Demo in action
Raycast Extension
New
Forum
Discussions
Roadmap
New
WP Bones News
WP Bones AI
WordPress Developer Resources
ReactJS Mantine UI Extensions
ECOSYSTEM
WP Bones Repository
WP Bones Plugin Boilerplate
Custom Post Boilerplate
New
WP Bones Website Docs
Actions & Filters for Javascript
Flags
Geolocalizer
Morris PHP
Pure CSS Tabs
Pure CSS Switch
User Agent
WP Tables

Made with ❤️ by Undolog

Hosted on Vercel

Built with Next.js, MantineandNextraNextra