Now Reading plugin, CSS and WordPress theme compatibility problems

I installed the Now Reading plugin written by Rob Miller to display the books I am currently reading in my sidebar. The reason I chose this plugin is because it allows you to create a database of your books and offers reviewing possibilities. Installing and configuring the plugin was easy but after adding my first book the layout of my sidebar was messed up (see picture on the left). The border of the box had disappeared and the design did not quite match the rest of the page. My first guess was that it had something to do with the hierarchy and inheritance aspect of style sheets because CSS determines how the plugin is displayed. Once the page is loaded the PHP code of the plugin is “executed” into HTML (more on this later) which is sided by the style sheet which rules the style/layout.

I took a look at the PHP code from sidebar.php located in the templates folder (now-reading/templates/sidebar.php) and noticed the following:

<div class="now-reading"><h3>Planned books:</h3>

?php if( have_books('status=unread') ) : ?>

<ul>

<?php while( have_books('status=unread') ) : the_book(); ?>

<li><a href="<?php book_permalink() ?>"><?php book_title() ?></a> by <?php book_author() ?></li>

The class element “now-reading” determines the style of the <div> in the stylesheet which I haven’t defined (yet). I could add it in my stylesheet and adjust the font size and style but it wouldn’t fix the missing box. The plugin isn’t compatible with my WordPress theme which requires a nested lists after the header in the sidebar. A standard object in my sidebar would look like this:

<div id="sidebar">

<h2>Recent Comments</h2>

<ul id="recentcomments">

<li class="recentcomments">

But the plugin opens an unordered list after the first line of PHP is already executed. So I have to change the code in sidebar.php and start with opening an unordered list (I also removed the “Current books” header to better suit my layout):

<ul>

<?php if( have_books('status=reading') ) : ?>

<ul>

<?php while( have_books('status=reading') ) : the_book(); ?>

<li>

After adding the unordered list element the plugin displayed the books correctly.

Up next:

• Fix the other Now Reading pages such as the library which gives an overview of all the books in your database.
• Dive deeper into the hierarchy of plugins and widgets, CSS and themes.