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

The following video will cover a few of the core supported modules for SilverStripe: Userforms, Blog, Forums, and E-Commerce.

I strongly suggest that if you want to be able to see this clearly, you view the SilverStripe Modules video in HD and use fullscreen instead of watching the embedded clip below.

View the post about the first video in this overview series on SilverStripe SEO.

The generic search is going to search everything, well not exactly since the WordPress search is fairly lousy without some plugin help, but it will work for category searching just fine. In fact, it’s only going to take one line of code to add the functionality to your search, if you’re using a basic theme like the WordPress Default. Custom themes might be more of an issue, so if you get stuck, paste the code that handles your search in the comments and I’ll -try- to help, no guarantees.

Ok, let’s do this with the WordPress Default theme.

The default theme search box should look like this in your sidebar:

The Search Box Before Category Search.

We need to add our line of code to give the users an option to search by categories. So I want you to head over to Appearance -> Editor which will pull up your template files. This will show you the right template files IF you are currently using the WordPress Default theme, if not, use the dropdown box in the right area of the page to switch to the WordPress Default theme.

On the right side of the page, click on the Search Form (searchform.php) file to open that one for editing. The code page you’re viewing inside should look like this:

WordPress Default Search Form Editing.

The code looks like this:
<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
<div><input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>


We’re going to add one line as follows:

<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
<div><input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
<?php wp_dropdown_categories('depth=0&orderby=name&hide_empty=1&show_option_all=Search Everything'); ?>
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>


So let’s break down what that line is doing:

<?php wp_dropdown_categories('depth=0&orderby=name&hide_empty=1&show_option_all=Search Everything'); ?>

Depth = 0 is setting it so that we’re seeing ALL categories, not just parent or child categories. In another article coming up I’ll show you how to be more specific about categories when dealing with parent/child categories.

Order By = Name is telling them to show in alphabetical order.

Hide Empty = 1 is making sure we don’t see categories that have no posts in them to be searched.

Show Option All = Search Everything is creating an option for them to search all the posts and should be the default.

What do we get?

Search By Category.

Showing Dropdown

Now it’s up to you to style it and make it look pretty

~Nicole

Safari is an excellent browser for many reasons; its speed, clean aesthetics and ease of use are attractive from the outset. But there are a few extremely attractive and lesser known features that people should be taking advantage of as well.

read more | digg story

Note: Unless you are really picky about how the colors in your entire site coordinate, you probably will not go to the trouble to use this for everyday photos you insert in your site, but you may find it useful for images that are integral to the site design in some way.

The first thing you will need is a screenshot of the web design you want the image to coordinate with. I’m going to use my old Midnight Rainforest design for this because it’s a very simple design and uses few colors (which makes it even more challenging to do this process with). If you have design that uses gradients or many colors, you will probably have it a bit easier.

Here’s a full screenshot of the design I want to match with:

Now I have a couple of images (from PDPhoto) I’d like to match to this design, but the colors they use are very different from the dark greens and blacks used in the Midnight Rainforest design.

Crawfish:

Hot Air Balloon:

Here’s what they look like currently in the design.

The images look fine, but I’d like to make them match the design much more. The first thing we need is that original screenshot of the design without the images.

We will open the screenshot in Photoshop. Then also open a window with one of our images, starting with the crawfish.

Make sure that you click on the image you want to change so it is the active image, as in the above image. With the image you want to change active, go to Image -> Adjustments -> Match Color…

When you click on ‘Match Color…’ it will bring up a dialog box with some options. Near the bottom of that dialog box, you want to use the drop-down that says ‘Source’ and select the image you want to GET the colors from, in this case, that’s the original Midnight Rainforest screenshot image.

From that point, you can adjust the ‘Image Options’ sliders (Luminance, Color Intensity, and Fade) to get it to look the way you want.

When you are done, click ‘Ok’ and then save and close the crawfish image. Now you can open your next image (the balloon). Note: Leave the Midnight Rainforest screenshot open so it is an option in the source selection.

Repeat the process with the hot air balloon image.

Your new design images should now coordinate alot better with the design because they are using the colors from the design itself.

Remember that the color matching works the best if you have alot of color to start with, and the starting design had only a few colors, but I think the result definitely coordinates better with the overall color scheme.

Again, I don’t suggest doing this for EVERY image you might put in a daily blog or often updated site unless you are extremely picky about the cohesiveness of the color in your design. I would instead suggest this be used to enhance certain commonly used pictures in standard websites.

A few examples where this could be used might be:

• A photo of a business location on a locations page.
• A photo of employees or the site owner.
• Graphic sets to let people link back to your site.
• Etc…

Hope this helps you out in some way!

~Nicole

I have heard many people say that their site looks twitchy in different browsers … particularly in IE6 and below.

There are many many reasons that could happen, but when it is something as simple as color or font that is rendering differently (where most people seem to use !important), the first thing I check is whether or not there are any !important notes in the CSS.

I’ll tell you my suggestion right now is to avoid using !important altogether. It is so easy to end up making things more complicated with the use of it.

But, let’s assume that you have a site with this problem.

The first thing to check is WHERE you put the !important declaration.

Here is an example using color (not that I think you will actually do this, but it makes it easier to see):

ul#menu li a:link {background-color:olive !important; background-color:pink}
ul#menu li a:visited { background-color:green;}
ul#menu li a:hover {background-color:red}

Don’t laugh! If you don’t do this, count yourself lucky because I have seen many people create CSS rules with duplicate properties with different values. It’s crazy, but it’s also easy to get caught up in the fixing.

Okay, back to the code. Theoretically, it should do a few things:

• Unvisited links should have an olive background.
• Visited links should have a green background.
• And both should have a red background on hover.

Does it work? Of course not.

On Firefox, Opera, Safari, and IE7:

On IE6 and Lower:

Fascinating isn’t it? Of course, the quirky part is that IE6 and lower do the hover affect on both links (as it should), but all the others only do the red hover background on the visited link. Of course, a bigger problem at the moment is that <= IE6 are showing the unvisited link as pink. Well, now, let’s try to see what you could start doing to fix it.

You could try the first technique most people try which is that you should always put your properties with an !important declaration at the end of the rule line to make them work with IE6 and lower.

So, we change the code and put the !important at the end:

ul#menu li a:link { background-color:pink; background-color:olive !important;}
ul#menu li a:visited { background-color:green;}
ul#menu li a:hover {background-color:red}

Now it’s a little better.

On All:

But that hover still doesn’t work correctly. There is a hover affect to red ONLY on the visited link still, and now IE6 isn’t doing the hover on the unvisited link (like it was earlier) – it’s only on the visited just like everyone else.

So, obviously this is a problem, and the first thing that people tend to do when they see this is try making the hover important too!

Change the code to:

ul#menu li a:link { background-color:pink; background-color:olive !important;}
ul#menu li a:visited { background-color:green;}
ul#menu li a:hover {background-color:red !important;}

Did this fix it? Yep. Now all of them render the hover also and show as they should.

Was it worth it?

In my opinion, this is much easier and works perfectly:

ul#menu li a:link { background-color:olive;}
ul#menu li a:visited { background-color:green;}
ul#menu li a:hover {background-color:red;}

But in order for that to work you need to avoid !important. You would have to clear out any duplicate property/value pairs that might be causing you to set something as !important.

Suggestions in Summary:

• If you are going to use !important in your CSS – make it a last resort.
• If you end up using !important – remember to put it last in the rule for <= IE6.
• Try cleaning your code instead.

~Nicole

Hopefully, there will be much more simple approaches in the future.

~Nicole

Now, you may be wondering why that extra space is there at the bottom. Why we didn’t simply crop all the bottom off. The answer is that we want to see where the sub-menu comes in. This could be positioned differently if we were using a repeatable background on the menu bar, but since we aren’t, and in this fixed width design the text is influenced by the menu and the background, we have to work with what we have and be precise.

Open up your HorizMenu.psd (if you don’t have this file, click here to get it).

Using your slice tool, create three box slices dividing up that menu, and a fourth that is the bottom area. If you simply create boxes around the menu items, the fourth area will create itself. Make sure you are precise, and as you can see I’ve tried to center the submenu in the ‘About’ area.

Now that you have the menu sliced, you can crop out that bottom area.

After you’ve cropped the HorizMenu.psd to consist of only the menu items, then go ahead and save the PSD.

From this point, we’re going to save the slices as individual files.
File -> Save For Web...

I suggest looking at the 2-Up or 4-Up tabs to really compare what you want to save your images as without sacrificing quality. I’ve chosen to save these as JPEG with 60 quality, as shown here:

Simply click on the area showing the one you like the most, then click the ‘Save’ button.

Another box will pop up as shown:

Make sure that your selections in the drop down boxes are saving the images only, and as slices.

When you have saved them, check in the area you saved them to. You should see a folder with three new image files, each numbered and prefaced by what ever you put in the File Name box (in my case, HorizMenu).

If you don’t have these three files, or think you might have messed up somewhere, you can download them here to follow along on the next step.

That’s enough for now, and thankfully we won’t be touching Photoshop for a little while at least. I know, I know, most people don’t think that people who code websites deal with the graphic art software – but they end up quickly disabused of that notion. Even if you aren’t a graphic artist, if you put sites together, you need to learn how to work with the kinds of files that a graphic artist provides to you. After who knows, after a while… you might find yourself creating mockups in Photoshop just to do random tutorials

The next step is coming soon!

~Nicole

• Depending on what is involved, they can be a real pain to make accessible at times.
• They tend to require a strong foundation in CSS or a significant learning curve.
• By their image based nature alone they are going to bloat the page size and drop loading speed.
• They most often are found attached to a design concept that is already heavily graphical and already has a huge loading time.
• I dislike dealing with designs whereby a client is so set on having a specific font that they are willing to sacrifice an extreme amount of loading time to have it.

These kind of things fall into my category of – ‘the prettiest websites no one ever saw’ (meaning that they are beautiful works of art, but they take so long to load that no one sticks around to see it).

All that aside – you might some day decide to make one for a client, and it is in your best interest to know how.

Herein, you’ll find Step 1 of a tutorial on exactly how I create graphical horizontal menus. People vary in methods, and hopefully you’ll find your own way to do it.

In fact, this tutorial is going to show you one of the worst kind of graphical horizontal menus. A ‘worst case scenario’ sort of tutorial. The menu we are dealing with will be:

• Used in a fixed width design.
• On a heavily graphical site.
• Mildly transparent to the background of the page.
• Include separate ‘on’ and ‘off’ rollover images on the main menu.
• Include a sub-menu that is also somewhat transparent.
• Include a sub-menu that is entirely graphical and has separate ‘on’ and ‘off’ rollover images.
• All custom fonts used.
• Important Note: The menus must be accessible. The images need to be background images. No Javascript for drop-downs.
• We’ll have to do a unique solution for IE6 and lower.

Sound like fun? Well, either way, let’s get going.

I created a little mockup in Photoshop of a menu design we’re going to use. I’m not going to teach you how to do the rest of the layout. Only the menu. You will need to have access to Photoshop or Gimp for this sort of project, or you will need to have all the individual images given to you by your client ahead of time. You can download the PSD of the mockup if you want to follow along.

Stop here and take a good look at the menu, then try to anticipate what elements might be problematic. It’s always a good idea when starting a new project to look for potential pitfalls so you can work out solutions ahead of time.

If you’re lucky, the graphic designer (or yourself) has labeled all the image layers in your graphics program really well. If you are making this yourself, you probably know how easy it is to get lost in your own design layers. If you get a poorly labeled one, go in and fix the labels so that it can be easily understood. You’ll save yourself time in the long run because good labeling is essential.

Okay, first things first – we have to get this menu ready to be used.

Go through your layers in Photoshop, and toggle the visibility (the eye graphic on/off) until all of your top level menu links are in the ‘off’ position.

Let’s select the menu portion of this design, like so:

Don’t worry about selecting the menu perfectly yet. With this section selected, in Photoshop do:
Edit -> Copy Merged
Then:
File -> New -> OK -> Paste
You should now have a new untitled window popped up that just shows the menu area.

Now, grabbing your new Untitled window by the title bar, move it off to a corner for now, and bring the full design to the front by clicking on its title bar. We’re now going to go back to our layers and switch all of the menu names to ‘on’ instead of ‘off.’

With this section selected, in Photoshop do:
Edit -> Copy Merged
Then:
File -> New -> OK -> Paste
You should now have a Second untitled window popped up that just shows the menu area.

At this point, you can close your large image PSD (for the time being at least) and work just on your pieces of the menu for a bit.

Stack your untitled images so that you can see them well. Then go to your first Untitled image (should be currently named Untitled-1), and try to carefully select only the green menu area rectangle. Then go to:
Image -> Crop

There is a crop tool, but I feel this method is a bit more forgiving. Work with whichever you are most comfortable. You may have to do a couple of passes at this to get it cropped perfectly. You want only the green leafy rectangle and the links on it for this one. We’ll do the second one a bit different, so don’t jump ahead

Go to Untitled-2, and select all but the bottom portion below the green horizontal bar. You want to still be able to see where the sub-menu needs to come in from.

Then crop the image just as you did the previous one, until your images look like this:

Right click on the title bar of the second image, and click on Image Size. Jot down the height in pixels for this image. In this example, the height is 58 pixels.

Then click on the first untitled window to select it, and do:
Image -> Canvas Size

This will bring up a pop-up window. Toggle the height and width to show the values in pixels, and in the box with arrows you want to click the middle arrow in the top row. That will pin the canvas up by the middle top. Now you want to add some canvas space, just enough for our second image. That means we need 58 extra pixels in height.

My Untitled-1 original is 46 pixels in height, so I want to change that number to 104 pixels. Then click OK.

Your canvas should be expanded now by that additional 58 pixels, and they should be only on the bottom portion. Now you can go ahead and select the entire of Untitled-2, then:
Edit -> Copy
Click on Untitled-1, and:
Edit -> Paste
Move your new section around in there until it’s just perfectly below the top one.

You can now close (don’t need to save) the Untitled-2. All we need now is the joined menu. Then go save that menu (as a PSD) with a name you can recognize. I’m very simply calling mine, HorizMenu.psd.

Alternately, you can download my HorizMenu.psd file.

If you’ve ever worked with combined graphics, you might have an idea where we’re going with this. Either way… that’s enough for one sitting.

Keep Going – Step 2 is HERE.

~Nicole

For instance, if I want to merely show one category in a feed, I would link to feed for that single category. A feed that would only show the reviews of the site is very simple to achive. You go the page main category page (in this example the category is ‘reviews’) and then you add a forward slash (/) and the word ‘feed’. Like this:

http://blog.websitestyle.com/index.php/category/reviews/feed/

However, if you wanted to exclude that category, then you would need to know the number of the category. That is simple enough to find. You would go to your ‘manage’ tab, then click on ‘categories’. Scan down your category list, and you’ll find the number of the category in the associated ‘ID’ column. So now, for the above example, my ‘reviews’ category has an ‘ID’ of 18.

Now each WordPress blog has a feed URL that will display ALL posts from the blog regardless of category. It looks like this:

http://blog.websitestyle.com/index.php?feed=rss2

To exclude all posts in the ‘reviews’ category, you would instead using the following adjustment to your normal feed link:

http://blog.websitestyle.com/index.php?feed=rss2&cat=-18

And now you have a link to a feed that shows all my categories EXCEPT for those in the ‘reviews’ section.

Ah, but what if you want to exclude more than one category? What’s the syntax?

You simply add each one to exclude like this:
This Section Updated
WP Versions Before 2.3.1:
http://blog.websitestyle.com/index.php?feed=rss2&cat=-18&cat=-22
For Version 2.3.1+:
http://blog.websitestyle.com/index.php?feed=rss2&cat=-18,cat=-22

The above would exclude both my ‘reviews’ and ‘templates’ categories. I actually use this when I embed my blog feed in another website that is purely tech (nothing personal included), and I exclude things I’ve categorized as non-tech related so they don’t show up.

Hope this was helpful to someone out there.

~Nicole