Now certainly, I could have used one of the php bits to create thumbnails on the fly like TimThumb – but I really dislike using plugins for things I can do without them. She also gets totally confused using custom fields, so that’s out as well.

What I needed to do:
1. Determine a standard size for thumbnails and post images that would work well for her theme.
2. Create a post thumbnail using the first image attached to a post.
3. Display the post thumbnails on the blog main page listing of recent posts.
4. Create a standard image that would be displayed if she forgot to add any images to a post.

Since I’m a big fan of reusing code, I decided I wanted to use the built in sizing options of WordPress to get this done. I remembered recently reading an article with a chunk of code, so I found it again and reused that. The code process can be found on Web Developer Plus.

Setting The Image Sizes

Go to your WordPress backend and then Settings -> Media and configure the sizes that work well for your theme.

The thumbnail size is the most important. I set this one to 150px by 150px and selected the option to crop the thumbnails to that size. The reason I selected the crop is in the likely case the photo she’s using isn’t a perfect square, the image won’t look out of proportion when it’s sized down to 150×150.

Creating a Thumbnail From The First Image

This is where we get the code bit from Web Developer Plus and with a couple of minor changes end up with this:

<?php
// Get images attached to the post
$img = null;
$args = array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'numberposts' => -1,
'order' => 'ASC',
'post_status' => null,
'post_parent' => $post->ID
);
$attachments = get_posts($args);
if ($attachments) {
foreach ($attachments as $attachment) {
$img = wp_get_attachment_thumb_url( $attachment->ID );
break;
} ?>
<!-- Display the image in here -->
<?php }
?>

The code, at this point, doesn’t do much but it will in the next steps. I do want to stop and explain the terminology a bit. You’ll notice the use of the word ‘attachment’ in the code above. That’s how WordPress identifies the image associated with the post. Think of sending an email and attaching photos to it. The code finds the images attached to the post and selects the first one. It puts the information about that image in the $img variable we’ll use later.

It is important to note that this only works for attached photos because that is what WordPress it set up to handle. That means that if you host your photos elsewhere and just link to them – it’s not going to work. You have to actually upload them into WordPress using the media uploader.

Deciding Where To Put The Thumbnail Code

Since I want the thumbnails to show up on the main page of the site in the list of recent posts down the content section, I need to edit the index.php that displays the content. Your site may use the_content() but in this example the site is using the_excerpt(). It doesn’t really matter, so long as this stuff goes inside the loop but before the spot you want to show your photo.

<div class="thecontent">
<?php the_excerpt(); ?>
<span><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>" class="readon">Read the rest of '<?php the_title(); ?>'</a></span>
</div> <!-- end thecontent -->


I’m going to add the bit of code right above the call to the_excerpt() because that’s easiest at this point.

<div class="thecontent">
<!-- get the thumbnail -->

<?php
// Get images attached to the post
$img = null;
$args = array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'numberposts' => -1,
'order' => 'ASC',
'post_status' => null,
'post_parent' => $post->ID
);
$attachments = get_posts($args);
if ($attachments) {
foreach ($attachments as $attachment) {
$img = wp_get_attachment_thumb_url( $attachment->ID );
break;
} ?>
<!-- Display the image in here -->
<?php }
?>

<!-- end get the thumbnail -->
<?php the_excerpt(); ?>



Display the Thumbnails on the Main Page

Now the code is actually in the area it should be, but it’s still not going to show anything until we put something in place of the ‘<!– Display the image in here –>’ placeholder. What the code HAS done is created the $img variable we can call. So let’s get that working by putting in some code that will call the image.

<div class="thecontent">
<!-- get the thumbnail -->
<?php
//Get images attached to the post
$img = null;
$args = array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'numberposts' => -1,
'order' => 'ASC',
'post_status' => null,
'post_parent' => $post->ID
);
$attachments = get_posts($args);
if ($attachments) {
foreach ($attachments as $attachment) {
$img = wp_get_attachment_thumb_url( $attachment->ID );
break;
} ?>

<!-- ***** THE ACTUAL IMAGE ***** -->
<span class="the-thumbnail">
  <a href="<?php the_permalink(); ?>">
    <img src="<?php echo $img; ?>" />
  </a>
</span>
<!-- ***** END THE ACTUAL IMAGE ***** -->

<?php }
?>
<!-- end get the thumbnail -->
<?php the_excerpt(); ?>


What the above code has done is take the placeholder and replace it with a call to the image.

Then since this is for a front page thumbnail, we want people to go to the main article so we create a link around the image that points to the article.

Finally, for CSS styling I wrapped it in a span called the-thumbnail (you can wrap it in something other than a span, name the class anything you like, and style it any which way you can think of).

But What If… There’s No Image?

But wait… what if my client forgets to add an image to a post? That one article will look strange on the main page without an image when most of the others have one.

I want to create a fail-safe for dealing with an instance where she might forget to put in a photo for the post. What to do first is create some kind of dummy image (maybe just a large square with the site logo / branding or whatever you want). Upload that image somewhere.

<!-- ***** THE ACTUAL IMAGE ***** -->
 
<!-- # if post has an image # -->
<span class="the-thumbnail">
  <a href="<?php the_permalink(); ?>">
    <img src="<?php echo $img; ?>" />
  </a>
</span>
<!-- # END if post has an image # -->

<!-- # if post doesn't have an image -->
<?php } else { ?>
<span class="the-thumbnail">
<a href="<?php the_permalink(); ?>">
<img src="http://thedomain.com/fallback-thumb.jpg" />
</a>
</span>
<!-- # END if post doesn't have an image -->

<!-- ***** END THE ACTUAL IMAGE ***** -->

The most important line in that new section is <?php } else { ?> — that tells it to do something if there is no photo.

You’ll see that you can just as easily change the url of the image to be any image location you upload the fall-back image to.

Putting It All Together

So here’s what we came up with after that. I’ll highlight the sections of my template code so you can see where I put it inside the template. Remember, your index page may not use the_excerpt() – it may use the_content(). That’s perfectly ok so long as:

1. You put the code that generates the thumbnail somewhere inside the loop – the loop beginning looks like this: <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
2. You put the image display code where you want it to be.

So here’s the final code I used on my clients site:

<div class="thecontent">

<!-- get the thumbnail -->
<?php
//Get images attached to the post
$img = null;
$args = array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'numberposts' => -1,
'order' => 'ASC',
'post_status' => null,
'post_parent' => $post->ID
);
$attachments = get_posts($args);
if ($attachments) {
foreach ($attachments as $attachment) {
$img = wp_get_attachment_thumb_url( $attachment->ID );
break;
} ?>
<!-- ***** THE ACTUAL IMAGE ***** -->
 
<!-- # if post has an image # -->
<span class="the-thumbnail">
  <a href="<?php the_permalink(); ?>">
    <img src="<?php echo $img; ?>" />
  </a>
</span>
<!-- # END if post has an image # -->
 
<!-- # if post doesn't have an image -->
<?php } else { ?>
<span class="the-thumbnail">
<a href="<?php the_permalink(); ?>">
<img src="http://thedomain.com/fallback-thumb.jpg" />
</a>
</span>
<!-- # END if post doesn't have an image -->
 
<!-- ***** END THE ACTUAL IMAGE ***** -->
<?php }
?>
<!-- end get the thumbnail -->

<?php the_excerpt(); ?>

Oh, and remember — if you don’t like the size your thumbnails are coming out as — change it in Settings -> Media.

I hope you found that useful

~Nicole

Summer Fields Original Section

The area text was just a suggestion about the different ways you could use the section, but Michael asked what javascript could actually be used to accomplish it. In order to make it work, I’m going to add 2 id elements to the existing code so I can more easily separate the gallery from anything that may come before or after it.

Original HTML

The original HTML looks like this in the sample template (obviously some filler text was used):

<div id="gallery">
<p class="entrytext"><img src="sunflower.jpg" style="width: 130px; height: 130px; float:right;" alt="placeholder" />Our Photo Gallery</p>
<ul>
<li><a href="#"><img src="sunflower.jpg" alt="placeholder" /></a></li>
<li><a href="#"><img src="sunflower.jpg" alt="placeholder" /></a></li>
<li><a href="#"><img src="sunflower.jpg" alt="placeholder" /></a></li>
<li><a href="#"><img src="sunflower.jpg" alt="placeholder" /></a></li>
</ul>
<p>This area can be a photo gallery, or perhaps you could replace the images with an amazon book list with affiliate links. If you want you could add a tad of javascript to this area and when you mouseover the small image it can show bigger in the image to the right.</p>
</div>


Move the Paragraph Out

To be honest, I don’t remember why it is that I had inline CSS in there, possibly because the entire thing was meant to be a placeholder. In any event, we can change that too while we’re here, but first I want to take out that bottom paragraph and put it OUTSIDE the closing div.

The reason I want to move the paragraph is that I’m going to be parsing all the links in the div with the gallery ID using javascript, and if there are links in the paragraph also, then they’ll try to trigger an image preview (which they don’t have).

Moving that paragraph out of the div could be problematic for some designs, and in those cases, it’s more efficient to add a new ID to the UL containing the image thumbnails. For this, it’s super simple to just fix the issue by moving the paragraph.

...
</ul>
</div>
<p>This area can be a photo gallery, or perhaps you could replace the images with an amazon book list with affiliate links. If you want you could add a tad of javascript to this area and when you mouseover the small image it can show bigger in the image to the right.</p>

From this point on we can totally ignore that paragraph because it’s not longer involved in what we’re doing.

Add New ID & Remove Inline Style

Now I want to add an ID (we’ll call it imagepreview) to the larger image on the right so that I can more easily target that image. At the same time, it gives us something to reference in CSS to get that inline CSS out of there.

After editing that section, we should have this (removed the inline CSS and added the imagepreview id):
<div id="gallery">
<p class="entrytext">Our Photo Gallery <img src="sunflower.jpg" alt="placeholder" id="imagepreview" /></p>
<ul>
...

Put Real Text In

Our final edit on this HTML should be in the form of filling in the list elements with real text and taking out the dummy text. An example should look like:

<li>
<a href="the-full-size-image-goes-here.jpg">
<img src="the-thumbnail-image-goes-here.jpg" alt="Some real alt text." />
</a>
</li>

You can add as many list items (li) as you need, it doesn’t matter.

Add Javascript

Ok, so now it’s all ready for some javascript. You can download the gallery.js gallery file here. Head up to the top of the page HTML and add the code to include our new javascript file:

<script type="text/javascript" src="gallery.js"></script>

Onclick Variation

Now keep in mind that Michael asked how to do the hover view of the images, but it would be just as simple to do on a click event. If you want to do an onclick instead, just edit the gallery.js file on lines 14-19 to look like this instead:
for ( var i=0; i < links.length; i++) {
links[i].onclick = function() {
return showPic(this);
}
links[i].onkeypress = links[i].onclick;
}

Adjust the CSS

Finally, to make sure we have better control of the styling, let's adjust a bit of the CSS file included with the template.

Find the CSS section that looks like this:
/* Photo Gallery Area */
div#gallery { border-top: 2px solid #fcf; padding-top: 15px;}
div#gallery img {width: 50px; height: 50px; padding: 2px; border:1px solid #fcf;}
div#gallery ul { list-style-type:none; margin:0; padding:0;}


We're going to change the 'div#gallery img' to be 'div#gallery ul li img' instead so that we're only controlling the gallery thumbnails with that CSS. Then we're going to add our new 'imagepreview' image to be controlled differently and add the old inline CSS on the line underneath.

/* Photo Gallery Area */
div#gallery { border-top: 2px solid #fcf; padding-top: 15px;}
div#gallery ul li img {width: 50px; height: 50px; padding: 2px; border:1px solid #fcf;}
div#gallery img#imagepreview {width: 130px; height: 130px; float:right;}
div#gallery ul { list-style-type:none; margin:0; padding:0;}

Using this Elsewhere

While the example is obviously using the Summer Fields template, this same code can be used in any site so long as you create a section that looks like this:

<div id="gallery">
<p><img src="someplaceholder.jpg" alt="placeholder" id="imagepreview" /></p>
<ul>
<li><a href="full.jpg"><img src="thumb.jpg" alt="the alt text." /></a></li>
</ul>
</div>

The only naming requirements of the javascript are that it's all in an element with an id=gallery (doesn't have to be a div) and that the big image has an id=imagepreview. Other than that, you should be fine to use it in various ways. The big image doesn't have to be in a 'P' element and the thumbnails don't have to be in a UL, so feel free to adjust as needed.

Questions?

Feel free to post them here.

~Nicole

As you can see from the above screen shots, this design is going to come with a few color themes, and you can easily add your own as well.

The top bar is a CSS drop-down menu. For those on browsers not supporting the CSS, clicking the links will instead toss people to another area to read the subcategories and subpages etc… I’m still in personal debate over how to handle that menu. I’m experiencing a small inner rebellion against using Javascript to make the menu work for IE, and would prefer to just have the design follow a rollback for IE like any of the other older browsers will see. In either case, the menu options will be available, just in different ways.

This is, in my opinion, the kind of theme for someone who needs structure in order to keep their blog minimal feeling without letting it get cluttered over time. I’m not going to add in places for people to drag a million widgets and fill up all the empty space – that defeats the purpose.

The theme is about keeping things simple.

I’ll post another update when I’ve got more to show.

~Nicole

For my new theme, I needed to get only the child pages of a current page to display in my sidebar. However, I also wanted those child pages to show, regardless of whether or not I was actually ON a child page also.

An example hierarchy might work like this:

1. About (Parent Page #2)
   1. My City (Child Page #8)
   2. My Bio (Child Page #4)
   3. My Photos (Child Page #3)

Now the tricky part is that it involves a few things there aren’t quick WordPress tags for.

1. I want to list all the child pages in my sidebar.
2. I want the child pages to show even while on another child page of the same parent page.
3. And I want to control the display order through the admin menu order tool, not have it be alphabetically ascending.

So, first I need to find a way to display the child pages persistently, while on a child page or a parent page of the same section. So, I want to see those same sidebar links whether I’m browsing the main ‘About’ page, or reading the ‘My Bio’ page.

To achieve that first part, you need to use this little snippet of code that can be found on the WordPress codex:

<?php
if($post->post_parent)
$children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0"); else
$children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
if ($children) { ?>
<ul>
<?php echo $children; ?>
</ul>
<?php } ?>

Copy and paste that where your child pages should display.

So now the child pages are showing persistently, whether browsing on the parent page or one of the child pages (and they change if the parent page changes). But now, I need to deal with the order.

I want to be able to control the order through the admin screen without having to mess with the template, but I do not want it to have to be alphabetical. You can reset the order of any page by going to your WP-Admin and doing the following:
Manage -> Pages -> Edit (the page you want to change) -> Page Order (change the number)

When you change the Page Order value, you move the page to a different spot in your page list. Say you have 18 pages, and you want your page 2 at the top to be at the bottom, you could change the page order to 19. In any event, you can see the exact page order when you look at the Page management screen.

So, that’s how I want to control those child pages, but this snippet of code will default them to their current order.

I need to add one small change to fix that.
(Edit: Fixed a small error in not putting the sort_column on both lines.)

<?php
if($post->post_parent)
$children = wp_list_pages("sort_column=menu_order&title_li=&child_of=".$post->post_parent."&echo=0"); else
$children = wp_list_pages("sort_column=menu_order&title_li=&child_of=".$post->ID."&echo=0");
if ($children) { ?>
<ul>
<?php echo $children; ?>
</ul>
<?php } ?>

The underlined portion should be added, and now it is controlled by however I order it in the menu.

Hope it helps someone!

~Nicole

Todays winner in the minimal category, sporting a very Web2.0 color scheme, goes to Prisa from NofieIman.com.

The only thing lacking in this one is an online demo link – otherwise it’s a great looking screenshot.

The second theme is my winner for the ‘nicest use of lime on a business looking blog I’ve seen in a while’ category. It’s called Greenwave (though it really looks lime to me) and is done by Romow.com.

Greenwave thankfully has a demo online for you to peek at too.

Try ‘em out!

~Nicole

The first one is called Into the Ocean, from Design Adaptations.

I think this theme shines as a minimalist theme. What really caught my attention, however, was the color. I think the designer really nailed the right blues to use together, and it just presents this very cohesive color palate. Soothing and pleasing at the same time. Excellent job. There is a demo of the theme online.

The second theme is called Sodelicious 2.0, that comes from Web2Themes.

This theme has a soft mossy green that works well with the white and subtle gradients throughout. It feels open, yet there’s actually alot going on in this theme. I’m not entirely sure how I feel about the image at the top left corner – you can’t tell from the screenshot, but if you look at it live that picture actually changes. I think it has potential if you were to use images there that are complimentary to the overall color scheme. I have always liked the ‘hanging’ element look that this one has on the left side (the date and bookmarking links), so that’s a plus. There is a demo of the theme online.

And with that… we conclude this brief mention of a couple of nice themes from the WordPress Theme Universe.

~Nicole

Ambient Glo 1.5

Fixed (Demo, Download). Fluid (Demo, Download).

A very nice 3 column theme that has the option to be either fixed or fluid width. Good use of color and white space. Created by Nathan Parikh.

CityPark

The Demo. The Download.

This is a theme for people who like the wide screen, which more and more people do. It caught my attention because it was simple and clean, yet there were little details all over.

~Nicole

I enjoyed being a judge for this competition, though it was definitely not easy to pick which my favorites were out of 46 submitted designs. Huge congratulations to the winners!

The top design for the contest was SandPress by Arpit Jacob:

The 2nd place design was Moo-Point by Will Wilkins.

3rd Place was taken by the design called Prima done by Sunaryo Hadi.

There were also 3 runners up who will receive smaller prizes, but prizes nonetheless!

1. Essay ( by Ian Stewart)
2. Tiffany Blue (by Ia Lucero)
3. Shades of Gray (by Leslie Franke)

(You can see all of the designs that were entered here.)

I am glad to see that 2 out of my 3 top design picks were in the top 3 for the results. They were excellent designs deserving of some acknowledgment.

Every one who entered deserves recognition for their efforts, and I hope that all the entrants understand that the decisions were very difficult. It was, however, as untainted as I think is possible, as we were also asked to refrain from reading the forums or posts regarding the contest until we submitted our results.

Thanks go out to Scott for running this contest, Andy for impartial reviewing of the results, and the people who sponsored the contest so that winners could receive some cash.

If people have comments on the results, Scott has made a nice little forum post for after-contest discussion.

~Nicole

The winning designer will be awarded a $5,000 scholarship for their college education! That is a significant amount and it is a great way to show off your design skills.

The Challenge

Design a WordPress template for the NewScholarships.org website.

The Requirements

• Be a U.S. citizen.
• Currently attending college full time.
• Willing to let them credit your winning and design online.

Submission Deadline

Midnight (PST) on Monday, August 13th, 2007. (Submission form.)

The Prize

$5,000 in scholarship money.

You can read the list of judges on the panel posted on the details page, which includes quite a few ‘big names’ in web design.

Remember, the deadline is approaching, so while you are trying to enjoy the last of your summer and looking for your new semester books, find some time to create – it could help make this year at school a little easier financially.

~Nicole

Now, in my opinion, this theme is far from perfect, but I like the approach used. I noticed a few things that I do not care for, and I’ll list them here:

1. Love the accordion, but I don’t like seeing it open on something that requires a scrollbar. Gives a poor impression on first loading. I think the default showing accordion section should be something like an ‘about’ page or some other small summary of the site that will not scroll.
2. If you increase the text one step or more on the browser (ex: CTRL and + in Firefox), the top half of the site is great still, but there is significant break on the lower section right at the ‘previous posts’ link.
3. Speaking of the lower half of the page, I don’t care for the colors. To me the two halves look like two different designs. I think what is doing it is the higher contrast green used on the list items. To follow the theme on the top half, I would suggest reducing that bright green to match the muted green used in the post titles within the slider. They could even go to that bright green on hover like the top does.
4. It needs something in the top left corner. My eye keeps drifting to that spot for some reason. Maybe a jump scroll button to the lower half.

Overall, I love the approach. I think it could use some tweaking, but it is a great idea

~Nicole