Tutorial•Wordpress Theme

How To Create a WordPress Theme for Beginners – Part 3: The Header

20/01/2020 by miziology No Comments

The first wordpress template file that are we going to create is header (header.php). Header is the section between <head></head> in html tag. We will put all the meta tag, link tag, title tag and wordpress wp_head() function in here. Our header will be called in index.php with get_header() function and use a new file call functions.php

Functions.php are the file that we add new features for our theme like add custom navigation menus, post thumbnail support, custom headers and more custom function.

Remember our mock-up plan for this wordpress theme tutorial before? We will create our wordpress theme header like below.

We start with blank php file then copy and paste code below and save it as header.php:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title><?php bloginfo('name'); //Get the website name ?></title>
        <!-- Your META, CSS File, In-line CSS Style -->
    </head>
    <body>
        <header>
            <!-- Your Header, Logo, Menus -->
        </header>

For the interface style we will be using a Bootstrap for the backbone and add our own style to make it unique in style.css. You can download bootstrap here and follow step below:

  1. Create 2 new folder under yoshz folder and name it css and js.
  2. Extract Bootstrap compress file we download before.
  3. In Bootstrap folder open css folder, copy bootstrap.css and bootstrap.css.map file then paste it to yoshz/css folder.
  4. In Bootstrap folder open js folder, copy bootstrap.min.js and bootstrap.min.js.map file then paste it to yoshz/js folder.

Now open function.php and start adding theme stylesheets and scripts.

<?php
//Get CSS File
function yoshz_enqueue_style() {
    wp_enqueue_style( 'style', get_stylesheet_uri());
    wp_enqueue_style( 'bootstrap', get_template_directory_uri() . 
'/css/bootstrap.css', false );
}
add_action( 'wp_enqueue_scripts', 'yoshz_enqueue_style' );

//Get JS File
function yoshz_enqueue_script() {
    wp_enqueue_script( 'bootstrap', get_template_directory_uri() . 
'/js/bootstrap.min.js', false );
}
add_action( 'wp_enqueue_scripts', 'yoshz_enqueue_script' );

//Register Menu
function register_my_menu() {
  register_nav_menu('header-menu',__( 'Header Menu' ));
}
add_action( 'init', 'register_my_menu' );
?>

Next open header.php and footer.php, we added some new code in step below and your wordpress theme header slowly start shaping.

  1. Add <?php wp_head(); ?> inside <head> tag.
    This code will prints scripts (stylesheets and jQuery) or data in the head tag on header.
  2. Insert Logo image.
    <img src=”<?php bloginfo(‘stylesheet_directory’); ?>/img/logo.png” alt=”YoshzTheme Logo” />
  3. Create wordpress theme menus
    Register theme to support wordpress theme menus in functions.php and add <?php wp_nav_menu() ?> in header.php.
  4. Add Bootstrap class and insert style on style.css.

The complete file for this tutorial show in below:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title><?php bloginfo('name'); //Get the website name ?></title>
        <!-- Your META, CSS File, In-line CSS Style -->
        <?php wp_head(); ?>
    </head>
    <body>
        <div class="container">
            <div class="header-logo">
                <img src="<?php bloginfo('stylesheet_directory'); ?>/img/logo.png"
alt="YoshzTheme Logo">
            </div>
            <div class="header-menus">
                <?php wp_nav_menu( array(
                    'theme_location' => 'header-menu',
                    'menu_class' => "nav justify-content-center",
                    'container' => "ul"
                ) ); ?>
            </div>
        </div>
    </body>
</html>
/*
Theme Name: Yoshz
Theme URI: http://www.yoshz.com
Author: Yoshz Team
Author URI: http://www.yoshz.com
Description: Yoshz WordPress Theme
Version: 1.0
*/

.header-logo {
    background-color: #ecf0f1;
    padding:1em;
}
.header-logo img {
    margin:0 auto;
    display:block;
}
.header-menus{
    background-color: #2c3e50;
}
.nav li.page_item a {
    color: #ecf0f1;
    display: block;
    padding: 1rem;
}
.nav li.page_item a:hover {
    text-decoration: none;
    color:#8292e9;
}

To preview our Yoshz Theme, you can go to WordPress Administrator View -> Menu Appearance -> Live Preview.

To be continue …