Using page templates

WordPress has a number of layout specific page templates, which allow you to customize the layout via your theme.

In Beans, overwriting page templates isn’t typically necessary since it can be done directly in the child theme functions.php. However, it doesn’t mean that page templates files are useless.

Instead, use them to conditionally load modifications related to a specific layout. It will reduce the memory usage since the file only loads on the specific layout and will keep your functions.php file nice and tidy. You can also use it to load assets for a specific layout.

Example

Let’s assume you want to add a title below the header, prepend a description to the content div and remove the post image only on the home page. Here is how it would look if it was done in your functions.php file.

add_action( 'beans_header_after_markup', 'beans_child_home_add_title' );

function beans_child_home_add_title() {

    // Only apply to home page.
    if ( is_home() ) {
  
    ?>
    <div class="uk-container uk-container-center">
      <h1>Added Title</h1>
    </div>
    <?php
 
  }

}


add_action( 'beans_content_prepend_markup', 'beans_child_home_add_description' );

function beans_child_home_add_description() {

    // Only apply to home page.
    if ( is_home() ) {
     ?><p>Added description</p><?php
 }

}


add_action( 'wp', 'beans_child_home_remove_post_image' );

function beans_child_home_remove_post_image() {

    // Only apply to home page.
    if ( is_home() ) {
   beans_remove_action( 'beans_post_image' );
  }

}

Since many modifications are applied to the home page in this case, it is better to do it via a template file.

First, you'll need to create a new file called home.php and save it in the root of your child theme. By using the home page template, you no longer need to do the conditional check which simplifys your code. As mentioned above, it also reduces the memory usage as these code only load on the home page and helps you to keep your functions.php file tidy.

add_action( 'beans_header_after_markup', 'beans_child_view_add_title' );

function beans_child_view_add_title() {

  ?>
  <div class="uk-container uk-container-center">
    <h1>Added Title</h1>
  </div>
  <?php

}


add_action( 'beans_content_prepend_markup', 'beans_child_view_add_description' );

function beans_child_view_add_description() {

  ?><p>Added description</p><?php

}

// Remove post image.
beans_remove_action( 'beans_post_image' );

// Load Beans document.
beans_load_document();

When using page templates, it is very important to load the beans_load_document() last as it is what loads the page. A blank page will be displayed if your page template does not include this.