HeadsetOptions Web Design, SEO, WordPress, Etcetra

Earlier, 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.

<?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.

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.

Before 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.

Using 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.

If 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.

Here’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.

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.

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

The site is in transition to a simpler and visually engaging design, in the mean time, experience what a free theme and a sleepless weekend can do to your site! This mid-spring pre-reboot reboot is just an idea mash-up. The true reboot will be available on May 1st 2008 and will be built using hand tossed XHTML/CSS, a dash of PHP, some Javascript and home made grid.

As the tutorials run longer than we prefer, we have broken section 3 into 3 sub-sections, you can find sub-section 1 regarding second level menu here.
The navigational aspect of a site, especially one that is database driven, should have menus that are dynamically generated just like the rest of its content, but is seldom the case. The reason is not the lack of information or techniques, but rather the developer underestimating the role of effective navigation to the success of a site. A site with poor navigation is just as or bad or worse than a site with poor content.

Magazine style themes have overcome …

Why pay for a Magazine WordPress Theme when you can get one for free? Introducing The Box, the all-inclusive magazine style WordPress theme that has all the cool features of a premium theme straight out of “the box”. Best of all, it is absolutely Free!
Ola Hedin of Blyerts.com pointed out an IE 6 issue that was fixed on 05/06/2008 at 9:48 PM EST. Thanks Ola
The theme includes among other functions advance edit options, featured-regular post option, second level, conditional and dropdown menus, tabbed JavaScript interface, widget ready sidebars and is pre-styled for Google Adsense and coded to be search engine friendly (optimized).
Demo and Download
Click …

As this tutorial runs longer than we initially anticipated, we will break section 3 further into three sub-sections.
In our ongoing exercise to learn the nuts and bolts of a magazine style WordPress theme, we examine what has become by far the most ignored part of a theme design, the navigation menu.

As important as they are, they are often found floating in the header or worse the sidebar and almost never used to its fullest as rightfully should. Today we will change that. We are dedicating three sections just to discuss navigation menus, its varied uses, and the various methods of using it. So why wait, let’s get started.
Why …