Create WordPress Theme header from HTML template

This section will show how to convert HTML template header section into WordPress theme header. Here we will use below tags

  • language_attributes() : Displays the language attributes for the html tag.

  • bloginfo() : Displays information about the current site.

  • wp_head() : Goes at the end of the <head> element of a theme’s header.php template file. Fire the wp_head action.

  • body_class() : Displays the class names for the body element.

  • wp_body_open() : Goes at the begining of the <body> element of a theme’s header.php template file. Fire the wp_body_open action.

  • esc_html_e() : Display translated text that has been escaped for safe use in HTML output.

  • esc_url() : Checks and cleans a URL.

  • home_url() : Retrieves the URL for the current site where the front end is accessible.

  • wp_nav_menu() : Displays a navigation menu.


Lets began the header conversion

  • Create the file called header.php into the directory html-to-wp-theme from the WordPress theme directory

  • Then copy the below codes from the HTML template to header.php. Please make sure the main section not include in header.

<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HMTMCSE Blog</title>

    <link href="assets/css/font-awesome.min.css" rel="stylesheet">
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/theme.css" rel="stylesheet">
</head>

<body class="d-flex flex-column h-100">

<div class="container">

    <header class="blog-header py-3">
        <div class="row flex-nowrap justify-content-between align-items-center">
            <div class="col-6">
                <a class="blog-header-logo text-dark" href="#">HMTMCSE Blog</a>
            </div>
            <div class="col-6 d-flex justify-content-end align-items-center">
                <div class="row">
                    <div class="12">
                        <div class="input-group">
                            <div class="input-group-text"><i class="fas fa-search"></i></div>
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <nav class="navbar navbar-expand-lg navbar-light py-1 mb-2 blog-header">
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="post-details.html">Blog Details</a></li>
                <li class="nav-item"><a class="nav-link" href="post-archive.html">Blog Archive</a></li>
                <li class="nav-item"><a class="nav-link" href="#">About</a></li>
            </ul>
        </div>
    </nav>
</div>

  • Now go to index.php and remove the above codes & add the tag called get_header(). <?php get_header() ?> If you reload the front end you will see the previous view are not changed because the get_header() bring all the codes from header.php

  • Here we are going to add our CSS & JS file into template. Write the below codes into functions.php

function get_assets_path($file, $directory = "css"){
    return get_template_directory_uri() . "/assets/$directory/$file";
}

function h2wp_include_css_js() {
    wp_enqueue_style( 'h2wp-bootstrap', get_assets_path("bootstrap.min.css"), [], THEME_VERSION );
    wp_enqueue_style( 'h2wp-font-awesome', get_assets_path("font-awesome.min.css"), [], THEME_VERSION );
    wp_enqueue_style( 'h2wp-theme', get_assets_path("theme.css"), [], THEME_VERSION );

    wp_enqueue_script( 'h2wp-js-bootstrap', get_assets_path("bootstrap.bundle.min", "js"), ["jquery"], THEME_VERSION, true );
}
add_action( 'wp_enqueue_scripts', 'h2wp_include_css_js' );

  • In the above codes

    • get_assets_path($file, $directory = "css") : Use for asset directory url & get_template_directory_uri() use for get the url of current theme directory.

    • wp_enqueue_style : For load CSS.

    • wp_enqueue_script : For load JS.

    • add_action : For Adds a callback function to an action hook.

  • Now open the header.php file and

Remove

    <link href="assets/css/font-awesome.min.css" rel="stylesheet">
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/theme.css" rel="stylesheet">

Add

<?php wp_head(); ?>

  • Reload the front end you should see the HTML view are not broken anymore.


Add Language Attributes

For add language attributes dynamically we have to do some code into header.php

  • Open the header.php file and

Remove

<html lang="en" class="h-100">

Add

<html <?php language_attributes(); ?> class="h-100">


Add metadata charset

For add charset dynamically we have to do some code into header.php

  • Open the header.php file and

Remove

<meta charset="UTF-8">

Add

<meta charset="<?php bloginfo( 'charset' ); ?>">


Add body class and body open

  • Open the header.php file and

Remove

<body class="d-flex flex-column h-100">

Add

<body <?php body_class(["d-flex flex-column h-100"]); ?>>
<?php wp_body_open(); ?>


Add codes for dynamic Blog Banner

  • Open the header.php file and

Remove

<a class="blog-header-logo text-dark" href="#">HMTMCSE Blog</a>

Add

<a class="blog-header-logo text-dark" href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a>


Add Dynamic Navigation support

  • Create directory inc & then create file called bootstrap-menu-walker.php

  • Find & copy the Example of the Walker code & paste codes into bootstrap-menu-walker.php

  • Open the header.php file and

Remove

    <nav class="navbar navbar-expand-lg navbar-light py-1 mb-2 blog-header">
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="post-details.html">Blog Details</a></li>
                <li class="nav-item"><a class="nav-link" href="post-archive.html">Blog Archive</a></li>
                <li class="nav-item"><a class="nav-link" href="#">About</a></li>
            </ul>
        </div>
    </nav>

Add

    <nav class="navbar navbar-expand-lg navbar-light py-1 mb-2 blog-header">
        <div class="collapse navbar-collapse">
            <?php
            wp_nav_menu(
                array(
                    'theme_location' => 'top-main-menu',
                    'menu_id' => 'main-menu',
                    'menu_class' => 'navbar-nav me-auto mb-2 mb-lg-0',
                    'container' => false,
                    'fallback_cb'    => '__return_false',
                    'walker' => new Bootstrap_Menu_Walker()
                )
            );
            ?>
        </div>
    </nav>

Add code into functions.php for enable navigation

// Add into functions top after <?php tag
require get_template_directory() . "/inc/bootstrap-menu-walker.php";


if ( ! function_exists( 'h2wp_theme_setup' ) ) :
    function h2wp_theme_setup() {
        register_nav_menus(
            array(
                'top-main-menu' => esc_html__( 'Main menu', 'h2wp' ),
            )
        );
    }
endif;
add_action( 'after_setup_theme', 'h2wp_theme_setup' );


Add search code into header

  • Open the header.php file and

Remove

<div class="input-group">
    <div class="input-group-text"><i class="fas fa-search"></i></div>
    <input type="text" class="form-control" placeholder="Search">
</div>

Add

<form method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <div class="input-group">
        <div class="input-group-text"><i class="fas fa-search"></i></div>
        <input type="text" class="form-control" name="s" placeholder="Search" value="<?php echo get_search_query(); ?>">
    </div>
</form>
Share