Custom TwentyTen Page Templates For Now Reading And Now Watching Plugins

The Now Reading Reloaded and Now Watching plugins are great for displaying a chronological collection of your reading and watching material on your WordPress blog.  However, the page templates that are included in the plugin often need to be tweaked to work with your current theme.  I’ll show you the tweaks I made to get the page layout working with the new WordPress TwentyTen theme.

Find your themes page.php and single.php template files and check the div tag structure. First, the TwentyTen page.php:

<?php get_header(); ?>
<div id="container">
 <div id="content" role="main">
 ...
 <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 ...
 <div>
 ...
 </div><!-- .entry-content -->
 </div><!-- #post-## -->
 ...
 </div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Second, the TwentyTen single.php:

<?php get_header(); ?>
<div id="container">
 <div id="content" role="main">
 ...
 </div><!-- #content -->
</div><!-- #container -->

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

Then compare the library.php and single.php template files that ship with Now Reading Reloaded and Now Watching.

<?php get_header() ?>
<div class="content">
  <div id="content" class="now-reading primary narrowcolumn">
  <div class="post">
  ...
  </div>
  </div>
<?php get_sidebar() ?>
</div>
<?php get_footer() ?>

Now you need to change the plugin template files to make them play nicely with your theme templates.  It is a good idea to save a copy of the plugin template files in a directory in your WordPress theme directory so that they don’t get over-written when you update your plugin.  The plugin checks the theme directory first for a custom template and then the plugin directory.  Change the following files to look like the example below: library.php, single.php, tag.php, search.php, author.php (NRR) and director.php (NW).

<?php get_header() ?
<div id="container"
 <div id="content" class="now-watching primary narrowcolumn" role="main"
  <div class="post"
  ...
  </div><!-- #post -->
 </div><!-- #main content -->
</div><!-- #container -->
<?php get_sidebar() ?>
<?php get_footer() ?>

I had to edit the second div tag to include a style=”width: 640px;” to make it fit in with the rest of my layout.  Without it the content was squashed into a left-aligned 340px column with an area of white space between it and the sidebar.  There may well be better ways to do this but this was the quickest way for me.

Leave a Reply

Your email address will not be published. Required fields are marked *