Creating Footers and Page Layouts

Hey everyone, I'm just starting to understand Beans as a theme and a framework.

I would love to know how to recreate the elements that are on the Totem Typography page and also, how do I create footer widgets (like the ones we see on this site)?

Thanks in advance.


For the widget, you could register your own widget then use a Beans hook. This is what I did to put my own widget on the right side of the footer:

if ( function_exists('register_sidebar') )
        'name'          => 'Footer Widget (right)',
        'id'            => 'rn-footer-right',
        'before_widget' => '<div class="rn-footer-right">',
        'after_widget'  => '</div>',
        'before_title'  => '<h3>',
        'after_title'   => '</h3>',

add_filter( 'beans_footer_credit_right_text_output', 'rn_footer_right' );

function rn_footer_right() {

    if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Footer Widget (right)") ) :


Beans apparently has its own way of doing widgets but I've honestly not experimented with it yet.

Hello @mikecottam,

This is how I have created a footer widget in my theme, using Beans API. First, I have registered my widget by adding these lines in functions.php.

//* Add Bottom widgets.
add_action( 'widgets_init', 'mythemeprefix_widget_area' );
function mythemeprefix_widget_area() {

    beans_register_widget_area( array(
        'name' => 'Bottom',
        'id' => 'bottom',
        'description' => 'Widgets in this area will be shown in the bottom section as a grid.',
        'beans_type' => 'grid'
        ) );


Then, I have "hooked" this widget in the footer of my website using the beans_footer markup.

//* Display Bottom Widgets Area.
add_action( 'beans_footer_prepend_markup', 'mythemeprefix_widget_section', 15 );
function mythemeprefix_widget_section () {

  // Stop here if no widget
  if( !beans_is_active_widget_area( 'bottom' ) )


      <div class="tm-prefooter uk-block">
        <div class="uk-container uk-container-center">
          <?php echo beans_widget_area( 'bottom' );  ?>



Et voilà !

Hope it helps.


Write a reply

Login or register to write a reply, it's free!