WP Theme Lesson #14: Footer and Dividing Index
- Filed under: Tutorials
Follow this WordPress Theme Tutorial Series from the beginning.
Today, we wrap up styling and start dividing the index.php file into multiple small files. You’ll need the style.css early in today’s lesson. Later, you’ll work with index.php along with creating some new files. Finally huh? Yes, you’re almost done.
Open Xampp, theme’s folder, Firefox, IE, index.php, and style.css.
Step 1
Add a 10px top padding to the footer DIV. You remember how to add padding right? I’m not giving you the codes this time.
Step 2
Give all P tags under within the footer an 18px line-height. That’s #footer p{}. (You’re done with style.css for today.)
Step 3
- Create a new file, name it header.php. Make sure the result is a PHP file, not a text document.
- In the index.php file, start coping from the end of the header DIV to everything above it. Paste it in the header.php file.
Here’s my header.php file. Don’t copy and paste from my file. Copy and paste from your index.php file.
Step 4
For everything that you’ve copied and pasted in the index.php. Still in the index.php file, replace it with:
<?php get_header(); ?>
is a function within the WordPress theme system to speficially include the header.php file, instead using <?php include (TEMPLATEPATH . ‘/header.php’); ?>.
Save and refresh the browsers. You should see no changes. If your theme look broken after you made the change then there’s a mistake.
Step 4
- Step 4 is more of the same thing. This time, create the sidebar.php file.
- From the beginning of the Sidebar DIV to the end of it, copy and paste into the sidebar.php file.
- Then, in the index.php file, replace it with <?php get_sidebar(); ?>.
- Save and refresh the browsers. Again, you should see no changes.
- Here’s my sidebar.php file.
Step 5
- Repeat the steps above for the footer.php file.
- Here’s my footer.php file.
Lesson review
- You created three new files: header.php, sidebar.php, and footer.php.
- You learned three new functions: get_header(), get_sidebar(), and get_footer().
- The following are my files by the end of this lesson: index, style, header, sidebar, footer. Don’t just copy and paste or use them to replace your own files. If you’re getting errors or your theme isn’t displaying correctly, check your codes against mine.
I noticed you are no longer in the top 100. I guess Technorati is smart enough to realize all your links come from Wordpress themes and exclude you. Thanks for the great tutorial series by the way.
I contacted them. That’s actually what they said. I’m not in the popular 100, but still rank in the 50s.
It doesn’t matter now though.
You’re in my Top 100 - in fact, you’re my Number One at the moment! With the help of this tutorial, I’ve managed to edit the theme I’m using to add an extra (righthand side) sidebar to display my google ads, plus stuff I want to take out of the normal sidebar.
Thanks so much.
The Technorati thing was fun while it lasted.
Without you reading my lessons everyday, I wouldn’t have anyone to write lessons for. Thank YOU.
Small typo -
- get_footer’s in there twice.
thanks dean. fixed.
With the file broken up this way, I noticed that the div with id=”wrapper” is opened in header.php, but closed in footer.php. This makes the programmer in me cringe. Is there a way to structure the code so that all tags are opened and closed in the same source file?
Keith - You don’t need to split your source file into multiple source files. WordPress needs only one file, index.php, to function.
However, in this case, using only one source file actually makes it more difficult to keep track of everything.
Splitting it up into multiple files gives you some breathing room, control over multiple versions of one template, and better organization.
At the end of the day, it doesn’t make much of a difference, everything comes back together to procude one web page.
I follow all ur steps in this lesson,but in the end today, I find the whole page runs well in firefox, but wrong in IE 6.0.
The wrong in IE is only that the sidebar aligns left , so and it appears under the post. Could u tell me why it happens?
lulu - others have followed this tutorial without a problem. i’m sure you missed something or content is stretching beyond the main column, pushing the sidebar down to the bottom.
lulu:
The same happened to me when I closed width with a colon instead of a semicolon. Check you CSS file again for such a mistake.
SP: I recommended your Website to my brother. He likes PHP and its applications. Thanks so much for you efforts again
You are totally rocking my web page world right now! This tutorial has made everything 10,000 times clearer.
Just wanted to let you know you are appreciated.
Cheers!
Thanks Laura
They should have a function for a possible second sidebar too. Or you could just the php include(); or whatever.
Notepad is wild, no syntax coloring, though if your a good coder, notepad is just as good.
that’s why it will never wor. Ruud Orlagh.
Hi, I just read it to get a grip on WordPress. To that end it served it’s purpose but going into detail on how to open notepad seems a bit overdone.
The layout however does not seem to work to well. In my understanding of CSS you need to order the section from top to bottom first.
Then use a new layer of entries to create the sideways effect.
Newer browser seem to do things more by the book and gadgets that worked with older versions will not work, work against you or …..
I like the WordPress section. The stylesheet part is not complete in my view but it never was my objective anyway of these pages.
I would prefer a compact version of you document just focussing on WordPress themes basics only and taking the other bits for granted. But that is just my 2 cents.
Hey. Love the tut. I have two things to ask. One is can you use the template path for image sources and the other is how do you get a date displaying for a post? I can’t seem to find that.
Brilliant otherwise.
Yes, you can use templatepath for images. For dates, use the_date(’F js, Y’).
Hi SP,
i have same problem with @lulu. the sidebar appears under post in IE 6.0. But whe i change table widht to 90% it’s work well. Could you explain why? i’ve used
in .sidebar{} styel.
Thanks
I can’t explain why because there are multiple factors that can push the sidebar below the posts. I can’t pinpoint it unless you show me your blog.
If you need help, please use the Wpdesigner support forums here:
http://www.wpdesigner.com/forums
Thanks alhakim
Hi SP here my blog : http://cyberzone.ej.am.
hi SP,
my question for you is why you didnt use
instead of:
like you did for header:
?
Thanks for putting your time on this.
why my question didnt show up?
here is a picture of my question:
http://i10.tinypic.com/89heqlz.gif
because get_header is already there within WordPress templates for you to use and it’s shorter
Man,
this is the best tutorial I’ve come across IN MONTHS !!
clear, step-by-step, everything WORKS, no weird quirks or things I have to correct. Although I had a pretty good knowledge of html, css and php, this just unravels the main components of the wordpress-system, just what I needed.
Thanx.
Ok, now I’m gonna finish those last lessons…
grtz,
Tom.
hi,
First of all let me start by seriously thanking you for a great wordpress tutorial. I have going through each lesson properly and trying to make my very own wordpress website
I was wondering if you could help me with something
I have been trying to get a custom made design for the header and i succesfully did it too but i was trying to give
a css code to give it left padding of 50px
the page is http://www.madmansparadise.in/
the css code
#topgraphic {
padding-left: 100px;
float: left;
width: 900px;
height: 220px;
background-image: url(’images/header.jpg’);
background-repeat: no-repeat;
}
xhtml code
but as u can see it just doesnt pad..the image is there and everything else is fine but it wont pad for some reason
any help would be great thx so much
regards
anando
sorry i forgot to add the xhtml code
ok my bad ..
the tags are making the code go lol so i am removing the
(code edited)
i am sorry ..didnt mean to spam!
Hi Anando,
Please use the forums for any support related question. I didn’t look through your entire code, but one thing I can spot is you can’t give paddings to elements with a fixed width.
width: 900px with any padding is not possible across all browsers.
oh i see thx u and i didnt realise next time ill use forums
and ill see if that fixes the bug
regards
Anando
i think ive fixed the code
#topgraphic {
width: 900px;
height: 230px;
background-image: url(’images/header.jpg’);
background-repeat: no-repeat;
position:relative;
float: left;
left:50px;
top:10px;
}
this works …thx for all ur help appreciate it
regards
anando
This is for Keith Lawless and others programers like him (me included) that cringe when they see a function opened in one file and closed in another.
I didn’t like it so i didn’t do it ; D I left the wrapper and in the index.php file and it worked just fine. I also left all the opening and closing html bits in my index file. The only things i moved into the header, sidebar, and footer files were their divs and the things contained inside of them.
ROSEWYNDE and Keith, I wouldn’t call myself a coder by any stretch of the imagination, but this struck me as odd and potentially confusing, too. For what it’s worth (if it is worth anything), I looked at the Default and Classic themes that come with Wordpress and noticed they break up the code the same way SP has suggested. I haven’t looked at other themes, but is this the standard way to do it in Wordpress?
I initially changed it to be what I thought was more organized, but after seeing these other examples I changed it back to SP’s way. Anyone have any other thoughts on this?
Thanks, Small Potato.
Brock, ive just completed this tutorial for the 2nd time, this time adding 2 sidebars and an image for the header, my first time working with CSS and making a theme for anything.
I just got it looking fine in both Firefox and IE, then followed the instructions to place the header code in its own file, upon refreshing in each browser, FF stayed fine but IE had both sidebars shifted to the right a bit, i though it unusual to see the wrapper div opened in the header and not closed in it, so i just copied the header code back into the index and its ok again.
For me personally im going to leave the code as it is in the index file, as suggested above theres no right or wrong about doing this so il leave it that way.
I know SP doesn’t own this site now but out of respect anyway, thanks to you SP for putting this tutorial together and hopefully the new owner keeps it online for many years to come.
Its helped me a lot, considering ive never done anything like this before.
shaw hai diu lee ssee fee tjai