Skip to main content

View

Templating

View

Laravel Blade templates in WordPress.

Introduction​

Websites reuse a lot of UI elements in many different places and contexts. Templates.

Although WordPress has templates and template parts these are based on blocks whereas views are PHP and serverside rendered.

What is a view?​

A view is a template for server side rendering.

Views can be big or small, for full page layouts or for single components. Views can also be used inside other views.

Views are written in the Blade templating language.

Getting started​

Installation​

Make sure the package is installed and set up.

composer require morningmedley/view

Creating views​

Each view is a file that ends with .blade.php.

Most views are located in your projects main view directory which is usually /resources/views/.

tip

Views can be made through the CLI: wp artisan make:view my-new-view

Using the Cli​

You can also create a new view by using the command line.

wp medley make:view <view-name>

This creates a new <view-name>.blade.php file within the views directory.

This also accepts paths in either slash or dot notation:

// Both of these will create a views/footer/socials.blade.php file
wp medley make:view footer/socials
wp medley make:view footer.socials
note

Views are currently being created at the first path within your view.paths as define in your config.

Rendering views​

The simplest way of rendering a view is using the view() helper function. This makes and returns the view instance.

echo view('template',$args);

Directives ( @functions )​

A directive is a function you can use inside a Blade template! They look like this:

template.blade.php
<div>
  @auth
    Hello {$userName}
  @elseauth
    Please log in
  @endauth
</div>

@auth​

Just as you can in Laravel you can render conditionally depending on whether a user is logged in, or has a given capability, or not.

view.blade.php
@auth
    // Only rendered if a user is logged in
    <p>
        Hello {{wp_get_current_user()->display_name}}
    </p>
@else
    // Renders if no user is logged in
    <a>Login</a>
@endauth

Or checking for a specific role or capability:

view.blade.php
@auth('administrator')
    <p>Hello {{wp_get_current_user()->display_name}} Administrator</p>
@endauth

@shortcode​

This shortcode renders and outputs a given shortcode.

view.blade.php
@shortcode('[gallery]')

@enqueueScript​

This wraps wp_enqueue_script and is useful for managing script dependencies for a given view. Especially with scripts that are already registered with WordPress.

view.blade.php
// This will enqueue a script with the handle "accordion"
// that is registered with "wp_register_script" elsewhere.

@enqueueScript('accordion')
<aside class="accordion">
  <h2>Some title</h2>
  <p>
    Some content
  </p>
</aside>

@enqueueStyle​

This wraps wp_enqueue_style and is useful for managing stylesheet dependencies for a given view. Especially with stylesheets that are already registered with WordPress.

This works the exact same way as @enqueueScript above.

view.blade.php
@enqueueStyle('card')
<aside class="card">
    Some content
</aside>

Using config files​

Additional paths​

To add more directories for View to look in or to change the default one. Simply extend or replace the view.paths config array.

The values here can be either absolute paths or paths relative to the application root.

config/view.php
<?php

return [
    'paths' => __DIR__ . "/other-view-path"
];

or, using the config() function:

use function MorningMedley\Functions\config;

config()->push('view.paths', __DIR__ . "/more-views");

Namespaces​

A namespace is a named location for views. These views can be accessed by prefixing the view name with the namespace and ::.

So for a namespace called foo and a view called bar the view would be rendered like this: view('foo::bar');

A namespace can be registered either through the config or dynamically.

Adding a namespace through the config​

config/view.php
<?php

return [
    'namespaces' => ['foo', __DIR__ . "/views"],
];

Adding a namespace through code​

use function MorningMedley\Functions\view;

// Using the facade
\Illuminate\Support\Facades\View::addNamespace('test', dirname(__FILE__,2) . "/test");

// Using the app()
app('view')->addNamespace('test', dirname(__FILE__,2) . "/test");

echo view('test::test');