Now Reading plugin, CSS and WordPress theme compatibility problems

Now Reading beforeI 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.

2 thoughts on “Now Reading plugin, CSS and WordPress theme compatibility problems

  1. Hi Rob,

    Thanks for your reply. To be honest, I did read the documentation but it must have been late and after hours of staring at HTML and PHP my mind often does not register things anymore :) So this could have been solved much quicker with a bit more sleep and attention, my apologies.

    I have a question in general about this issue: Is there a general example template to write a (dynamic, plugin and widget ready) sidebar? If yes, is this the Kubrick theme? In order words, does my theme (derived from Coffee Spot) does not follow the unwritten rules of how to write a template?

    And do such guidelines exist for writing plugins? I am wondering about this kind of stuff for my MA thesis which is on WordPress so if you would be able to help me out with these questions I would be very grateful. On top of being very appreciative for your great work on the plugin.

    Anne

Leave a Reply to rob Cancel reply

Your email address will not be published.