scriptygoddess

For a long time I resisted the urge to put ads on the site. I'm sure you've noticed I finally caved in this past year. I've tried to keep it relatively unobtrusive. In one case I was contacted directly to put an ad up on one of my category pages in the content area. I didn't want to put it at the top above the content. Ideally – I wanted it put in the middle in a separate div block, maybe after 3 or so posts, but only on the first category page. Here is the code I used to get that to work…

First, above the loop I added this:
<?php
$count = 0;
?>
This is to count the number of posts we're on.

Then just after the end of the loop call (<?php while (have_posts()) : the_post(); ?>) but before you start the code for the posts, I added this:
<?php
if ($wp_query->get("page") || $wp_query->get("paged")) {
$onFirstPage = false;
} else {
$onFirstPage = true;
}
?>
That bit of code I got basically from this post on the support boards.

Then to determine if we should call the text for the ad (in this case I wanted it displayed only on category id #29), and to then display the ad…
<?php
if (is_category('29') && $count == 2 && $onFirstPage) {
?>
...ADVERTISEMENT TEXT OR IMAGE GOES HERE...
<?
}
$count++;
?>

Learn something new everday! I just added the following to the css for this site:
a {
outline: none;
}

Which will remove that little dotted line you get when you click on a linked image. I just learned that from Deziner Folio.

I got to that site because I recently installed the Sphere plugin for WordPress – (which I found out from reading Matt's blog) and Deziner Folio was one of the links that popped up from one of my css-related posts.

Incidentally, poking around there I also found a bunch of pre-made for-photoshop gradients and cool "badges" (starbursts, etc.) he was offering up free for the taking. As well as a really neat way to center a single div in the middle of the page using CSS.

I'm in the process of putting up a new design for this site. If you're hitting the site right now – things may look a little funny while I get all everything worked out. Sorry for any inconvenience. Everything should be fine in the next hour or so.

So I think it's all set up now. Feel free to leave a comment here if you notice anything really wonky.

Some notes about the new design -specifically the logo: I finally settled on a "real" logo. A butterfly of course. It's been a theme that's been consistent in almost all the designs for this site. Not sure how to explain why, but I wanted something to represent "goddess" – beauty, perfection, etc. without resorting to a pin up shot. In my mind, that's how I see butterflies. To connect it to the code, the butterfly in the logo is made up of programming "pieces" – numbers for the antenna, curly brackets } { for the wings, a pipe | for the body. So that's where that came from. I'm pretty happy with it. (hopefully, I'll still be happy with it in a few months, I can be pretty fickle about my own designs) So much so that I even made a Cafepress Store with the logo. Not that I think anyone but me would really buy anything there – but you never know!

Almost done with a custom wordpress theme design for Christine and Elaine for their joint venture: Fresh Photography. Still putting a few finishing touches on it – but I'd say it's 99% done. (There may also be a few pages still with placeholder text. Heh) Christine's also working on finishing up the portfolio section. She's using Slide Show Pro for those flash slideshow animations (she'll be putting up one for each section in the portfolio). I really like those.

Fresh Photography is the site I'm using that script snippet from ClioWeb for, and that trick I had to do with multiple "home pages" (What WordPress thinks is the "home" page is actually the "artwork" page. There's actually two wordpress installs for it. I'm sure there was probably a way to use a separate categories for the "blog" posts – and another category for her "photo" posts – but this seemed simpler and gave her more flexibility.

You'll also notice many of the photos in the artwork section are available for purchase. For that I used a trick I had previously posted to get an order form to work using WordPress' custom fields.

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; ?>

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.

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!

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

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. 😛

(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)

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.