The header and footer

It's time to start adding some content. Here, we'll take care of things such as displaying a link to the blog's home page, displaying the blog's title, displaying the tagline, and displaying the main navigation. All of these operations are pretty simple, so let's just take a look at the lines of code that take care of them. Then, we'll put these lines of code in just the right place within our HTML structure.

First, we have the code that displays the site's main URL, as follows:

<?php echo esc_url(home_url('/')); ?>

Next, the code that displays the site's title is as follows:

<?php bloginfo('name'); ?>

The following is the code for displaying the tagline:

<?php bloginfo('description'); ?>

The preceding two lines pull information from where you set the blog name and description in wp-admin, and you can simply change them from the Settings | General page.

Lastly, displaying the main navigation is done with the following code:

<?php wp_nav_menu(array('theme_location' => 'primary')); ?>

The wp_nav_menu() function is a built-in way of displaying the navigation menu. It takes care of the proper HTML structure of the menu and all of its elements. In other words, you don't have to worry about anything else other than using this one line of code.

Now, the part of your HTML that describes the header looks similar to the following listing. Additionally, as you can see, we're linking the logo to the home page, which is a standard practice:

<div id="page" class="hfeed site">
  <a class="skip-link screen-reader-text" href="#content">
  <?php _e( 'Skip to content', 'daily-cooking-custom' ); ?></a>

  <header id="masthead" class="site-header" role="banner">

    <div class="site-branding">
      <h1 class="site-title"><a href="<?php echo 
        esc_url(home_url('/')); ?>" 
        rel="home"><?php bloginfo('name');?></a></h1>
      <h2 class="site-description"><?php bloginfo('description');?>
      </h2>
    </div><! -  .site-branding  - >

    <nav id="site-navigation" class="main-navigation" 
      role="navigation">
      <button class="menu-toggle" aria-controls="menu" 
        aria-expanded="false">
      <?php _e( 'Primary Menu', 'daily-cooking-custom' ); ?></button>
      <?php wp_nav_menu(array('theme_location' => 'primary')); ?>
    </nav><! -  #site-navigation  - >

  </header><! -  #masthead  - >

<div id="content" class="site-content">

Are you wondering why you should bother with some of this when you could have just typed your blog title, URL, and a description of the theme? One reason is that if you ever want to change your blog's title, you can simply do it in one quick step in wp-admin and it will change all over your site. The other reason is that if you want to sharing your theme with others, you'll need to give them the ability to easily change the name through their own wp-admin panels. Keep in mind that anything (anything at all) that will change from site to site based on the site's purpose and content should not be hardcoded into the theme, but should be dynamically generated.

Now, when I refresh the site, there's the actual blog title in the header, as shown in the following screenshot:

The two links visible in the header are live links from one of my custom menus. Just to tie things up, I'm going to add some code to my footer to display the "proudly powered by WordPress" message, and to include the wp_footer() function/hook that's often used by many plugins in one way or another, so every theme should feature it. The code for my footer section now looks like the following:

  </div><! -  #content  - >

  <footer id="colophon" class="site-footer" role="contentinfo">
    <div class="site-info">
      <a href="<?php echo esc_url( __( 'http://wordpress.org/', 
       'daily-cooking-custom' ) ); ?>">
      <?php printf( __( 'Proudly powered by %s', 'daily-cooking-custom' ),   
        'WordPress' );?></a>
      <span class="sep"> | </span>
      <?php printf( __( 'Theme: %1$s by %2$s.', 'daily-cooking-custom' ),
       'Daily Cooking Custom', '<a href="http://karol.cc/" rel="designer">
       Karol K.</a>, and 
       <a href="http://underscores.me/" rel="designer">_S</a>' ); ?>
    </div><! -  .site-info  - >
  </footer><! -  #colophon  - >

</div><! -  #page  - >

<?php wp_footer(); ?>

</body>
</html>

One thing you might have noticed inside the previous listing is the mysterious __() function. It's a native WordPress function that retrieves the translated string corresponding to the parameters given in the function. It's a feature meant for the internationalization of your site. More details about the function can be found at https://codex.wordpress.org/Function_Reference/_2.