builder


As seen on this site, designed and developed with the awesome Builder theme from iThemes, the header and footer stretch the entire width of the screen. Since Builder creates a fixed width container for your layout (based on the layout width you have selected), we need to do a little bit of extra work to achieve this.

This article will outline how to:

Builder WordPress theme

Hooks, Filters and Actions in Builder

In the Builder core code, there are several socalled “hooks” that you can “hook into” to add your desired code, functionality, or alter the existing functionality. This works in the very same way as it does in WordPress, you can find more information in the WordPress codex.

Basically, you can use a hook to execute a function at a certain “moment” during the theme’s rendering process. Some are obvious, some may be less obvious, but it will allow users to have full control over the entire rendering process of their site.

Add a full width header to Builder

The assumption is that you are using a child theme with Builder, which is really the only and best way to develop sites with Builder, since it allows you to upgrade the core Builder engine without losing any changes or additions you have made to the theme. This example is based on the Default Child theme.

To hook into the Builder code so that you can insert your own header before the Builder container is generated, we will use the builder_layout_engine_render_container hook.

To insert your own code, you will need to define a function, in this example, it is called add_custom_header, but it could be anything you fancy, as long as you make sure that there is no conflict with ANY other function, generated by the theme, or plugins you use. Function names have to be unique throughout the entire WordPress site. Add the following code to your functions.php file, to add the add_custom_header function.

Download a zip file with a sample functions.php file: Custom functions.php (431)

add_action('builder_layout_engine_render_container', 'add_custom_header', 0 );
function add_custom_header() { ?>

<div id='my_custom_header' class='custom_stuff'>
    
    <div class="alignleft">
        <p class="custom_name"><?php bloginfo('name'); ?></p>
        <p class="custom_description"><?php bloginfo('description'); ?></p>
    </div>

    <div class="alignright">
        <p>Some additional blurbs</p>
    </div>

    <div style="clear:both;"></div>

</div>

<?php }

You can then style the my_custom_header div container, and it’s components, as explained in the paragraph on CSS below:

Add a full width footer to Builder

To add your own footer, there is another Builder hook, builder_finish, you can use. Add the following code to your functions.php file, to add the add_custom_footer function. This function will simply insert the default footer code (from your Builder footer.php, or, if there is one, from your child theme’s footer.php). You can of course replace the render_footer function with your own code, similar to the code in the custom header described above.

The footer will be contained in a separate div container, to allow for targeted CSS code for that specific area.

Note: in the layout editor for Builder, make sure that you do not include a footer module, otherwise you will end up with two footers.

add_action('builder_finish', 'add_custom_footer', 0 );
function add_custom_footer() { ?>

<div id='my_custom_footer' class='custom_footer'>
    <?php render_footer(); ?>
</div>

<?php }

Add the CSS for the custom header and footer

The following sample CSS code will add the required markup for the header and footer sections. You can add this code to your child theme’s stylesheet, style.css. Note that I use a background image for the header and footer, but that is optional. If you do want to use a background image, upload the file to the child themes’ images folder. You can view and download the one I am using here.

/*********************************************
	Header / Footer
*********************************************/

#my_custom_header,
#my_custom_footer {
    clear: left;
    display: block;
    padding: 0px 15px 0px 0px;
    color: #ddd;
    font-family: Trebuchet MS, Verdana, Arial, Georgia;
    background-image: url('images/header_gradient.jpg');
}

#my_custom_header {
     height: 150px;
}

#my_custom_header .custom_name {
    padding: 10px 0px 0px 50px;
    font-size:28px;
}

#my_custom_header .custom_description {
    padding: 0px 0px 0px 50px;
    font-size: 18px;
    font-style: italic;
}

#my_custom_footer {
    height: 100px;
    padding: 30px 20px 0px 20px;
    color: #ccc;
}

#my_custom_footer p {
    color: #888;
}

#my_custom_footer a {
    color: #888;
}

#my_custom_footer a:hover {
    color: #fff;
}

This should be all to get you started, feel free to leave a comment, and let me know if there are any issues with the code.