in Plugins

You too can be like The New York Times with upPrev plugin

I’m not normally one for installing every plugin I find just because I think it’s cool, but when I came across upPrev the other night there was just no way I could resist temptation.

upPrev is a simple plugin that delivers a little bit of New York Times functionality to your WordPress install. Online readers of the venerable NYT noticed earlier this year that when reading a story, scrolling down to a certain part of the page popped out a window from the right side of the screen with a related article, just like this one (and given that it’s still around, it must have decent conversion rates):

upPrev delivers a New York Times-style related content window to your WordPress blog.

upPrev, released by Jason Pelker and Grzegorz Krzyminski, does just that on your WordPress-driven site. Users can choose to either fly in or fade in a small window in the lower right of a screen when a selected percentage of the page has been scrolled through. The window will display a related headline from the category the current post is in, a link to that category and the number of articles in that category.

After giddily installing the plugin, I noticed it needed some customization to match WP Journo a little better. Since I chose to use the flyout version, I made my way over to the plugin editor and found the upprev_flyout.css file. The stylesheet is very simple, and since I only wanted to edit colors and fonts, it took me just a few minutes.

How to edit upPrev fonts, colors

A visual map of the styles for upPrev's flyout box.

In the stylesheet, first look for #upprev_box a. This will define what all the links look like in the flyout. To better match my headline styles, I edited the css to look like this:

#upprev_box a {
	color: #1b304c;
	font-size: 12px;
	font-weight: bold;
	font-family: "Helvetica Neue", "Lucida Grande",
        Verdana, Arial, sans-serif;
}

This makes the headline of the related article stand out a little more than the default styling of upPrev. I also added the following so that hovering over the headline would underline it:

#upprev_box a:hover {
        text-decoration: underline;
}

Note, though, that changing these styles will also apply to the category names above the headline, as those are also links in the #upprev_box. All of the text besides the headline is enclosed in an h6 tag. To insure the h6 links look they way you want them, use #upprev_box h6 a and define what you need. Here’s what I did:

#upprev_box h6 a {
	color: #84a8d9;
	font-size: 10px;
	font-weight: bold;
}

#upprev_box h6 a:hover {
       text-decoration: none;
}

Because I added a hover underline to all link styles above so that my headline would be underlined, I made sure to remove that as well  in the line directly above.

Adding that missing space

If you’re anything like me, you’ll notice that mulitple categories in the upPrev menu get a little ugly: There’s a comma separating them, but not a space after the comma. Luckily, this too is a very simple edit.

Go to the plugin editor, select upPrev as the plugin you want to edit and find the upprev.php file. Copy and paste it into a plain text editor and search for the following:

More in ';
        the_category(',');

That comma after the_category looks a little lonely. Just add a space after it so it looks like this: the_category(', ');. Now your multiple categories are separated by a comma and that much-need space!

Sidenotes

If you want your style changes to last through future plugin upgrades, place the styles directly into your theme’s stylesheet and use the !important rule. When editing, always copy and paste the original code into a plain text editor and leave it untouched until you’ve tested that your changes work. And don’t forget to thank the plugin’s authors! Also, if you’re selling ads against your content and use this plugin, you might beware. I’m no lawyer, but there could be some intellectual property issues considering the plugin produces a nearly exact visual replica of what the NYT created.