wpSnap Site Reboot

When I started helping wpSnap on some of their technical issues last year, I realized that there was a lot of room to improve with the way conditional tags were written and addressed to produce the site that has among other things, featured listings, blogs and other WP themes all meshed into one pile of data in the backend. So when I was asked to redesign1 the site last month, I went a step ahead and offered to redo the backend as well.

The most prolific of issues on wpSnap (and other multi-author sites) seem to have stemmed from a new feature that was rolled into WordPress version 2.6, which was the creation of a new database table …

Dynamic CSS Resizing of Embedded YouTube Videos

CSS TipsVideo embeds like the ones from YouTube can be valuable to tell a story. Though the built-in options for such videos allow the user to resize the video, it is not dynamic and is more than often a manual (irreversible) process. Say you would like to keep the video at it’s full size in the single post page but display a thumbnail in your sidebar, you can. A simple CSS and Javascript fix for IE would do the trick, here’s how:

Is Your Theme Compatible with the Latest Version of WordPress?

I get this question often, and I wonder, are people really encountering themes that are having compatibility issues with WordPress 2.5.x? If so, what are the issues and how to fix it? This quest led me to searching the WordPress forums for folks complaining about their theme not being compatibility with WordPress 2.5, nothing there. Next I searched on Google, all I got were hits to sites that claims their themes being compatible, so no real compatibility issue to report.

wordpress logoSo why is it that each time WordPress releases a newer version, folks start doubting if their theme is compatible? The answer might be not in the themes themselves, but in the …

Display Continuous List in Two Rows As Images

CSS TipsEarlier, we studied how we can easily display a continuous list in two columns using just CSS. Today, we will use a similar technique to present a continuous list in two rows within a finite width. A common usage of this technique can be found in galleries such as CSS Mania or wpSnap, where the post is replaced by a thumbnail image in the home page. We can tackle this need using simple CSS magic.

Let us assume you are using WordPress to power your site where your typical blog post is generated using WP Loop as shown below. This will usually render a simple list of posts as shown in this image, click the image to view a live demo.
demo site with post list

<?php while(have_posts()) : the_post(); ?>
<div class=”post” id=”post-<?php the_ID(); ?>”>
<h1><a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>” rel=”bookmark”><?php the_title(); ?></a></h1>
<h5>//<?php the_time(‘m.d.Y’); ?> at <?php the_time(‘g:i a’) ?></h5>
<?php the_content(‘Read more…’); ?>
<?php edit_post_link(‘Edit’, ‘<p>’, ‘</p>’); ?>
<p class=”entry-meta”>
<span class=”cat-links”>Filed under: <?php the_category(‘, ‘) ?><?php if (function_exists(‘the_tags’)) { ?><?php the_tags(‘, ‘, ‘, ‘, ”); ?><?php } ?></span> // <span class=”comments-link”><?php comments_popup_link(‘Post a comment’, ’1 Comment’, ‘% Comments’); ?></span>
</p>
</div>
<?php endwhile; ?>

We then replace the tag that generates the post, in this case, it’s the “the_content” tag with a source to a image file that is labeled identical to the post ID, for example, post ID 11 will have a corresponding image called 11.jpg in a select.

Array Function in WordPress 2.5

During a recent site redesign, the client required the site dynamically generate a unique promotional banner (in the sidebar) on certain high profile writers “about the author” page.

wordpress 2.5Before WordPress version 2.5.x, we had to rely on conditional tags such as is_page() or is_category() and numerous lines of code to accomplish it. For most parts it worked well, especially when you had only one or two conditions to satisfy, but when the number of such exceptions increased, the code became bulky and was prone to err.

With WordPress version 2.5.x, you can simplify the task by applying the conditions over an array of pages (categories, tags…), here’s an example:

Our conditional tag was required to automatically generate a banner when the author page of specific authors was queried.

SEO Friendly Images to Replace Text in Navigation Menus

css tips and tricksUsing images in place of text can be tempting especially since an image can offer you more visually than just text does. However, most of us end up using text for the simple reason that Google and Yahoo’s search engines are not able to read your images effectively (even with alt text?). Here’s a quick, simple, tried and tested SEO friendly CSS only Javascript free fix for one such scenario; replacing your navigation menu text with SEO friendly images:

Let’s start with making our images that will be used in place of menu text, in this example I am using images 30px tall and of varying width. I make two images for each menu item, one for mouse-over or hover and second for all other conditions.

Who is Stealing your Mojo? RSS Feed Scraping, Splogs and How to Fight them

ban splogsIf your site gets any traffic at all, chances are your RSS feed is scraped and misused by some one trying to score on SERP for the work you have toiled on. This very blog is constantly ripped by sploggers who have no regards to intellectual property rights or just plain simple dumb to realize they are stealing. Here are three sites where you can find the entire content of our blog scraped/ripped/stolen and posted as their own. Of course I did not link to them because I really don’t want you to visit them:

myblogmix.com (this m^*&*0 f$%*r even uses one of our themes on his splog!)
frenzygraphics.com
urlfan.com

How do you stop them?
Jonathan Bailey, a security expert (Plagiarism Today) who also writes on Blog Herald, lists 6 steps to identify and fight content theft. We religiously followed the suggestions for months now (that post on BH was from last November), but none worked thus far. Google is yet to acknowledged our letters (used his cease and desist letter templates, which is a good source, thanks!). I even took solace in thinking maybe they have a backlog or that they will eventually write back, but nothing really happened.

Display Continuous List in Two Columns

CSS TipsHere’s a quick and easy way to present a continuous list in two or more columns without having to hard code it. A recent project required a list of authors across two columns; the author names and links were auto generated using a WP tag so listing them in 2 columns required some simple CSS magic.

WordPress 2.5 Upgrade: WordPress 2.5.1 is available! Please update now Message Appears after Upgrade Troubleshooting

When a client of mine upgraded to WordPress 2.5.1 from WordPress 2.5 she encountered an issue where the database will not upgrading, resulting in the “WordPress 2.5.1 is available! Please update now.” flashing in her dashboard and every other admin pages. On initial search of the WordPress support forum, we found the following strings that pointed us in a certain direction:

wordpress 2.5http://wordpress.org/support/topic/172004
http://wordpress.org/support/topic/168964

Neither strings suggest solutions that are easy or safe, however, I urge you check these posts and then search your install via file manager/FTP/WebFTP to ensure you do not have files with the following extensions anywhere within a writable …

SEO Tip Open Comment Author URL in new Window

For good SEO, it is preferential to open your comment authors URI in a new page. Why you might ask? Google and other search engines track sites you visit, they can tell what that site contains (obviously), how long you stayed there and where you went next. The intended use of this information is to find if the sites you visited were relevant to your search keyword and/or if all the sites you visit are related. That could also work against you if your site get a lot of spammers commenting on it. Here’s how.

comment author url pupupLet’s say you get a comment on your site that look legit, so you want …