Custom ‘Read More’ text per Post for Twenty Ten

A sophisticated way to get a custom written ‘read more’ text added to your posts in the theme Twenty Ten (or its child themes).

The code builds on this article I posted earlier.

It uses the custom field with the key ‘cont_read’ to hold the custom text.

Add this code to functions.php of the theme:

/* Twenty Ten custom 'continue reading'
/
/ custom field ($key = 'cont_read' ) dependant 'continue reading' text
/ alchymyth 2010
*/
class Transformation_Text_Wrangler {
function reading_more($translation, $text, $domain) {

global $post;
 $cont_read = get_post_meta( $post->ID, 'cont_read', true );
 if( $cont_read ) :
 $cont_read = htmlentities($cont_read, ENT_QUOTES);
 $translations = &get_translations_for_domain( $domain );
 if ( $text == 'Continue reading <span>&rarr;</span>' ) {
 return $translations->translate( $cont_read . ' <span>&raquo;</span>' );
 }
 return $translation; // custom field value
 else :
 return $translation; // standard text
 endif;
 }
}
add_filter('gettext', array('Transformation_Text_Wrangler', 'reading_more'), 10, 4);

Changing the ‘Read more’ in Twenty Ten Child Theme

To change the ‘read more’ text in a child theme of Twenty Ten, one needs to add a few lines to functions.php of the child theme.

This procedure uses a method that I came across in an introductory article about programming a child theme of Twenty Ten, by Aaron Jorbin, who himself was building upon Mangling strings for fun and profit, by WordPress lead Developer Peter Westwood.

class Transformation_Text_Wrangler {
function reading_more($translation, $text, $domain) {
$translations = &get_translations_for_domain( $domain );
if ( $text == 'Continue reading <span class="meta-nav">&rarr;</span>' ) {
return $translations->translate( 'Get to know more <span class="meta-nav">&raquo;</span>' );
}
return $translation;
}
}
add_filter('gettext', array('Transformation_Text_Wrangler', 'reading_more'), 10, 4);

This way of customising texts in a child theme is applicable to all the strings of the mother theme.

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); ?>

Image Rotator for the Header of Twentyten

The wp3 default theme TwentyTen comes with a choice of header images, which can be selected from the dashboard.
To rotate these images to show randomly in the header, we can make use of the global array variable which stores all the default header image information: $_wp_default_headers.

The rest is easy: we build a function, which we later save in functions.php of TwentyTen, to pick a random image out of the available images:

function rotate_default_headers() {
global $_wp_default_headers;
$rnd_header = rand( 1,count($_wp_default_headers));
$header_nr = 1;
foreach( $_wp_default_headers as $heady ) :
if ( $header_nr == $rnd_header ) {
echo get_bloginfo('template_url') . substr( $heady['url'], 2 );
break;
}
$header_nr++;
endforeach;
}

to show the randomly rotated images in the header, add the function call in header.php –
simply edit header.php, and find this line:

<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />

expand it to accomodate the function call:

<img src="<?php if (function_exists('rotate_default_headers')) rotate_default_headers(); else header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />

done – now you will have a different header image each time you switch to a new page (within the limitions of statistics, of course).