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).

Adsense in Content of Posts and Pages for wp3

A flexible way to add google adsense into posts and pages in your wordpress blog.
This appraoch uses shortcodes which are an underused technique of increasing the functionality of themes.
Through the formatting options in the shortcode, the text can flow around the adsense blocks similar as it would happen with inserted images.
Options for the alignment are ‘left’, ‘center’, ‘right’ – anything else will be treated as ‘none’.

The code that needs to be added to functions.php of the theme is shown below:
it is called in the text with: [ a d s e n s e     f l o a t = ' l e f t ' ]

// allowed parameter: 'left', 'center', 'right', 'none';
// other entries will be treated as 'none';
function add_adsense($atts) {
  extract(shortcode_atts(array(
  'float' => 'none',
  ), $atts));
if( $float == 'left' ) $float = ' style=" float:left; margin: 10px 10px 5px 0; "';
elseif( $float == 'center' ) $float = ' style=" display:block; margin: 10px auto; text-align:center; "';
elseif( $float == 'right' ) $float = ' style=" float:right; margin: 10px 0 5px 10px; "';
else $float = '';
$ads = '<span class="adsense "'.$float.'>
<script type="text/javascript"><!--
google_ad_client = "pub-0123412341234123";
/* adsense_in_posts */
google_ad_slot = "1234512345";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</span>';
return $ads;
}

add_shortcode('adsense', 'add_adsense');

You can see the result here entered into a passage of ‘lorem ipsum’:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in libero libero. Morbi porttitor, sapien et aliquam malesuada, augue elit tincidunt tortor, vel convallis orci felis quis turpis. Maecenas sit amet diam ut nibh rhoncus accumsan in eget urna. Vivamus sed tempor odio. Curabitur ultricies ultricies molestie. Maecenas eu nisl elit, vitae auctor eros. Nam quis risus libero. Nunc nec ligula sem. Nullam eget sem sed nisi porttitor imperdiet. Etiam ac sapien sed est vestibulum iaculis et id mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer tortor magna, malesuada id imperdiet eu, fringilla eget sapien. Donec augue sem, semper et ultrices a, cursus eget nisl. Duis dui enim, ornare ut facilisis eget, egestas ac orci. Etiam viverra varius erat, id feugiat tellus egestas eget.

Aliquam sem purus, ornare ac tempor nec, accumsan ut felis. In cursus massa vitae mauris iaculis nec semper dui commodo. Proin fermentum, lacus ut accumsan scelerisque, orci dui sodales arcu, ac mollis neque odio id turpis. Mauris sagittis tincidunt ultricies. Sed diam ipsum, posuere quis scelerisque et, malesuada quis orci. Mauris nec lectus ac nibh interdum aliquet.

PS: I found more examples of shortcodes in tuttoaster.com

Link Header Image to Home Page

Having the whole header image linking to the home page is one of the most common things of a theme. This article explains how to add this feature to the WordPress theme Twenty Ten.

Edits are to be made in header.php of a child theme of Twenty Ten, at the location recognizable below (theme version 1.6):

<div id="site-description"><?php bloginfo( 'description' ); ?></div>
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<?php
// Compatibility with versions of WordPress prior to 3.4.
if ( function_exists( 'get_custom_header' ) ) {
.....
.....
<img src="<?php header_image(); ?>" width="<?php echo $header_image_width; ?>" height="<?php echo $header_image_height; ?>" alt="" />
 <?php endif; ?>
</a></div><!-- #branding -->

The link tag

<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">

was added just after this line

<div id="site-description"><?php bloginfo( 'description' ); ?></div>

and closed it before the end of the #branding div

</a></div><!-- #branding -->

that is all.