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>