Both the layout of this site, as well as Builder has evolved (one way or another) and I do not recommend the methods described in this article. For general information, it may be useful, but there are better and easier ways to accomplish the same.

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: [download id=”4″] [php] 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 class="alignright">
<p>Some additional blurbs</p>

<div style="clear:both;"></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.

[php] function add_custom_footer() {

<div id="my_custom_footer" class="custom_footer">
<?php do_action( ‘builder_layout_engine_render_footer’ ); ?>

add_action( ‘builder_finish’, ‘add_custom_footer’, 0 );

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.

[css] /*********************************************
Header / Footer

#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;

#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.


  1. Hugh

    Hi Ronald

    Thanks for this.

    Your instructions above add the background image – would we then use the normal featured image function to add the text and other graphics?


    1. Ronald

      Hi Hugh,

      I’m not sure what you mean by “the normal featured image”, but the code inserts a new block of html in your site, and can be edited “manually”, by modifying the code (php and css) I supplied.


  2. Scott

    Where exactly do you insert this code ( Add the CSS for the custom header and footer)? The bottom of the style.css? Uploaded your image, saved it and refreshed and no change at all?


    1. Ronald

      you can add it anywhere in your child themes stylesheet, I would make a habit out of adding it to the end, properly labeled so that you know what the code is for.


  3. Scott

    I added it to the end of the style.css. Saved and updated it but it did not change the appearance of the theme. It is the dark child theme.

    Suggestions? thanks

    1. Ronald


      you need to add the custom header code to the functions.php. It might not have been very clear, so I added the following to the “Add a full width header to Builder” paragraph:

      “Add the following code to your functions.php file, to add the add_custom_header function.”


  4. Scott

    this is a test site and what I would like to do is make the header with the images part of the header at the very top of the page but not sure how to not have it duplicate where it is showing up more than once. I added repeat-x ; but that did not work.

    Also not sure where the Some additional blurbs text is coming from in the upper right corner. How do I get rid of that?


  5. Andy Smalley

    Hey Ronald,

    Quick question…I was trying to follow the instructions above, and got this:

    Parse error: syntax error, unexpected ‘}’ in /home/inculc8/public_html/wp-content/themes/Builder/functions.php on line 141
    Fatal Error

    The theme has encountered a problem that it cannot recover from. Please use the following information to try to resolve the problem.

    Error Code: php_code_error:4:/home/inculc8/public_html/wp-content/themes/Builder/functions.php:141:syntax error, unexpected ‘}’
    Message: A fatal code error occurred.

    If you are unable to fix this problem, please copy all the text on this screen and send it to

    Debug Data:

    Any Suggestions on how I can get back to my original set-up?

    Andy Smalley

    1. Ronald

      Hi Andy,

      you should add this code to your Child themes functions.php. Do not modify Builder itself. If you do (but you shouldn’t), make sure you do not remove any code that is already in there.
      Your best option now is to upload the original Builder functions.php to your server again, then create a functions.php file in your child themes folder, and apply the changes in that file.

      I will add a blank functions.php to this post as a downloadable file later today.

      Good luck!

  6. Scott

    not sure how to do this since the code that is on my site is what you have here with the difference being the image. This is the name of the image that I want to run full screen across the top of the page as you have it. It is 1000×120 header_gradient88


  7. Scott

    I did it just as you indicated but the image is not showing up as a full width header and the actual image is not showing up. I have refreshed the page and in firefox it just shows text layout image, in IE it shows an image but not the one it should be.

    It is the correct path. Had to change that as the site is

    Would really like to get this resolved.


    1. Ronald


      make sure that your background image (in this case header_gradient.jpg) exists in the child themes’ images folder.

  8. Scott

    It is there but still the top header is not going across the full width of the page and there is a half inch gap between the top header and the image header.

    thank you

  9. Sid

    Great stuff, Ronald.

    How did you get the nav bar to display the way you did (full width)?


    1. Ronald

      Hi Sid,

      I’m using the new WordPress 3.0 (beta) menus, inserting these is as simple as adding a “wp_nav_menu” (with parameters), in this case one before and one after the custom header code. Since the final implementation of the menus in WordPress 3 is unclear, so I didn’t included that. If it changes, most likely I will have to make some changes to, but if not, I will update or post an addon here. WordPress is due sometime this month.


      1. Carol

        I’m just building this site using builder and the default child theme. I would like a full length colored nav bar so I’m trying to see if I can do it with your instructions. Since this is a few months after your post, and WP 3.0.1 is out (which I’m using), can you give the code for putting in a full length navigation bar?

        – I’m assuming I can do this and not have a full length header. Also, I would like to use the code for a duplicate nav bar at the bottom of the page.
        Thank you so much.
        Found your site through ithemes.

  10. Scott

    Would you be so kind to share with me how to remove the gap between the top header and the image header. No doubt it is related to the size of the header you used and the smaller header that I decided on to have more above the fold.

    Really appreciate you responding.


  11. Dan Locke

    Hi I have been attempting your suggestions on how to get this done. I want not successful. If you have a chance could you take a look at the video that I made of what I did and see if there is any advice you might offer? Here is a tiny url with a preview: Thanks very much for any assistance you might offer

    1. Ronald

      Hi Dan,

      from what I could see from your very informative video (rather, a tutorial!), you’ve inserted the code in the wrong place in functions.php. You need to add it before the closing ?>, which designates the end of the functions.php file.


  12. scott

    I have a test site I am fooling around with and the header and footer you have here. I would like to have the footer be the entire width across but have show up there three widgets in the widget module instead of the text for the header.

    Can you tell me how to make that happen? test site url is


  13. Bob Randklev


    I’m finally getting back to testing this code and thanks it’s awesome and I have a couple questions.

    With WP 3.0 now released, is the best way to add navigation to use the custom menus code in the functions.php you mentioned above?

    The code and hooks and CSS are great but now we are limited with Builder and changing styles or header images on different pages correct? I shouldn’t say limited but you have to make every page the same? Layouts below the full width header and navigation can be changed but page styling would only change below the custom header and navigation… correct?

    If we created a 2px x 1600 (or greater) and made this our background repeated or used a 1200×1600 background we could use a transparent header to create the same effect.. correct?

    This wouldn’t work for the footer as the position can be vary page to page.

    If my ideas above are correct I think a transparent header with a side to side background would be better in Builder. We can then change header images on layouts and even change the backgrounds while maintaining the full width look.
    Now use the footer code to create the full width footer as people aren’t as concerned with changing that.

    I see one flaw in my idea if the client wants their text/image to the far left and right we could do that by using -margins but now it’s based on the header container for positioning not the window size…..

    Let me stop there and correct me where I’m off.



  14. Dan

    I don’t want it as a background image. I want it just a static image, that is also clickable to / and replaces the existing text header. I’m using Americana child theme.

    How do I accomplish this?

  15. Mike Cannon

    Can you comment on why you would use functions.php as opposed to an extension? I’m just starting to dig deeply into Builder and was curious.

    Great tips, I needed this approach laid out for me this clearly.

    1. Ronald


      it simply never occurred to me using an extension, but I guess that might be another option. More inspiration in the iThemes Codex

  16. steph

    I get an error unless i have the footer module in the layout..

    Fatal error: Call to undefined function render_footer() in /home/sbddevco/public_html/realwomenmotorcycles/wp-content/themes/BuilderChild-Default/functions.php on line 8

    but if i have the footer module in the builder layout it works fine, but then i have two footers..

    Any ideas? (function.php is in child folder)

    1. Ronald

      Make sure your Builder Parent theme is updated to the latest version,

      1. sbdd

        on latest builder parent and child theme.. still getting the render footer error

Leave a Reply