Category Archive Navigation

A simple next/previous category navigation for the category archive; particular useful if you use your categories to organise your blog, for instance your products, or photos…

<?php
foreach(get_categories() as $all_cat) {  $cat_ids[] = $all_cat->term_id; }
 $this_cat = get_query_var('cat');
 $this_cat_position = array_search( $this_cat, $cat_ids ); ?>
<div>
<div>
<?php $prev_cat_position = $this_cat_position -1;
 if( $prev_cat_position >=0 ) {
 $prev_cat_id = array_slice( $cat_ids, $prev_cat_position, 1 );
 echo '<a href="' . get_category_link($prev_cat_id[0]) . '">&laquo; ' . get_category($prev_cat_id[0])->name . '</a>'; } ?>
</div>
<div>
<?php $next_cat_position = $this_cat_position +1;
 if( $next_cat_position < count($cat_ids) ) {
 $next_cat_id = array_slice( $cat_ids, $next_cat_position, 1 );
echo '<a href="' . get_category_link($next_cat_id[0]) . '">' . get_category($next_cat_id[0])->name . ' &raquo;</a>'; } ?>
</div>
</div>

the above has a commonly used html structure to help with formatting.

Adjusting Caption Frame Width

WordPress captions come with a fixed frame which is set in the wordpress core file ‘media.php’ in the ‘wp-includes’ folder.

The caption shortcode function adds a 5px wide space to the left and right of the image; and outputs the new calculated width as in an inline style in the attachment div.

For WordPress users, a familiar picture which you can only influence within limits by avoiding a background color for the attachment div.

However, if you want to have a slim contempory design and a background color behind the caption text, this would simply not work.

You need a fix.

The code below can be added to functions.php of your theme to allow you to set the frame width on your captions (sitewide) to any amount you like.

You need to adapt a few .wp-caption styles in style.css of your theme, after you have successfully added the code – that is all.

There you have your new contempory slim image caption design.

add_shortcode('wp_caption', 'slim_img_caption_shortcode');
add_shortcode('caption', 'slim_img_caption_shortcode');
function slim_img_caption_shortcode($attr, $content = null) {
 // Allow plugins/themes to override the default caption template.
 $output = apply_filters('img_caption_shortcode', '', $attr, $content);
 if ( $output != '' )
 return $output;

 extract(shortcode_atts(array(
 'id'    => '',
 'align'    => 'alignnone',
 'width'    => '',
 'caption' => ''
 ), $attr));

 if ( 1 > (int) $width || empty($caption) )
 return $content;

 if ( $id ) $id = 'id="' . esc_attr($id) . '" ';

 $frame_width = 0; // frame width in pixels per side //

 return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: ' . ( 2 * $frame_width + (int) $width) . 'px">'
 . do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>';
}

edit: added the css class .wp-caption-text

Another step to total freedom of design …

PS – important:

Since wp3.7, there is a filter on the additional caption width;
from /wp-includes/media.php caption shortcode section:
$caption_width = apply_filters( 'img_caption_shortcode_width', $caption_width, $atts, $content );

Adding a filter function for it in functions.php of your theme should help to remove the extra 10px from the front wp-caption size;
example:

add_filter( 'img_caption_shortcode_width', 'slim_img_caption_shortcode' );
function slim_img_caption_shortcode( $caption_width ) {
return 0; 
}

this will replace the above suggested code, which stopped working with the latest wp versions.

Unfortunately, this filter is not applied to the styles in the visual editor.

Easy Coding for WordPress: Posts in 3 Columns

Sometimes it is the simple things that are hard to find.

A basic structure to arrange posts into three columns:

<div id="column-wrap">
<?php $count = 0;

while(have_posts()) : the_post(); ?>

<div class="box<?php if( $count%3 == 0 ) { echo '-1'; }; $count++; ?>">

<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<!--and other output of the loop -->

</div>

<?php endwhile; ?>
</div><!--end column-wrap-->

The minimal styles needed for the three columns:

.box-1 { float:left; clear:left; width: 30%; margin-left: 0; }
.box { float:left; width: 30%; margin-left: 3%; }

  1. <div id=”column-wrap”>
  2. <?php
  3. $count = 0;
  4. while(have_posts()) : the_post()
  5. ?>
  6. <div class=”box<?php if( $count%3 == 0 ) { echo ‘-1’; }; $count++; ?>“>
  7. <a href=”<?php the_permalink(); ?>“>
  8. <h4><?php the_title(); ?></h4></a>
  9. <!–and other output of the loop –>
  10. </div>
  11. <?php endwhile; ?>
  12. </div><!–end column-wrap–>
  13. —————-
  14. STYLES – EXAMPLE
  15. .box-1 { float:left; clear:left; width: 30%; margin-left: 0; }
  16. .box { float:left; width: 30%; margin-left: 3%; }

Alternating Posts Backgrounds for Twenty Ten

This is a short instruction how to add alternating styles to the post on the front page and in the archives of the wp3 default theme.

Edit loop.php of Twenty Ten, and locate:

<?php /* How to display all other posts */ ?>
<?php else : ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

Change this to:

<?php /* How to display all other posts */ ?>
<?php else : ?>
<?php $stripe = ($stripe == 'dark') ? 'bright' : 'dark'; ?>
<div id="post-<?php the_ID(); ?>" <?php post_class($stripe); ?>>

This will add the css classes .dark and .bright to the post classes.

To brighten it up, add these new formats to style.css (with a harmonious choice of your own color codes):

.dark { background-color: #3f6; }
.bright { background-color: #fc3; }

ref: http://codex.wordpress.org/Template_Tags/post_class

This coding is not limited to TwentyTen – you can use it in any loop as long as the theme utilizes the post_class().
The switcher part is:

<?php $stripe = ($stripe == 'dark') ? 'bright' : 'dark'; ?>

And the merging of the new class with post_class() is:

<?php post_class($stripe); ?>