Once you let go of the ALT key, the ¢ should appear.

If it doesn’t, I would guess user error is involved.

That, or since you are currently here, you can just copy and paste this one.

¢

In the head code under your normal CSS, simply insert this code

<link rel="stylesheet" media="print" type="text/css" href="http://yoursite.com/print.css" />

Next make the print.css file on your server and start setting objects to display:block if you would like it to print or display:none if you do not.

This is not the limitation of the print.css file though. You can also change font-sizes, margins, floats, etc so that the printed version of your page looks much better.

One nice feature that you can add is a line that says something like “Thanks for visiting our site and printing this page!”. Just place it in an element and add a class like class=”printmessage”. In your regular CSS just list .printmessage {display:none;} and in your print.css label it .printmessage {display:block;}.

Well, just use the following code:

<a href="http://twitter.com/home?status=<?php the_permalink() ?>"><img src="http://itscalledwebdesign.com/wp-content/uploads/twitter01.jpg"></a>

The only problem with this is that it does not shorten the URL at all.  But other than that, it should work just fine.

We’d also prefer that you didn’t pull the image from our site, so feel free to download it and upload to your own site.

http://itscalledwebdesign.com/wp-content/uploads/twitter01.jpg

<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
    if (!document.getElementsByTagName) return false;
    var sfEls = document.getElementById("nav").getElementsByTagName("li");

    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }

}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>

Next, you are going to to set up the navigation.  Check out the example code, then read the description of what it means below:

<div id="catnav">
  <div id="nav">

  <ul>
    <li><a href="http://yourdomain.com/">Home</a></li>
  </ul>

  <ul>
    <li><a href="http://yourdomain.com/page1/">Page One</a>
     <ul>
      <li><a href="http://yourdomain.com/page1sub1/">Page One Sub One</a></li>
      <li><a href="http://yourdomain.com/page1sub2/">Page One Sub Two</a></li>
     </ul>
    </li>
  </ul>

  <ul>
    <li><a href="http://yourdomain.com/page2/">Page Two</a>
     <ul>
      <li><a href="http://yourdomain.com/page2sub1/">Page Two Sub One</a></li>
      <li><a href="http://yourdomain.com/page2sub2/">Page Two Sub Two</a></li>
      <li><a href="http://yourdomain.com/page2sub1/">Page Two Sub Three</a></li>
     </ul>
    </li>
  </ul>

  </div>
</div>

The first HOME link has no dropdown, just the initial link.  The next cluster has a main link and then 2 sub pages in the dropdown and the last one has three sub links.

You can modify the link paths and how many dropdown sub links that you require.  Just make really sure that the first part of the code cluster starts with an <li>, but the ending </li> doesn’t come until the bottom of the cluster.  This has screwed me over a couple of times and I’ll save you the trouble.

The last thing you will need is the CSS.

#catnav {
  	padding: 0;
  	clear: both;
 	height: 32px;
 	width: 1000px;
 	background: #000;
  	position: absolute;
  	top: 85px;
        z-index: 100;
}

#nav {
  	list-style: none;
  	margin: 0;
  	padding: 0;
	position: relative;
	z-index: 100;
}

#nav ul {
  	margin: 0;
  	padding: 0;
}

#nav li {
  	float: left;
 	margin: 0;
 	padding: 0;
	list-style: none;
}

#nav a {
  	display: block;
  	line-height: 32px;
 	margin: 0 20px;
  	padding: 0;
  	font-size: 14px;
  	color: #fff;
	font-weight: bold;
}

#nav li a:hover {
  	color: #fff;
  	text-decoration: underline;
  	display: block;
}

#nav li ul {
  	list-style: none;
  	position: absolute;
  	width: 150px;
  	left: -999em;
}

#nav li:hover ul, #nav li.sfhover ul {
  	left: auto;
}

#nav li li {
  	float: left;
  	margin: 0;
  	padding: 0;
 	width: 129px;
}

#nav li li a {
 	width: 129px;
  	height: 24px;
  	line-height: 24px;
  	color: #000;
  	border-bottom: 1px solid #000;
  	background: #c5c5c5;
  	margin: 0;
  	padding: 5px 20px 5px 15px;
}

#nav li li a:hover {
  	border-top: 1px solid #131f27;
  	background: #000;
  	padding: 5px 20px 5px 15px;
}

#nav li:hover, #nav li.sfhover { /* prevents IE7 drop-down menu bug (focus on a page element prevents nested menus from disappearing) */
  	position: static;
}

Obviously, you can and will modify this to make it fit for your site, but this should get you started.

Then add this code into your php file:

<div id="productcats">
<?php rewind_posts(); ?>
<h2><a href="http://yourdomain.com/?cat=XXX">TITLE OF CATEGORY</a></h2>
        <?php query_posts('category_name=xxxxxxxxxxxx&order=dsc&showposts=12'); ?>
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
                <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a>
<br clear="all"><br />
        <?php endwhile; ?>
        <?php endif; ?>
</div>

You are going to want to change everything above in red.  First, insert the appropriate category number value.  Then put in whatever you want this grouping called.  Next is the actual slug name for the category and how many posts you want to show.  I currently have the number set to 12, but you can change that.

The div this is all situated in is called “productcats”.  You can change this id to whatever you want and then style it accordingly.

Now, this is all cool, but you might want to have an image associated with each post.  First of all, make sure you know how to use CUSTOM KEYS.

Create a custom key within your post.  For this example, the custom key will be called “thumbnail”.  Look at the following code:

<div id="productcats">
<?php rewind_posts(); ?>
<h2><a href="http://yourdomain.com/?cat=XXX">TITLE OF CATEGORY</a></h2>
        <?php query_posts('category_name=xxxxxxxxxxxx&order=dsc&showposts=12'); ?>
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
                <div id="thumb">
                    <a href="<?php the_permalink() ?>"><img src="<?php $key="thumbnail"; echo get_post_meta($post->ID, $key, true); ?>"></a>
                </div>
                <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a>
<br clear="all"><br />
        <?php endwhile; ?>
        <?php endif; ?>
</div>

I have the div with the thumbnail called “thumb”.  This allows you to style it however you like.  I generally style it with a float: left; margin: 5px 10px 5px 5px;.  This lets the text push to the right side of your image.  Feel free to mess with it and fit it to your liking.

Also, don’t feel the need to stop here.  You can do lots of interesting things with custom keys or by pulling in other info from your post like timestamps, author, category or any other meta data

img#wpstats{display:none}

<a href="http://www.yourdomain.com" onclick="window.open(this.href, '_blank', 'toolbar=no,location=yes,directories=yes,resizable=yes,scrollbars=yes,width=600,height=400'); return false;">Link to Popup</a>

That’s it, just change the href to wherever you want the link to go and feel free to modify any of the listed variables like toolbar, width, height, etc…

Copy this code into your header:

<style type="text/css">
#randomimage { background:url(<?php bloginfo('template_directory'); ?>/images/randomimage<?php echo (rand()%10); ?>.jpg); }
</style>

Copy this code into your page where you want the images to show up:

<div id="randomimage"></div>

Copy this into your CSS and modify accordingly:

#randomimage {
}

Now, you can change the name of the div and you can also put the images wherever you want, just make sure you change the path so that they match.

One very important thing about this code is that you need to have 10 images.  Also, the images need to be named very specifically.

Using this code, the images have to be named: randomimage0.jpg, randomimage1.jpg… and continuing up through randomimage9.jpg.  If you do not have an image representing this, then nothing will show up on your page.

While not necessarily the best php image randomizer I’ve seen, it’s quick and will get the job done.

Next, check out these add-ons.

ColorZilla - let’s you pick out any color on a webpage and save it’s RGB or HTML color value.

Web Developer’s Toolbar - this thing has saved many a day with it’s ruler, div selector and other great features.

Firebug - I don’t know how I survived without this. Offers real-time in-browser editing to any websites HTML, CSS and Javascript.

Screengrab! - Hands down, the best screen shooting program I’ve found to-date. You can save or copy the whole webpage, the visible portion, your own selection or the window.

IE View - face it, IE is a pain that has no standards. After using a standards-compliant browser to design and develop your site, use this plugin with a simple right-click option to view any page in IE. Then enjoy fixing all of it’s errors.