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!