How to build a WordPress theme from scratch - header.php

Quite a few people have been asking me lately for a tutorial on how to build a WordPress theme from scratch. So I have decided to write out a full tutorial, exposing all my tricks and secrets. This tutorial is going to break the process up into many parts, each focusing on a specific template file. I will show you not only why it is important to use this template file but how to use it properly. By the end of the series you will have the knowledge and experience needed to start building your own themes. But before we begin, you should understand that I build custom WordPress themes from scratch for business owners, non-profit organizations, and hobbyists. I won’t be showing you how to build themes like you would find on Themeforest.net or any other site that sells themes. Even if that is your goal, this series WILL help you get started because the process is pretty much the same. The only difference is that I won’t be teaching you how to build in a Theme Options menu where customers can change the theme to their hearts content. I know that this tutorial is going to help every aspiring WordPress theme developer get to the level they want to be. Let’s get started with the Header.php file.

This is the first article in the Let’s Build A WordPress Theme From Scratch Series.

Header.php

If you are used to building websites with html/css you are on the right track. Many people get scared when they see php and think without advanced knowledge of it they won’t be able to create a WordPress theme from scratch. Php IS a very important part of theme development but WordPress makes things really easy by giving you their own WordPress fucntions to use. With a basic knowledge of html/css we can easily get started and you will automatically start to pick up php along the way.

WordPress breaks your html site up into smaller/repeatable pieces. After getting the hang of building WordPress themes you won’t want to go back to static html sites because by breaking things into small/repeatable pieces it cuts down on the amount of work and time spent on a project. So with that in mind, the header.php file would be the code/info that you want repeated at the top of your website on every page. Typically you have your logo, maybe some contact info, social media icons, and of course your navigation. These are things you would probably want to repeat on every page so these items would go into the header.php file. Enough talking…let’s build a WordPress theme from scratch!

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title><?php wp_title(); ?> | <?php bloginfo('name'); ?></title><!-- Display the title of the page followed by the name of the blog -->

        <link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" /><!-- Link to your favicon -->

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"><!-- Set up your viewport to make sure your theme shows up correctly on mobile devices -->

        <meta name="Revisit-After" content="7 Days"><!-- Useful for search engines -->

        <meta name="robots" content="index,follow"><!-- Useful for search engines -->

        <?php wp_head(); ?><!-- Properly enqueued stylesheets and scripts will appear in this function - VERY IMPORTANT -->

    </head>

    <body>

        <div class="header">

            <div class="wrap_1280">

                <div class="logo">

                    <a href='/fromscratch/index.php' title="Wordpress Development Solutions"><img src="<?php echo get_template_directory_uri(); ?>/images/wds_theme_tutorial_logo.png" width="300" height="191" alt="" /></a><!-- Notice the WordPress function that dynamically creates the path to your theme -->

                </div>  
 
                <div class="social-icons-header">

                    <div class="social-wrap pull-right">

                        <div class="social-icons"><a href='https://www.facebook.com/WordpressDevSolutions' target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/images/facebook.jpg" width="32" height="32" alt="WordPress Development Solutions Facebook" /></a></div>

                        <div class="social-icons"><a href='https://twitter.com/WpDevSolutions' target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/images/twitter.jpg" width="32" height="32" alt="WordPress Development Solutions Twitter" /></a></div>

                        <div class="social-icons"><a href="https://plus.google.com/104168601045265342740" rel="publisher" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/images/googleplus.jpg" width="32" height="32" alt="WordPress Development Solutions Google+" /></a></div>

                        <div class="social-icons"><a href='http://wpdevsolutions.tumblr.com/' target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/images/tumblr.jpg" width="32" height="32" alt="WordPress Development Solutions Tumblr" /></a></div>

                    <div class="clearfix"></div>

                    </div>      
  
                </div>

                <div class="clearfix"></div>

            </div>

        </div>

        <div class="navigation-wrapper">    

            <div class="wrap_1280">

                <div class="navigation">

                    <?php if ( !wp_is_mobile() ) { ?><!-- This is a built in function that determines if on mobile device or not -->

                            <div class="menu-wrapper col-lg-12 col-md-12 col-sm-12 col-xs-12">

                        <?php wp_nav_menu(array('theme_location' => 'top-menu')); ?><!-- This is where you dynamically call your main menu -->

                            </div>

                    <?php } ?>

                            <div class="toggle"><a href="#" id="responsive-top-nav-button">MENU</a></div>

                            <div class="responsive-top-navigation"><?php wp_nav_menu(array('theme_location' => 'mobile-menu')); ?></div><!-- This is where you dynamically call your mobile menu -->

                            <div class="clearfix"></div>
                </div>

                <div class="clearfix"></div>

            </div>

        </div>

Let’s Break It Down

I know the code above may look a little daunting but copy and paste it into your favorite text editor or IDE and hopefully it will look a little cleaner and easier to understand. I want to break down some of the most important things you need to know about the above code:

  • Notice we start with the normal doctype you are used to seeing in static sites.
  • Your first WordPress function is the wp_title which dynamically calls the title of the page…no matter what page. This will title will change as you move around through the site because it will display the name of the page you are on.
  • Next you have the fucntion bloginfo() and inside the brackets we are calling the name of the blog itself. So this will always stay the same, thus you get the title of the page you are on followed by the name of your website/blog. You can find other parameters to pass in this function at the previous link.
  • In order to call your favicon you will use a function called get_stylesheet_directory_uri() which can be used to get the path to the root of your site. The stylesheet and the favicon need to be in the root of your document in order to work with WordPress. Not inside of a css folder or images folder. Also note that this function must be echoed in order to work. Learn more about the php echo term.
  • The wp_head() function is very important! This function pulls in the enqueued stylesheet and script files and also allows WordPress to pull in files it needs to run. Let’s just be clear that things will not work properly if this function is missing. Check out my article on Properly Enqueuing Stylesheets and Script Files in WordPress to learn how to do this on your site.
  • Similar to the get_stylesheet_directory_uri() function is the get_template_directory_uri(). They both work the same way by pointing to the root of your theme, however there are a few differences when it comes to if you are working with a child theme or not. Visit the previous Codex link to read more. You will notice this function is commonly used to dynamically declare the path to something in your theme. In this case, the code above shows it pulling images from the images folder. You simply declare the function using echo and then finish the path from there using forward slashes to break up the folder paths.
  • The next function I want to introduce you to is the wp_is_mobile() function. This is a fairly new function that detects if you are viewing the site on a mobile device or not. This helps in situations where you don’t want something on the desktop version of your site that might be too large to download on a phone’s internet connection. In my example, I use an exclamation mark in front of the function which is a term in php that says if this is NOT mobile show this. You can use it or not, you just have to decide what it is that you want to happen. Read more about it on the Codex.
  • Last, but certainly not least is the call for the menu. This is wp_nav_menu() and passes an array that tells WordPress the location of the menu. In this example, you will see a top-menu and a mobile-menu. This is used if you want your main menu and your mobile menu to be different. Go into your WordPress dashboard and under the Appearance tab click on Menus. Then create a new menu, name it whatever you want and click create menu. Then you will see two check boxes shop up near the bottom of the window that let you choose if this menu is the Top Menu or the Mobile Menu. This is how you assign which one is which. There is another step to this which I will cover later in the series when I talk about the fucntions.php page.

Next Week

In my next building a WordPress theme from scratch article, we will move into learning about the meat and potatoes of your theme which are the home.php, index.php, and the front-page.php files. I am working on an actual example site that will go with this building a WordPress theme from scratch series that I will eventually give you guys the link to. I will also provide a downloadable zip file that will contain all of the source documents when the series is completed. Thanks so much for joining me and keep your eyes peeled for the rest of the tutorial articles coming very soon.

Team Treehouse – Learn PHP for WordPress

If you are serious about learning to develop custom themes in WordPress, I highly recommend you join Team Treehouse. They have a full video course on everything WordPress development, including a course on specifically writing PHP for WordPress.