JaggyGauran

Freelance developer, and designer

Using Blade in Wordpress

I've been working with wordpress for a while and got uncomfortable with the clutter in code. With all the get_header() and get_footer() and, cutting off the start of your container within the header and closing it in the footer, the obsessive-compulsive side of me really couldn't take it.

To make it somewhat bearable, I introduce to you Wordpress Blade. As most of you know, Blade is a Laravel templating engine which provides a cleaner and more readable view pages for developers.

It's is to provide a little more flexibility with the structure of your Wordpress project.

Vanilla

header.php

<html>
    <head>...</head>
    <body>
        <div id="container">

footer.php

        </div>
    </body>
</html>

page-home.php

/**
 + Template Name: Home
 */
<?php get_header(); ?>
    <h1>Home Page</h1>
<?php get_footer(); ?>

This may work for everyone but maintenance wise, this may end up being a huge headache.

With Blade

layouts/master.php

<html>
    <head>...</head>
    <body>
        <div id="container">
            @yield( 'content' )
        </div>
     </body>
</html>

page-home.php

@layout( 'layouts.master' )

{{-- Template Name: Home --}}

@section( 'content' )
    <h1>Home Page</h1>
@endsection

Everything in between the @section( 'content ) and @endsection is thrown into the @yield( 'content' ) area. This provides a more dynamic layout wherein you can throw your inline javascript (which I highly do not recommend) at the bottom of the page.

You can also use this to set a varying banner, slider or header on certain pages rather than finding out the page template name and using countless if-elses

Helpers

Vanilla

<?php $query = new WP_Query( array( 'post_type' => 'post' ) ); ?>
<?php if ( $query->have_posts() ) : ?>
    <?php while ( $query->have_posts() ) : $query->the_post(); ?>
        <a href="<?php the_permalink() ?>"> <?php the_title() ?> </a>
    <?php endwhile; ?>
<?php else : ?>
    <?php echo 'Sorry, no posts matched your criteria.' ?>
<?php endif; wp_reset_postdata(); ?>

Blade

@wpquery( array( 'post_type' => 'post' ) )
    <a href="{{ the_permalink() }}">{{ the_title() }}</a>
@wpempty
    {{ 'Sorry, no posts matched your criteria.' }}
@wpend

There are many other features available for the plugin such as @if, @foreach, @forelse and, the one I love the most, @include. All of which are default with Blade. [ NOTE: We're using **Laravel 3**'s Blade which has a ***waaaaaay* different syntax** with the later versions ]

We've also added an Advanced Custom Field Repeater helper to make life a bit easier in fetching fields and subfields.

You can read the documentation in the Github page. Also, if you want certain features or you've seen a bug, feel free to send an issue or request. Thanks.

Note

Any changes made might appear on the second page load. The first load will detect any template changes and cache them into the plugin.

Also, make sure that your plugin/blade/storage/views have write permissions.