Roots Discourse

Basic blade template usage

Still learning the sage 9 blade template setup and correct usage.

If I have the following in my app.blade.php file:

<main class="col-lg-8...
<aside class="col-lg-4...

and I want a different column layout (for example, col-lg-12, no aside),

(question) would I need to copy app.blade.php, modify it, and then extend it in my new WordPress template (or simply copy it all into the template)?

(trying to stay DRY)

app is the base for your html/php - you can change html markup whatever suits your needs there :slight_smile:

app includes code from other places, you should not duplicate this file but spend some time investigating how wordpress is structured and how it actually works

app.blade.php is good starting point - read code and search for the functions and find out why, what and when they are executed in WP

I’m still not folloiwng.

I’m talking about a WordPress custom page template that you select from the dropdown in the admin page editor. The kind that has this comment (for example):

<?php
/**
* Template Name: Full Width Page

All the blade templates are currently extending app.blade.php, which in my example is currently set up as a 2-column layout with main content and aside.

I’m wondering what’s the best practice if I want to retain that and also have a custom WordPress template that for example does not have an aside.

Best practice is kind of going to be whatever best fits your use case. Your initial idea (copy app.blade.php and change the classes) will work, but then you have to maintain two layout-level views, which seems less than ideal. If you structure your app.blade.php so that it’s all includes pulling content is from elsewhere, duplication here wouldn’t be too bad, though.

@extend works for any blade that has a section you can put content into (not just things in layouts). So you could, for instance, create another blade that extends app and contains just the main and aside, and then another similar blade that contains just main, or whatever other setup you want, and then extend those for the rest of your blades (instead of app). That’s a bit more work up front, because you’d need to replace existing @extends('layouts.app') calls.

1 Like

I just had this exact issue.

What I settled on was extending the display_sidebar filter to check for custom templates where sidebars should not appear. This is nice because it leverages the built-in Sage 9 sidebar function.

// in wp-content/themes/iiba/app/filters.php

add_filter('sage/display_sidebar', function ($display) {
  static $display;

  isset($display) || $display =
  // The sidebar will be displayed if any one of the following return true
  in_array(true, [
    is_page(),
    is_search(),
    is_singular('post'),
  ]) &&
  // & none of there templates is true
  !in_array( basename( get_page_template() ), array(
    "template-landing.blade.php",
    "template-fullwidth.blade.php"
  ) );

  return $display;
});

I could not figure out how call the display_sidebar function from inside the Controller, however, so I ended up making two new public functions in the Controller:

// in wp-content/themes/iiba/app/Controllers/App.php

  /**
   * Zurb Foundation classes if sidebar
   **/
  public function sidebarCss()
  {
    return 'small-12 medium-8 large-7 large-offset-1';
  }

  /**
   * Classes if no sidebar
   **/
  public function noSidebarCss()
  {
    if (is_front_page()) {
      return 'small-12';
    } else {
      return 'small-12 large-11 large-offset-1';
    }
  }

Then in my templates I can have conditional classes like thus:

@php $sidebar = App\display_sidebar() @endphp
<div class="post-content cell {!! $sidebar ? $sidebar_css : $no_sidebar_css !!}">

This is the driest I could make it. If I could call display_sidebar in the Controller I could have just one sidebar CSS function and one variable in the templates, but for some reason it doesn’t work.

1 Like

I was trying to think of something like this, but would not have been able to figure that out on my own. Thanks!

This is working great, but I’m plagued by warnings when going to pages from other plugins:

Notice: Undefined variable: sidebar_css in ...

Trying to figure out the best way to fix it.

I added is_bbpress(), into isset($display) || $display = in_array(true, [...

That fixed it some, but I’m not sure what’s going on.

The page is displaying normally below the large warning for the undefined variable.

The only way $sidebar_css could be undefined is if you didn’t add the app/Controllers/App.php functions I listed, or if you added some conditionals to those functions that result in nothing returned. Public functions in App.php will available to all templates as variables. It would have nothing to do with the display_sidebar logic, the variable would be present whether the sidebar is displayed or not. See the Sober Controller documentation for details.

What do you have in your public function sidebarCss() ?

You can add @debug to a template to dump out all available variables.

/**
 * Bootstrap classes if sidebar
 **/
public function sidebarCss()
{
    return 'col-lg-8';
}


/**
 * Classes if no sidebar
 **/
public function noSidebarCss()
{
    if (is_front_page()) {
    return 'small-12';
    } else {
    return 'col-lg-8 offset-lg-2';
    }
}

The problem is with bbpress.

I had to add this bbpress.php file to make bbpress work within sage:

<?php


echo App\Template('page');

The main bbpress page works correctly, but if I go to any subpages within bbpress, I get the variable warning.


Solution:

It wasn’t injecting data from the App controller to the Page template for bbpress.

Below is the solution, pass the data to the template.

<?php

echo App\template('page', $__data);

Thank you Roots forums!!!

A few months ago I created a composer package to work with bbpress using blade templates. Check it out:

1 Like