There are a number of files that you can work on while you are building a theme. All of your Themes will involve the style.css file, and one or more PHP files. PHP, as you may remember, is a server side language. It will allow us to access the database, include external files, and more.
One of the common ones will be header.php, and it is this one that we will be looking at in more detail now.
The header file is called from another theme file – we won’t worry about that at this point. Instead, let’s look at what is normally called in this file.
This file includes header information. Now you might be looking at this from one of two ways to look at this – is that information that is within the head tag, or the header (masthead) of the web page?
Well, in WordPress, they include both of these sections in the header.php file. Basically, it will be everything before the start of your content.
Here is what a header.php file might look like:
<!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <meta name="viewport" content="width=device-width" /> <title><?php wp_title( ' | ', true, 'right' ); ?></title> <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" /> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="wrapper" class="hfeed"> <header id="header" role="banner">... <nav id="menu" role="navigation"> <?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) ); ?> </nav> </header>
Notice that you start with your normal HTML page:
<!DOCTYPE html> <html <?php language_attributes(); ?>> <head>
However, you also probably notice several things slightly different. Namely the language_attributes();
Any time you see , you know you are calling PHP. WordPress comes with several functions that you will use in your themes to define different values. You do not have to know how they work, just when to use them. Most of the time, WordPress’s functions are fairly self evident based upon their name.
language_attributes() is used to define which language you are stating your web page is in, this is the written language. So is it English, French, etc.. This lets the browser know information about which font/character set to use, and more.
Other functions have parameters that are passed to it. For example:
<!-- write out the title tag. The tags needs to surround this function as it only displays text. --> <?php wp_title( ' | ', true, 'right' ); ?>
language_attributes() automatically write out the information for you.
wp_title is used to write the title of the web page. This will vary based upon the type of content being displayed. Is it a category or date archive, or is it a single page or post?
wp_title will take care of it, regardless of the type.
Other functions will require you to use the echo statement, like if you want to get the URI of your stylesheet. This is an absolute path, which works well as it keeps you from looking into a relative path that might “break” based upon how you’re permalinks are set up. Remember, permalinks look like a real path, but they are not.
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" />
Closing out the Head Tag
While you can obviously put anything you want inside yourtag, there is one important thing you need to include:
<?php wp_head(); ?>
This function is very important, as it checks with WordPress to see if anything needs to be placed inside the head tag. For example, what if you have a plugin that has some styles, and therefore it needs to include it’s own CSS document, or some meta tags?
Creating the Page Header
Then you will want to start to create your header/wrapper classes.
Note: Be careful with Dreamweaver, as it will want to close open tags, and you won’t have those to close, especially for the tags you use to wrap your content in.
How you work within this section is completely up to you, as the layout will change from site to site. In our previous example you see something like:
<body <?php body_class(); ?>> <div id="wrapper" class="hfeed"> <header id="header" role="banner"> <!-- header content goes here: ... --> <nav id="menu" role="navigation"> <?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) ); ?> </nav> </header>
body_class function applies a class to the function. Depending upon the type of page, a different class, or set of classes can be applied. You can use this in your theme if you want to, to control the style of a page differently between two or more pages/posts/etc.
HTML tags for the Masthead
You can see the use of a wrapper
header tag, and the
nav tag. This would be used, as in a normal HTML document.
You may have additional tags in your site’s
header as well, if you need them. Use classes to style your tags to get your website to look the way that it should.
Here is a special function from WordPress. Notice it requires that you pass in an array of values for it function.
In our case, we pass in the theme_location. This is the name of the menu, so if you have more than one menu location, you can define where and which menu it is. This registers the location, so the menu that you create can be placed into that location.
This function, like some of the WordPress functions will automatically write the results for you, so you do not have to use the echo statement.