I Am Blogie

This is for those of you WordPressers who use YARPP (a.k.a. Yet Another Related Posts Plugin) and any of the excellent themes by WooThemes for your blogs. Especially if you’d like to spice up the plugin’s output a bit.

I use YARPP on almost all of my WordPress sites, and I’ve started tweaking the plugin’s output, inspired by another related-posts plugin that I saw on DavaoBase recently. That other plugin is called LinkWithin, and I like how it displays related posts with thumbnails. However, this plugin has almost no options, unlike YARPP, which has tons of it! (And I’m suspicious of LinkWithin’s way of inserting redirects — it’s as if, for whatever reason, they’re out to track the clicks…)

DavaoDeli.com screenshot

So, here’s something I’d like to share with those of you who’d like to keep using YARPP and display a thumbnail for every related post displayed on your blog posts. The screenshot here shows a post from my food blog — take a look at the bottom part (in the red square) with the “You might also like…” heading.

YARPP has a set of sample templates that let you control the visual output of the plugin. Instead of settling for the default settings, you can have a higher degree of control over how the related posts are displayed by using the YARPP templates. Simply copy one of those templates (located in wp-content/plugins/yet-another-related-posts-plugin/yarpp-templates) into your current theme’s directory, modify that template to your heart’s desire, then activate it via the YARPP settings page.

The custom YARPP template

Create a template file in your theme directory that will contain the related-posts code. For our purposes, let’s name this file yarpp-template-thumbs.php (N.B., for YARPP to recognize the template, it has to be prepended by “yarpp-template-”). The code I wrote for DavaoDeli.com is the following:

<?php /*
YARPP Template for use with post thumbnails
Requires WordPress 2.9+ and the WooThemes framework
Author: Blogie
*/ ?>

<?php if ($related_query->have_posts()) : ?>

<div class="relthumbs">
	<h5 class="relposts">You might also like...</h5>
	<ul class="relposts-thumbs">

	<?php while ($related_query->have_posts()) : $related_query->the_post(); ?>

		<li class="relitem">
			<?php woo_image('key=image&width=80&height=80&class=relimg'); ?>
			<span class="thumb-ttl"><?php the_title(); ?></span>
		</li>

	<?php endwhile; ?>
	</ul>
</div>

<?php else: ?>

	<p>No related posts at the moment.</p>

<?php endif; ?>

Line 7 above declares the start of the special WordPress Loop that calls the related posts (handled by the plugin). Line 16, on the other hand, is the one that displays the thumbnails. It’s a built-in function in all WooThemes.com themes with WooFramework version 3+.

YARPP settings

For those of you who don’t use WooThemes, don’t despair. There is a YARPP template included with the plugin that you can use. It’s called yarpp-template-thumbnail.php. Just copy that template to your current theme directory, activate the template via the YARPP settings page, and make sure to follow the instructions contained in this page from the WP Codex.

(If you’re using a child theme, place the thumbnail-related WordPress functions in the child theme’s functions.php template.)

That’s it! I hope you’ve found this useful.

Don’t you have those times when you come across something that makes you go, ‘This is it!!‘? I had such a moment when I saw this awe-inspiring theme by WooThemes.com called CityGuide theme — and that’s because, for a while now, I’d been looking for the perfect theme for my food blog. Among all my WordPress-powered sites, it’s Davao Delicious that has undergone the most number of theme overhauls. That’s because, ever since the birth of that blog, I could never be satisfied with the themes I used for it. But CityGuide is just perfect! That is, after some modifications to suit my needs.

(Actually, there’s still some more stuff that I want to see running on DavaoDeli.com, especially a site search engine that can help my readers in their quest for good eats in Davao City. But I guess I’ll have to implement that myself…)

Here’s a screenshot of how Davao Delicious looks now:

DavaoDeli.com 2011

My food blog is meant to promote my city through food, and as a result, it helps promote the various restaurants and other food establishments in the city as well. So the blog, naturally, has an affinity to “geo-location” and all that that entails. Ergo, what attracted me to CityGuide is its strongest feature: its rich usage of Google Maps.

On the site now, you will be able to pinpoint on a map where the restaurants, coffee shops, catering services, and others are (those that I’ve already featured, anyway). And there are several map interfaces, too. On the front page, just below the header is an “overview map” that displays map pins. In case you’re not viewing the front page, there’s an overview map widget on the sidebar as well.

Then there’s the category map. If you click any of the categories (on the header menu bar), you’ll be brought to the category page with a map that shows pins of only those establishments belonging to that category. Neat, huh?

CityGuide mapping interface

Before CityGuide, I had a plugin that would let me embed a map (generated by Google Maps) into each post so that I could show where the food establishment I was talking about was located. But now, I have what I like to call a ‘mapping interface’ that lets me pinpoint the establishment’s location on a map and publish it along with the post — right from the WordPress edit screen!

(Click on the image to the right for a better view of the CityGuide mapping interface.)

Best of all, I can use latitude-longitude coordinates. We all know that Google doesn’t quite get the Philippine addressing system quite so perfectly. Plus, not all of the streets in Davao City have been mapped yet, so the ability to input map coordinates makes for a more robust Web application, don’t you think?

The theme’s designers have thought things through for CityGuide. For example, you have the option to specify the default zoom level of the maps you’re displaying (and your readers have the ability to zoom in and out as they please). You can even specify, using lat-long coordinates, the default center of the map (and your readers can pan and even skew the map as they please).

CityGuide custom post meta

Want more? Here’s one more: you can assign pin colors to each category! So, for my purposes, I assigned blue to restaurants, red to coffee shops, green to eateries, and so on. If you’re so inclined, you can even use your own customized map markers.

There are a few other functionalities built into the theme, such as custom post meta fields for physical address, website, phone number for each establishment. When I utilize these fields, the information gets displayed on the featured-panel portion of a post (take a look at this post, for example).

Oh and here’s one more thing that I really like about CityGuide. It comes packaged with a full-map template. Meaning, you can create a page and deploy it with that page template and let your readers see a huge map to show all your markers and whatnot. (see the DavaoDeli.com map page)

I do believe my food blog has finally found its very own theme. Now, if only I could get a decent header……

Oyako (親子) is a Japanese term that means “parent-child”. In Japanese cuisine there’s a tasty dish I like that’s called oyako-don, which is a bowl of rice toppings of chicken and egg. And why am I talking about this? WordPress’ child themes!

Ever got tired of copying over the changes you’ve made to your templates each time your theme is upgraded? Ever lost template changes after upgrading your WordPress theme? Well don’ fret, because here’s something that I’m sure you’ll find heaven-sent.

Child themes have existed since WordPress 2.7 (but I’ve only now gotten around to tinkering with it), and it’s the best way to go about modifying — and keeping the changes to — your themes’ templates.

I’ve started using child themes in some of my blogs. Take a look at the screenshot of Blogie Blog’s dashboard, showing the child theme:

Basically, when you use child themes, you can create a separate theme (based on the parent theme) that will hold all your template modifications. So, when your theme provider publishes an update, you can update the parent theme and keep the changes you’ve made in the child theme.

Child themes inherit all the templates (index.php, single.php, etc.) from its parent — that is, those templates that you don’t override. One template that must be unique to the child theme, however, is style.css. That’s right: when you create a child theme, it must have its own stylesheet file.

If you’ve read the Codex, you’ll know that you’ll need to create a style.css file and that’s where you’ll place your own style declarations for your site. And, to include all the style declarations from the parent theme, you’ll need to import it into your new stylesheet file (using @import). This is all that’s required for you to have a child theme.

If you create a new single.php template for your child theme, it will override the parent theme’s template. This is useful for those templates that you want to modify to suit your needs. The templates that you don’t override will simply be inherited by the child theme. In fact, you’ll notice that the parent theme’s templates will appear in your child theme’s list of templates (Appearance > Editor).

Some things to watch out for when using child themes–

When overriding templates (e.g., header.php), check to see if hyperlink calls are properly formatted. Some theme designers use the WordPress function <?php bloginfo('template_directory'); ?> to call theme images or CSS files. For example:

[php toolbar="false"]

On this blog, the above code will resolve to the following:

[html toolbar="false"]

Please take very careful note of this: Even if the above sample code is placed in a child theme template, the <?php bloginfo('template_directory'); ?> function will still return the URL of the parent theme. On the other hand, the WordPress function <?php bloginfo('stylesheet_url'); ?> will always return the URL of the style.css template of the active theme. So, if you have a piece of code like below placed in a child theme’s template, the latter function will most certainly return the URL of the child theme’s style.css file.

[php toolbar="false"]

Child themes don’t seem to see below its parent theme’s directory. I use WooThemes’ excellent themes, and their theme files (PHP templates, CSS files, images, JS files) are organized in sub-folders. All the main PHP templates (index.php, page.php, archive.php, etc.) are in the root directory of the theme, but most of the support files are placed in sub-folders. It seems that the files in those sub-folders are not accessible to child themes… You see, I tried to override some of the templates existing in the parent theme’s sub-folder by recreating those templates and sub-folders under the child theme’s own directory. No go.

Solution: change the hyperlinks calling those templates (or images, etc.) to reflect the actual locations.

So far, I’ve only been experimenting with the fundamentals of WordPress child themes. I know there’s a lot more to it, especially in the functions.php arena. To get you started on that, do read this article.