Archive for April, 2007

Listing subpages in Wordpress

Monday, April 30th, 2007

I was looking for a way to list sub pages in a navigation bar if you were either on the “parent” page or one of it’s sub pages. I found this page on Clioweb that was perfect.

What’s also nice is that it gives you the variable $parent_id to play with if you need to. Copied from his site:

<?php
$page = $wp_query->post;
$parent_id = $wpdb->get_var("SELECT ID FROM $wpdb->posts WHERE ID ='$page->post_parent;'");
if(!$parent_id) $parent_id = $post->ID;
?>

Then, to actually generate the HTML for the page list, I use the following code in the body of my page template:

<?php if(wp_list_pages("child_of=".$parent_id."&echo=0")): ?>
<ul id="subnav">
<?php wp_list_pages("title_li=&child_of=".$parent_id."&sort_column=menu_order&depth=1");?>
</ul>
<?php endif; ?>

Live CSS editing in IE

Saturday, April 28th, 2007

I know there was some install you could do so you could do “live” css editing of a webpage within IE (much like the web developer extension for Firefox) I’ve since lost the link (feel free to post it in the comments if you have any idea what I’m talking about! LOL) but for some reason I could never get it to work. I gave up for a time, but last night I was working on something that, of course, worked just fine in Firefox, but IE was doing something completely different and I couldn’t figure out why. So I went looking again. What I found: CSS Vista. Lets you edit the css of webpages and see your changes live on the screen… AND what I really like about it is that it has two preview panes - one for firefox and one for IE - so you can see if what you’re doing is going to be changing something in one browser and not the other.

CSS Vista Screenshot

This isn’t terribly new - I guess the program has been out for awhile. I wish I had known about it sooner. Would have saved me a bunch of headaches!

Wordpress: Make home page show latest post (in the “single post” format)

Saturday, April 28th, 2007

In a custom wordpress theme design I was working on tonight, I was trying to do as the title describes - make the home page show only one post (yes I know there’s already a built in way to do this) but I wanted it to show up the same way the single view shows it - with the comments expanded and the comments form visible, etc. If you know of another/better way to do this, please say so in the comments. But this DID do the trick. I found this page in the support archives. The idea was to create your index.php to look like you wanted (ie. exactly like the “single.php” page) but add this before you start the loop:

<?php
$i=0; // Initialize to Zero;
if (have_posts()) :
while (have_posts()) : the_post();
if ($i==0) {$recentpostid = $post->ID; $i=$i+1;}
endwhile;
endif;
//get only the latest post
$posts = query_posts( 'p='.$recentpostid."'");
?>

and then you start your loop like you normally would…

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

Worked for me!

Update As Danny pointed out in the comments - there’s a simpler way to do this. Put the following code on the page (I put it before the loop and it worked)
<?php $wp_query->is_single = true; ?>
Much simpler :)

Fun tools that will eat up the spare time you don’t have

Thursday, April 26th, 2007

Want that “web 2.0″ stripe-y background look? Slave no more in photoshop! Well, if nothing else, it’s a fun little tool. Stripe Generator.
[via TheWebDesignBlog]

This one isn’t news, I’ve already seen a number of blogs talking about it - but you can say you saw it here 20th! A Wordpress Theme Generator.
[via many but probably Weblog Tools Collection first]

Some day I may even hook up my del.icio.us feed to post here too. But then I’d probably want to separate the for-kids-links I have on there first. :P

Avoid hotlinking images with ImgRed

Saturday, April 7th, 2007

(Found via CreativeBits)
Instead of hotlinking images and stealing the original host’s bandwidth, you can use imgred.com to cache the image (you can even have it make a thumbnail) and use that link instead. While, for a blog post you would probably take the extra steps to download the file to your own server (providing this doesn’t break any copyrights), this definitely makes sense for when you’re posting on forums, etc.

To use imgred.com - just take the url of the image you want to link to and put “http://imgred.com/” before the URL. So instead of:<img src="http://myFriendsServer.com/theirImage.gif">Do this:<img src="http://imgred.com/http://myFriendsServer.com/theirImage.gif">

To create a thumbnail - just put “http://imgred.com/tn/” before the URL - like this:<img src="http://imgred.com/tn/http://myFriendsServer.com/theirImage.gif">
(although when I tested the thumbnail functionality just now - it seemed to be broken… I’m assuming that will be fixed soon)

Redesigning to be mobile-friendly

Sunday, April 1st, 2007

I was recently asked by one of our clients to evaluate how hard it would be to redesign their website to work on mobile browsers (phones, pda, blackberry’s). One of the first things I thought about was being able to test what I would be working on. I found a few things to do the job. One is an online tool made by Opera, another is a free download from Winwap Technologies.

This particular site I’m working with is an older table-based design (not done by me) - and I’m thinking that switching it over to be CSS-based and then modifying the CSS for mobile users would do the trick.

Also - here’s a good article on mobile web design from ALA.