Chap comes with multiple header templates out of the box.

Header template options

There is an option for a default header template, that will be used on all posts and pages, and a header template override metabox to display a different header on specific pages.

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 simply have no 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 Reply

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