You are reading Make your Own WordPress Theme – Part 3. To read other parts, click on the link below.
- Part 1 – The Layout
- Part 2 – Header
- Part 3 – Index
- Part 4 – Comment
- Part 5 – Sidebar
- Part 6 – Footer
- Part 7 – Finish!
Now we will going into the hard part. Index.php file is the core file in our theme file.
Hopefully your index.php will look like this. (Read Part 1 – The Layout )
<div id="main">
main
</div> <!– close main –>
Call Template Files
Now what we want to do is to call our header.php, sidebar.php and footer.php into our index.php file. To do this we need these functions.
<?php get_header(); ?> – This function will call our header.php file
<?php get_sidebar(); ?> – This function will call our sidebar.php file
<?php get_footer(); ?> – This function will call our footer.php file
Put <?php get_header(); ?> above main id and <?php get_sidebar(); ?> and <?php get_footer(); ?> below the main id like this.
<?php get_header(); ?>
<div id="main">
main
</div> <!– close main –>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
The Loop
Ok whats next? Now we are going to dive into the WordPress loop. Yay… :d This loop is use to display our posts on our website.
The loop start with this
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
and will end with this. I will explain why we need “else:” later. 🙂
<?php endwhile; else: ?>
After the <?php endwhile; ?>, make sure to close the if with <?php endif; ?>.
Put all these functions in our main id and our index.php will be like this.
<div id="main">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
main
<?php endwhile; else: ?>
<?php endif; ?>
</div> <!– close main –>
Now we will focus in the loop. In loop, we will make three div classes. This is use to put our post title, post content and post date, time, etc.
Remember, we are only focus in the loop. Put these div’s in the loop.
<div class=”post_title”>
post title here
</div> <!– close post title –>
<div class=”post_content”>
post content here
</div> <!– close post content –>
<div class=”post_tag”>
post tag here
</div> <!– close post tag –>
Our loop will look like this.
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post_title">
post title here
</div> <!-- close post title -->
<div class="post_content">
post content here
</div> <!-- close post content -->
<div class="post_tag">
post tag here
</div> <!-- close post tag -->
<?php endwhile; else: ?>
<?php endif; ?>
Post Title
For the post title, we use these tags.
<?php the_ID(); ?> – Call our post id to put in our post_title div as id
<?php the_permalink() ?> – Call our post url
<?php the_title(); ?> – The title of our post
In post_title class, we create our post title with link to the post. Here is the HTML + PHP code.
<a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></a>
And include the post id in our post_title div and it will look like this.
<div class="post_title" id="<?php the_ID(); ?>">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a>
</div> <!-- close post title -->
Post Content
In content, we only need one tag to call our post content. The tag that we will use is this.
<?php the_content(__(‘Read more…’)); ?>
Note: You can change “Read more…” to something else.
<div class="post_content">
<?php the_content(__('Read more...')); ?>
</div> <!-- close post content -->
Post Tag
In post tag, I usually put date, time, category and link to the post comment. And I also put a link to edit the post (only viseable if login).
<?php the_time(‘F dS, Y’) ?> – Call post date
<?php the_time(‘h:i a’); ?> – Call post time
<?php the_category(‘, ‘) ?> – Call post category
<?php comments_popup_link(‘No Comments’, ‘1 Comment’, ‘% Comments’); ?> – Call the comment link
<?php edit_post_link(‘Edit’,”,”); ?> – Call the post edit link
We put all these tags into our post_tag div.
<div class="post_tag">
<?php the_time('F dS, Y') ?> | <?php the_time('h:i a'); ?> | <?php the_category(', ') ?> | <?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?> | <?php edit_post_link('Edit','',''); ?>
</div> <!-- close post tag -->
Done! Phew… #:-s
Call the Comments
After we end with the post part, we need to call our comments (will be discussed in Part 4 – Comment). Use this
<?php comments_template(); ?>
and put it before the endwhile tag.
<?php comments_template(); ?>
<?php endwhile; else: ?>
If 404 Error
Maybe some of you wonder why I put “else:” after the endwhile. It is use to display an error text if the page/post is not available.
Just type in any text that you want to display after the else tag. I will type this.
Sorry, but you are looking for something that isn’t here.
And it will look like this.
<?php endwhile; else: ?>
Sorry, but you are looking for something that isn't here.
<?php endif; ?>
Finally your index.php hopefully will become like this. 🙂
<?php get_header(); ?>
<div id="main">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post_title" id="<?php the_ID(); ?>">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a>
</div> <!-- close post title -->
<div class="post_content">
<?php the_content(__('Read more...')); ?>
</div> <!-- close post content -->
<div class="post_tag">
<?php the_time('F dS, Y') ?> | <?php the_time('h:i a'); ?> | <?php the_category(', ') ?> | <?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?> | <?php edit_post_link('Edit','',''); ?>
</div> <!-- close post tag -->
<?php comments_template(); ?>
<?php endwhile; else: ?>
Sorry, but you are looking for something that isn't here.
<?php endif; ?>
</div> <!– close main –>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Next, Part 4 – Comment . [tags]diy, how to, skin, theme[/tags]
seriously, do u know that you could only call for the comment template in single.php or page/php ?? or am i wrong…. index is to show the posts. 😕
we can call the comment from index.php as long as there is no single.php or page.php in our theme folder. i tried them so many times lol… btw i wil put the extra info in Part 7. Wait la… :d
Agree. Ikram go and download Simple theme and tried it. It consists only header, index. sidebar,comments and footer php files only.
believe it or not. you can create theme in single index.php
but, why do something like that, it just gonna screw your ass when editing it. lol
template is something suppose to be easy managed right?
know what. my first theme that i ever make was in index.php only. :d
any idea on where would i do that ? thanks..
and yeah.. its possible.. but i dont think u should do that..
http://www.scoutpress.de/download/wp_Template_Hierarchy.png
here the hierarchy and how the template could / should / would stand..
nicely done thanks,
I try your code and got this error msg
which is this on line 41
something was wrong ? please help a noobie >__>”
thank you.
nicely done thanks,
I try your code and got this error msg
which is this on line 41
something was wrong ? please help a noobie >__>”
sorry for double post
thank you.
check your index.php file on line 41. maybe there is some code error in your php file. or send the file to me and let me check what could be wrong.
xpe ke ada nombor tu..dari 1 hingga la belas2..aku main copy and paste je kat dalam notepad..
atau kena buang nombor tu..Nombor kat tepi belah kiri tu
Hello,
Can someone help me, I planning to create & add the single.php on my current template but I don’t know how to integrate or link that on my template.
:((
your single.php will be displayed when you view in single post. 🙂
I got an error loading website.
So I copied and paste your whole index.php text into a new file, called it index.php , and I still get this error :
Parse error: syntax error, unexpected T_STRING in /home/bonsaira/public_html/blog/wp-content/themes/blackor/index.php on line 14
can you send the index.php to me via email? i will check what i s wrong. thank you.
[Comment ID #26840 Will Be Quoted Here]
Done.
I am getting the same parsing error as the other people mentioned earlier. Have you been able to look at their files and determine what is causing that? Should I send you my file, too because the parsing error is located on line 8 for me. I know that it could be the same thing and just on different lines because everyone writes their code differently.
it is because of the apostrophe. WordPress displays it in wrong way. That is why you get the error.
Nice tutorial…i am new to cms and word press..was studing it for a while but couldnt find anything to dsign my own template…but after this tutorial I can …..Thank you so much!!!!
In case i find some problem I will contact u…
im still getting the parse error… which apostrophe is it? is one of them incorrect? thank you for your time.
| | | |
there are a lot of them… 🙂
All of the apostrophe need to be corrected. Just use the replace function mate. 😀
What do you replace the apostrophe’s with?
great site and thank you!
can you please tell me how to display multiple post when we click in category link? I searched everywhere how to display multiple post but i still found single post display..somebody help me please….
When you click on a category link, it will display a list of posts inside in the category.
Hi. I have been using the tags as references for a layout I am integrating. The special characters such as ,’ ” have messed me up terrible. The PHP keeps coming up with syntax errors which forces me to individually replace the special tags with normal tags scuh as , “”, etc.
Have You Seen This Already?, business plan format free example, business plan format free example, 45119,
Have you seen this site?,
Must See!!! A Promising Site,
Very HelpfulHow Do You Do that? , cam chatting free nude web, cam chatting free nude web, 081,
Hey thanks for the howto. I already know CSS and all that so it was nice to learn the basic structure of making a wordpress theme.
Once again thanks!
Parse error: syntax error, unexpected T_STRING in …\index.php on line 13
My line 13
I try to replace with but still this error ?
I read these comments above…someone help the same problem with me…It’s very nice if you publish a clear text file..because when copying and pasting I have these # character along…Thanks you !
Great Blogg!!! Worth Digging…Check out my site too @pagerank
hey cyperhack did you hear all the comment that get error page from your tutorial ?
you should solve that one by one, because you has already make tutorial for this..
let me help other..
just replace the ” with ” on your ordinary keyboard
your template is sucks i got error everywhere … shit..
you only wasting my time
better you closed all of your theme tutorial..
dumbass
At ‘RADAR LOVE’.
you’re an impatient Idiot and a dumbass yourself. Im sick of reading comments from unhelpful f#$kw&ts like yourself who bitch and moan at people who are actually trying to help others.
So you got some errors, whoopee, if you’re so talented then maybe you should figure it out yourself or maybe its your shit English thats causing the errors?
mahunga kaka….
This was much better, I appreciate your taking time to explain the tags here. It was very clear, concise, and helpful. Thanks so much.
If you are getting errors they are most likely coming from your ‘ or ” characters. just go through and replace them all. When you copy the code it copies it wrong and you just need to manually replace them.
I replaced the ’ with ‘ in index.php where I was having problems, but it still tells me there is a problem on one line. (Line 15, your code) I can’t figure out what it is.
Can you email the index.php file to me? I will look at it and check what is wrong with the code.
What was your favorite toy as a child?
help me.. >: