How to create page template?

I'd like to create page template so I can choose it under Page Attribute. Is this possible?

Thanks

Hey Rio,

Absolutely, you would create a file in your child theme and register your page template by adding /* Template Name: Sample Template */ on top of your file right after your opening PHP tag.

Then you can do some really heavy lifting like modifying lots of Beans stuff using the Beans HTML, add a slider, porfolio or what ever floats your boat (head of to Beans documentation to learn more).

Don't forget to always keep the beans_load_document(); at the bottom of the document or else you would have a white page.

Here is a sample page template file which you can just drop in your child theme root.

If you want to take it even further, you can even using the Beans Field API and register fields such as multiple images (see example here) only for that page template. So you can really have the backend related to the front end.

FYI: more info how to use page template with Beans in this article.

Thanks Thierry!

One more question, how to load specific page content into the page template?

What content would you like to display? By default, the paget editor content will be displayed.

I'd like to display a specific post content ( post id:2 ) right before ( above ) the document.

Is that possible ?

I am not sure what you mean by:

right before ( above ) the document.

Could you perhaps share a sketch (design) for it?

I hope this screenshot explains well : http://prntscr.com/adtmnv

Hey Rio,

Before you jump straight to the code example I pasted further down, I think what is important to understand is that you may really add anything anywhere on the page using actions. Pretty much all markup have dynamic action hooks firing around it as follow:

• {$markup_id}_before_markup, fires before the opening markup.
• {$markup_id}_prepend_markup, fires after the opening markup (not available for selfclosed markup).
• {$markup_id}_append_markup, fires before the closing markup (not available for selfclosed markup).
• {$markup_id}_after_markup, fires after the closing markup.

We have made it simple to find Markup IDs, you’ll need to first enable Beans development mode in your WordPress Admin->Appearance->Settings. Once the development mode is enabled, the Markup ID’s are outputed in a data-markup-id tag in the front-end, so you just have to inspect the page using your browser inspect and all markup ids will be displayed.

Let's look at an example. To add a post like on your sketch, you may use the beans_main_grid_before_markup action which will add it before the main grid opening HTML tag (this one). Below is an example of what your page template would be:

<?php
/* Template Name: Sample Template */

add_action( 'beans_main_grid_before_markup', 'example_teaser_post' );

function example_teaser_post() {

  global $post;

 // Stop here if the post couldn't be fetched.
  if ( !$post = get_post( 2 ) )
   return;

 // Setup post data.
    $post = $get_post;
 setup_postdata( $post );

  ?>
  <article class="uk-article uk-panel-box">
   <header>
      <h1 class="uk-article-title"><?php the_title(); ?></h1>
   </header>
   <div class="tm-article-content">
      <?php the_content(); ?>
   </div>
  </article>
  <?php

 wp_reset_postdata();

}

// Since we added a post above the grid, let's add a uk-grid-margin to the main grid to space it properly.
beans_add_attribute( 'beans_main_grid', 'class', 'uk-grid-margin' );

// Load the document which is always needed at the bottom of page templates.
beans_load_document();

Note that this would add a post ID 2 above the main grid. This is really an example and you may change the HTML to anything you want. It can even because very fancy using really cool UIkit components 🙂

Hope that helps,

Hey Rio,

I just want to check if my previous reply makes sense to you and if your were able to apply it to your page template?

Yes! it worked perfectly as I wanted.

Thanks!

Great stuff, I am glad to hear 🙂

Hi Thierry,

I am curious how to create page template just like beans front page. Does this code give me the same result?

Hi Pandhu,

The code you pointed to is just an example but it won't build your home page 🙂 A good topic to understand is how page templates work with Beans. In very short, you do all the modifications and then call beans_load_document() right at the end. Here is an example raw "Home" page template:

<?php
/* Template Name: Sample Home */

// Add hero after header.
add_action( 'beans_header_after_markup', 'example_hero' );

function example_hero() {

  ?>
  <div class="tm-hero uk-block-large">
    <div class="uk-container uk-container-center uk-text-center">
     <!-- Your hero content -->
    </div>
  </div>
  <?php

}

// Replace the main loop with my own section.
beans_modify_action_callback( 'beans_loop_template', 'example_content' );

function example_content() {

  ?>
  <section>
   <!-- Your section content pulling from backend -->
  </section>
  <hr class="uk-article-divider uk-margin-large" />
 <section>
   <!-- Your section content pulling from backend -->
  </section>
  <hr class="uk-article-divider uk-margin-large" />
 <section>
   <!-- Your section content pulling from backend -->
  </section>
  <?php

}

// Load the document which is always needed at the bottom of template files.
beans_load_document();

It adds a hero below the header and replace the main content with the example_content() callback function.

Once you understand Beans/WP Actions and Beans HTML API, you can really modify, add or remove anything on the page.

When it comes to organizing your content in the backend, you can choose to go with a fields plugin such as Advanced Custom Fields or use Beans Fields API (less advanced at this stage but we will be considerably improving it in Beans 1.4.0).

Hope that helps,

Hi Thierry,

Thanks for your code. After struggling to understand your code, at last i could make my own front page without help from page builder plugin (as a wordpress beginner I took a shortcut to create a front page, hehehe). Here is my front page template, I want a suggestion how to make the code more efficient. I also use your suggestion to use custom field. Regarding the custom field, I tried to place the code at page template but it did not work, I only work if I place at functions.php. Does it work only at functions.php?

There are still few thing that I don't get. As you see the front page, you'll see that one of the navigation background is grey. It happened after I click it to open another page. I had tried to modify the css but did not find how to make it transparent. Here is what I do with the style.less. The other one about the front page is the tm-main.uk-block. If you see the less file you'll see that I try to make .home.main.tm-main.uk-block background white. But it don't work. The class of the body is home.

My next issue is the blog page. As you see, I use color #BD007B to style the whole site. It almost works perfectly. I could not make the date color change. And if you see the single post it's not only the date but also the next and previous button. The button still use the uk-button-primary style.

Last but not least, I read that uikit has toggle button that can hide and show component. Can you tell me how if I want to change the off-canvas menu with a toggle menu? I think it will be great if I can do it. Or I should make a new discussion topic according to the toggle menu question?

Thanks,

Pandhu

Hey Pandhu,

Great job on keeping your code nice and clean!

Yes you have to register Beans Fields in functions.php or even better but not necessary, in a file which is included from funtions.php but wrapped in a if ( is_admin() ) statement to improve performance (fields registration is only needed on the admin).

Regarding the nav background, I think your are referring to the :hover and uk-active. You can indeed overwrite UIkit CSS but an even better approach is to use UIkit variables (requires UIkit minimum understanding). UIkit is plenty of useful variables which you can use to modify the values instead of adding CSS to overwrite it. For example in your case, you could add the following to your child theme style.less

@navbar-nav-hover-background: transparent;
@navbar-nav-active-background: transparent;

When it comes to your primary color, again the is a super useful global LESS variable in the default UIkit theme (which Beans loads by default). Below is how you can apply it to your entire website:

@global-link-color: #BD007B;
@global-link-hover-color: #BD007B;
@global-primary-background: #BD007B;
@button-primary-active-background: #BD007B; /* Temporary fix. */

To find variables, you should first look in UIkit default theme in Beans Theme lib/api/uikit/src/theme/default and UIkit itself in lib/api/uikit/src/theme/src/less.

For your .home.main.tm-main.uk-block, it should be .home .tm-main.uk-block. Kindly read up on CSS selectors for more info to understand CSS basics which is not specific to Beans.

Yes please post a new thread regarding your toggling question, and more details about what you want to achieve.

Thanks,