Add header, footer, and parts support to your theme (Themer)

Most themes support archive, singular, and 404 layouts out of the box. However, to support the Theme Builder header, footer, and part layouts, themes must be built a certain way. 

See the Related Articles below for themes that are currently supported. If your theme isn't currently supported, you can add support for headers, footers, and parts by following the instructions below.

Note: The theme must allow its header, footer, and parts to be removed using hooks.

Add header and footer support

There are other ways than using hooks to remove the theme's headers and footers, but using hooks is the easiest and cleanest. For example, in Genesis you can remove the header with the following code.

If your theme's header and footer can be removed with hooks, the first step to providing support for Theme Builder is by declaring it on the after_setup_theme action in your functions.php file:

The next step varies from theme to theme, but the general idea is to check to see if a header or footer exists for the current page. If it does, remove the theme's default header or footer and add an action to render the header or footer built by Theme Builder. Here's what the code looks like to do that for Genesis:

Tip: If you're interested in an object-oriented approach to theme support, check out how we implemented Genesis support in the extensions/themes/class-fl-theme-builder-support-genesis.php file.

Add parts support

Theme parts are references to actions in your theme that a layout can be hooked into. For example, if your theme has a  before_header action, you can register that so theme parts can be rendered there.

Adding support for theme parts is basically the same as adding support for headers and footers. In fact, you can declare support for headers, footers, and parts at the same time: 

After you've declared support for parts, you can use the fl_theme_builder_part_hooks filter to register your parts. The function for your filter should return an array of arrays for each group of parts, as shown below. Within the hooks array, set your actions to the array key, and set the human-readable label to the array value.

Here's an example of what that would look like for Genesis: