Talking about Tutorials and WordPress.
October 10th, 2007 update: part 2 is online
Since I installed WordPress, I always wanted to make a theme on my own, but I’ve never had the time to learn how to do it.
In these last days, when I installed the Torn theme, I started playing and messing with WP files, and now I think I can tell you something about WordPress header.
It’s just the header, I know, but it’s a good start to a brand new theme.
To change the header you have to edit the header.php file you can find in your wp-content/themes/yourtheme directory
According to WP Codex the default WP theme is made in this way:
Just like the Kubrick theme, I presume.
Line 1: Beginning of the “header” div, the header itself
Line 2: Another div called “headerimg” where according to the codex you should place your background image. Personally I don’t like this solution, and as you will see, I removed this div from my custom header
Line 3: Beginning of the h1 heading
Line 4: Anchor to the main page of the blog. get_settings(‘home’) writes the absolute path of the blog
Line 5: Writing the name of the blog. bloginfo(‘name’) writes the name of the blog and closing the anchor
Line 6: End of the h1 heading
Lines 3-6 writes the name of the blog in h1 heading and link the name to blog homepage
Line 7: Beginning of the description div
Line 8: Writing the description. bloginfo(description) writes the description of your blog, that “Just another WordPress blog” you see when you firstly install your blog
Lines 9-11: Closing all tags
This is how this blog header would look if I used this header
As you can see, it shows the name of the blog (Emanuele Feronato) in h1 heading, the description (blog of an italian geek) in plain text, and the name has an hyperlink to the blog.
The whole thing sucks a bit because it has no CSS applied, but at the moment I want to focus on the contents we are going to put in the header.
So the question is: what can you see in most blog headers that you cannot see here?
Yeah, right, the “bar” with the pages! That “about”, “contact” and so on you see almost on every blog and that we don’t have in our header.
WP provides a function to display all pages called wp_list_pages() and it’s fully described at this page.
In five words, this function outputs the pages as a
So my new header now is:
As I told you, I removed the headerimg div and added another div under the description.
Line 9: Beginning of the id where I list the pages
Line 10: Beginning of a unordered list
Line 11: Calling the wp_list_pages function
Lines 12-13: Closing the tags
I want to focus a bit on line 11. What is that ‘title_li=’ argument? By default, the father of the list of pages is “Pages”. This means that if we call the functions with no arguments, the first element of my list is “Pages”. I don’t want that “Pages” to be displayed and this is the way to do it.
Real world example: imagine you have two pages: About and Contact.
If you call wp_list_pages() the output will be:
- About
- a href="http://emanueleferonato.com/contact/" title="Contact">My Works
While if you call wp_list_pages(‘title_li=’) the output will be:
That is the one I prefer.
So my header at this time looks this way:
That still sucks, but this time I have all the information I want to be displayed on the header.
Now it’s time to play with CSS. You have to edit the style.css file you will find in the same directory as header.php
#header{
margin: 0px auto;
margin-bottom:10px;
width: 985px;
color: #fff;
height: 175px;
background: url(images/header.png);
}
#header a{
color:#fff;
text-decoration:none;
}
#header h1 {
color: #fff;
border: none;
font: normal 24pt verdana;
padding-left:230px;
padding-top:50px
}
.description {
font:normal 12pt verdana;
color: #fff;
margin: 10px 250px 0;
}
#pagelist{
text-align:right;
padding-top:30px
}
#pagelist ul{
margin:0px;
padding:0px:
}
#pagelist li{
display: inline;
list-style-type: none;
padding-right: 20px;
position:relative;
}
#pagelist a:hover{
text-decoration:underline;
}
Lines 1-8: Styles applied to the div called “header”
Lines 10-13: Styles applied to the links in the div called “header”
Lines 15-22: Styles applied to the h1 heading inside the div called “header”
Lines 24-28: Styles applied to the div called “description”
Lines 30-33: Styles applied to the div called “pagelist”
Lines 35-38: Styles applied to the unordered list inside “pagelist” div
Lines 40-45: Styles applied to the list items inside “pagelist” div
Lines 47-49: Styles applied to the links inside “pagelist” div when the mouse is over them
And this is the result
As you can see, with a couple of WP functions, an image and a few CSS lines you can redesign your header as you want.
Now I hope that when you look at a nice blog header, you are able to make it one even better on your own.
Now move part 2 for another customization.
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.