In my other blog, Pet Turtles And More, I wanted to display one image from the content of my posts and be able to over-ride that image with another, if I so choose, within the WordPress loop .

The result I wanted (which is what I got) looks like this:

The first image in the post is displayed or, if I designate an alternate, it will display an alternate image.

The first step I did was find a way to extract the image from a post. I found this in the WordPress.org support forums: Retrieve First Image From Post.

This worked beautifully, but noticed that it:

1. didn’t give me an easy way to override the image if I didn’t like the one it chose (which is the first image)
2. if I had an advertisement, even one that is generated by an iframe, it would take the image from the ad and display it instead, and
3. if I use shortcode to display a gallery (like what is used to display a NextGen Smooth gallery, it wouldn’t be able to extract a photo

So I looked for a way to add an image through the use of custom fields. I found number 9 from Custom Fields Hacks For WordPress to be most useful.

Then I did some nifty PHP to combine the two hacks and came out with this code.

Paste this into your theme’s functions.php file:

function get_custom_field_value($szKey, $bPrint = false) {
	global $post;
	$szValue = get_post_meta($post->ID, $szKey, true);
	if ( $bPrint == false ) return $szValue; else echo $szValue;
}

function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
// no image found display default image instead
if(empty($first_img)){
$first_img = get_custom_field_value('mythumb');
}
return $first_img;
}

And use this within the WordPress loop for where you want to display the image:

<?php
$customField = get_post_custom_values("mythumb");
if (isset($customField[0])) {
    echo '<img src="';
    echo "".$customField[0];
	echo '" />'; }
  else{
echo '<img src="';
echo (catch_that_image());
echo '" />'; }
 ?>

The code assumes that you are using a custom field called “mythumb” and that you are using the full URL path of the image for “mythumb”.

What the code does is it first tells WordPress to display the image in “mythumb” then if that custom field is empty, it will then display the first image in the post. In effect, it displays the first image in a post or the one in a custom field.

A nice WP hack indeed!!

I’ve been wanting to go to a WordCamp since I got into blogging…it took a few short years and now I’m finally going.

WordCamp is going to be two whole conference days of nothing but WordPress. I like the sound of that…

I even know one of the speakers!

Sometimes, I work with WordPress all day for work – then when I get home – I spend even more time working with WordPress for myself!!

Check out the Word Camp NYC 2009 page.

Since I do more Twitter updates and don’t blog here on this website as much as I do for my pet turtles or Brazilian Jiu-Jitsu websites – I decided to update the look of J3WebWorks.com.

The blog page now features my latest tweets (Twitter messages) on top of my blog posts.

I’m using the javascript Twitter Statuses Badge, which I downloaded from http://www.makkintosshu.com/journal/twitter-statuses-badge. I customized it slightly to fit both my blog page and the sidebar on my home page.

I think it looks cool.

Presenting my first free theme:  Warx.

The Warx theme has a two column layout, dropdown pages menu, five widget-ready placement areas (including a page template with widget areas), gravatar support, threaded (nested) comment support, and separated trackbacks & pingbacks.

For CMS solutions, it offers five different widget areas, allowing for different presentation and locations of widgets. There are three different widget areas on the right sidebar and two widget areas.  The widget areas are:

1. Not Styled – Top
2. Styled Middle
3. Not Styled – Bottom
4. Page – left
5. Page – middle

The page widgets will only appear when the Page with widgets page template is used.

The right sidebar widget allows different presentation styles of widgets such as:

All widget styles being used

Not Styled - Top and Styled Middle

Styled Middle and Not Styled - Bottom

Just the Styled Middle

Just the Not Styled - Top or Not Styled - Bottom

1. All widget styles being used
2. Not Styled – Top and Styled Middle
3. Styled Middle and Not Styled – Bottom
4. Just the Styled Middle
5. Just the Not Styled – Top or Not Styled – Bottom

Gravatar support, threaded (nested) comments, and separated trackbacks & pingbacks.

Comes with two additional page templates:

• Page no sidebars – a page template that removes the sidebar, allowing the use of the full width of the theme
• Page with widgets – a special page template that allows for two widget areas underneath the page content

Important Notes:

• To use the theme, move the Warx folder into your wp-content/themes folder and activate it under the Appearance > Themes menu in WordPress
• Warx theme is released under a GPL license
• Warx is based on the Pixel theme by SamK.
• The Warx theme is free and comes with no warranty
• Kindly keep the credit link back to my website in place in the footer
• Please do not use this theme in the following types of websites: pornographic, adult, gambling, filesharing, offensive or illegal content, etc…

Version 0.91

• first release

Please feel free to leave any questions or feedback in the comments.

A few weeks after I posted How to make NextGEN Smooth Gallery link to any URL (or fake a flash banner) I discovered the WP-Cycle plugin.

It’s a great plugin, much easier to use than hacking NextGen Smooth, and I wish I had found it sooner. It is way simpler for getting each image in a rotating slideshow to point to a different URL.

How I implemented it (note: this is for version 0.1.5 of the plug-in) :
(Blog title, URLs, and links blurred out in the image for client security)

1. After installing the plugin, you will find the WP-Cycle settings as a sub-menu under the Plugins menu in the admin area of WordPress.
2. First thing to do is to upload the images you want to appear in the slidehow, browse for and upload your images. There is currently no method to add an image from the WordPress Library or to use an image without importing it, hopefully that will change in a future release. Also, it is better if all your images are the same size.
3. After uploading an image, you can enter the URL you want each image to link to. This is the strength and the best part of WP-Cycle – you can link to any URL. Be sure to include the “http://” and to click on “Update”.
4. Select your settings. These are all up to your preferences. For Image Dimensions it is best if you enter the exact same size as that of the images you are planning to use.  Don’t forget to “Save Settings”.

To display the rotating banner, use the shortcode to display it in a post or page or use PHP to show them where ever you please in your themes files.

The short code is:

[wp_cycle]

The php is:

<?php wp_cycle(); ?>

The plugin says that you can set the DIV ID that will be used for the banner and thus be able to style it whatever way you want through CSS. I wasn’t able to do this successfully. I wanted to add a margin to the banner, so I surrounded it in another DIV with a class.

The complete code I added to the theme was:

<div class="banner">
<?php wp_cycle(); ?>
</div>

In the style sheet I added (of course you can add whatever you want, depending on the styling you want):

.banner {
margin-left:11px;
}

And there you have it. A simple rotating banner using any size of images that links to any URL for WordPress for free without using Flash or a paid program.

Please feel free to ask questions or leave comments.