Jason G. Designs

Conversion Details

5. Under this section, we will add each post’s metadata including the date of post entry and author. To see how this will be formatted, we will refer to our labels image from the previous tutorial, shown below:

• We will add the HTML tag and author code within the Loop first just below the post title as shown:

• <h2 class="entry-title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
  <h3 class="postdata">by <?php the_author(); ?></h3>

• b. Now, we will add the date, but using the_date template tag does not display more than one post written on the same day (undesirable for our blog design). So, according to the WordPress Codex, we must use the_time instead. Just next to <?php the_author(); ?>, type what is shown in bold:

• <?php the_author(); ?>, dated: <?php the_time('n/j/y'); ?>, <?php the_time('g:i a'); ?>

• The next parts borrow from the tutorial So you want to create WordPress themes huh?. In it, the author suggests adding a post ID and link titles to your posts. I will follow suit here; add the following written in bold:

• <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
  
  <div class="post" id="post-<?php the_id(); ?>">
  
  <h2 class="entry-title"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
  
  <div class="entry">
  <?php the_content(); ?>
  
  </div>
  
  </div>
  
  <?php endwhile; else: ?>
  <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
  <?php endif; ?>

• Next, we will add navigation links that go from one page to the next. But unlike in “So you want to create WordPress themes huh?”, we will place our navigation links at the top. Type this just below the content opening div:

• <div id="content">
  
  <div class="navigation">
  <?php posts_nav_link(); ?>
  </div>
  
  <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

Sidebar and Search Box

6. Now, we will work on the sidebar, where we will use WordPress codes to generate our Pages, Categories, Archives and Account (login) information. Then, next is the Search box and sidebar 2 that will go in the upper right of our theme. After that, we will make both “sidebars” widget friendly

• First, we need to add the code to generate our list of Pages in the blog. For this, we will again look to the WordPress Code template tag page. Our h2 tag is now added to the WordPress code below. We will also add a special class to our h2 tag for all widget titles. In the sidebar, type:

• <!-- opens sidebar div -->
  <div id="sidebar">
  <!-- opens sidebar ul -->
  <ul>
  <?php wp_list_pages('depth=3&title_li=<h2 class="widget-title">Pages</h2>'); ?>
  </ul>
  <!-- closes sidebar ul -->
  </div>
  <!-- closes sidebar div -->

Here, we added ul tags because the code WordPress generates for pages are list items. We added a widget-title class, specified a depth of 3 to accommodate our three sidebar icon designs and set the auto generated Pages title to show our h2 tags and widget-title class by adding title_li=<h2 class="widget-title">Pages</h2>. Notice how we need to place an ampersand (&) between each parameter argument inside the quotes.

• Second, we will put together our Categories section. Add the following just below what we previously typed and above the sidebar closing ul tag:

• <?php wp_list_categories('depth=3&title_li=<h2 class="widget-title">Categories</h2>'); ?>
  </ul>
  <!-- closes sidebar ul -->
  </div>
  <!-- closes sidebar div -->

• Third, is the archive section. Type the following (in bold):

• <?php wp_list_pages('depth=3&title_li='<h2 class="widget-title">Categories</h2>'); ?>
  <?php wp_get_archives(); ?>

In this case, WordPress’s auto generated code does not place these listings in a separate <ul> tag with a title, so we must add this part. If you check the source by going to View Source in your browser, you will see that the archive code generated is in the form of a list. So we must place a new unordered list around it as shown in bold below:

• <li class="archives"><h2 class="widget-title">Archives</h2>
  <ul>
  <?php wp_get_archives(); ?>
  </ul>
  </li>

Tags for this post: Blue Green Blast, Firefox, Internet Explorer 7, Themes, WordPress

Page: 1 2 3 4 5 6 7