Having been kicking around the exciting world of installing and customizing WordPress, I felt it was high time I launched myself into the even more exciting world of developing for WordPress.  And here’s what I’ve come up with:

Recent User Posts

Recent Category Posts

Both of these are widgets that do basically the same thing, so I’ll describe them together here.

In developing the new Wharton Magazine blog, we needed a widget to display the Editor’s most recent post.  I poked around for a bit, and realized that there really wasn’t a plugin to handle this, so the need for one was obvious.  After getting the basics down, I decided that it actually had more applications than just a single post, and started adding features.

So, the end result is two widgets.  Enter a title, select the user/category you want to display, enter the number of posts to display, and select if you want to display a link to the user/category and the time and date.  Not complicated to use and does just what it says it does.

Before I release it to the WordPress Plugins Codex, I’d like to see if anyone wants a shot at debugging or can offer any tips or suggestions.  Files are at the links above, and thanks in advance!

I’m getting really drawn into WordPress and all its wonderful functionality, especially with the release of 3.0.  I retooled the back end of this site to run on WordPress MU a few months ago, because I run a few separate blogs and am in the process of expanding that for family members.

I was happy to see that WordPress merged the base and MU codebases into one, fully-functional software package.  The upgrade wasn’t as smooth as I’d have liked it, but I guess they figure that if you’ve managed to install and maintain MU, you shouldn’t have a problem editing PHP and .htaccess files on your own (as opposed to automating what boils down to three lines of code).   Stupid me misread one of the steps and wound up with no images displaying sitewide for 24 hours, and wondering if I was going to have to re-import all of them.  Once I figured out my mistake, though, the problem seemed pretty trivial.  Other than that, installing and upgrading are remarkably simple.

WordPress has been getting better and better for the end user and administrator since I began using it about two years ago, and now that I’ve begun really getting into the heart of it, I’m really glad that the development has gone toward all of those things that I wish it did.  It’s like they’re reading my mind!

So, on the horizon are three projects that I’d love to tackle.  One is a freelance job that I’m hoping pans out, because it’s a site that I’d love to do.  The second is here at Wharton, which again, I’d love to do.  The third is a complete revamp of PennridgeAlumni.com, a site that I’ve been studiously avoiding for far, far too long.  Redoing it entirely in WordPress now seems like a possibility, and I’m already working on a development version of that.  Let’s see how far I get…

Here’s some info on PNGs in IE6 that will hopefully save you from throwing yourself out a window sometime between now and 2014:

We all know that PNGs are not natively supported in the browser that time (but not all of humanity) forgot, but PNGs are so wonderfully useful as to make them indispensable. What to do?

Well, some brave soul made a fix for this very problem that works very well once you have it set up correctly. There are two very very important things to note (I’m sure there are more, but these are the two I’ve encountered):

1) background-position:bottom absolutely positively does not work with this. If you’re trying to do a neat drop shadow effect over a textured background using an alpha-layered PNG, throw yourself out that window now (or just deal with the fact that IE6 isn’t going to support it). Don’t waste hours agonizing over why it appears to load and then disappears, just know that you’re not going to fix it and move on to different ways to make your effect work. I suggest getting as close a match possible with a GIF or scrapping it altogether in IE6. Don’t agonize over making it perfect in IE6 if this is what you’re trying to accomplish, because people should be punished for using IE6 anyway.

2) Google Maps uses its own PNG fixing that is completely derailed by iepngfix.htc. You’ll notice that your Google Map appears for a second and then disappears once the page has finished loading. So once you’ve got your style set up like so:

img, div, a, input  { behavior:url(/iepngfix.htc); }

it’s going to completely hose your Google Map. How does one fix this, you ask?

#map img, #map div, #map a, #map input  { behavior:none !important; }

Of course! But could it be that simple?

We’re talking IE6 here, so I think that answers itself. You see, if you’re using the neat browser checking information I wrote about a while ago to put all that into a CSS file behind an IE include tag, you’re in for a nasty shock. Apparently, this doesn’t work (at least it didn’t for me). So, we need to revert to server-side checking:

<?
	$useragent = $_SERVER["HTTP_USER_AGENT"];
	if(preg_match("|MSIE ([0-9].[0-9]{1,2})|", $useragent, $matched)){
		if($matched[1] <= 6){;
?>
  <link rel="stylesheet" type="text/css" media="screen" href="/css/ie6.css" />
<?
		}
	}
?>

Of course, you could always use an iframe, but you’re better off just throwing yourself out a window at that point. I must also point out that if you’re using jQuery, you’re going to want to include this css file after your jQuery include. Why? IE6 – did you need a better answer?

It’s also worth noting that IE6 has a strange relationship with the !important tag. It will normally accept it, say if you’ve got a structure like so:

.tag  { width:500px; height:500px; color:#FFF; }
#tag2 .tag { color:#000 !important; }

That’s useful for a ton of applications. However, if you happen to put two declarations on one line:

.tag  { width:500px; height:500px;  color:#000 !important; color:#FFF; }

IE6 will ignore the !important tag in favor of the last declaration it finds. So, in this case, it will revert to color:#FFF; whereas every other browser will assume you meant color:#000; (because, you know, you said !important).

This is a useful bug, though, and it can be used to your advantage. Say you’re trying to add a min-height to a div. We all know that min-height is new and IE6 screams at it and its friend max-height to get off its lawn, because height was good enough in IE6′s day and it doesn’t need newfangled tags. So, we just use the !important tag to confuse it:

.tag { min-height: 250px; height: auto !important; height: 250px; }

This tells most browsers that your div needs to be at least 250 pixels tall, or however tall it needs to be beyond that. It also tells IE6 to make the div 250 pixels tall – but IE6 is kind of sloppy, so if the content in that div takes up more than 250 pixels, IE6 will expand to compensate – but won’t go below 250 pixels. This is coding Aikido – use your enemy against itself!

And I don’t think it’s unfair to call a nine-year-old browser that still enjoys a ridiculous market share despite its overwhelming flaws the enemy.

-pb

Yes, I know I don’t update here as often as I should, but hey, I do this, I just don’t frequently write about it.

So, let’s say you’ve coded a beautiful site, and you’re really proud of it, and you check it in IE6 and it looks like someone wrapped the entire thing in marquee and blink tags and then had their dog recode it for you. The natural inclination is to scream and toss your monitor out the window, and then hire Tom Clancy to write you into a Rainbow Six novel where you take out Microsoft Headquarters. While that would be an exciting read, what’s really going to solve your problem is to simply write a new CSS file to compensate for IE6 not being a real browser and a large (but slowly shrinking) segment of the browsing population not understanding that.

So, here’s how you handle adding a new CSS file in the most painless way possible:

You’ll already have your css declaration, which should look like this:

  <link rel="stylesheet" type="text/css" media="screen" href="/css/style.css" />

So, all you do is create your new CSS file, name it something like ie6.css, and throw that in there too.

  <link rel="stylesheet" type="text/css" media="screen" href="/css/ie6.css" />

But you don’t want Firefox (or Opera, or Safari, or even IE7) to see this web-based atrocity, so we’ve got to tell them to just move along, nothing to see here, folks:

  <!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="/css/style.css" /><![endif]-->

That’s right, that’s all there is to it! Now, only IE6 will see it that CSS file.

BUT WAIT THERE’S MORE! This little trick is actually a bit more powerful.

You can wrap whole sections of code in this block:

<!--[if...]>

...

<[endif]-->

And, it’s not just for IE6. You can check for any IE version or even a range of versions with this syntax:

if IE 5.5 Single version specific
if gt IE 5.5 all versions greater than the specified version
if gte IE 6 all version greater than or equal to the specified version
if lt IE 7 all versions lower than
if lte IE 6 all versions lower than or equal to the specified version

So, if your problem exists in IE6 and IE7, but not IE 8, you’d just add

  <!--[if lte IE 7]><link rel="stylesheet" type="text/css" media="screen" href="/css/style.css" /><![endif]-->

to capture anything equal to or lower than IE7.

Now, a quick note on crafting your CSS files. In my IE .css files, I just take the line that’s not working in IE, copy it to my IE6 css, and beat it until it complies. The problem with this method is that you’ve now got two lines crashing into each other, fighting a bloody struggle for dominance (and submission!). How, you ask, do you get the desired line to be the one that works? Give it an inflated sense of importance.

Say you’ve got this line:

 .page_content { background:#0CF; padding:10px 15px 10px 297px; }

but IE6 doesn’t understand pixels (or turquose), so you need to change it to:

 .page_content { background:#FC0; padding:11px 16px 12px 15px; }

the way to make sure that the line from your IE css is to add !important to the end of every statement, before the semicolon:

 .page_content { background:#FC0 !important; padding:11px 16px 12px 15px !important; }

That will guarantee that those declarations are the ones that are recognized when there’s the possibility for confusion.

It’s not enough! I need more! IE checking doesn’t seem to satisfy.

Do you need more advanced browser checking? Are you encountering a 1-pixel variance in Chrome? Do you want to have your website make fun of backwards Safari users? Well, simply checking for IE6 isn’t going to help you. You need more power (ah! ah! ah!):

<?
	if(preg_match("|Opera/([0-9].[0-9]{1,2})|", $useragent, $matched)){
		$browser_version = $matched[1];
		$browser = "Opera";
	}elseif(preg_match("|MSIE ([0-9].[0-9]{1,2})|", $useragent, $matched)){
		$browser_version = $matched[1];
		$browser = "IE";
	}elseif(preg_match("|Firefox/([0-9\.]+)|", $useragent, $matched)){
		$browser_version = $matched[1];
		$browser = "Firefox";
	}elseif(preg_match("|Chrome/([0-9\.]+)|", $useragent, $matched)){
		$browser_version = $matched[1];
		$browser = "Chrome";
	}elseif(preg_match("|Safari/([0-9\.]+)|", $useragent, $matched)){
		$browser_version = $matched[1];
		$browser = "Safari";
	}else{
		$browser_version = 0;
		$browser = "Other";
	}
?>

The output of this will get you down to the very version number, so if you’ve got some philosophical disagreement with anyone running Firefox 3.0.12, you can pick that version out specifically (but why? WHY?!).

It’s a good idea to leave this whole code chunk intact an in order, because Opera can masquerade as IE if you’re just checking for IE, and Chrome will pretend it’s Safari if you’re just checking for Safari.

-pb

I’m working feverishly to get PennridgeAlumni.Com relaunched before I have to renew hosting, which isn’t going to be with the same company. Of course, that means recoding from Classic ASP into PHP, so no sense in simply translating, I’m working on redesigning the entire thing.

Getting a lot done with AJAX. I’m shifting the user paradigm from a central account area to allowing users to edit things they have access to edit right on the page for instant gratification.

I’m also working on turning PhillyGoth into a WordPress site.

-pb