meinterest

i, here we come again with another lesson on how to create your own theme for wordpress. Last lesson we talked about LOOP, this lesson we will add more codes to finish the posts part.

 

Here we go…

 

Step *1: well, I am not going to ask you to open xampp, index.php and your browser. You should know that…right??

Now this is the code we did it last time.

<div id=”container”>
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class=”post”>
<h2><a href=”<?php the_permalink(); ?>“><?php the_title(); ?></a></h2>
<div class=”entry”>
<?php the_content(); ?>
</div
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>

Now, I will add the postmeta to the post area. What is the postmeta? The post meta data is the information you provide to your readers about each post. It can be the author of the post, the category your post is related to, and the comments. Add this code under  <?php the_content(); ?> and save.

<p class="postmetadata">
<?php _e('post under&#58;'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php  the_author(); ?><br />
<?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?> <?php edit_post_link('Edit', ' &#124; ', ''); ?>
				</p>

Now, I will explain what this code means?

 

<p class=”postmetadata”>…</p> is CSS tags for styling this area later.

 

<?php _e(’post under&#58;’); ?> this code to type “post under”, &#58; is a code to call this sign :

 

<?php the_category(‘, ‘) ?> this code is a function to call the category I tagged my post under.

 

<?php _e(‘by’); ?> this code to type the word by.

 

<?php  the_author(); ?><br /> this code is a tag to call the author of the post, <br/> is a line break.

 

<?php comments_popup_link(‘No Comments &#187;’, ‘1 Comment &#187;’, ‘% Comments &#187;’); ?> this code to calls for a pop up window that shows the comments if the popup comment is activated. If  not, then it will send you to the list of comments. No Comments &#187; is used when you have no comments to display. 1 Comment &#187; is used to display comments when you have exactly one comment. % Comments &187; is used to display comments if you have more than one.

 

<?php edit_post_link(‘Edit’, ‘ &#124; ‘, ”); ?> this code is add an edit button for the administrator to edit the post.

 

Step *2: Type the following codes under <?php endwhile; ?> and save.

 

<?php else : ?>

<div>
<h2><?php _e(‘Not Found’); ?></h2>
</div>

 

<?php else : ?> is else condition for if the statement (if (have_posts()).

<div class=”post“>…</div> is another CSS div.

<h2>..</h2> is an HTML heading.

<?php _e(‘Not Found’); ?> This code is used to show the error message Not Found in case there is no post to display.

 

Step *3: Add id=”post-<?php the_ID(); ?>” to <div class=”post“> and save.

This code calls the id of each post.

 

Step *4: Add title=”<?php the_title(); ?>” to the post title link. It will be something like this:

<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>

Title= is an XHTML attribute to bring the description of your link, therefore I used the function the_title

 

Step *5: Add the following codes between <?php endwhile; ?> and <?php else : ?> and save.

<div class="navigation">
<?php posts_nav_link(); ?>
</div>

<div class=”navigation”>… </div> is also a CSS div to separate the navigation from the post area.

<?php posts_nav_link() this code calls for the Next and Previous links, se we can navigate through our posts.

 

notice that you can’t see these links if you have less than ten posts, but you can reduce the numbers of the posts displayed from your dashboard to see these links.

The complete code will be…

<div id=”container”>
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class=”post” id="post-<?php the_ID(); ?>" >
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<div class=”entry”>
<?php the_content(); ?>
<p class="postmetadata">
<?php _e('post under&#58;'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php  the_author(); ?><br />
<?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?> <?php edit_post_link('Edit', ' &#124; ', ''); ?>
				</p>
</div
</div>
<?php endwhile; ?>
<div class="navigation">
<?php posts_nav_link(); ?>
</div>

<?php else : ?>
<div class="post">
<h2><?php _e('Not Found'); ?></h2>
</div>

<?php endif; ?>
</div>

Now we finished from the content part, next week I will talk about sidebar..Seeya.

Important: I highly recommend you to rewrite all the single quotation ( ‘ ) and the double quotation ( ” ) of the code, to make sure you won’t get an error message.

Filed under: coding, design