Custom header templates

Header options

Chap comes with multiple header templates out of the box. Header template defines the arrangement of main menu, brand and widget areas, but header’s general look and feel will be the result of what type of menu style, widgets, backgrounds and colors are used.

Header template options Header template options

In the theme options under Chap Theme -> Header, there is an option for a default header template, that will be used on all posts and pages. But on individual posts and pages, there is also a Header overrides metabox that allows to display a different header on specific pages (as well as different background image/color).
Header template override metabox

Creating custom templates
If you don’t find a suitable header then it’s possible to create your own custom template.

Header templates are located at /wp-content/themes/chap/templates/header-*.php.

Copy a template file that you would like to modify to your child theme templates directory: /wp-content/themes/chap-child/templates/header-custom-name.php.

Now an option to use “Header custom name” template will be available in the Chap options and metabox.

Modify the header-custom-name.php file to your liking.

A few things to keep in mind:

Explore the default header templates to get the general idea of how headers are built.
Knowledge of Semantic UI framework can be helpful.
Rendering the main menu
Rendering the main menu with it's container
PHP
<?php do_action('chap_render_main_menu_container'); ?>
The container .ui.mainmenu.container is used to apply theme options such as “spacing below main menu“. If you choose to omit it then some theme options will no longer have any effect.
Rendering the main menu without it's container
PHP
<?php do_action('chap_render_main_menu'); ?>
Rendering the main menu without menu widgets
PHP
<?php do_action('chap_render_main_menu', ['widgets' => false]); ?>
Rendering the main menu on the right side
PHP
<?php do_action('chap_render_main_menu', ['right' => true]); ?>
Rendering branding
Rendering the branding container with header widgets
PHP
<?php do_action('chap_render_branding_container'); ?>
Rendering the brand only
PHP
<div class="ui branding container">
    <?php do_action('chap_render_brand', true); ?>
</div>
The container .ui.branding.container is used to apply theme options such as “spacing from top” and “spacing from menu“. If you choose to omit it then some theme options will simply have no effect.
Rendering the brand logo image only
PHP
<?php do_action('chap_render_brand', false); ?>
Having trouble creating a custom header? Contact support with illustrations about your desired header and we may be able to help you out.

Leave a comment

Your email address will not be published. Required fields are marked *