Advertisement
Theme Development

Creating a WordPress Theme From Static HTML: Setting Up the Header

by

So far in this series, you've learned how to create a basic theme from static HTML. You've done the following:

  • Prepared your markup for WordPress
  • Converted your HTML to PHP and split your file into template files
  • Edited the stylesheet and uploaded your theme to WordPress
  • Added a loop to your index file

In this tutorial, you'll work on the header.php file that you created in Part 2. You'll learn how to:

  • Add automatically generated meta tags in place of the existing static ones in the <head> section
  • Replace the static site title and description with one you (or other users of your theme) can update via the WordPress admin
  • Add the wp_head action hook to your header file for use by plugins

What You'll Need

  • Your code editor of choice
  • A browser for testing your work
  • A WordPress installation, either local or remote
  • If you're working locally, you'll need MAMP, WAMP or LAMP to enable WordPress to run
  • If you're working remotely, you'll need FTP access to your site plus an administrator account in your WordPress installation

1. Adding Meta Tags to Your Header File

You need to add two meta tags to your theme: the <title> tag and the charset meta tag.

Updating the Charset Meta Tag

Find the line which reads:

<meta charset="utf-8" />

Replace it with this:

<meta charset="<?php bloginfo( 'charset' ); ?>" />

This will automatically use the charset meta tag as set via the Settings admin screen.

Updating the <title> Tag

At the moment, the theme has a static title tag added via the following code in header.php:

WordPress Theme Building - Creating a WordPress Theme from Static HTML

By adding a dynamically generated title tag, you can tap into additional functionality offered by WordPress for these which will give you SEO and usability benefits.

Delete the code above and replace it with the following:

	<?php
	global $page, $paged;
	wp_title( '|', true, 'right' );
	// Add the blog name.
	bloginfo( 'name' );
	// Add the blog description for the home/front page.
	$site_description = get_bloginfo( 'description', 'display' );
	if ( $site_description && ( is_home() || is_front_page() ) )
		echo " | $site_description";
	?>

This code does a few things:

  1. First it uses the wp_title() template tag to output the title of the current page, followed by a separator on the right hand side
  2. After this, it uses the bloginfo() template tag with the 'name' parameter to output the name of the site itself
  3. If the visitor is on the home page (which it checks using the conditional tags is_home() || is_front_page()), it outputs the site description using the get_bloginfo() template tag with the 'description' parameter

Now save your header file.


2. Adding a Dynamically Generated Site Title and Description

The next step is to replace your static site title and description with a dynamic one.

Still in header.php, find the following code:

<div class="site-name half left"><!-- site name and description  --></div>

<div class="site-name half left">
	<h1 class="one-half-left" id="site-title"><a title="Creating a WordPress theme from static html - home" rel="home">WordPress Theme Building</a></h1>
	<h2 id="site-description">Creating a WordPress theme from static html</h2>
</div>

Replace it with the code below:

<div class="site-name half left"><!-- site name and description  --></div>

<div class="site-name half left">
	<h1 id="site-title"></h1>
	<h2 id="site-description"></h2>
</div>

This code does the following:

  • Wraps a link to the home page around the site title using echo home_url()
  • Displays the site title using the bloginfo() template tag with the 'name' parameter
  • Displays the site description using the bloginfo() template tag again, this time with the 'description' parameter

Now you'll find that you can change your site title and description via the Settings screen in the admin, and it will change on every page of your site.

I've changed mine and you can see the results below. Note that this is also reflected in the title as shown at the top of the browser window.

creating-wordpress-theme-from-static-html-meta-tags-site-title-description-added

3. Adding the wp_head Action Hook to Your Theme

The wp_head action hook is an essential one to add to every theme. It's placed just after the closing </head> tag in your header.php file and it's used by lots of plugins to hook their functionality into your theme. If you don't add it, you'll find that plugins activated on sites using your theme may not work.

The wp_footer action hook is similar and sits in the footer.php file - we'll come to that in Part 8 of this series.

Immediately above the closing </head> tag, add the following code:

<?php wp_head(); ?>

Now save your file. You're all done!


Summary

You've set up some essential elements of your header.php file, which should be included in every theme.

In the next part of this series, you'll learn how to add a navigation menu to your header file, and then in Part 7 you'll learn how to add a widget to your header so that you can add contact details, or whatever you'd like, into your header.


Resources

Related Posts
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML: Creating an Archive TemplateCreating wordpress theme from html 400
    If you've been working your way through this series, you now have a functioning theme with two page templates. The steps I've demonstrated to this point are: preparing your markup for WordPress converting your HTML to PHP and splitting your file into template files editing the stylesheet and uploading your theme to WordPress adding a loop to your index file adding meta tags, the wp_head hook and the site title and description to your header file adding a navigation menu adding widget areas to the header and sidebar adding widget areas, a colophon and the wp_footer hook to the footer file creating template files for static pages. Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML - Creating a Page TemplateCreating wordpress theme from html 400
    So far in this series, I've shown you how to create a fully functioning WordPress theme from static HTML. We've covered the following steps: preparing your markup for WordPress converting your HTML to PHP and splitting your file into template files editing the stylesheet and uploading your theme to WordPress adding a loop to your index file adding meta tags, the wp_head hook and the site title and description to your header file adding a navigation menu adding widget areas to the header and sidebar adding widget areas, a colophon and the wp_footer hook to the footer file. At the moment, your theme only has one template file for displaying content—the index.php file. A powerful feature of WordPress is the ability to use template files for different kinds of content.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: The Footer FileCreating wordpress theme from html 400
    In this series, you've been learning how to create a WordPress theme form static HTML. Up to this point, you have: prepared your markup for WordPress converted your HTML to PHP and split your file into template files edited the stylesheet and uploaded your theme to WordPress added a loop to your index file added meta tags, the wp_head hook and the site title and description to your header file added a navigation menu added widget areas to the header and sidebar. Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML - Adding WidgetsCreating wordpress theme from html 400
    In this series, you've learned how to convert a static HTML file to a WordPress theme and edit the header file. So far you've: prepared your markup for WordPress converted your HTML to PHP and split your file into template files edited the stylesheet and uploaded your theme to WordPress added a loop to your index file added meta tags, the wp_head hook and the site title and description to your header file added a navigation menu. Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Creating Template FilesCreating wordpress theme from html 400
    In the first part of this series, I showed you how to prepare your HTML and CSS files for WordPress, ensuring the structure would work, the code was valid and that the correct classes were being used. In this tutorial you'll learn how to take your index.html file and split it up into a set of template files for use by WordPress.Read More…
  • Code
    Theme Development
    A Guide to the WordPress Theme Customizer: Getting StartedTheme customizer 400
    In this series, we're taking a complete look at the WordPress Theme Customizer. Specifically, we're understanding exactly what it is as well as why it benefits us, how to integrate it into our theme, how to work with it in the context of other themes, and how to introduce our own sections, settings, and options into the Customizer.Read More…