WP Theme Lesson #4: Header Template
- Filed under: Tutorials
If you haven’t already, follow my WordPress theme tutorial series from the beginning. If you don’t, good luck. Yesterday, I showed you how to turn on Xampp Control, install your theme, and introduced you to PHP. Today, we’ll continue with PHP and learn how to call for your site’s or blog’s title.
Remember, type every code. DO NOT copy and paste the codes that I give you. The whole point is to get you to remember what you learn.
Step 1:
Turn on Xampp Control. Next, open your theme’s folder at xampp/htdocs/wordpress/wp-content/themes/tutorial. You should see the two files you created yesterday: index.php and style.css.
Your index.php and style.css files should match: index.txt and style.txt.
Step 2
- Open a new browser window. Go to http://localhost/wordpress. You should see a blank page because you installed your empty theme yesterday.
- Go back to your theme’s folder and open the index.php file in notepad. To do that, right click on index.php, select Properties, click Change, find Notepad or the text editor you’re using, select Notepad and press OK. After the change, double click on the index.php file.
So far, you opened your themes folder, browser, and index.php file (using notepad).
Step 3:
You should be looking at your index.php file in Notepad. Type:
<?php bloginfo(‘name’); ?> in between the <body> and </body> tags. Now save it.
Go back to your browser, refresh it. You should see your blog’s title. My blog’s title is Demo Theme Development.
What just happened?
You added one line of PHP codes to your index.php within the body area of your web page. That one line called for your blog’s information, hence, bloginfo(). Specifically, it called for the name of your blog. The name that you have as Weblog Title on your Options page.
<?php – start PHP
bloginfo(‘name’) – call for blog’s information, specifically blog’s title.
; – stop calling for blog’s information
?> – end PHP
Each time you add or change anything in your index.php file, save, then refresh your page to see the change.
Step 4:
To turn your blog’s title into a text link. It requires an XHTML tag. Go back to your index.php file.
Add <a href=”#”> and </a> to the same line. Your new line of codes should be:
<a href=”#”><?php bloginfo(‘name’); ?></a>
Go back to the browser, refresh and you should see your title turned into a link.
Now, it’s a link, but it’s a link that points to nowhere. Since it is your weblog’s title, you want to make it link to your front page. To do that, type:
<?php bloginfo(‘url’); ?> in between the quotes of href=
Save it, now you have:
<a href=”<?php bloginfo(‘url’); ?>”><?php bloginfo(‘name’); ?></a>
Go back to the browser and refresh. When you hover on the link now, the status bar should display http://localhost/wordpress
When you click on it that link now, it sends you to your front page. You’ll be looking at the same page, but whether you have # or http://localhost/wordpress as your link’s address is a huge difference. You will see the point to this in the coming lessons.
What just happened?
You turned your website’s title into a link and pointed the link to your front page or blog’s home page.
bloginfo(‘url’) – calls for the your blog’s information, speficially the address or URL of the front page
<a> – is an XHTML tag for opening a link
</a> – is the closing tag for a link. Otherwise, your web page will not know where to end the link and the rest of your page will be one big link. Remember part of rule #1? Close everything you open.
href=”" – is short for hypertext value. Whatever’s in between the quotation marks of href=”" is the value
In words, the codes:
<a href=”<?php bloginfo(‘url’); ?>”><?php bloginfo(‘name’); ?></a>
means: I’m starting a link. The value of my link is my blog’s URL; I’m using the PHP function bloginfo(‘url’) to call for the address/URL. The name of the link is my blog’s title; I’m using the PHP function bloginfo(‘name’) to call for my blog’s title. Close my link.
I introduced XHTML to you today so I’ll end this lesson here. Don’t burn yourself out.
Follow this WordPress Theme Tutorial Series from the beginning.
[...] WP Theme Lesson #4: Header Template [...]
[...] 原文地å€: http://www.wpdesigner.com/2007/02/23/wp-theme-lesson-4-header-template/ [...]
dude
once ive got everything that you have said down
the hyper link still points to a localhost dynamic url instead of http://localhost/wordpress/
is this just not supposed to work atm or is there something going wrong?
great tutorial series so far
ive waited to actually read it till you got to a point where i think i can figure the rest out after i get done with what you have out
because im impatient and knew it would annoy me to wait for you to come out with lessons
lol
it suppose to point to http://localhost/wordpress because that’s your home address.
it’s just that it’s no longer pointing to #.
although:
http://localhost/wordpress/ and http://localhost/wordpress/# will land you on the same page. it does make a difference when your theme is complete.
Hey,
Thanks for this site learning alot – unfortuantly i can’t get anything showing at all – even when I copy the codes completely from the index file. I am working on a mac – with mamp and editing in Textedit (switched to plain text) – really can’t work out what the problem is?
Thanks
I can’t give support to Mac users.
Is your local wordpress install working at all?
Yeh everything else is working fine, just getting a new text editor – might be that?
x
no clue =)
[...] Intro #2 Template Files and Templates #3 Starting Index.php #4 Header Template #4b Header Template Continues #5 The Loop #5b The Content #5c Postmetadata #5d Else, Post ID, Link [...]
Please note that if you were to paste this into the text editor, the quotes are closed quotes. The end result is that the link that appears in the status bar and the link in index.php does not bring you to the front page.
That said, your tutorials are easy to follow for beginners like me. Thank you.
Niz,
I edited the code line because the codes you were trying to show me didn’t show correctly. (You can’t post codes through comments).
In this lesson, you never actually leave the front page view. All I’m showing you is how to turn the title into a link, that links to the front page.
im stucked on this step. Ur tut is easy to follow though i’m having problems implementing it on my end. i followed everything you said.
First off, i didnt download wordpress on my computer. I’m using my website to learn this and smartftp to upload the files. Kindly check my site pls. if you hover the mouse on the link on the bottom it says, “http://payscrib.page.ph/?donalyza?/” im wondering why it does have a (?).
The code that I used is written after “Save it, now you have:” on your post. Am I lost???
hehe, in a matter of less than 10 mins. I was able to figure it out. Some of you might be encountering the same thing. I’ll share mine, i usually copy and paste the codes of small potato but when I manually type them it worked. it’s something to do with the quotation (“) and/or (‘) on the his site, its not recognizing it.
hey, i thought i told you not to copy and paste? hahaha
[...] ä»‹ç» #2 模版文件与模版 #3 首页 Index.php #4a 页眉模版a #4b 页眉模版b #5 循环 #5b æ£æ–‡ #5c æ–‡ç« Metaä¿¡æ¯ #5d å…¶ä»–ï¼Œæ–‡ç« IDï¼Œè¿žæŽ¥æ ‡é¢˜ [...]
hi SP! thanx for this tut!
but im still in lesson 5,
but this part stil wont work.
â€>
Weblog title: chris
Tagline: new
WordPress address (URL): http://localhost/wordpress
Blog address (URL):http://localhost/wordpress
it turned my title underlined(link)
but when i click it it will give me the error page,
“Object not found!
The requested URL was not found on this server. The link ..”
pls help.!?
ehhehe sori..
it already work, you really need to type the code huh.?
yes, stop cheating hahaha
So,
I am stuck, I’ve tried typing the whole thing, deleting the file cause it didn’t work, (index.php), and then re-uploading it with a normal FTP application. Nope… the even more strange thing is that when I view the source of the blank page it shows NOTHING… not even a stitch of code. I am starting to think that maybe it isn’t even looking at my theme files. But that doesn’t make any sense. If I remove the index… I get an error… so it MUST be using it.
I’ve tried manually typing, copy/paste, I even tried something in a desperate attempt, I made a copy of the default theme index.php… just to see SOMETHING other than a blank page… nothing…
Derek – Please post your questions at the forums or email me so I can help you with this.
Thanks Small Potato!
Of course, yesterday, with some fussing and such I finally figured it out!
I copied a txt file I created on my studio machine over the network. It was one I created on my Mac OSX system. It wasn’t in the correct ‘format’ so it didn’t think it was that correct normal ‘encoding’….
Go figure!
Ah, this ” and ‘ problem had me thinking for quite a while! Looking closely at the code I could finally see the difference between the ones that had been pasted and what the typed versions should look like!
Works a dream now!
Many Thanks.
Okay so when I type the code out manually I get my title – But, no url. When I copy and paste I get the url and title – But, the url points to
http://localhost/wordpress/“Catchacold”
Anyone have any ideas?
Thanks
bloginfo(‘name’) grabs the title, bloginfo(‘url’) grabs the url
Hey i was stuck too… i know it sounds crazy but just type the code and it’ll work… copy-paste just not working!
Btw.. .wanted to share this too… After spending hours on the official documentation site and some other tutorials on the web, this one finally makes sense (to me at least).
Small Potato… thanks so much for taking the pain to put this article for lesser mortals like me.
Cheers!
Sanjeev
SP, first off this is a wonderful site and tutorial. I completed the tutorial and have most of the site working well, just needs some CSS work. My question has to do with the “Presentation” panel in WordPress. With the new theme created–based off your tutorial, the CSS bleeds out so all you see are lines of code for a selection in the “presentation” panel. I went back to double check your tutorial and looked at the “default” theme file to try and fix the problem, I still get the same error. Is there a fix for this?
Thanks again for your wealth of knowledge.
If there’s any error on the Presentation page, then double check your theme’s info area in the style.css file.
Many people completed this tutorial and this is the first time I’ve come across a problem like you described above so you’d have to show me if you want me to know exactly what it is.
I found it was due to that I needed to change the file permisions on my website to CMOD 7777
I’ve installed AppServ and WP in my PCs, it should work perfectly….
Yeah, I was having trouble too–don’t copy and paste! It’s the quotation marks. They are backwards on the website, but if you type them in yourself, they are the correct format.
Great tutorial!
So far, so good! I’ve gotten through lessons 1-4 in about an hour and a half…and still going. Thanks so much for the tut!
finish lesson 4
will try to continue to lesson 5
Thanks for the tutorials, but I highly recommend you fix the quotations in the post(s). All you’re doing is discouraging newbies because they can’t figure out what’s wrong when they copy+pasted your code. Don’t just assume everyone’s going to be as obedient as the next. I hope you didn’t do that to be “teaching them a lesson.”
I actually did
Copy and paste is no way to learn how to code.
just have to say that I love this tutorial!!!
code should be:
<a href=”/”>
not:
<a href=”">
note trailing / after in
Perhaps this is why the folks above are getting file not found error. I did too, th code above taken from another theme fixed the error.
-= Frank =-
Thanks for so nice explanation
Vinit
[...] WP Theme Lesson #4: Header Template oleh Small Potato diterjemahkan ke Bahasa Indonesia oleh Mochammad [...]
Hi,
I wrote the code just as you said for tutorail #4, but the link does not go back to my home blog page. Instead it give me the following error message.
Not Found
The requested URL /wordpress/�Mosaic was not found on this server.
when i role over the name of my blog mosaic photography the address for the blog does not appear correctly, there is extra stuff it reads
http://localhost:8888/wordpress/?Mosaic instead of
http://localhost:8888/wordpress/
Please help!
Jordan
XAMP is great for Windows, but for those in OSX that want a similar (and even easier) install of Apache, MySQL and PHP there’s MAMP — http://www.mamp.info/
Jordan – Could you bring this to the forums so I can take a closer look at your codes?
@Geoff – Thanks for the link!
How to convert a psd into wordpress theme ? Can u guide me ?
I do have a tutorial on that here, but it doesn’t guide you through more complicated techniques.
[...] Intro #2 Template Files and Templates #3 Starting Index.php #4 Header Template #4b Header Template Continues #5 The Loop #5b The Content #5c Postmetadata #5d Else, Post ID, Link [...]
Hello,
I just started using Word Press, and I wanted to make a theme. I found what looks like a great tutorial. However, in this part of the tutorial i got stuck.
The bloginfo (‘name’) is not displaying the name. I read through the comments and people said to type the code in and do not paste.
I did this and nothing happend, I get a white page.
I have word press installed in my computer using WAMP5 Version 1.7.2 which has:
– Apache 2.2.6
- MySQL 5.0.45
– PHP 5.2.5
Which meets the min reqs for WP.
I downloaded other themes to try it out and they work fine.
So any suggestion as to why this is, would be appreciated.
Also one more question the bloginfo() is a function? but that is called from within wp itself right? So if you try to run it from another place with no WP it will say that the function is undefined right?
bloginfo() is a wp only function
do you have any suggestion as why its not working for me? Because i did as commanded, any suggestions?
Could you take this to the forums and actually show me what the problem looks like?
You said other themes worked.. But on the test theme, is bloginfo(‘name’) the only thing not showing?
the link
<a href=â€â€>
did not work for me? (Using a mac)
Not Found
The requested URL /wordpress/�ready was not found on this server.
Apache/2.0.59 (Unix) PHP/5.2.5 DAV/2 Server at localhost Port 8888
so I changed it
<a href=”/”>
works fine now! any ideas?
This is so wonderful….. i feel like im in 1st grader. I get excited every lesson you discussed and i got a perfect score…. more power to you small potato.
You tricky guy, you…
The bastards have updated WordPress, and I can no longer follow lessons #3 and onward because I can’t select your tutorial (no template). Arrrrgh! Is there a simple fix?
Do not copy! If you do. then change the quotation marks!
[...] Word Press theme # 3 [...]
<a href=”">
Use that cod it will fix everyones weird error.
This site’s the bomb! 4 lessens and you’ve opened up WP unlike any other site out there!
php your mine!!!
I would agree with BIG DADDY! Don’t think I would have ever tackled this with out your help. Oh, and I learned the Copy and Paste lesson the hard way.
Thanks for taking the time to make such a great tutorial. I can’t wait to see how the rest of it flows. If it’s all this good you have a new student for life!
Thanks!
Hey, great set of tuts man, but I just realised, this may work for WordPress 2.3.x, but since we’re now a head in the WP versions, it makes your well laid out tuts, obsolete.
Not sure if you’re gonna bother or not, but any chance of updating all your posts to reflect the 2.5.x version?
Thx
Excellent tutorials so far. I would suggest adding a link to the next article in the series at the end of each article, to make for easier navigation. Thanks for all the hard work!
Just going thru your tutorials now pretty good i must say, also i love your awsome red circling leet skills there
6 hentai hentei maho henati hentai maho 6
when i was trying to make the blogs title to a text link, i saved the php file, refreshed the browser, and then go this error…
Parse error: syntax error, unexpected ‘<’, expecting T_STRING or T_VARIABLE or ‘$’ in /home/workfi5/public_html/blog/wp-content/themes/tutorial/index.php on line 22
now what?
Hey, I just found your tutorial and I have just read until this part. I did not copy and paste the codes you provided but I typed it out myself. However, when I go to http://mysite.com/wordpress, NOTHING is shown. I read the other comments and there are people having the same problem as mine.
I used Firefox, Opera and Internet Explorer to view it and NOTHING comes out in any of them. (Latest version) I downloaded other themes and they are working. Tried 3 themes too.
Hope you can solve this. Thanks.
p/s: Please don’t ask me to post on the forum because:
1. I’m not a member of that forum (wherever it is)
2. I read your tutorials and followed them completly. (:
When type your self all the code it works.
I am having the same problem as RIN, and I have been following these lessons to the letter from the beginning. I think the problem is that this tutorial is from over two years ago, and was with an older version of WordPress. The current version I am using is 2.6.3, and there is a 2.7.x beta version for testing.
In tutorial #3, you say, “Looking at the administration area. Click on Presentation and click on the theme named Tutorial to activate it.” This is now different; there is no “presentation” area anywhere.
After following every step in tutorial #3, here is a screenshot of what I get in Step 5.
http://img262.imageshack.us/img262/2534/screenshotsl3.jpg
It does not show any themes available to apply. I think this is our problem, because we are unable to apply the theme, which they did back in Step 5 of tutorial #3 with the older version of WordPress. Perhaps there is some new additional file or code that is necessary for the newer WordPress to recognize the “tutorial” folder, the index.php and style.css files as a theme?
Small Potato, please come to the rescue! What do we need to do make the theme show up in WordPress now?
Thanks!
I meant to say that this tutorial is from over ONE year ago, not two… I was thinking to myself that it is getting close to being two years old, however.
Oh crud… Small Potato is no longer the owner of this site and the new owner’s contact info is not available yet.
Please try to update this tutorial, new owner! It has been an invaluable source for wp theme design and I would hate to see it become obsolete.
Thanks!
Okay, I seem to have gotten around this by accident. I created a second folder in the “themes” folder, in addition to the “tutorial” folder that we have been working in… for some reason then it under the available themes under “design”, it showed the two folders as two available themes… I guess with one folder it doesn’t register… no clue, maybe just a glitch on my part… figured I’d post it here in case it might help anyone else
juhygtrfeds
juhygtrfeds
[...] Intro #2 Template Files and Templates #3 Starting Index.php #4 Header Template #4b Header Template Continues #5 The Loop #5b The Content #5c Postmetadata #5d Else, Post ID, Link [...]
For all of you that get an error once pressing the link. Be sure not to copy paste from the text. Because the hyphens may be incorrect. Type it in yourself. That corrected it for me.
[...] Intro #2 Template Files and Templates #3 Starting Index.php #4 Header Template #4b Header Template Continues #5 The Loop #5b The Content #5c Postmetadata #5d Else, Post ID, Link [...]
i have and error
” There doesn’t seem to be a wp-config.php file. I need this before we can get started.
Need more help? We got it.
You can create a wp-config.php file through a web interface, but this doesn’t work for all server setups. The safest way is to manually create the file.
Create a Configuration File “
im in trouble of what this error what to say… please help me because im new to wordpress and im very eager to know it…. plssssssssssssssssssssss…
If for any reason this automatic file creation doesn’t work, don’t worry. All this does is fill in the database information to a configuration file. You may also simply open wp-config-sample.php in a text editor, fill in your information, and save it as wp-config.php.
Hi! first of all loads of thanks for sharing such a great tut!
in the following line :
<a href=””>
From where does the value for the url comes? that is, when i click on the link it gives me an 404 error message! and doesn’t redirect to anywhere.
I m a fan of ur tutorial. thank you for sharing