WP Theme Lesson #4b: Header Template Continues
- Filed under: Tutorials
Alright, this the fourth lesson of the WordPress tutorial series. I shouldn’t have to say it, but I’ll say it one last time; make sure you read the previous lessons. Otherwise, you will not understand one thing in this lesson. We have a quick lesson today to wrap up the header template and introduce the box model.
Step 1:
- Start Xampp control
- Open the theme’s folder, named Tutorial
- Open a browser, point it to http://localhost/wordpress
- Go back to the theme folder, open index.php in Notepad
Step 2:
Currently, you have:
<a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a>
Add <h1> and </h1> around it. The H1 tag means heading 1. There are six headings all together: H1, H2, H3, H4, H5, H6. By default, H1 is the biggest one in size and H6 is smallest.
So now you have:
<h1><a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a></h1>
Save it, go back to the browser and refresh.
Step 3:
Call for your blog’s description, type <?php bloginfo(’description’); ?> right under the codes for the title link. Now you have:
<h1><a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a></h1>
<?php bloginfo(’description’); ?>
Save it, refresh your browser to see your blog’s description appear under the title link. You can change your blog’s description in the administration area later.
<?php - start PHP
bloginfo(’description’) - call for my blog’s information, specifically description
; - stop calling for the description
?> end PHP
Step 4: This step introduces you to a new tag, the DIV tag.
Type <div> and </div> around everything:
<div>
<h1><a href=”?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a></h1>
<?php bloginfo(’description’); ?>
</div>
Save it, refresh your browser. You should see no changes.
Think of DIV as an invisible box. It’s there to separate your blog’s title link and blog’s description from everything else. If you don’t style it, it does nothing other than separate content. Later on, you’ll use the style.css file to style your invisible box. You can give DIV borders, paddings, margins, background color, background images, etcetera.
Step 5:
Add id=”header” to the DIV tag, like this:
<div id=”header”>
Save your notepad, refresh your browser.
This change also does nothing, for now. We assign an ID to the DIV tag because there will be more DIVs or invisible boxes. You need a way to separate one invisible box from another right?
Follow this WordPress Theme Tutorial Series from the beginning.
[…] WP Theme Lesson #4b: Header Template Continues […]
Currently, you have:
(edited. code does not work in comments)
Add and around it. The H1 tag means heading 1. There are six headings all together: H1, H2, H3, H4, H5, H6. By default, H1 is the biggest one in size and H6 is smallest.
So now you have:
(edited. code does not work in comments)
Im not sure if this is just a typo on your part or if my lack of knowledge, But is there supposed to a then you add h1 tags and then the ) If the
Bryan,
Your comment codes doesn’t work just by pasting. Do you want me to edit out the codes?
I don’t get what you’re trying to ask me.
well yeah im in idiot but there is a less than sign that is missing when you add the div tags in and i was wondering if this was accident or not. Like right before php bloginfo on the post which is after you do h ref command……I hope that helps.
Umm yeah I just went to step 5 oday and realized that it was changed there so if you compare the codes from lesson 4b to lesson 5 there is a minor difference in the coding. Just the one tag in the body portion of the coding.
Bryan
I see what you’re talking about. I fixed it. Thanks Bryan.
Hey Not a problem…Thanking you for doing these lessons….They are helping me out quite a bit…Now i dont ahve to pay someone to create a custom theme for me. I had prior knowledge of html and php and stuff and until now I havent found any tutorial sites that have been able to spell it out to my thick head. Maybe Ill be racing you to million;)
Small potato, you’re “GOD” in giving wordpress theme tutorial! I’ve been looking out for one that puts everything in “plain English”, if you know what I mean. You did a great job at that. Bravo.
Small potato, cheers for taking the time to put this tutorial together. I’m new to WP and have only a moderate knowledge of HTML and CSS, and can’t get my head around dynamic web design. You do an excellent job of explaining things.
Thanks!
thanks for the guide, i new to WP and you is very good master.
[…] 翻译自：WP Theme Lesson #4b: Header Template Continues […]
I’m really enjoying this tutorial. This is really great, and just what I needed. Really great job, I tried to teach myself PHP awhile back and didn’t understand it, but now I actually can figure out what I’m doing.
Thankyou so much.
~ Roseanna
Am I correct in presuming Step 5 is after the in step 4?
[…] 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 Title #5e Posts Nav Link #6 […]
On step 3, you showed the code for calling the blog description. It failed to show the description while testing my blog. However, I changed it to with the two {} added and everything works fine.
Good… I understand every step… It seems not hard… Only a question: “Is it this tutorial to make a compatible wp 2.2.3 theme?”. Good job MAN!
God Job. I have understando also this step. Is important to make a good quality theme that is not based over other themes.
I so love this tutorial
I lashed at her clit in my buttocks were spread alyssa milano naked them to fit for the.
Hello, I’ve really enjoyed these tutorials so far (they’re the only ones I’ve found that make any *sense* so far, so well done!), thank you for writing them!
But I have a problem with the code I’ve written using them, and nobody seems to be able to help :/
I posted about it in the Wordpress support forums here -
http://wordpress.org/support/topic/140174
Hopefully you have a suggestion as to what I’ve gotten wrong, but I’d be really grateful either way! ^^;
You probably added something extra to the link location of the blog title link. Keep going with the tutorial until one of the lessons give you some files to compare.
Soon the density of her shorts andpanties femme de louis 14 off, sinceits dimensions, she casually answered. Alice, and.
Awesome style of teaching dear I love you for the series of post. Off to Chapter 5
Excelent!!
But I got some problem,
the doesn’t show the Blog Tagline, but show the Blog Title like
Also the doesnt’ refer to the correct url of my blog. Is there something wrong?
Sorry for my previous comment… I didn’t know that PHP tag won’t show up. Here is the right one:
the doesn’t show the Blog Tagline, but <? bloginfo(’description’) ?> shows the Blog Title like <? bloginfo(’name’) ?>
Also the <? bloginfo(’url’) ?> doesnt’ refer to the correct url of my blog. Is there something wrong?
Ah, sorry I’ve found the problem…
I’ve copied the script
Anybody.. surely, don’t copy the script. Type it..
I’ve been tweaking themes (yours among others) for too long. Thanks for teaching me the real thing! Off to learn more at lesson 5
What is the difference between div id and class ?
id is unique and used only once on each page
hi small potato, thanks for this wonderfully clear tutorial on themes! but Im wondering how advanced/creative i can get with css/xhtml. for example, could integrate php/mysql onto my site http://www.brockhillcafe.plus.com in the future with that current or a similar design?
thanks in advance
James - Sure, why not? Think of WordPress template system as a way to shortcut the tedious task of having to duplicate something over and over again. There’s really no limit beyond that point.
[…] WP Theme Lesson #4b: Header Template Continues oleh Small Potato diterjemahkan ke Bahasa Indonesia oleh Mochammad […]
Can you help me for converting my psd into wordpress theme please ?
Great thanx for your nice tutorials ….
Vinit
sorry, i can’t do that.
Ateleast can you tell me the method for doing the conversion ? Or any tutorial where i find all information ? anything ?
I can’t. There is no basic way to explain it. You need xhtml/css/php knowledge. Learn how to create a theme from scratch and you’ll get it.
wow.. this is like a treasure.. i should have found this ages ago… you are such a brilliant person.. thanks for sharing this..
amazing
Haha, it’s “et cetera”, not “etcetera”.
=)
small potato, your the smartest potato i’ have ever meet . . . i’ll be expecting more help from you..god bless…are you a chinese?