This decision will frustrate many web developers (myself included) as IE6 is widely considered a hindrance to web development in the designer community.

Drastically broken in IE6

IE6 doesn’t conform to the same standards as modern browsers like Firefox and Chrome – so potentially a site could appear drastically broken in IE6. IE6 is a headache for designers because the browser usually requires a seperate stylesheet with various hacks, doubling the effort required and potentially doubling costs for clients.

We shouldn’t be surprised that an 8-year-old browser is so out-of-touch. What is surprising is that IE6 still claims an approximate 15 to 20 market share. This share will most likely include users that are restricted by what browser they can use, e.g. schools, local government and businesses.

On the slide

Thankfully, IE6′s market share appears to be on the slide, thanks partly to designers neglecting IE6 users. Some small sites now stop IE6 users from browsing their site by placing an alternative holding page encouraging users to update their browser. Some sites like SimpleBits accomodate IE6 users but the experiencing is downgraded to a basic stylesheet.

If you want your WordPress theme to stand out from the crowd it is worth considering implementing a breadcrumb navigation trail. A breadcrumb trail can make it easier for your site visitors to identify what page they are currently viewing. This can make visitors more likely to return to your site, and is a great way to increase traffic. Anyone with a good internet connection from a reliable provider such as O2 should find it relatively easy to move around your site quickly. However, having a breadcrumb trail is a straightforward way of making site navigation that little bit easier.

Plugins like Breadcrumb NavXT are available that will automatically produce a breadcrumb trail for you. However, if you are looking for an easier method that does not require a plugin the below solution should help.

Breadcrumb.php code

Copy the below code into a new file called breadcrumb.php – make sure this file is in your root theme folder.

<div id="breadcrumb">
  <?php /* If this is the homepage */ if (is_home()) { ?>
  <p> <strong>You are here:</strong> <a href="<?php bloginfo('siteurl'); ?>" title="home"><span>home</span></a></p>
  <?php } ?>
  <?php /* If this is a tag archive */ if (is_tag() ) { ?>
  <p> <strong>You are here:</strong> <a href="<?php bloginfo('siteurl'); ?>" title="home"><span>home</span></a> &raquo; <a href="#" rel="bookmark" title="Posts Tagged &#8216;<?php single_tag_title(); ?>&#8217;">Posts Tagged &#8216;
    <?php single_tag_title(); ?>
    &#8217;</a></p>
  <?php } ?>
  <?php /* If this is a category archive */ if (is_category()) { ?>
  <p> <strong>You are here:</strong> <a href="<?php bloginfo('siteurl'); ?>" title="home"><span>home</span></a> &raquo; <a href="#" title="<?php single_cat_title(); ?>">
    <?php single_cat_title(); ?>
    </a> </p>
  <?php } ?>
  <?php if /* If this is a page */ (is_page()) { ?>
  <p> <strong>You are here:</strong> <a href="<?php bloginfo('siteurl'); ?>" title="home"><span>home</span></a> &raquo;
    <?php
	global $wp_query;
	if (empty($wp_query->post->post_parent) ) {
		$parent = $wp_query->post->ID;
		echo '';
	} else {
		$parent = $wp_query->post->post_parent;
		echo '<a href="'.get_permalink($parent).'">'.get_the_title($parent).'</a> &raquo;';
	}
?>
    <a href="<?php echo get_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>">
    <?php the_title(); ?>
    </a></p>
  <?php } ?>
  <?php if /* If this is a blog post */ (is_single()) { ?>
  <p> <strong>You are here:</strong> <a href="<?php bloginfo('siteurl'); ?>" title="home"><span>home</span></a> &raquo;
    <?php the_category(', ') ?>
    &raquo; <a href="<?php echo get_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>">
    <?php the_title(); ?>
    </a></p>
  <?php } ?>
  <?php if /* If this is a search page */ (is_search()) { ?>
  <p> <strong>You are here:</strong> <a href="<?php bloginfo('siteurl'); ?>" title="home"><span>home</span></a> &raquo; <a href="<?php bloginfo('siteurl'); ?>" title="home"><span>home</span></a></p>
  <?php } ?>
  <?php /* If this is a 404 page */ if (is_404()) { ?>
  <p> <strong>You are here:</strong> <a href="<?php bloginfo('siteurl'); ?>" title="home"><span>home</span></a> &raquo; <a href="#" title="404 Error page">404 Error</a></p>
  <?php } ?>
  <?php /* If this is a yearly archive */ if (is_year()) { ?>
  <p> <strong>You are here:</strong> <a href="<?php bloginfo('siteurl'); ?>" title="home"><span>home</span></a> &raquo; <a href="<?php bloginfo('siteurl'); ?>/archives" title="archives"><span>archives</span></a> &raquo; <a href="#" title="Year">
    <?php the_time('Y'); ?>
    </a></p>
  <?php } ?>
  <?php /* If this is a monthly archive */ if (is_month()) { ?>
  <p> <strong>You are here:</strong> <a href="<?php bloginfo('siteurl'); ?>" title="home"><span>home</span></a> &raquo; <a href="<?php bloginfo('siteurl'); ?>/archives" title="archives"><span>archives</span></a> &raquo; <a href="#" title="Month">
    <?php the_time('F, Y'); ?>
    </a></p>
  <?php } ?>
  <?php /* If this is a daily archive */ if (is_day()) { ?>
  <p> <strong>You are here:</strong> <a href="<?php bloginfo('siteurl'); ?>" title="home"><span>home</span></a> &raquo; <a href="<?php bloginfo('siteurl'); ?>/archives" title="archives"><span>archives</span></a> &raquo; <a href="#" title="Month">
    <?php the_time('F jS, Y'); ?>
    </a></p>
  <?php } ?>
  <?php /* If this is a author archive */ if (is_author()) { ?>
  <p> <strong>You are here:</strong> <a href="<?php bloginfo('siteurl'); ?>" title="home"><span>home</span></a> &raquo; <a href="<?php bloginfo('siteurl'); ?>/archives" title="archives"><span>authors</span></a> &raquo;
    <?php the_author_posts_link(); ?>
    <?php
if(isset($_GET['author_name'])) :
$curauth = get_userdatabylogin($author_name);
else :
$curauth = get_userdata(intval($author));
endif;
?>
    <a title="<?php echo $curauth->display_name; ?>'s posts" href="#"><?php echo $curauth->display_name; ?></a> </p>
  <?php } ?>
</div>
<!-- end breadcrumb -->

Call the above template anywhere in your theme files (usually in header.php) using the following code:

<?php include (TEMPLATEPATH . "/breadcrumb.php"); ?>

The end HTML result will look something like this:

<div id="breadcrumb">
  <p> <strong>You are here:</strong> <a href="http://yoursitename.com" title="home"><span>home</span></a></p>
</div><!-- end breadcrumb -->

Known issues!

This does not work for Grandchild categories. In my experience, grandchild categories are used very rarely. If you have found a workaround or any improvements to this code let me know.

Why would I need to hide images from guests?

You may have some images that you only want registered users to view on your blog. For example, you may be a photographer that would like to show your latest great shot to a select number of registered users. Making content available to registered only users can be a great incentive for your readers to register on your blog.

Simple add the below code to the top of your theme’s functions.php after the opening php tag.

PHP Function / Hide images

if ( is_user_logged_in() ) {

} else {
	add_filter('the_content','wpi_image_content_filter',11);

function wpi_image_content_filter($content){

    if (is_single() || is_front_page || is_home ()){
      $content = preg_replace("/]+\>/i", "" />", $content);

    }

    return $content;
}
}

Please note: the function will not block image links, so guests could still view the source image if they click on the image. To avoid this do not add links to inserted images.

Alternatively, use the below function to block images and links. Be careful, as this will remove (hide) all links in your blog posts.

PHP Function / Hide images and links

if ( is_user_logged_in() ) {

} else {
	add_filter('the_content','wpi_image_content_filter',11);

function wpi_image_content_filter($content){

    if (is_single() || is_front_page || is_home ()){
      $content = preg_replace("/]+href[^>]+>/", "", $content);
      $content = preg_replace("/]+\>/i", "" />", $content);

    }

    return $content;
}
}

I was asked by an editor back in October if I’d like to be included in the readers’ section.

I jumped at the chance and I’m delighted to be included in such a well respected magazine, especially as I’m a regular reader.

I was asked to write a short description (under 120 words) about Design Nudge and here is what I came up with:

Design Nudge is my own personal web design portfolio and blog. The main aim of the site was to keep everything nice and simple so readers can easily browse my portfolio and read what web services I offer. Design Nudge was born from an illustrator design I’ve been tinkering with over the last six months. I wanted to create a dark look without compromising bold typography. Design Nudge was hand-coded in XHTML and CSS using Dreamweaver. I’ve used over five individual style sheets, so updating in the future will be a swift task. Reaching a wide audience is important, so it was tested in most modern-day browsers and on some mobile devices.

Anyone can submit there personal site for review and if it meets their criteria they will almost certainly include it – so what are you waiting for?

Also, a big thanks to the following sites for including Design Nudge in their CSS showcases:

• CSS Design Yorkshire
• CSS Creme
• CSS Based
• CSS Container

Using “current page markers” in WordPress?

In this tutorial I will be using examples and screen grabs from the default 1.6 WordPress theme. “Current page markers” are already available in WordPress but they are disabled in the default WordPress theme. To enable page markers simple style and add the following CSS class to your stylesheet (style.css):

.current_page_item {font-weight: bold; font-style: italic}

Using the above CSS class the page link text will change to bold italic when the user is browsing that particular page:

How to add a “current page marker” to your homepage in WordPress!

So you now know how to add “current page markers” to WordPress pages, but what about the hompage? In this quick tutorial I’m going to demonstrate how to implement a “current page marker” for your homepage into any WordPress theme. Do not take the whole day off work as this tutorial should not take long.

1. First you need to delete the old wp_list_pages function which can be found in your themes sidebar (sidebar.php):

<?php wp_list_pages('title_li=<h2>Pages</h2>' ); ?>

2. We will now create a new wp_list_pages with a simple PHP if/elseif statement. So, if this is the homepage current_page_item will be added as a class to the <li> element, alternatively if this is not the homepage, page_item_home will be added as a class to the <li> element. Copy and paste the following code where the old wp_list_pages statement was located.

<h2>Pages</h2>
<ul>
<?php /* If this is the homepage */ if (is_home()) { ?>
<li class="current_page_item">
<a href="<?php echo get_option(’home’); ?>/" title="homepage">Home</a>
</li>
<?php } else { ?>
<li class="page_item_home">
<a href="<?php echo get_option(’home’); ?>/" title="homepage">home</a>
</li>
<?php } ?>
<?php
$pages = wp_list_pages(’title_li=&echo=0′);
echo $pages;
?>
</ul>

You may have noticed that I have removed the <li> elements within wp_list_pages and moved the <h2> elements outside the code – this is needed so the extra homepage link is included within the list.

3. And that’s it, you should now have a new homepage link and current page markers in your sidebar.

Having trouble getting it working?, found a better way? Feel free to leave feedback using the comment form below.

My intention of this blog is to speak freely about my experiences with web technology, accessibility/usability issues and standards based HTML/CSS web design.

This is a short entry as I still have a few dusty HTML/CSS corners to clean up. Or in other words this site is currently under construction, but I can assure you there will be no ugly flashing gifs on Design Nudge.

In the meantime, feel free to browse what I can do and what I have done.