David Edwards' Blog » Tweaking the Now Reading Plugin

Issues
Final CSS Code
Comments (3)

When I first joined LinkedIn I got excited about their book/library plugin… until my colleagues got annoyed with constant updates when I finished a book and started another. Then I found the Now Reading Reloaded plugin for WordPress. With the recent theme upgrade I had a few challenges updating the CSS and Page Templates used by NRR to suit my updated theme. This post summarises some of the things I found…

Issues

The issues I faced, or thing I learned (in no particular order) when updating the user-customisable parts of NRR:

#1. If you create a custom single.php using the code from the sample, make sure you include the definition of the $nr_id global variable; e.g.

<body>
<div id="notfooter">
        <?php include (TEMPLATEPATH . '/header.php'); global $nr_id;
        <?php include (TEMPLATEPATH . '/linksbar.php'); ?>
        <div id="pagebodytop"></div>
        <div id="pagebody">
                <div id="content" class="now-reading">
                        <div class="post">
                                <?php if( have_books(intval($nr_id)) ) : ?>

#2. The function nr_display is hardcoded to display the sidebar.php file from the nrr template directory; either your custom theme one, such as /blog/wp-content/themes/custom-theme/now-reading-reloaded, or the default template file. Whatever you put in there will appear wherever you put the <?php nr_display() ?> call.

If you want different sidebars you will need to:

Create the sidebar code directly into the relevant php pages.
Create other common sidebar files (e.g. nrr_common_sidebar.php) and refer to them in the relevant pages.

For example I created a file nrr_common_sidebar.php:

<?php if( can_now_reading_admin() ) : ?>
        <h2>Library Admin:</h2>
        <ul>
                <li>
                        <a href="<?php manage_library_url() ?>">Manage Books</a><br/>
                        <a href="/blog/wp-admin/admin.php?page=add_book">Add Book</a></p>
                </li>
        </ul>
<?php endif; ?>

<h2>Library Summary:</h2>
<ul>
        <li>
                <p class="nr-smalltext"><?php total_books() ?> overall;<br/>
                <?php books_read_since('1 year') ?> read in the last year;<br/>
                <?php books_read_since('1 month') ?> read in the last month;<br/>
                <?php average_books('month'); ?>.</p>
        </li>
</ul>

<h2>Library Search:</h2>
<ul>
        <li>
                <?php library_search_form() ?>
        </li>
</ul>

<h2>Library Links:</h2>
<ul>
        <li>
                <p><a href="<?php library_url() ?>">Go to library</a></p>
        </li>
</ul>
<ul>
        <li>
                <p class="nr-smalltext"><?php do_action('nr_footer'); ?></p>
        </li>
</ul>

I then refer to it in other files. For example in single.php I include it using:

<?php include (TEMPLATEPATH . '/now-reading-reloaded/nrr_common_sidebar.php'); ?>

#3. There’s a do_action(‘nr_footer’) through the sample templates. I can’t find where this is defined, perhaps it’s a hangover from the older Now Reading plugin.

#4. I added link to Amazon Customer Reviews:

<a href="&lt;?php book_url() ?&gt;#customerReviews">Amazon customer reviews</a>

#5. I used the meta fields to hold a short description of the book (from Amazon). The meta tags are displayed in a definition list by print_book_meta(); if print_book_meta(1) is used, it will add in the <dl> and </dl> tags.

The following picture shows some of the additions:

The custom sidebar,
The use of a summary meta tag, and
The Amazon customer reviews link

#6. I did a fair bit of tweaking to get a nice grid of book covers on my library page. Many of the covers from Amazon are similar in size but not exactly the same. If I just let them sit beside each other and then wrap to the next line, they didn’t look very neat. So I put them in a fine outline that’s the same size:

<div id="nrr-book-list2">
	<?php while( have_books('status=read&orderby=finished&order=desc&num=-1') ) : the_book(); ?>
		<div class="nrr-single-cover">
			<a href="<?php book_permalink() ?>">
				<img src="<?php book_image() ?>" alt="<?php book_title() ?>" />
			</a>
		</div>
	<?php endwhile; ?>
</div>

This results in a grid like below:

Each one of the grey boxes surrounding the book cover is defined by the <div class=”nrr-single-cover”>. The book cover images float centrally within these boxes. There’s also a top/right/bottom margin specified to control the spacing. Have a look at the #nrr-book-list2 CSS settings below.

Final CSS Code

The CSS code for my NRR pages is:

/* ------------------------------------------------------------------------ */
/* Now-Reading-Reloaded settings, my custom template ones    Jul 09         */
/* Many of these are to override general settings above.                    */
/* ------------------------------------------------------------------------ */
#content.now-reading .post h2 {
	padding: 0 0 8px 0;
}
#nrr-book-list1 {
	padding: 0 0 8px 0;
	margin: 0 0 8px 0;
	border-bottom: 1px solid #EEEEEE;
}
#nrr-book-list1 ul {
	padding: 0;
}
#nrr-book-list2 div.nrr-single-cover {
	min-height: 170px;
	min-width: 120px;
	height: auto;
	width: auto;
	float: left;
	text-align: center;
	border: 1px solid #EEEEEE;
	margin: 4px 6px 2px 0;
}
#nrr-book-list2 div.nrr-single-cover img {
	display: inline;
	border: 1px solid #ffffff;
  	vertical-align: middle;
  	margin; 0;
  	padding: 2px;
}
#nrr-book-list2 div.nrr-single-cover a:hover img {
	border: 1px solid #224040;
}
#nrr-singlebook {
	margin: 0 0 8px 0;
}
div.nrr-book-cover {
	min-height: 170px;
	min-width: 120px;
	height: auto;
	width: auto;
	float: left;
	text-align: center;
	margin: 0 8px 0 0;
	border: 1px solid #EEEEEE;
}
div.nrr-book-cover p a img {
	margin: 0;
	padding: 2px;
}
.nrr-book-cover p {
	padding-top: 0;
	margin: 0;
}
.nrr-book-info {
	padding: 0;
	min-height: 175px;
}
.nrr-book-info h3 {
	padding-top: 0;
}
.nrr-book-body {
	padding: 8px 0 8px 0;
	margin: 0 0 8px 0;
	border-bottom: 1px solid #EEEEEE;
	display: block;
}
.nrr-book-body dt {
	font-weight: bold;
	color: #192E2E;
}
/* ------------------------------------------------------------------------ */

Tweaking the Now Reading Plugin

Issues

Final CSS Code

Page Tools

Comments

3 Responses

Leave a Comment

Archived Entry