I have been asked numerous times how I accomplished the sidebar and main content fading on this site. It’s a pretty simple snippet of jQuery. I decided it’s about time to just make a post about it.

First off my reason for using the effect. Having a dark colored site with light colored text, and typically a lot of light colored text, the sidebar content seemed to distract from the main content area. As information in my sidebar is usually unrelated to the post being shown, I felt it a good idea to lessen the importance of the sidebar content until the user wanted it. A simple fading solution seems to do the trick.

There are only a few lines needed for this effect. One note is that IE6 doesn’t want to play along so I am using a browser sniff to detect that browser and feed it nothing.

if ($.browser.version = jQuery.browser.msie &&
    parseInt(jQuery.browser.version) == 6) {
     // IE6 doesn't like this so it doesn't get any effect
  } else {
$("#side").fadeTo('fast', 0.4);

$("#side").hover(function(){
	$(this).stop().fadeTo('fast', 1);
	$("#main").stop().fadeTo('fast', 0.4);
},function(){
	$(this).stop().fadeTo('fast', 0.4);
	$("#main").stop().fadeTo('fast', 1);
});
}

You will notice in that snippet that I am using divs with the ids of side and main respectively. Of course change these to be whatever your site requires.

That’s all there is. You can take a look at a simplified working example here.

P.S. 2010 is the year of the tiger.

I’ve never been one for tag maps. I’ve never liked non-alphabetical listings of tags in sidebars. I never like lists of tags ordered by the “popularity” of the tag in question. All these make it extremely difficult scan and find the topics that interest me. In large sites with hundreds of tags, all these approaches are more a hindrance than a feature.

This might sound like a lot of negativity but, “Necessity is the mother of invention” after all.

That’s where Multi-column Tag Map comes in. A simple, lightweight plug-in that pulls all the tags used in the site and builds an alphabetical list out of the results. The extras include displaying the list in multiple columns (1-5), displaying tags that have no posts associated with them yet, limiting of the number of tags shown on load, a simple “show more” feature to reveal tags hidden on load and an accordion toggle “show/hide”.

In larger sites, this would be perfect to devote an entire page to. Users can easily scan the list for topics of interest and find exactly what they are looking for without having to dig through tag clouds and seemingly random ordered lists of tags. You can think of this as a true index of your site.

Example

Using the following shortcode and the default CSS. I don’t have a lot of tags on this site but, this should give you a good idea of the output.

[mctagmap columns="3" more="more »" hide="yes" num_show="1" toggle="« less" show_empty="no"]

This morning I was flipping through Memphis Magazine and noticed a pretty simple yet nice text treatment. They were over laying the first paragraph over a faint colored square that had the first letter of said paragraph in it. Nice way of adding a little ‘pop’ to the page.

Of course I thought to myself how to do that. So borrowing some script from Learning jQuery I whipped up this little demo.

The JavaScript is pretty straight forward, most of it remains unchanged from the aforementioned tutorial from Learning jQuery.

/* global functions */

function bg_letter() {
  var first_paragraph = $('#content p')[0];
  if (!first_paragraph) return false;
  var node = first_paragraph;
  while (node.childNodes.length) {
 node = node.firstChild;
  }
  var text = node.nodeValue;
  var first_letter = text.substr(0,1);
  var match = /[a-zA-Z]/.test(first_letter);
  if ( match ) {
    var letter = 'transparent url(alphabet/' + first_letter.toLowerCase() + '.gif) top left no-repeat';
    $(first_paragraph).css({'background' : letter, 'font' : '16px/22px "futura bk", century gothic, verdana, sans-serif', 'padding' : '16px 0 0 16px', 'margin' : '0 0 0 -16px'});
  }
}

/* begin jquery */

$(document).ready(function(){
  bg_letter();
});

The difference is what it does on ‘match’. I went ahead and made a variable, less for legibility than just to see how it was done.

  if ( match ) {
    var letter = 'transparent url(alphabet/' + first_letter.toLowerCase() + '.gif) top left no-repeat';
    $(first_paragraph).css({'background' : letter, 'font' : '16px/22px "futura bk", century gothic, verdana, sans-serif', 'padding' : '16px 0 0 16px', 'margin' : '0 0 0 -16px'});
  }

The variable ‘letter’ has the local path to the alphabet folder where all the images for each letter or stored. The first_letter_toLowerCase() adds that letter to the image file. So you need 26 images in that folder for English.

Then I just applied a little inline CSS to the first paragraph defining the background image, font size, weight and line height. I then padded the text to sit nicely on top of the letter and a little negative margins to pull the paragraph in to line with the rest of the text. Plus that gives it a little more flare IMO.

Nothing too super fabulous but, nifty none the less. And heck, It’s middle of August and I had an hour to kill. Enjoy.

Following up on my two column post hack for Wordpress, here is a method to doing it for three columns. There isn’t really too much different except a few small shanges in the CSS and PHP. Biggest change is using PHPs ceil() instead of round().

Take a look at the whole code first:

<?php
$content = apply_filters('the_content', $post->post_content);
$beth = explode('<p>', $content);
$i = 0;
foreach ($beth as $erica){
$i++;
$q = $i - 1;
if ($i == 0) {
echo $q.$erica;
}
}
$z = $q/3;
$i = 0;
echo "<div class='left l1'>\n";
foreach ($beth as $erica){
$i++;
$q = $i - 1;
if ($i != 1) {
// un-comment the next line
//echo "<p>".$erica;
//erase or comment out the next line
echo "<p>".$q.") ".$erica;
}
if ($i == ceil($z+1)){
echo "</div>\n\n<div class='left l2'>\n";
}
if ($i == ceil($z+$z+1) ){
echo "</div>\n\n<div class='left l3'>\n";
}
}
echo "</div>\n\n"
?>

Just in case can download the .txt file here.

This will divide the number of paragraphs by 3 and then columnize them accordingly. The odd paragraphs will start to fall in the first column, then the second then the third. So for example if you have five paragraphs they will order like so:

1 | 3 | 5
2 | 4 |

If you have 7 they will stack like so:

1 | 4 | 6
2 | 5 | 7
3 |

Just something to keep in mind when typing up your copy. Pay attention to the following in the code. I echoed out my $q variable so I could check where my paragraphs were stacking. You need to erase the “counting line” and uncomment the normal, non counting line.

if ($i != 1) {
// un-comment the next line
//echo "<p>".$erica;
//erase or comment out the next line
echo "<p>".$q.") ".$erica;
}

That’s all there is to it. Hope this helps.

Several months ago I had a project that included feeding ad images into the sidebar of a page. Not a big deal but, there was an issue. These images were all coming from a third party. There was a small chance that these images would not be uploaded correctly and seeing that I had no sure fire way to make sure that the images would either be there or named correctly, I needed a solution so Internet Explorer would not show the dreaded ‘no image’ icon.

I found a snippet of jQuery that would check to see if the image loaded and if not, just erase the content of the parent div. This way if the image didn’t load, nothing did. Simple solution.

Based of that I wrote of this small script to do the same thing but with graphical headers. I know there are plenty of solutions to using accessible graphical headers so you may ask,”why another, and why jQuery?” Why not?

One note to start. i have not been able to get this to work at all in Opera. I have tested in Firefox, Safari and IE6 & 7 though. they all seem to work with the desired effect. If you find a solution to the Opera issue, please let me know.

Some benefits as far as I can see with this method.

• No need for nested spans or negative text-indents.
• No js? no problem. The user gets styled text instead.
• Still works with styles disabled and usable for print style sheets.

Some cons:

• With js and styles off, the user gets both the text and the image.
• There has to be more.

Take a look at the jQuery used

$(window).bind('load', function() {

$('h2 a img').css({ border: 'none', display: 'none' });

$('<img src="http://www.google.com/intl/en_ALL/images/logo.gif' + '#' +
   Math.random() + '"/>').load(function() {

	$('h2 a img').each(function() {
		if((typeof this.naturalWidth != "undefined" && this.naturalWidth == 0 ) || this.readyState == 'uninitialized' ) {
			$(this).css('display', 'none');
		} else {
			$(this).parent().each(function () {
				var h2Image = $('img', this).attr('src');
				var h2Text = $(this).html();
				$(this).empty();
				$(this).append('<img src="' + h2Image + '" border=\"0\" />');
				$('img', this).css('display', 'inline');
			})
		}
	});
   });
});

Not to exciting or complicated but, nonetheless I will try to explain the going-ons involved with this. First though, take a look at the sample page to get an idea of how it looks.

At the start I am using the $(window).bind('load', function() { to make sure the whole document loads before the script fires. This is to make sure that if the images want to load, they will be fully loaded before jQuery moves in a checks for them. Because of possible traffic issues and file sizes this is better than the typical $(document).ready() way of doing it.

Next we ask jQuery to check and see if the browser has images capabilities. Using $('<img src="http://www.google.com/intl/en_ALL/images/logo.gif' + '#' + Math.random() + '"/>').load(function() { we ask the browser to load the Google logo in the background. If it does it continues with the rest of the function. In testing, this image needs to be hosted and not on localhost. That will always produce a false positive. Make sure the URL to the image is to an image that will always be there. Safest bet is to upload a small image to your server. After all, if your site is down, this script won’t be there either.

Next we simply transverse all the elements we want to with $('h2 a img').each(function() {. In this case I only want to check for images inside an anchor tag that is a child of a <h2>. Once we have that we make one more safety check before moving on. if((typeof this.naturalWidth != "undefined" && this.naturalWidth == 0 ) || this.readyState == 'uninitialized' ) { $(this).css('display', 'none'); } checks to see if the images we are looking for have loaded. This is different than the first browser image check. This one will tell if a header doesn’t have an image or if the URL to the image is broken. If either of those scenarios are true, the script then applies display: none; to the image tag then moves on.

The next step now assumes that the browser has images on, the images are there and that they have loaded.

else {
	$(this).parent().each(function () {
		var h2Image = $('img', this).attr('src');
		var h2Text = $(this).html();
		$(this).empty();
		$(this).append('<img src="' + h2Image + '" border=\"0\" />');
		$('img', this).css('display', 'inline');
	})
}

In this case $(this) is still equal to saying $('h2 a img'). So we tell the script to find all images in the headers and then look at the parent of the image; the anchor tag. Now set up two variables. One to grab the SRC of the image (var h2Image = $('img', this).attr('src');) and another to grab the HTML of the anchor (var h2Text = $(this).html();). The fun part, the last variable does nothing in this example, I just forgot to take it out.

So great we have all the hard stuff out of the way. So these last three lines are actually the part that does the visual work.

$(this).empty();
$(this).append('<img src="' + h2Image + '" border=\"0\" />');
$('img', this).css('display', 'inline');

First empty the contents of the anchor. What this does is clears out the actual text but, it also clears out the image tag so we need to rebuild it. That’s the second line. Remember the variable from the previous lines? Here’s where it gets used. The final line applies an inline style to the image to over ride the display: none; in the original CSS rules.

That’s all there is to it. Again take a look at the sample page, to see i t in all it’s glory. If you can fix the Opera issue or have any thoughts on this, feel free to chime in.

I played with a few settings and came up with a fun technique for making patchwork styled text. It’s a simple text effect and only takes a few steps to achieve. With more time involved, like anything, greater results.

This is not very Web 2.0 but it has it’s place. The point is to add to the effects you can do regardless of what you use them for.

Step 1

We start with a new canvas of 600px by 200px with a black background. As this effect looks nicer on a more playful font I chose Jokerman. We set the font size to 110pt and the tracking to -140. This gives us a nice, large and over lapping text canvas to play with.

Step 2

Now we Ctrl-click the text to create a selection. Then Shift+Ctrl+N to create a new layer with our selection. Now we wan tto fill this layer with a horizontal gradient using #6161f2 to #61f2c0. This will help add color variation to the final outcome.

Step 3

Next Shift+Ctrl+N to create a new layer. Set the foreground color to #cef261. Using the Pen tool, create a horizontal line. Using the Convert Point tool, move each end of the path to create a bow-tie shape. Now rasterize this shape.

Now, Ctrl-click the layer, set the foreground color to #f2c061 then Edit > Stroke > 2px center. Then Ctrl-click the text layer, then click the shape layer and Shift+Ctrl+I to select the inverse and Delete. Now set the blend mode to Hard Light. This gives some variation to the colors and will help the final product.

Step 4

Now to add more color. I like to use Color Lovers to find patterns. I found this one that I liked to use for this tutorial. Copy the image and go back to Photoshop.

Ctrl+N to create a new canvas, Ctrl+V to paste in the pattern, Ctrl+A to select all and then Edit > Define Pattern to save this as a pattern.

Shift+Ctrl+N to create a new layer. Edit > Fill > Pattern to fill that layer with your new pattern. Ctrl-click your text layer, Shift+Ctrl+I to select the inverse and then Delete. Set the Blend Mode of this layer to Hard Light

Step 5

Now we’re going to add a little more color variation. Shift+Ctrl+N to create a new layer. Fill that layer with a gradient using #eef525 to #ffa250. Again, Ctrl-click the text layer, Shift+Ctrl+I to select the inverse and Delete. Set the Blend Mode of this layer to Overlay

Step 6

The next step is purely optional but it does add a nice touch to the effect. Ctrl-click your text layer, Shift+Ctrl+C to copy merged, Ctrl+V to paste this into a new layer. Ten to apply a filter. Filter > Stylize > Find Edges. Then Image > Adjustments > Channel Mixer > Presets > Black & White with Orange filter. This will highlight all the inner edges in the patchwork. Set Blend Mode of this layer to Soft Light.

Then we some color to the background. Vertical gradient using #be9c7f to #f0f2be.

Step 7

All this leaves some pretty unsightly edges on the text. Since the colors used produced a pretty cartoonish outcome, a heavy edge stroke seems to work well. Ctrl-click the top layer, Shift+Ctrl+N to create a new layer, then Edit > Stroke > 2px Center using #5b4327.

Wrap up

That’s it. A simple text effect in very few steps. This is easily taken farther with a little more effort. The colors you choose will generate fairly random effects. Like any effect, the more you put into it, the more you get out of it. For example, in the below image, I used a softer palette but the steps were the same. The biggest differences were in step three and the addition of the vertical lines (actually the vertical pipe character typed along a path with 400pt tracking). In step three, instead of a single horizontal path, I made a triangular path to add more randomness.

The PSD for download

The truth is, playing with what you can do with categories in Wordpress is fun. Being one that doesn’t like to use plugins for most functions, I enjoy tooling around in the code and trying to make the code do it for me.

So the question arose over on the Wordpress forums about how do make a list off all your categories with the post in each category. Pretty simple actually. Here’s the code i added to my themes functions.php file:

/* list categories with posts by tugbucket.net  */
function cat_and_posts(){
foreach (get_categories(array('hide_empty'=>true)) as $category)
{
$catid = $category->cat_ID;
global $post;
$myposts = get_posts('numberposts=100&category='.$catid);
echo '<li>' . $category->cat_name . "\n";
echo '<ul>' . "\n";
foreach($myposts as $post) {
echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>' . "\n";
}
echo '</ul>' . "\n";
echo '</li>' . "\n";
}
};
/* end */

You call it your template by using <ul><?php cat_and_posts(); ?></ul>. Take a look at the cat_and_posts() example for a visual.

Not a lot of code involved. We set up a new function name and then query all categories that are not empty. Then we grab the category id of each and then start a loop printing out a list off all posts in the category.

If you have ever done anything with the category loop then this pretty straight forward.

*NOTE:
Notice my numberposts=100. zbrass noted in a comment that my script was cutting off at five posts. This is because the default for that attribute is five. I am using a pagination plug-in that stops posts per page at six. That’s why I used 100 for mine to override this. If you are not using pagination use 0 (zero) as the value to show all posts.

Grab the Description on display in a list

Another post came up the same day that asked about printing out the category descriptions in a like manner. This is based on the tag category_description.

Again this is pretty easy once you know how to loop through it and how to modify the tag.

/* descriptive cat list by tugbucket.net  */
function desc_cats(){
foreach (get_categories(array('hide_empty'=>true)) as $category)
{
$catid = $category->cat_ID;
echo '<li><a href="' . get_bloginfo('wpurl') . '/category/' .  $category->category_nicename . '/">' .
	$category->cat_name . ' (' . $category->count.$numposts.')</a>' . category_description($catid) . '</li>' . "\n";
}
};
/* end  */

Here’s an example of the desc_cats() function. You can call it by placing <ul><?php desc_cats(); ?></ul> in your template.

Pretty simple stuff and with a little CSS added can be quite attractive. Each one would be pretty easy to incorporate with an accordian type script whether jQuery or MooTools for some intresting effects.

Here’s something I’ve been wanting to figure out for a while now. How to make two column pull quotes that are actually usable for the most part. With the use of some pseudo-fancy CSS and a little bit of neat jQuery, I have finally done just that.

The text resize function can be found here. The function doit() is called on page load and every time the text is resized by the buttons in order to recalculate positioning and height.

IE 6 & 7 are tricky little buggers on the CSS positioning.

In the first three examples shown, I have left the background color on for the spans so you can see the placement of them. Take a look at the first example. Try it with JavaScript turned off as well. This is the most straight forward example. It only uses one span set to the height of the block quote to float content around it.

There are caveats with each sample. The biggest one is that with manual text resizing, these will start to fail. This is why I have included text resizing buttons. The issue is that when a user uses their keyboard to resize, the script doesn’t know it and doesn’t recalculate the location and size of the blockquote. With the buttons, the script re-fires and adjusts accordingly.

The CSS and HTML is pretty straightforward for this. Some little things are this:

blockquote {
font: normal 30px/32px times, "times new roman", georgia, serif;
letter-spacing: -1px;
padding: 0px 0 4px 0px;
border-bottom: 4px solid #000;
width: 250px;
position: relative;
z-index: 1;
margin: 0 0 4px 6px;
}

span.pullout {
display: block;
float: left;
xbackground: #ede;
margin: 0 0 3px 0;
width: 0px;
overflow: hidden;
}

The block quote is set to 250px so that when JavaScript is off it fits inside the column it belongs to. The span has no height applied it as it’s only need with JavaScript on.

The script that makes this happen then fires and resizes the span and repositions the blockquote.

function doit() {
      showHeight("blockquote", $("blockquote:eq(0)").outerHeight());
	  $("blockquote:eq(0)").css({float: "right",margin: "0 -140px 3px 14px"});
	  	  var spanstuff = $("blockquote:eq(0)").outerHeight();
	  $("span:eq(0)").css({width: "135px"});
	  $("span:eq(0)").height(spanstuff);
}

doit();

The showHeight is only in the function to display the height at the top of the page. It’s not needed for the function. So here’s a quick break down:

1. First we apply some CSS to the first blockquote on the page. We are negative the right margin to slide it over into the second column.
2. Now we get the height of the first blockquote and name a variable called “spanstuff“.
3. Next we set the width of the first span on the page.
4. Lastly we set the height of the span to be the height of the blockquote using the aforementioned variable.

Take a look at the first example. again. Nothing too hard going on there.

Let’s get a little more creative

Example two looks a little more fun doesn’t it? By nesting the blockquote further down we add more visual excitement to the page. This time we add another san to the second column. This is used to push down the span that is going to reserve the space for the blockquote. It’s a tad more in-depth.

span.pullout {
display: block;
float: left;
margin: 0 0 3px 0;
width: 0px;
clear: left;
}

span.ab {
display: block;
width: 0px;
float: left;
}

* html span.ab, *+html span.ab {
width: 1px;
}

IE doesn’t like the new span having a 0 width so we just make it 1px wide to make it happy. I could do it across the board but it was an after thought upon testing. We float a 0px wide span at the beginning of the second column. Then we make sure our spacer span clears that span. The JavaScript then changes to this:

function doit() {
	  $("blockquote:eq(0)").css({float: "right",margin: "0 -140px 3px 14px"});
	  var spanstuff = $("blockquote:eq(0)").outerHeight();
	  $("span:eq(1)").css({width: "135px"});
	  $("span:eq(1)").height(spanstuff);
	  var p = $("blockquote");
	  var position = p.position();
	  $("span:eq(0)").height(position.top);
}
doit();

1. First we apply some CSS to the first blockquote on the page. We are negative the right margin to slide it over into the second column.
2. Now we get the height of the first blockquote and name a variable called “spanstuff“.
3. Next we set the width of the second span on the page. This was the first span on example one.
4. Nextwe set the height of the second span to be the height of the blockquote using the aforementioned variable.
5. The next three lines find the top position of the blockquote and then set the first span to be that height, thus pushing the spacer span into position.

Example two again.

What? You want 3-column pull-quotes?

Ask and ye shall receive.

In this example I duplicated the method in example two. The difference is that I put the blockquote in the second column. So in the first column I have one “pusher” span and one spacer span. These are now floated to the right. In the third column I used the same span technique as in example two (i.e. floated left). The JavaScript changes accordingly:

function doit() {
	  $("blockquote:eq(0)").css({float: "right",margin: "0 -140px 3px -140px", width: "540px"});
	  var spanstuff = $("blockquote:eq(0)").outerHeight();
	  var p = $("blockquote");
	  var position = p.position();
	  $("span:eq(0)").height(position.top);
	  $("span:eq(1)").css({width: "135px"});
	  $("span:eq(1)").height(spanstuff);
	  $("span:eq(2)").height(position.top);
	  $("span:eq(3)").css({width: "135px"});
	  $("span:eq(3)").height(spanstuff);
}
doit();

We need to alter the CSS for IE as well:

* html span.ab, *+html span.ab, * html span.ab1, *+html span.ab1 {
width: 1px;
}

1. This time we expand the blockquote to be as wide as two columns and use a double negative margin to pull it across all three columns.
2. Now we set the first and third spans to be the height of the Y position of the blockquote.
3. Then we set the second and fourth spans to be the height of the blockquote. Then set the width to allow the content in each respective column to wrap around.

One bad side about doing it with the pusher spans in the first column is that floated drop caps are not possible. Since the first span on the page is floated right, a floated left drop cap is going to clear it by default. But, don’t worry, that has been addressed as well. It get more and more in-depth but, playing with it a bit, it’s not super complicated.

Wait a few days for part two of these examples. I still have some kinks to workout and some error checking to do. It gets better I promise.

With some help from an old post by Otto42 on the WP forums and some trial an error, I got what I needed to accomplished.

I’ll run through the jQuery part rather quickly as it’s pretty basic. You will need two files for this. jQuery itself and the Dimensions plugin. Then using the technique described at Learning jQuery, we need to make a call to show and hide the list items:

<script type="text/javascript">

$(document).ready(function() {

  $('div.footdivsample:eq(0)> ul li.hideli').hide();

  $('div.footdivsample:eq(0)> ul a.more').click(function() {

 $('div.footdivsample:eq(0)> ul li.hideli').slideToggle('fast');

  $('div.footdivsample:eq(0)> ul li.morelink').remove();

  });

});

</script>

Some thanks go to The CSS Guy for the remove();.

A quick break down on what this does. It finds the first div with a class footdivsample and then hides all <li class=”hideli”> inside of it. Then the function does two things. On clicking a link with the class of “more” it toggles the hidden list items and then removes the selected link parent list item from the DOM. That’s the easy part. The HTML looks like this, don’t worry too much yet about all the PHP inside of it as I will explain later:

<div class="footdivsample">

<h2>Archives with 'offset' and 'limit' applied with some jQuery</h2>

<ul>

<?php wp_get_archives_with_offset('type=monthly&limit=5&before=<li>&after=</li>'); ?>

<?php echo "<li class="morelink">"."<a href="#x" class="more">more »</a>"."</li>"."n"; ?>

<?php wp_get_archives_with_offset('type=monthly&offset=5&limit=9999999&before=<li class="hideli">&after=</li>'); ?>

</ul>

</div>

What this is doing is already taking advantage of the new modifications to the themes functions.php file. That’s a little tricky so I’ll go over what each line does for starters.

<?php wp_get_archives_with_offset('type=monthly&limit=5&before=<li>&after=</li>'); ?>

The first line uses the new class of wp_get_archives_with_offset, limits the results to the most recent 5 and then wraps the result in a list. By default, the wp_get_archives already builds the list. Later I’ll show how I took them off and why I needed to.

<?php echo "<li class="morelink">"."<a href="#x" class="more">more »</a>"."</li>"."n"; ?>

The next line prints out the “more” list item and link to activate the jQuery. Because the first line specifies 5, this list item will be printed as the sixth list item.

<?php wp_get_archives_with_offset('type=monthly&offset=5&limit=9999999&before=<li class="hideli">&after=</li>'); ?>

In the last line we grab the archives again but this time we use “offset” set to five to skip the first 5 list items and then print the rest. In the code in the new wp_get_archives_with_offset function, you have to declare the “limit” as well. Not really an issue. Just set it some big number, in the case 9999999. Divide that by 12 and you’ll notice it’s way past the Mayan Doomsday date so, whatever.

Now the “hard part”

If you look into your sites “wp-includes” folder you’ll find a file called “general-template.php”. At around line 350, there will be the whole chunk of following code. It is the entire wp_get_archives. Safest way to do this is to copy it out and then open your themes functions.php file and paste it right after the opening <?php tag.

function wp_get_archives($args = '') {

 global $wpdb, $wp_locale;	$defaults = array(

 	'type' => 'monthly', 'limit' => '',

 	'format' => 'html', 'before' => '',

 	'after' => '', 'show_post_count' => false

 );

$r = wp_parse_args( $args, $defaults );

 extract( $r, EXTR_SKIP );

if ( '' == $type )

 	$type = 'monthly';

if ( '' != $limit ) {

 	$limit = absint($limit);

 	$limit = ' LIMIT '.$limit;

 }

// this is what will separate dates on weekly archive links

 $archive_week_separator = '–';

// over-ride general date format ? 0 = no: use the date format set in Options, 1 = yes: over-ride

 $archive_date_format_over_ride = 0;

// options for daily archive (only if you over-ride the general date format)

 $archive_day_date_format = 'Y/m/d';

// options for weekly archive (only if you over-ride the general date format)

 $archive_week_start_date_format = 'Y/m/d';

 $archive_week_end_date_format	= 'Y/m/d';

if ( !$archive_date_format_over_ride ) {

 	$archive_day_date_format = get_option('date_format');

 	$archive_week_start_date_format = get_option('date_format');

 	$archive_week_end_date_format = get_option('date_format');

 }

//filters

 $where = apply_filters('getarchives_where', "WHERE post_type = 'post' AND post_status = 'publish'", $r );

 $join = apply_filters('getarchives_join', "", $r);

if ( 'monthly' == $type ) {

 	$query = "SELECT DISTINCT YEAR(post_date) AS `year`, MONTH(post_date) AS `month`, count(ID) as posts FROM $wpdb->posts

$join $where GROUP BY YEAR(post_date), MONTH(post_date) ORDER BY post_date DESC $limit";

 	$key = md5($query);

 	$cache = wp_cache_get( 'wp_get_archives' , 'general');

 	if ( !isset( $cache[ $key ] ) ) {

 		$arcresults = $wpdb->get_results($query);

 		$cache[ $key ] = $arcresults;

 		wp_cache_add( 'wp_get_archives', $cache, 'general' );

 	} else {

 		$arcresults = $cache[ $key ];

 	}

 	if ( $arcresults ) {

 		$afterafter = $after;

 		foreach ( $arcresults as $arcresult ) {

 			$url	= get_month_link($arcresult->year,	$arcresult->month);

 			$text = sprintf(__('%1$s %2$d'), $wp_locale->get_month($arcresult->month), $arcresult->year);

 			if ( $show_post_count )

 				$after = ' ('.$arcresult->posts.')' . $afterafter;

 			echo get_archives_link($url, $text, $format, $before, $after);

 		}

 	}

 } elseif ('yearly' == $type) {

 	$query = "SELECT DISTINCT YEAR(post_date) AS `year`, count(ID) as posts FROM $wpdb->posts $join $where GROUP BY

YEAR(post_date) ORDER BY post_date DESC $limit";

 	$key = md5($query);

 	$cache = wp_cache_get( 'wp_get_archives' , 'general');

 	if ( !isset( $cache[ $key ] ) ) {

 		$arcresults = $wpdb->get_results($query);

 		$cache[ $key ] = $arcresults;

 		wp_cache_add( 'wp_get_archives', $cache, 'general' );

 	} else {

 		$arcresults = $cache[ $key ];

 	}

 	if ($arcresults) {

 		$afterafter = $after;

 		foreach ($arcresults as $arcresult) {

 			$url = get_year_link($arcresult->year);

 			$text = sprintf('%d', $arcresult->year);

 			if ($show_post_count)

 				$after = ' ('.$arcresult->posts.')' . $afterafter;

 			echo get_archives_link($url, $text, $format, $before, $after);

 		}

 	}

 } elseif ( 'daily' == $type ) {

 	$query = "SELECT DISTINCT YEAR(post_date) AS `year`, MONTH(post_date) AS `month`, DAYOFMONTH(post_date) AS

`dayofmonth`, count(ID) as posts FROM $wpdb->posts $join $where GROUP BY YEAR(post_date), MONTH(post_date), DAYOFMONTH(post_date) ORDER

BY post_date DESC $limit";

 	$key = md5($query);

 	$cache = wp_cache_get( 'wp_get_archives' , 'general');

 	if ( !isset( $cache[ $key ] ) ) {

 		$arcresults = $wpdb->get_results($query);

 		$cache[ $key ] = $arcresults;

 		wp_cache_add( 'wp_get_archives', $cache, 'general' );

 	} else {

 		$arcresults = $cache[ $key ];

 	}

 	if ( $arcresults ) {

 		$afterafter = $after;

 		foreach ( $arcresults as $arcresult ) {

 			$url	= get_day_link($arcresult->year, $arcresult->month, $arcresult->dayofmonth);

 			$date = sprintf('%1$d-%2$02d-%3$02d 00:00:00', $arcresult->year, $arcresult->month,

$arcresult->dayofmonth);

 			$text = mysql2date($archive_day_date_format, $date);

 			if ($show_post_count)

 				$after = ' ('.$arcresult->posts.')'.$afterafter;

 			echo get_archives_link($url, $text, $format, $before, $after);

 		}

 	}

 } elseif ( 'weekly' == $type ) {

 	$start_of_week = get_option('start_of_week');

 	$query = "SELECT DISTINCT WEEK(post_date, $start_of_week) AS `week`, YEAR(post_date) AS yr, DATE_FORMAT(post_date,

'%Y-%m-%d') AS yyyymmdd, count(ID) as posts FROM $wpdb->posts $join $where GROUP BY WEEK(post_date, $start_of_week), YEAR(post_date)

ORDER BY post_date DESC $limit";

 	$key = md5($query);

 	$cache = wp_cache_get( 'wp_get_archives' , 'general');

 	if ( !isset( $cache[ $key ] ) ) {

 		$arcresults = $wpdb->get_results($query);

 		$cache[ $key ] = $arcresults;

 		wp_cache_add( 'wp_get_archives', $cache, 'general' );

 	} else {

 		$arcresults = $cache[ $key ];

 	}

 	$arc_w_last = '';

 	$afterafter = $after;

 	if ( $arcresults ) {

 			foreach ( $arcresults as $arcresult ) {

 				if ( $arcresult->week != $arc_w_last ) {

 					$arc_year = $arcresult->yr;

 					$arc_w_last = $arcresult->week;

 					$arc_week = get_weekstartend($arcresult->yyyymmdd, get_option('start_of_week'));

 					$arc_week_start = date_i18n($archive_week_start_date_format, $arc_week['start']);

 					$arc_week_end = date_i18n($archive_week_end_date_format, $arc_week['end']);

 					$url  = sprintf('%1$s/%2$s%3$sm%4$s%5$s%6$sw%7$s%8$d', get_option('home'), '', '?',

'=', $arc_year, '&', '=', $arcresult->week);

 					$text = $arc_week_start . $archive_week_separator . $arc_week_end;

 					if ($show_post_count)

 						$after = ' ('.$arcresult->posts.')'.$afterafter;

 					echo get_archives_link($url, $text, $format, $before, $after);

 				}

 			}

 	}

 } elseif ( ( 'postbypost' == $type ) || ('alpha' == $type) ) {

 	('alpha' == $type) ? $orderby = "post_title ASC " : $orderby = "post_date DESC ";

 	$query = "SELECT * FROM $wpdb->posts $join $where ORDER BY $orderby $limit";

 	$key = md5($query);

 	$cache = wp_cache_get( 'wp_get_archives' , 'general');

 	if ( !isset( $cache[ $key ] ) ) {

 		$arcresults = $wpdb->get_results($query);

 		$cache[ $key ] = $arcresults;

 		wp_cache_add( 'wp_get_archives', $cache, 'general' );

 	} else {

 		$arcresults = $cache[ $key ];

 	}

 	if ( $arcresults ) {

 		foreach ( $arcresults as $arcresult ) {

 			if ( $arcresult->post_date != '0000-00-00 00:00:00' ) {

 				$url  = get_permalink($arcresult);

 				$arc_title = $arcresult->post_title;

 				if ( $arc_title )

 					$text = strip_tags(apply_filters('the_title', $arc_title));

 				else

 					$text = $arcresult->ID;

 				echo get_archives_link($url, $text, $format, $before, $after);

 			}

 		}

 	}

 }

}

This might look and sound scary, and it is if you’re like me and close files randomly by accident and save a lot of wrong code. The relevant section of this code is this:

function wp_get_archives($args = '') {

 global $wpdb, $wp_locale;

 $defaults = array(

 	'type' => 'monthly', 'limit' => '',

 	'format' => 'html', 'before' => '',

 	'after' => '', 'show_post_count' => false

 );	$r = wp_parse_args( $args, $defaults );

 extract( $r, EXTR_SKIP );

if ( '' == $type )

 	$type = 'monthly';

if ( '' != $limit ) {

 	$limit = absint($limit);

 	$limit = ' LIMIT '.$limit;

 }

We are going to change that to look like this:

function wp_get_archives_with_offset($args = '') {

 global $wpdb, $wp_locale;	$defaults = array(

 	'type' => 'monthly', 'limit' => '',

 	'offset' => '', 'before' => '',

 	'after' => '', 'show_post_count' => false

 );

$r = wp_parse_args( $args, $defaults );

 extract( $r, EXTR_SKIP );

if ( '' == $type )

 	$type = 'monthly';

if ( '' != $limit ) {

 $limit = (int) $limit;

 if (!empty($offset)) {

 	$offset = (int) $offset;

 	$limit = ' LIMIT '.$offset.','.$limit;

 } else {

 	$limit = ' LIMIT '.$limit;

 }

}

A little line-by-line break down as best I can.

function wp_get_archives_with_offset($args = '') {

Here we are just naming a new function call. If we left it the same as wp_get_archives then WP would throw an error as it was already defined. Plus this way we can still use the original function as well as our new function.

 $defaults = array(

 	'type' => 'monthly', 'limit' => '',

 	'offset' => '', 'before' => '',

 	'after' => '', 'show_post_count' => false

 );

On this we are removing the ’format’ => html, and replacing it with ’offset’ => ‘’,. This does two things. First by removing the format line, it removes the default wrapping <li>’s thus allowing us to make our custom ones with class names. Second, it “turns on” the “offset” class. Woot! Two birds – 0; One stone – 1.

if ( '' != $limit ) {

 $limit = (int) $limit;

 if (!empty($offset)) {

 	$offset = (int) $offset;

 	$limit = ' LIMIT '.$offset.','.$limit;

 } else {

 	$limit = ' LIMIT '.$limit;

 }

}

Now what I think is going on here is that we are basically combining “LIMIT” and “OFFSET” into one class. So if “limit” is not empty look to see if “offset” isn’t empty. If both of them have a value then “limit” is now “offset+limit”. This means it needs to be written in that order as well. If only “limit” has value, then “limit” remains just as “limit”.

Have a look at the example page: Wordpress archive offset hack

Rakuette and myself went on a brisk Sunday morning to the Memphis Zoo. Had tons of fun. Played with the pigs. You know, zoo stuff. With my trusty cell phone camera I took some of the ugliest photos ever. Enjoy.

The hippos are finally getting a new living space and that’s way cool. Next year they are opening a wilderness exhibit. Wolves, Elk and Bears. Oh my!

So here are my pictures: Clicky Clicky

Now if we can only get someone to repair the sad state of the aquarium. I would have taken a few pics of the reef tanks but they were in a pretty bad state. Depressingly so actually. Bio-balls, no. Crushed coral, seriously? The lighting is a joke and the amount of aptasia made me a little ill. I wont even get started on the bubble algae. ugh.