Custom fields have been a core part of WordPress for quite some time. They are designed to add extra information to your posts, or change the way that information is presented, depending on how you use them. Up until recently I never bothered to work with the custom fields, but then a client approached me with a request that I felt would best be solved by making use of them.

In a nutshell, here is how to use custom fields to display images in posts. The nice thing about this method is that the HTML source code is inserted into the post only if there is data in the custom fields. In other words, any posts that you do not bother to insert custom field data into will not display any of the source code. So you can add images only on those posts that you feel need them; you won’t have to worry about empty or incomplete HTML code being displayed in other posts.

First, create a custom field named “Image”. Its value should be the URL to the image you’d like to display in your post (for consistency and ease of remembering, I recommend uploading these images to wp-content/uploads/images.

Next, create a custom field named “Image Class”. Its value should be image-class, or whatever class element name you’ll be using in your stylesheet to create the visual effect on your images (left alignment, padding, borders, etc.).

Finally, consider creating a custom field named “Image Description”, and inserting into its value the alt description you would like to use for your image.

Now that you have your custom fields set up, open your theme’s index.php and single.php files (assuming that you’d like to have the images displayed on both posts listed on your index and on the individual post pages) in FTP, or in the Theme Editor in the WP admin area. Insert the following after if(have_posts()) : while(have_posts()) : the_post();:

// check for image
$thumb = get_post_meta($post->ID, ‘Image’, $single = true);
// check for image class
$thumb_class = get_post_meta($post->ID, ‘Image Class’, $single = true);
// check for image alt text
$thumb_alt = get_post_meta($post->ID, ‘Image Description’, $single = true);

That code checks for the existence of the custom fields in your posts. Insert the following code before php the_content();, as this is the code that actually displays your image (please change imgsrc to image src, and add before/after php!):

php // if there’s a image
if($thumb !== ”) { ?>

”
class=””
alt=””
/>

php } // end if statement

// if there’s not a image
else { echo ”; } ?>

And that’s it! Happy posting.

I’m usually not one to pay for WordPress themes, but the pool of free themes is rather boring and overused, and I don’t have the time to design custom themes for all of my blogs. I always use my own themes for my personal domain, jenn.nu, but for others I will often take advantage of pre-mades. Many people, both personal blog owners and commercial site owners, take advantage of pre-mades. I have already seen recipe blogs, identity theft protection companies and even debt consolidation companies use pre-made themes on their WordPress-powered blogs.

Anyway, I recently paid for a subscription to Elegant Themes. I was enticed by their Glow theme, which on its own is definitely worth $20 or more. They have several themes, and it seems as though they add new themes often, so there’s always a varied selection to choose from. Glow is definitely a popular theme. I’ve seen it in use on kallure.com and caity.nu, which is how I first discovered it and found out about Elegant themes!

I am not a fan of widgets. I never have been. From my earliest coding days I have always preferred to hard-code HTML and XHTML, rather than rely on a widget or pre-made block of code to do the job for me. I’m picky about styles, colors and fonts. Widgets take away some of the control you have over the final product. I love being able to get balls-deep in code and manipulate it to my satisfaction. I’ve worked with widgets for a few client websites (one sold ceiling fans; another sold light bulbs; a third specialized in wedding favors), and I can honestly say that 99% of widgets don’t allow you to do everything you may want to do. And if it can be done, it usually requires editing the widget settings and the widget .php file. And that is just an exercise in inefficiency.

How do you do your layouts? Do you code every single element on your own, or do you use widgets to make things go up quickly and easily?

So once upon a time DailyBooth had some sort of spiffy photo-sharing widget, and there was even a WordPress plugin (aptly named DailyBooth Fetcher) that would display as many photos as you would like to have displayed on a WordPress-powered blog. But the widget seems to have disappeared, and the plugin reports a 404 error with the .xml file it is supposed to be fetching and displaying photos from.

The good news is that DailyBooth makes it very easy for you to share your latest photo on your blog about baby gift baskets, or on any other type of website. It’s just not something that is publicized. In fact, I only know about it because I saw it in action on glam-girl.org!

So, the super awesome method of displaying your latest DailyBooth photo? Simple — use the following image URL (be sure to substitute username with your username):

http://dailybooth.com/username/latest/large.jpg

Small & medium sizes are available as well (simply change large to small or medium).

Image maps used to be all of the rage in web design. These days I don’t see or use them much, but every so often a client requests one, or there’s an image that would be implemented most efficiently with the aid of an image map. The only problem is that I don’t have have software that creates image maps (although I believe Adobe Photoshop CS4 does — I don’t know where the settings are at, though). So, I used my trusty Googling skills, and the term free image map generator lead me to image-maps.com.

image-maps.com works just as it should. You simply upload your image, and use the easy wizard to create your rectangular or customized shapes, input the URLs and optional alt/title attributes, and then click the submit button. You can then see your image map in action, and view the HTML code and optional CSS code.

For me, the hardest part of coming up with a new layout relates directly to trying to find direction. I can manipulate photos and illustrations in Adobe Photoshop, I can work with CSS and HTML in my sleep, but if I don’t know where to start or where to go, I founder. Case and point? jenn.nu‘s newest layout. I spent weeks trying to come up with something, but never really got anywhere. The things I did think of I have already done before. The other things I thought of, such as a snazzy pink one-columned layout, wound up not being practical for the amount of content that I need to display.

Out of sheer desperation I hit a bunch of CSS galleries. Now, I’d like to add a disclaimer, both for myself and anyone else: it’s okay to browse CSS galleries and website showcases for inspiration. But it is NOT okay to copy layouts and specific styles that are showcased. Use your own imagination and creativity! Inspiration is simply there to get you started, or help you tie up loose ends.

Here are some of my favorite CSS galleries:

• We Love WP
• CSS Envy
• CSS Import
• Best Web Gallery
• Nice Stylesheet
• CSS Brigit
• CSS Beauty
• CSS Breeze
• CSS Imagine
• Design Shack
• Best CSS Vault

Happy surfing!

Escape codes are special entities that allow you to post raw HTML and XHTML within webpages. Because HTML is used to construct and display webpages, many characters are reserved, which means that they cannot be used and will not be displayed within browsers. These characters include left and right angle brackets and other significant markup characters.

So what do you do if you want to show off some HTML? Use escape codes, of course!

Here is a list of a few popular ones:

Copyright symbol (©): ©

Registered symbol (®): ®

Trademark symbol (™): ™

Left angle bracket (<): &lt;

Right angle bracket (>): &gt;

Ampersand (&): &amp;

For more escape codes, check out EscapeCodes.info!

The favicon (favorites icon) is a small but appreciated and delightful detail to add onto any website. A favicon is generally 16 x 16 or 32 x 32, and it appears on the far left of the address bar when the website is being viewed. It may also be saved & displayed along with the site’s title (or bookmark’s name) within a browser. I use favicons for all of my websites, and you should too!

To make a favicon, simply create a 16 x 16 or 32 x 32 image in your graphics program. Save it as a transparent .gif (transparency is recommended because some browsers use colored themes or color schemes, and thus the backdrop to a favicon may not be white) (you can choose .jpg or .png, but .gif is recommended because it is universal and can be processed by all browsers and operating systems), upload it to your server, and add it to your website by inserting the following code before your tag:

<link rel="shortcut icon" href="http://www.domain.com/path_to_your_favicon.gif" type="image/x-icon" />

I stumbled across DryIcons.com last week (from, oddly enough, a spammy advertisement about best fat burners), and quickly added them to my list of bookmarks. Besides offering premium icons and vector illustrations, they also have an impressive collection (that spans dozens of pages!) of free vector illustrations and graphics. A lot of people prefer to use their own images and illustrations in their layouts, but for those that don’t have the creativity, skill, time or desire to make something of their own, a resource site like DryIcons.com would definitely be appreciated.

Personally, I think they’re pretty damn awesome. But I may be just a bit biased, since I’ve found some great stuff within their pages.

I love patterns. They are perfect as backgrounds, as they work well with photographs and illustrations alike. There are plenty of websites that offer free patterns. Some of them, such as Color Lovers, allow you to take “blank” patterns and customize them by choosing colors and color schemes. This is great if you have a blog for fat burners set up, and a color scheme picked out, but you just need a pattern (using that color scheme) to complete the look of the website.

Here is a list of some tried & true pattern sites:

• ava7 patterns
• Kaliber10000 {The Pixel Patterns Collection}
• Patterrific

Do you have any to recommend? Let me know and I’ll add them to the list (and credit you, of course)!