template

Simple Form To Select A Category And Sort Order

There is a lot of code here, and the output doesn’t look very pretty, but it illustrates a basic form to let the Viewer select a Category and sort order for the Twenty Ten theme. Continue reading

Select Posts On The First Letter Of A Custom Field

This post is in response to a request to filter posts based on the first letter of a custom field. The requestor was creating a staff listing where the person’s last name was stored in a custom field named ‘staff_last_name’. A menu of all letters was needed to allow the viewer to select the letter to view.

The code shown below should be added into a template that is customized for the theme in use. Continue reading

Template to List Posts By First Letter of Title, 1 Letter Per Page

This template is a variation of the one that shows posts or pages by first letter of title with a selected number of posts per page.

The template is written for the Twenty Ten theme.  You will probably need to modify it to tweak the appearance or work with a different theme.  The embedded CSS should really be moved to your stylesheet. Continue reading

Rows of Equal Height Boxes

The template below was written for the Twenty-Ten theme to show how to create rows of equal height boxes when the contents differ in length.

The frame is in two parts: top-frame and bottom-frame.

 

 

 

 

 

 

 

 

 

 

 

The bottom-frame ‘slides’ up and down behind the top frame to adjust the height.  Note that the range is limited – too much content in a frame will open a gap.

<?php
/*
Template Name: Equal Height

This template demonstrates a technique for showing rows of content
enclosed in equal-height frames.

*/

get_header(); ?><!-- file:equalheight.php in twentyten-child -->

<?php   // Some sample CSS
   $style = <<< END_OF_STYLE
<style type='text/css'>
.item_row_wrapper { width: 100%; margin-top: 10px; }
.item_row_header { height: 54px;
  background: url("http://localhost/test/wp-content/uploads/2011/02/top-frame.png")
  repeat top left;}
.item_row_header_1 { width: 200px; }
.item_row_header_2 { width: 400px; }
.item_row_header_3 { width: 600px; }
.item_row_header_4 { width: 800px; }
.item_row { background: url("http://localhost/test/wp-content/uploads/2011/02/bottom-frame.png")
    repeat-x scroll bottom left; min-height: 20px; overflow: hidden;
    }
.item_row_4 { width: 800px; }
.item_row_3 { width: 600px; }
.item_row_2 { width: 400px; }
.item_row_1 { width: 200px; }
.item_class_wrapper { width: 200px; min-height: 110px; float: left; }
.item_class { width: 140px; margin-left: 30px;
   overflow: hidden; max-height: 280px; }
img.item_image { width: 100% !important; height: auto !important; }
.item_bottom_pad { min-height: 20px; }
.clear { clear: both; }
</style>
END_OF_STYLE;
   echo $style;

   $post_type = 'parks';
   $posts_per_row = 3;
   $posts_per_page = 8;
   if (!$paged = get_query_var('paged')) {
      if (!$paged = get_query_var('page')) {
         $paged = 1;
      }
   }
   $args = array(
      'post_type' => $post_type,
      'posts_per_page' => $posts_per_page,
      'paged' => $paged,
      'caller_get_posts' => 1,
   );
   query_posts($args);
?>
      <div id="container">
         <div id="content" role="main">

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

            <?php if (($post_counter % $posts_per_row) == 0  || $posts_per_row == 1) {
               if ($post_counter > 1) {
                  write_buffer($post_counter,$posts_per_row);
               }
               ob_start();  // Start a buffer
            }
            ++$post_counter;
            echo "<div class='item_class_wrapper'>\n";  // Start one post
            echo "<div class='item_class'>\n";
            // Output post data here ?>
            <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
               <h1 class="entry-title"><?php the_title(); ?></h1>

               <div class="entry-content">
                  <?php the_content(); ?>
               </div><!-- .entry-content -->
               <?php
               echo "</div><!-- End of item_class -->\n";
               echo '<div class="item_bottom_pad"></div>';
               echo "</div><!-- End of item_class_wrapper -->\n";  // End of post
               ?>

         <?php endwhile; // end of the loop. ?>
      <?php write_buffer($post_counter,$posts_per_row); ?>
<?php endif; ?>

            <div id="nav-below" class="navigation">
               <div class="nav-previous"><?php previous_posts_link( '%link', '<span class="meta-nav">' . _x( '&larr;', 'Previous post link', 'twentyten' ) . '</span> %title' ); ?></div>
               <div class="nav-next"><?php next_posts_link( '%link', '%title <span class="meta-nav">' . _x( '&rarr;', 'Next post link', 'twentyten' ) . '</span>' ); ?></div>
            </div><!-- #nav-below -->

         </div><!-- #content -->
      </div><!-- #container -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

<?php function write_buffer($item_counter,$items_per_row) {
      $op = ob_get_clean();
      $count = ($item_counter % $items_per_row) ?
         ($item_counter % $items_per_row) : $items_per_row;
      echo "<div class='item_row_wrapper'>\n";  // Start a new row
      echo "<div class='item_row_header item_row_header_$count'>";
      echo '</div><!-- End item_row_header -->';
      echo "<div class='item_row item_row_$count'>\n";
      echo $op;
      echo "<div class='clear'></div>";
      echo "</div><!-- End of item_row -->\n";
      echo "<div class='clear'></div>";
      echo "</div><!-- End of item_wrapper -->\n";
   }
?>

Multi-size Multi-Row Image Layout

The sample template below was created to answer a request for a layout showing images in a unique layout as shown in the comments in the code.  The template was tested using the TwentyTen theme.  The template is not meant to be used as-is – it is meant to be only a guide to the logic needed to produce the layout.

Here is a screen shot of the results:

and here is the code:

Continue reading

Table for WordPress Download Monitor

I was recently asked to provide a means to display the downloads managed by the WordPress Download Monitor (WDM) plugin in a traditional table format.  Here is the mockup of the desired format:

Continue reading

Sticky Posts For Categories

A number of requests have been posted for a way to use sticky posts when displaying a category. The code below can be used to modify your category.php to use for all categories, or as category-id#.php to use for a given category id.

The code is an example only.  It must be used to modify your code to fit your theme.

Continue reading

Template to List Posts By First Letter Of Title

Several persons have asked for a template to list posts or pages by the first letter of the title. The code below is set for posts, but is easily modified for pages or custom posts. The CSS will need to be modified to fit your own theme.

This template lists a set number of post titles per page.  See this Tip for a template that lists one letter per page.

Here is a screenshot of the first page:

Here is the pastebin link for the code below.
Continue reading

Template Parts in WP 3.0

Use template parts in WP 3.0 for repeated blocks of code. In the example below, you would create a file called loop-custom.php which would be called from each section. Continue reading

Template Hierarchy

WordPress follows a strict hierarchy when searching for the correct template to use for a given query. It is very helpful to understand which template will be used for each situation. This Codex article explains the search order and has a diagram showing the search paths.

Codex: Template Hierarchy