Header, Footer and Reusable content

I have been playing with the Beans framework and I'm loving it! I do have a doubt, what are the best practices to modify resusable content (Header, Footer, Sidebars, etc)? Should I use Actions or create new templates or something else? I am reading the documentation but I have to admit I am a bit lost..

I have coded a homepage using html and ui kit and now I would like to pass the design to WordPress using Beans framework. By instance, I would like to change the child theme header a have three columns, like this:

<div class="uk-grid">
    <div class="uk-width-1-3">...</div>
    <div class="uk-width-1-3">...</div>
    <div class="uk-width-1-3">...</div>
</div>

What you guys suggest to acomplish this?

It's really depends on what you want to acomplish 🙂

First, you have to understand how Beans works. Best way to start with changing html is read this article and also this.

(I have to admin that I asked similar question when use Beans for the first time. Now i see how powerful and easy to learn Beans is).

For example, here's steps to add code you written above inside header tag:

1. Enable Developement mode (WordPress Admin->Appearance->Settings).
2. Look into developer tools when load your site (CTRL+SHIFT+C or F12).

3. In HTML view find tag, for instance for header it looks like this:

   <header class="tm-header-home " role="banner" itemscope="itemscope" itemtype="http://schema.org/WPHeader" data-markup-id="beans_header">

   What you are looking for is data-markup-id, which in this case is beans_header.

4. If you want to add content inside header you have to:

   4.1. Add an action to function.php file like this:

   add_action( 'beans_header_prepend_markup', 'add_header_grid' );

   First argument is beans_header so data-markup-id you found, and after it is hook which tells Beans where you want to add content. Prepend means, that your content will show right after opening header tag (i.e. inside header tag)

here's list of hooks you can use (from article i linked above)

• {$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.

add_header_grid is name of function that you fire later (see below)

4.2 Call a function that add content:

function add_header_grid() {
    ?>
    <div class="uk-grid uk-grid-width-1-3>
      <div>...</div>
        <div>...</div>
        <div>...</div>
    </div>
    <?php
}

uk-grid-width-1-3 class after uk-grid will create evenly split grid to child elements -> http://getuikit.com/docs/grid.html

Note, that there are closing and opening tag for php. If you want to use php instead, code would looks like this:

function add_header_grid() {
    echo beans_open_markup( 'your_markup_id', 'div',  array( 'class' => 'uk-grid uk-grid-width-1-3' ) );

        echo beans_open_markup( 'div_1_id', 'div' );
        echo beans_close_markup( 'div_1_id', 'div' );

        echo beans_open_markup( 'div_2_id', 'div' );
        echo beans_close_markup( 'div_2_id', 'div' );

        echo beans_open_markup( 'div_3_id', 'div' );
        echo beans_close_markup( 'div_3_id', 'div' );

    echo beans_close_markup( 'your_markup_id', 'div' );
}

Note that this method adds data-markup-id to each element.

Using beans actions you can also remove markup like this:

beans_remove_markup( 'beans_header' );

Change markup:

beans_modify_markup( 'beans_header', 'div' ); // This will change html tag header to div

Replace or add attributes

beans_replace_attribute( 'beans_header', 'class', 'tm-header', 'uk-grid'); // which will replace .tm-header class to .uk-grid

beans_add_attribute( 'beans_header', 'class', 'uk-grid'); // which will add class to header, without removing tm-header

And many more... 🙂

Hi guys,

I would like to add something. Beans framework is made out of fragments (functions) which are attached to hooks using actions but you can also call the fragments functions straight into your HTML (see how Beans work in this article).

As you can see in the article, the root of all elements rendered on the page is done in /lib/render/template-parts.php. That fires when beans_load_document() is called and starts rendering the structure HTML and hooks "tree" situated in /lib/templates/structure/. Then the fragments in /lib/templates/fragments/ are attached to the structural HTML and hooks finishing the "tree".

Note that all the fragments (functions) in /lib/templates/fragments/ are template functions and while they are attached to hooks using actions, you can call them in your HTML if needed 🙂

That is a lot of information to take at once and if you don't understand it 100%, don't sweat it, it will come over time as you build with Beans. The best is to use real case so feel free to share your code and ask if there is a better way to do it, it is the best way to learn 🙂

Happy coding,

Thank you @Mariusz and @thierry this is my code (it seems to be working, however I would like your feedback please).

/*
 * Add grid columns to header
 */
add_action( 'beans_header_prepend_markup', 'add_header_grid' );
function add_header_grid() {

  echo '
 <div class="uk-grid uk-container uk-container-center">
        <div class="uk-width-1-2"> Hola </div>
        <div class="uk-width-1-2"> Mundo </div>
    </div>';

}

Hey Euclides, I would advise to close and re-open PHP when writting HTML (unless it is justified to do otherwise). Your snippet would look as such:

/*
 * Add grid columns to header
 */
add_action( 'beans_header_prepend_markup', 'add_header_grid' );

function add_header_grid() {

  ?>
  <div class="uk-grid uk-container uk-container-center">
        <div class="uk-width-1-2"> Hola </div>
        <div class="uk-width-1-2"> Mundo </div>
    </div>
    <?php

}

Great work!

Thanks @thierrry, the only thing I dont understand is why do you have the closing php tag at the top and the opening one at the bottom?

Hey Euclides,

See that way, we are already writing in PHP then we want to add HTML so we say "please close PHP for now so that I can add HTML", then we add our HTML and say "cool I am done with HTML, now re-open PHP please".

Does that make sense?

Yes. Thank you very much!