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:
>
<?php wp_title( ' | ', true, 'right' ); ?>
>
...
Notice that you start with your normal HTML page:
>
However, you also probably notice several things slightly different. Namely the language_attributes();
PHP Functions
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
For example, 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.
wp_title()
Other functions have parameters that are passed to it. For example:
wp_title(), like 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.
get_stylesheet_uri
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.
Closing out the Head Tag
While you can obviously put anything you want inside your
tag, there is one important thing you need to include:
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?
Since a theme developer won’t know what plugins you include on your site, they can’t add the associated links them self. Therefore, the plugin tells WordPress to queue it up, but not place it yet. When WordPress has this function called, it will automatically insert all of the required meta tags, CSS links, and JavaScript (if the plugin is written poorly).
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_class
The 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 div, a 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.
wp_nav_menu
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.
Developing a WordPress Theme – Header was originally found on Access 2 Learn
