Create WordPress Theme From Scratch : Part 5 – Common Templates

Welcome to Part 5 of the series Create WordPress theme from scratch. In this tutorial, we will assemble our header, footer, sidebar and searchform.

If you missed the Part 4 of this series, then check it out at the link below.

Create WordPress theme from scratch – Part 4 – Theme Setup

Header.php

Let’s start with our the header template file header.php. Anything above the content area should be placed in the header template file. This includes , , beginning body tags and possibly other stuff like top navigation menus, search and branding information like logo.

Here’s what the header.php should contain

This is best explained with an example. Here’s the code of our header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
    <div class="site">

        <header class="site-header">
            <nav class="site-navigation">
                <?php wp_nav_menu( array( 'theme_location' => 'primary', 'container_class' => 'container', 'menu_class' => 'primary-menu' ) ); ?>
            </nav>

            <div class="site-branding">
                <div class="container">
                    <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
                    <?php if ( $description = get_bloginfo( 'description' ) ) : ?>
                        <p class="site-description"><?php echo $description; ?></p>
                    <?php endif; ?>
                </div>
            </div>

            <div class="container">
                <?php get_search_form() ?>
            </div>
        </header><!-- .site-header -->

        <div class="site-content">

language_attributes()

The first interesting thing is the use of language_attributes() in the opening <html> tag. This is done to output the proper language attribute.

character set

Next, we are setting the character set of the document using the bloginfo() – a super useful template tag that can be used to display a wide range information related to the blog.

The function bloginfo() accepts a single parameter, a string representing the information to display.

XFN

Moving on we have a strange looking <link> tag that has its href attribute set to http://gmpg.org/xfn/11. This is an optional piece of information that we are adding to our theme header.

XFN  stands for XHTML Friends Network. Using XFN, human relationships can be indicated by adding a rel attribute to tags.

Here is an example from from the official site

<a href="http://jeff.example.org" rel="friend met">

Pingback URL

What follows is yet another strange looking tag whose href attribute is pointing to something called a pingback URL. What is a pingback you may ask? A pingback is an automatic notification that appears as a comment for sites that have pingback enabled.

Let’s say your blog is pingback enabled. Whenever someone else creates a link to one of your articles, you will be automatically notified. Optionally you may choose to display the link to the external site as a comment in your article.

wp_head()

One of the most important parts of the header template is the use of wp_head() function which triggers the wp_head action hook. This hook is used to add styles, scripts and any other stuff that a plugin or theme needs in the head section.

How to use header.php

To include the current theme header template use the get_header() function. When passed the optional name parameter, this function looks for a specialized header file called header-{name}.php in the current theme directory.

Footer.php

Anything below the content area belongs to the footer template. This template closes the body, html and any other tags opened by the header template. This template should also render the site footer.

</div><!-- .site-content -->

<footer class="site-footer">
    <div class="container">
        <div class="site-info">
            <p><?php printf( __( '%1$s &copy; %2$s', 'mytheme' ), get_bloginfo( 'title' ), date( 'Y' ) ); ?></p>
        </div>
    </div>
</footer><!-- .site-footer -->

</div><!-- .site -->

<?php wp_footer(); ?>

</body>
</html>

wp_footer()

The most important part of the footer template is the call to wp_footer() function just before the closing body tag which triggers wp_footer action hook. This action hook is used to load scripts and output additional content to the footer section.

How to use footer.php

To include the current theme footer template use the get_footer() function. When passed the optional name parameter, this functions looks for a specialized footer file called footer-{name}.php in the current theme directory.

Sidebar.php

The sidebar.php template file should contain the dynamic widget area of a theme.

<?php
if ( ! is_active_sidebar( 'sidebar-1' ) ) {
    return;
}
?>

<aside class="widget-area">
    <?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- .widget-area -->

is_active_sidebar()

First, we are checking to see if we have an active sidebar using the function is_active_sidebar(). This makes sure that we don’t add any unnecessary markup.

dynamic_sidebar()

In case the sidebar is active, we call dynamic_sidebar() method which outputs all the widgets added to the sidebar in the dashboard.

How to use sidebar.php

A sidebar template can be included by calling the get_sidebar() function. When passed the optional name parameter, this function looks for a specialized sidebar file called sidebar-{name}.php in the current theme directory.

Searchform.php

If you want to customize the markup of the search form, then include a searchform.php template file in your theme.

<form method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search &hellip;', 'placeholder', 'mytheme' ); ?>" value="<?php echo get_search_query(); ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label', 'mytheme' ); ?>" />
    <button type="submit" class="search-submit"><?php echo _x( 'Search', 'submit button', 'mytheme' ); ?></button>
</form>

Note that the name of the input field must be s and the form must point to the home URL.

How to use searchform.php

To include searchform template, call the get_search_form() function. The WordPress search widget will also use the searchform template in the current theme.

Conclusion

This concludes the fifth part of the series Create WordPress theme from scratch. In the next part of the series, we will explore The  Loop!

IP address in Gmail

Next Article

Find Email Sender’s IP address in Gmail