How To

How to create a simple Header with TukuToi Template Builder

Head to the ClassicPress Dashboard > Templates menu and click “Add New”. Enter a name for y0ur new template, and since we are creating a Header, nothing more fitting than “Header Template”. Done that, decide if your header will apply to all TukuToi Templates or just few. If you decide to use this Header for all TukuToi Templates you can select the “Global Header” option in the TukuToi Template Settings > Use this template for: setting. If you want to use this Header only on selected templates, leave this option empty. No worries, even if you set it as a Global Header, you can later still decide to use other headers on particular single Templates. Now head to the Editor, which presents a nice Code Mirror experience, and start building your Header. Remember that you want to rebuild theĀ entire header, from the very first html tag onwards. This means you will add everything you expect in your header to appear, starting from theĀ <!DOCTYPE html> tag up to the opening body tag and closing nav tag (if you plan to add a global navigation. This requires a bit of knowledge about HTML and general structures of the web. You will populate the dynamic parts of your HTML (such as the title tag value) with ShortCodes. To do that, you need the TukuToi ShortCodes Plugin installed. We suggest to install the entire TukuToi Plugin suite, to have the best experience. Here’s a little example of a Bootstrap based Header Template you can use right away:
<!DOCTYPE html>
<html [tkt_scs_funktion function_name='language_attributes']>
<head>
    <meta charset="[tkt_scs_bloginfo show='charset' filter='raw' sanitize='text_field']" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <meta name="robots" content="index, follow" />
    [tkt_scs_do_action hook_name="wp_head"]
</head>
<body [tkt_scs_funktion function_name="body_class" args="class:tkt-body another"]>
[tkt_scs_do_action hook_name="wp_body_open" args=""]
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
        [tkt_scs_navmenu menu="A_Menu" depth="3" container="div" container_class="collapse navbar-collapse" container_id="navbarSupportedContent" menu_class="navbar-nav me-auto mb-2 mb-lg-0" fallback_cb="WP_Bootstrap_Navwalker::fallback" walker="WP_Bootstrap_Navwalker" ]
    </div>
</nav>
As you can see we are using standard HTML markup populated with several TukuToi ShortCodes. You can find more information about the usage of these ShortCodes in the relevant documentation, listed in the “Related Docs” Section.