WordPress: How to Create the Theme Header? Part 1

Here we are by the usual appointment on Tuesday with the course dedicated to the creation of a theme for WordPress. In the last lesson we stopped just at the climax: after creating the structure of our issue with the files needed to function, we have uploaded it in the folder destinated to house the WordPress themes: “wp-content/themes” and after that we then activated the theme. But not having yet written any code in the file “index.php” the home page of our blog / website is now totally white.

In today’s lesson we will see how to make the top of our blog, what in technical language is usually referred to as “header” of the site.

Content of the lesson

  1. Write Our First Lines Of Code
  2. Customize How It Will Display Contents
  3. Dynamically Add Some Information To Templates
    1. Add The Page Title
    2. Add The Link To The Stylesheet
  4. What Are The Tags That Can Be Used Inside A Template?
  5. Dynamically Adding More Elements To The Page Header
    1. Add A Link To The Feeds
    2. Add The URL To Handle The Pingback
    3. Add A Hook For Plugins
  6. How To Add Title And Description Of Your Blog To The Header?
  7. Conclusions

1. Write Our First Lines Of Code

Let’s open (with our favorite editor) the main file of the theme called “index.php” which we created in the previous lessons and write the markup (X) HTML needed to display our content on the first site.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Your Inspiration WordPress</title>
    <link rel="stylesheet" href="wp-content/themes/YIW/style.css" type="text/css" media="screen" />
</head>

<body>

</body>

</html>

We still have not done anything special, we just limited to define the DOCTYPE of the document character set, a title page, and then we connected the stylesheet called “style.css” to our document.

If we load now the Home Page of the blog we will notice that there has been added the title of the page we have shown (Figure 1).

Figure 1 - White page with the title of the site

2. Customize How It Will Display Contents

We open the stylesheet called “style.css” and – after comments made in the previous lesson to define some information about the theme we are developing – we add a general reset to zero the values that different browsers associated by default to some elements, when it’s time we will redefine them with values that we actually need. In this way we give the same view of each item on all major browsers.

/***********************************************************************
******************* reset.css ******************************************
************************************************************************/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
body {line-height:1.5;}
table {border-collapse:separate; border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after { content:""; }
blockquote, q { quotes:"" ""; }
a img {border:none;}
.clearer {height:0px;overflow:hidden;margin:0px;clear:both;}
.center {text-align:center;}

After resetting the default values of the elements we are going to establish – in the style sheet – a section that will be the container for contents to be seen on the site.

.container  {width:960px;margin:0 auto;min-height:100px;border:1px solid red;}

I added a red border and a height of 100 pixels to the container so you can see it on the screen because there were no other containers before we would had found a simple white page.

Now we return to the page “index.php” and markup (X) HTML, immediately after the body tag, let’s add the container section we have just defined in the stylesheet:

…
<body>
	<div class="container">

	</div>
</body>
…

If we’re going to see the Home Page of our blog we should see something similar to that shown in Figure 2.

Figure 2 - Blog's home Page with centered container

To summarize: we started writing the first lines of markup in the document’s main theme (“index.php“), we linked the style sheet and now we are starting to customize the way your content will be displayed on the screen.

3. Dynamically Add Some Information To Templates

For the moment we only limited to write simple HTML markup and some CSS rule, we now see how to make dynamic some of the things we have accomplished using the tags provided by the WordPress template.

3.1 Add The Page Title

We begin by making dynamic the page title and make sure that this is automatically taken from the name we have given to the site during installation and can change at any time from menu: “Settings -> General” (Figure 3).


Figure 3 - Blog's name

Replace the line of code in the markup (X)HTML which defines the page title:


<title>Your Inspiration WordPress</title>

with this new line using the template tags called: bloginfo(‘name’)


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

In this line all we have done is change the title of the page manually entered before with the title of the site taken from dynamically assigned settings on our WordPress configuration. In fact, the tag bloginfo of the template permits to retrieve information about the blog in question and can be used anywhere in the template to print on screen this data.

In our case the tag bloginfo we passed the parameter name and this allowed us to print the name given to a video blog. If you want to deepen the other parameters supported by the tag bloginfo I suggest you to read the documentation on the official website of WordPress.

After performing this change, if we try to update the Home Page of our blog, we see that the page title is now recovered completely dynamically (Figure 4).

Figure 4 - Blog's title recovered dynamically

3.2 Add The Link To The Stylesheet

Now we make dynamic also the connection to the style sheet, that we associated with our document. So we identify the line of code in question:


<link rel="stylesheet" href="wp-content/themes/YIW/style.css" type="text/css" media="screen" />

In this line we replace the link to the stylesheet so that it can be passed dynamically through the use of the tag bloginfo (which we saw earlier). This time for us to return the link to the stylesheet of the theme we will pass the parameter stylesheet_url, as shown in the row below:


<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />

If we update the blog Home Page again and visualize the code (X)HTML generated by the page, we can see that the link to the style sheet has been inserted dynamically through the proper use of the tag bloginfo (‘stylesheet_url’) as shown in Figure 5.

Figure 5 - Dynamic link to the stylesheet

4. What Are The Tags That Can Be Used Inside A Template?

Tags are used within the templates to display information dynamically or otherwise to help you personalize your blog, it provides all the tools needed to make the theme customizable to your liking.

If you’re wondering what are the tags that can be used in developing a WordPress template I suggest you to read the documentation on the official website of WordPress. In the suggested page, is shown a general list of all the tags available in WordPress, sorted by categories of specific functions.

5. Dynamically Adding More Elements To The Page Header

In the paragraph three we have seen how to invoke dynamic elements within the template using the bloginfo tag. Therefore we proceed with this operation so that other typical elements present nell’head of the document can be dynamic.

We begin with the meta tag, which defines the content of the document and the character set used:

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

And sostituiamolo with the following line:

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

5.1 Add A Link To The Feeds

Some RSS readers may have trouble recognizing available feeds on your WordPress blog. Accordingly, it is useful to include these lines of code within the header of the document to facilitate their reading:

//RSS 2.0
<link rel="alternate" title="<?php printf(__('%s RSS Feed', 'yiw'), get_bloginfo('name')); ?>" href="<?php bloginfo('rss2_url'); ?>" />

//ATOM
<link rel="alternate" title="<?php printf(__('%s Atom Feed', 'yiw'), get_bloginfo('name')); ?>" href="<?php bloginfo('atom_url'); ?>" />

5.2. Add The URL To Handle The Pingback

The Pingback is a protocol defined by Stuart Langridge and Ian Hickson to allow bloggers and Web authors to be notified when a site put a link to one of their documents, then, generally , to be listed in the document itself.

WordPress has this feature but for entitlement to be defined within the following line of the document header:

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

This is what allows you to send and receive pingbacks from other blogs that can be connected to our content.

5.3 Add A Hook For Plugins

A lot of WordPress plugins inserts personal CSS stylesheets or JavaScript code directly in the document header. To do this they use a “hook“, made available by WordPress, that allows dynamic insertion of code. This hook must be placed before the closing tag </ head> as shown in the row below.

<?php wp_head(); ?>
</head>

The hook is not required to be included for the operational function of theme, but without this many plugins may not work correctly.

Summing up a bit all we have done up to this point, the initial part of our index.php document should look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    <title><?php bloginfo('name'); ?></title>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
	<link rel="alternate" type="application/rss+xml" title="<?php printf(__('%s RSS Feed', 'yiw'), get_bloginfo('name')); ?>" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="alternate" type="application/atom+xml" title="<?php printf(__('%s Atom Feed', 'yiw'), get_bloginfo('name')); ?>" href="<?php bloginfo('atom_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <?php wp_head(); ?>

</head>

<body>
	<div class="container">

	</div>
</body>

</html>

6. How To Add Title And Description Of Your Blog To The Header?

Finally it’s time to add and display some content in our document that so far shows a simple white page.

We start with the title and add the blog description at the top of the document. Open the index.php file and add the following markup (X)HTML:

<body>
    <div class="container">
        <!-- START HEADER -->
        <h1>
            <a href="<?php echo get_option('home'); ?>/" title="Back to Home Page">
                <?php bloginfo('name'); ?>
            </a>
        </h1>
        <p class="center"><?php bloginfo('description'); ?></p>
        <!-- END HEADER -->
    </div>
</body>

We added the name of the blog as the title (<h1> … </ h1>) of the document to display up using the tag bloginfo (already used in this lesson), we also made a hyperlink to the home page of the blog, passing the URL dynamically, using another Template tag: get_option (‘ home ‘), which returns just the blog Home Page URL.

Just below the title we added a paragraph that dynamically calls the description (which we assigned to the blog in the configuration, Figure 6) by the usual bloginfo tag, this time called by passing the parameter “description“.


Figure 6 - Title and description of the Blog defined from the WordPress's admin panel

Now we open the stylesheet of the theme, style.css, and add some rules to define how to present the content that we included:

/* Title */
h1, h2, h3, h4, h5, h6 {font-weight:bold;color:#7f192f;}
h1 {font-size:150%;line-height:1;margin-bottom:0.5em;text-align:center;}

/* Paragraphs */
p { padding:4px 0 10px 0;line-height:20px;}

/*link*/
a:link, a:visited {color:#7f192f;text-decoration:none;}
a:hover, a:active {color:#b2030b;}

/* Web Site */
body {background:#fbf7f7;font-family:georgia,verdana,Arial,sans-serif;}
.container  {width:960px;margin:20px auto 0;min-height:100px;border:2px solid red;}

Reload the Home of our blog and view changes (Figure 7).


Figure 7 - Blog's home page with title and short description

As you can see now on the blog appeared as if by magic the title and blog description defined by the Administration Panel of WordPress.

Conclusions

Also this week we have reached the end of class, but unfortunately I have already dwelt enough and was not able to return to this lesson, the topic of the page view, the blog topic that requires some little deeper and I want to dedicate to it the entire lesson next week.

As you see your course starts to become more and more interesting and we are getting to the heart of creating a theme for WordPress. Do not miss the next episode.

Index of Articles in this guide

In order to make the consulting of this guide easier at the end of each article I will bring the index of all the issues treated.

  1. How to Install WordPress locally?
  2. WordPress: Let’s have a look at the Administration Panel
  3. How to Create a WordPress Template Starting from Scratch?
  4. WordPress: How to Create the Theme header? (part 1) (part 2)
  5. Let’s take a look at WordPress Loop
  6. Adding the Sidebar to our theme
  7. WordPress: how to make dynamic the Header and the Sidebar of the template?
  8. Hierarchy of the templates and their use: how to create a template for the articles?
  9. How to Create Personalized Templates for WordPress Pages?
  10. Using the Widgets on the Sidebar of Our Template
  11. Personalizing the Template of WordPress Comments

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
[pdf]Scarica articolo in PDF[/pdf]
Tags: ,

The Author

Nando is administrator of Edi Group, a Sicilian web agency founded in 2005. He deals with the development of web applications in php language and the implementation and administration of databases. And besides Microsoft Trainer with years of experience in regional and private training courses as a designer and lecturer.

Author's web site | Other articles written by

Related Posts

You may be interested in the following articles:

13 comments

  1. Brad

Trackback e pingback

  1. Tweets that mention WordPress: How to Create the Theme Header? Part 1 | Your Inspiration Web -- Topsy.com
    [...] This post was mentioned on Twitter by Tom Bangham. Tom Bangham said: WordPress: How to Create the Theme Header? …
  2. How To Create The Theme Header In Your Wordpress Theme
    [...] WordPress: How to Create the Theme Header? Part 1 | Your … [...]
  3. wp-popular.com » Blog Archive » WordPress: How to Create the Theme Header? Part 1 | Your Inspiration Web
    [...] original post here: WordPress: How to Create the Theme Header? Part 1 | Your Inspiration Web Tags: code, custom, …
  4. WordPress: How to Create the Theme Header? Part 2 | Your Inspiration Web
    [...] of our blog / site that we want to show at any point of our template and complete the …
  5. florystyka
    Recommeneded website... below you’ll find the link to some sites that we think you should visit...
  6. Abriendo boca para el curso de WordPress | ceslava | diseño & cursos
    [...] have a look at the Administration PanelHow to Create a WordPress Template Starting from Scratch?WordPress: How to Create the …
  7. florystyka
    Recent Blogroll Additions... I saw this really great post today....

Leave a Reply

Current month ye@r day *