Also including comment-reply.js can be optimized. In the Theme TwentyEleven we can find it in header.php (Line 58):

if ( is_singular() && get_option( 'thread_comments' ) )
	wp_enqueue_script( 'comment-reply' );

That means, if "Enable threaded (nested) comments" in the Discussion Settings is activated and if it's on a single page, then load the script comments-reply.js.
But we also don't need the script on pages where there is no comment form and not on the homepage if it's a page. Neither do we need the script if comments are closed or not allowed.
Or easier to say: We only need it, if "Enable threaded comments" is activated and a comment form is displayed.

Using the example of TwentyEleven I show now how to do it better. First, we delete from the header.php the lines

if ( is_singular() && get_option( 'thread_comments' ) )
	wp_enqueue_script( 'comment-reply' );

In the functions.php we implement the enqueue function of the script

function xtreme_enqueue_comments_reply() {
	if( get_option( 'thread_comments' ) )  {
		wp_enqueue_script( 'comment-reply' );
	}
}

Now we get to the important part. We add to the function twentyeleven_setup() this line:

add_action( 'comment_form_before', 'xtreme_enqueue_comments_reply' );

The Hook comment_form_before is only there when the comment form is loaded and we are adding the enqueue function for the script. A positive side effect, the script is now loaded at the end of the document and does not hinder the loading of the site.
At best, you create a Child Theme, so the changes are protected against overwriting when you update WordPress the next time. Maybe the WordPress Dev team will use this approach in a future version of their default Theme TwentyEleven.

Besides many small changes under the hood, the new Widget System Extensions is one of the biggest innovation in Xtreme One.

• For multisite installations widgets can be declared as a side wide widgets, which means they appear on all existing and future blogs.
• Widget Manager to manage various features as well as turning on or off the widgets.
• Extremely comfortable widget filtering logic, see video: Different sliders for different categories including conditional editor with drag and drop and syntax check.
• Quick duplication of widgets for multiple use.
• Simple combining multiple widgets to a tabber, see video: Create a tabber from widgets.
• Scripts will only load when they are needed.

Also new are the jFancy Mediaslider and a Carousel Slider, which are available for posts and as a media slider. With the media slider you can just insert images from your media library instead of choosing an image of a post. You can link these images either to the attachment page, the corresponding article or a user defined link.

The Xtreme Social Widget added the new Google+.

Another feature are the subtitles for posts, pages and custom post format.

Xtreme One Framework supports post formats. Thus it is possible with any Childtheme, to operate a Tumblr-like blog.

The selectable positions of the navigation has been increased to 12.

Xtreme One costs only $79,95 and is available here.

How can you win a license?

We are giving away 5 licenses for the Xtreme One Framework with a Childtheme of your choice. One license will be given away among the commentators in our comment area. 2 more will be raffled among those who tweet with the Hashtag #xtremeonewpe about Xtreme One and two licenses will be raffled among all the bloggers who write about Xtreme One in their blog and leave a trackback here. The raffle will run until September 23rd 2011, 23:59:59 PST Time.

The winner will be announced on September 24th at the end of our Xtreme One session at the WordCamp Germany in Cologne.

Good Luck to everyone!

We just announced the winner of the licenses here:

Congrats to the winner!

Everybody else can grab a 20% discount for Xtreme One until October 3rd 2011 with the coupon code: WCK11

Why another WordPress Framework?

My idea of a WordPress Framework starts where most of the others are given up - to give the user the complete control of his layout. That's why Xtreme One is worldwide the only WordPress Framework, which is able to create fixed, fluid and flexible layouts. Create in a matter of minutes your own desired website layout with just a few mouse clicks! Check out the video and get convinced by Xtreme One.

Focus on the most important thing – your vision!

Efficient functions enables you to work extremely fast, without writing code. Hence, you have more time to create your design.

It's the details that matter

• 6 layout variations in content area.
• Widths of sidebars flexible adjustable in px, em or %
• Free positionable navigations with 4 different stylesheets for WP Menus, page or categories
• Able to add teaser and footer with dynamical created widget areas in 28 layout variations and up to 5 columns.
• Layoutmanager  - different layouts and sidebars
• 12 additional widgets: 3 slider widgets, 5 widgets for column and row based output of your articles and pages, printable and accessible tabber, last tweets, newsletter and social links.
• 3 comment form layouts, additional text fields, adjustable avatar size and alignment
• Combining of stylesheets and stylesheet compression.
• Multisite and Localization ready, in English and German.
• Extensive documentation, support forum, knowledgebase, free updates
• and a lot more

Launch rebate until December 13th

To celebrate the launch of Xtreme One Framework, we will give you a $10 rebate until December 13th. Just type in LAUNCH in the Discount Coupon field when you check out.

And that's only the beginning!

In the coming months, we will come up with many more innovative ideas for Xtreme One and we will try to make Xtreme One the best WordPress Framework out there. I know it's tough goal, but we will try to deliver!

Buy it now for a limited time for $69,95 and receive free updates with even more features in the future. We hope you will enjoy Xtreme One!

We are looking forward to hear your feedback!

The function

The following small function goes in the functions.php of the themes or outsourced in a Plugin. It depends what is your opinion - for me it is theme-specific and thus a function of the theme and therefore in the functions.php of the theme.

/**
 * Flattr Button in WordPress Templates
 *
 * @author Frank Bültge
 * @link   Flattr API https://flattr.com/support/api
 * @param  integer  $uid   personal user ID
 * @param  string   $cat   Flattr category: text, images, video, audio, software or rest.
 * @param  string   $btn   Type of Flattr button: '' or 'compact'
 * @param  integer  $hide  Use this to hide the thing from listings on flattr.com. The value 1 will hide the thing.
 *
 */
function fb_flattr_link($uid = '', $cat = 'text', $btn = 'compact', $hide = 0) {

	$uid  = (int) $uid;
	$cat  = htmlspecialchars($cat);
	$btn  = htmlspecialchars($btn);
	$hide = (int) $hide;

	$noflattr = 0;
	$noflattr = (int) get_post_meta( get_the_ID(), 'noflattr', true );

	if ( !$uid )
		$uid = (int) get_post_meta( get_the_ID(), 'flattrid', true );

	if ( defined('WPLANG') )
		$locale = WPLANG;
	if ( empty($locale) )
		$locale = 'en_US';

	$ftag = '';
	$tags = get_the_tags( get_the_ID() );
	if ( $tags ) {
		foreach( $tags as $tag ) {
			$ftag .= $tag->name . ', ';
		}
		$ftag = substr( $ftag, 0, -2 );
	} else {
		$tag = '';
	}

	$dsc = htmlspecialchars( strip_tags( trim( get_the_excerpt() ) ) );
	$dsc = str_replace( "'", "", $dsc );
	$dsc = str_replace( "\n", " ", $dsc ); // maybe \r\n

	$tle = htmlspecialchars( strip_tags( get_the_title() ) );
	$tle = str_replace( "'", "", $tle );

	$flattr = '
	<span class="flattr">
		<script type="text/javascript">
			var flattr_uid  = \'' . $uid . '\';
			var flattr_url  = \'' . get_permalink() . '\';
			var flattr_tle  = \'' . $tle . '\';
			var flattr_dsc  = \'' . $dsc . '\';
			var flattr_cat  = \'' . $cat . '\';
			var flattr_lng  = \'' . $locale . '\';
			var flattr_tag  = \'' . $ftag . '\';
			var flattr_btn  = \'' . $btn . '\';
			var flattr_hide = ' . $hide . ';
		</script>
		<script src="http://api.flattr.com/button/load.js" type="text/javascript"></script>
	</span>
	';

	if ( !$noflattr && ( 0 != $uid ) )
		echo $flattr;
}

Usage

Within the template for your posts the above function will be called, the call would normally be appropriate in the single.php of the theme.

<?php if ( function_exists('fb_flattr_link') ) fb_flattr_link( $uid = 'YOUR_UID' ); ?>

There is a query in this code, which checks a custom field with the name flattrid. There you can put an ID, so you can use the button in dependency of different authors. You can use the above function without the use of the parameter $uid , like this:

<?php if ( function_exists('fb_flattr_link') ) fb_flattr_link(); ?>

The button will only show if the custom field contains a flattrid and if the following field noflattr is not 1.

I also added a custom field - if you use this just type noflattr and as the value 1, then the button won't display. I think there are posts that do not need a flattr button, for example because it is a guest post.

The button will be displayed within the span-element with the class flattr and can be addressed via CSS, here a small example:

.flattr {
margin: 5px 0 0 5px;
}

The function can be expanded in many ways, for example a profile field on authors profile page for the ID can help, better as an custom field.

You can also outsource everything in Metaboxes, thus making it more user-friendly and automatically showing it before the content or in your feed. Since Flattr provides its own Plugin, I didn't wanted to build a Plugin and who may use the function can extend it accordingly, if the current functionality is not enough.

An example

Let us imagine that you will use a menu several times - but at different positions and at different places of the markup. It would not be sufficient if you change the appearance via CSS. In most cases you would probably put the navigation in an additional template, such as the nav.php. In this file is the HTML markup and the necessary template tags to create a navigation. This file would be included. In WordPress 3.0 it looks like this: include( TEMPLATEPATH . '/navi.php' );

Function get_template_part()

With WordPress 3.0 comes in this form of modularization more flexibility and so you can use the get_template_part() to address templates. The function allows the use of two parameters:

/**
 * @uses locate_template()
 * @since 3.0.0
 * @uses do_action() Calls 'get_template_part{$slug}' action.
 *
 * @param string $slug The slug name for the generic template.
 * @param string $name The name of the specialised template.
 */
get_template_part( $slug, $name = null )

and it has a hook get_template_part_$slug, which you can use.

Let's take a look on the example with the navigation above, which will be include in the new function as follows: get_template_part( 'navi' );. In this case we only used the parameter slug - navi - which takes care, that it loads navi.php.
In our next step we want to use the navi, which was created explicitly for the sidebar. The source is in the navi-sidebar.php and the call will look like that: get_template_part( 'navi', 'sidebar' );. The structure of the template file must be created by slug-name.php .

This allows to create almost any pattern, which are becoming especially valuable when it comes to reuse, or if you work with Child-Themes, as you can thus connect to the Parent-Theme and yet create your own quite flexible templates.

Sequence loading

WordPress uses when loading the template a hierarchy, so you can access various templates, that can be illustrate in an example. The Parent-Theme is in wp-content/themes/ and uses the folder wpbasis, the Child Theme can be found in the folder wpbasischild. Now there is in one of the templates the call <?php get_template_part( 'navi', 'index' ); ?>. Now it searches after the navi-index.php with the following pattern:

1. wp-content/themes/wpbasischild/navi-index.php
2. wp-content/themes/wpbasischild/navi.php
3. wp-content/themes/wpbasis/navi-index.php
4. wp-content/themes/wpbasis/navi.php

Here, again, some new features under the hood, which can be quite useful for theme authors. Because of its recent growth, the use of Child-Themes is certainly a useful feature.

// onyl css, when post has a gallery
function gallery_stylesheet( $posts ) {
	if ( empty( $posts ) )
		return $posts;

	$found = false;

	foreach ($posts as $post) {
		if ( stripos( $post->post_content, '[gallery' ) )
			$found = TRUE;
			break;
		}

	if ( $found )
		wp_enqueue_style( 'gallery-stylesheet', get_bloginfo('stylesheet_directory') . '/gallery.css', FALSE, FALSE, 'screen' );

	return $posts;
}
add_action( 'the_posts', 'gallery_stylesheet' );

You can also use this to load scripts,

// onyl js, when post has a gallery
function my_script( $posts ) {
	if ( empty( $posts ) )
		return $posts;

	$found = false;

	foreach ($posts as $post) {
		if ( stripos( $post->post_content, '[my-script' ) )
			$found = TRUE;
			break;
		}

	if ( $found )
		wp_enqueue_script( 'my-script', get_bloginfo('template_directory') . '/js/my_script.js', FALSE, FALSE, TRUE );

	return $posts;
}
add_action('the_posts', 'my_script');

For more information, to include JavaScript and CSS files, there is another post about this topic.

WordPress provides the jQuery library. The calling of all the necessary files and scripts will take place within the template, which takes care to output the contact form. This call we'll do with the functions of WordPress - so we make sure that the files really are loaded only once. WordPress takes care of the correct order and of the dependencies.

First we create a template, I call it contact-page.php and it must be stored in the folder of your themes. This includes calling the necessary scripts and the associated stylesheets. Basically, you only need these four calls to store in the page.php of your theme, assign a new name for the file and put a comment to get recognized by WordPress (at the beginning the file). The following describes the syntax of the example of page.php in the default theme Kubrick.

<?php
/**
 * Template Name: Contact Page
 *
 * @package WordPress
 * @subpackage Default_Theme
 */

wp_enqueue_script( 'jquery.contactable', get_bloginfo('template_directory') . '/contactable/jquery.contactable.js', array('jquery') , 3.1, true );
wp_enqueue_script( 'jquery.validate', get_bloginfo('template_directory') . '/contactable/jquery.validate.pack.js', array('jquery') , 3.1, true );
wp_enqueue_script( 'my_contactable', get_bloginfo('template_directory') . '/contactable/my_contactable.js', array('jquery') , 3.1, true );
wp_enqueue_style( 'contactable', get_bloginfo('template_directory') . '/contactable/contactable.css' );

get_header(); ?>

    <div id="content" class="narrowcolumn" role="main">

        <div class="post" id="post-<?php the_ID(); ?>">
        <h2><?php the_title(); ?></h2>

            <div class="entry">
                <?php the_content('<p class="serif">Read the rest of this page »</p>'); ?>

                <div id="mycontactform"> </div>

            </div>
        </div>

    </div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

As you can see in the syntax, I have saved all files of the jQuery Form Plugnis in the folder contactable in the folder of the theme. Therefore, your paths may have to be adjusted. Right now it looks like this in my theme:

• default
  • contactable
    • jquery.contactable.js
    • jquery.validate.pack.jss
    • my.contactable.js
    • contactable.css
  • style.css
  • contact-page.php
  • ...

I only added the file my.contactable.js; this takes care to call the form and can be filled with parameters. Their content is as follows:

jQuery(document).ready( function($){
    $('#mycontactform').contactable({
        name: 'Name',
        email: 'E-Mail',
        message : 'Message',
        recipient: 'example@domain.com',
        subject: 'Contact Form',
        recievedMsg : 'Thanks for your message.'
    });
});

If all files are stored and are adapted to your needs, then you only need to create a page in the admin area of WordPress. Give the page a name, if you want fill it with content and select a template - in our case the Contact Page. After saving the page, you should view it in the front end and click on the small label and the form will appear and can be filled out.

Through the call with the help of WordPress functions and the right parameters, the scripts are now integrated in the footer of the site. The jQuery library will not be called, it will be added by WordPress if it is not there yet, by the dependence of the parameters for the key jquery. By using a template with all calls, all the scripts and stylesheets are only involved if the page is called by WordPress. If you want the form snippets on all sides, you can insert the call in the header.php or functions.php.

You do not want to use this feature, then either don't use that CSS, or add your own design or you can fit the JS to your own needs. The same applies for additional fields in the form, this must be adapted to the content of the files.

Especially in Germany we have the tradition of an Advent Calendar. An Advent calendar is a special calendar which is used to count down the days from December the 1st to Christmas Eve December 24th.

An Advent Calendar has 24 doors, one of which is opened every day during Advent. Each door opens to reveal an image, a poem, or part of a story such as the Nativity story itself. More elaborate Advent calendars have a small gift concealed in each door, such as a toy or a chocolate item.

At WP Engineer, we thought we should do the same and open a door every day, which contains a little gift for our readers, by providing them a WordPress tip or trick each day. So we hope you will be exciting to see what tip, hack or news will be behind the door the next morning. Enjoy a new little WordPress gift every day until December 24th.

Our first little gift is a code snippet to implement the commentform as a widget in your sidebar. This Widget only works with WordPress 2.8 and higher since it's using the new Widget API. Just paste the code in the functions.php of your theme and drag the Widget on your sidebar.

<?php
class wpe_comment_widget extends WP_Widget {

    function wpe_comment_widget() {
        $widget_ops = array('classname' => 'wpe_widget_comments', 'description' => __( 'Your comments and commentform', 'your_textdomain') );
        $this->WP_Widget('wpe-comment-widget', __('WPE Comments', 'your_textdomain'), $widget_ops);
    }

    function widget($args, $instance) {
        if(is_single()) {
            extract($args);
            global $post;
            echo $before_widget;
            comments_template();
            echo $after_widget;
        }
    }

    function update($new_instance, $old_instance) {
        $instance = $old_instance;
        return $instance;
    }

    function form($instance) {
        ?>
        <p><?php _e('This widget will only be displayed in single view.', 'your_textdomain'); ?></p>
       <?php
    }
}

register_widget('wpe_comment_widget');
?>

<?php
$redirect = 'wp-admin/post-new.php';
if ( !is_user_logged_in() ) {
    $link = '<a href="' . esc_url( wp_login_url( $redirect ) ) . '">' . __('Login') . '</a>';
} else {
    $link = '<a href="' . esc_url( wp_logout_url( $redirect ) ) . '">' . __('Logout') . '</a>';
}
echo $link; // or echo apply_filters('loginout', $link);
?>

But I'm not going into details - in this article I would like to go a little further and show how, for example, the login form gets into the theme. Thus adjustments to the design and integration to your own needs can be implemented very easily.

In the first example I want to show you the classic login form so its not too much code. The following syntax shows a simple login form in your theme. I have not made any further adjustments and used the default login form of WordPress.

<form action="<?php echo wp_login_url(get_permalink()); ?>" method="post">
	<label for="log">
		<input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="22" /> User
	</label><br />
	<label for="pwd">
		<input type="password" name="pwd" id="pwd" size="22" /> Password
	</label><br />
	<input type="submit" name="submit" value="Send" class="button" />
	<label for="rememberme">
		<input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me
	</label>
</form>
<?php } ?>

This is not always sufficient and depends on the users who are logged, and whether one can even register on the website, I wrote a little example which pays attention to various aspects.

The following syntax is the view of logged user ( if ($ user_ID) ) , which is a completely different to new users, they get the form only if they are allowed to register (get_option('users_can_register')) , depending on the settings in the backend of WordPress.
Similarly, users with a User_Level greater than 1 (if ( $user_level >= 1 )) get one link more to write an article. Alternatively, you can also use the function current_user_can() and therefore explicitly asked for the user role.

<?php
global $user_ID, $user_identity, $user_level;
if ( $user_ID ) { ?>

	<h3><?php _e( 'Control panel', FB_BASIS_TEXTDOMAIN ); ?></h3>
	<ul>
		<li><?php _e( 'Identified as', FB_BASIS_TEXTDOMAIN ); ?> <strong><?php echo $user_identity ?></strong>.
			<ul>
				<li><a href="<?php bloginfo('url') ?>/wp-admin/"><?php _e( 'Dashboard', FB_BASIS_TEXTDOMAIN ); ?></a></li>

				<?php if ( $user_level >= 1 ) { ?>
					<li><a href="<?php bloginfo('url') ?>/wp-admin/post-new.php"><?php _e( 'Write an article', FB_BASIS_TEXTDOMAIN ); ?></a></li>
				<?php } ?>

				<li><a href="<?php bloginfo('url') ?>/wp-admin/profile.php"><?php _e( 'Profile', FB_BASIS_TEXTDOMAIN ); ?></a></li>
				<li><a href="<?php esc_url( wp_logout_url( urlencode($_SERVER['REQUEST_URI']) ) ); ?>"><?php _e( 'Exit', FB_BASIS_TEXTDOMAIN ); ?></a></li>
			</ul>
		</li>
	</ul>

<?php } elseif ( get_option('users_can_register') ) { ?>

		<h3><?php _e( 'Identification', FB_BASIS_TEXTDOMAIN ); ?></h3>
		<ul>
			<li>
				<form action="<?php echo wp_login_url(get_permalink()); ?>" method="post">
					<p>
						<label for="log">
							<?php _e( 'User', FB_BASIS_TEXTDOMAIN ); ?>
							<input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="22" />
						</label><br />
						<label for="pwd">
							<?php _e( 'Password', FB_BASIS_TEXTDOMAIN ); ?>
							<input type="password" name="pwd" id="pwd" size="22" />
						</label><br />
						<input type="submit" name="submit" value="<?php _e( 'Send', FB_BASIS_TEXTDOMAIN ); ?>" class="button" />
						<label for="rememberme">
							<input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /><?php _e( 'Remember me', FB_BASIS_TEXTDOMAIN ); ?>
						</label><br />
						<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>"/>
					</p>
				</form>
			</li>
			<li>
				<a href="<?php echo site_url('wp-login.php?action=register', 'login'); ?>"><?php _e( 'Register', FB_BASIS_TEXTDOMAIN ); ?></a>
			</li>
			<li>
				<a href="<?php echo site_url('wp-login.php?action=lostpassword', 'login');	 ?>"><?php _e( 'Recover password', FB_BASIS_TEXTDOMAIN ); ?></a>
			</li>
		</ul>

<?php } ?>

If user level is insufficient, you may also extend WordPress, either via code or using a Plugin.
With the help of a few lines of PHP you can assign a role quickly.

function my_new_object() {
	global $wp_roles;

	$wp_roles->add_cap('administrator', 'MyObject');
}

// start an activation theme
if ( is_admin() && isset($_GET['activated'] ) && $pagenow == 'themes.php' )
	my_new_object();

The object can simply be requested via standard.
if ( current_user_can('MyObject') )

Alternatively you can also create new roles: add_role('New_Role', 'New name of the role');. The function also allows the simultaneous use of rights, therefore a third optional parameter is available, which expects several values in an array. Otherwise, the objects can be add via add_cap().

This is only a small approach, many opportunities arise - have fun with the benefits of these possibilities.

With custom fields

In the first case, the solution using a custom field to be displayed, while the data must be maintained in this field to a key.

In version 1 you store the value of the authors to the key author link, so it's easy to understand the use of the fields. More information about this can be found in the Codex.

Version 1

The output of the key is handed over by using the template tag get_post_meta(). The function expects the Id of the post and the key value as a mandatory, or alternatively you can set if a value or arrays are allowed. Put on true and it returns only a string

/**
 * @param int $post_id Post ID.
 * @param string $key The meta key to retrieve.
 * @param bool $single Whether to return a single value.
 * @return mixed Will be an array if $single is false. Will be value of meta data field if $single
 *  is true.
 */
function get_post_meta($post_id, $key, $single = false)

<?php $key = 'authorlink'; ?>
<p>Photo of <a href="<?php echo get_post_meta($post->ID, $key, true);?>"></a>.</p>

The next step is basically no different, except that we now put the address in a value to another key, where the picture is. This requires the author to know address and save the URL.

In version 2, however, we go one step further and put a function into the functions.php, which takes care of it and then we can feed it with data. Again, this is just an example and needs in this version the key of the custom fields, the width and height of the images. These three sample values, we then write in the tag to output the image.

Version 2

/*Custom Field Images*/
function image_attachment($key, $width, $height) {
	global $post;

	$custom_field = get_post_meta($post->ID, $key, true);
	if ($custom_field) {
		echo '<img src="' . $custom_field . '" alt="Post Image" width="' . $width . '" height="' . $height . '" />';
	} else {
		return;
	}
}

The output of the template is determined by the above function as follows.

<?php
$image_key = 'image';
$myimage = get_post_meta($post->ID, $image_key, true);
if ($myimage) { ?>
	<div class="post-image">
		<?php image_attachment($image_key, 512, 200); ?>
	</div>
<?php } ?>

This really can make some beautiful things. Many theme authors would like to just have a picture to a post, which is directly taken at various points. Often this is achieved through the above solution. However, this requires that the authors need to know the custom fields and maintain them, so the key of the custom field and URL to the image.

Not very comfortable, so I want to show a solution, how you can get the image that was uploaded to the post, which can be found in the Gallery of the post.

WordPress own functions for images

One of the many options is wp_get_attachment_image(), which represents in my view, the simplest solution. Here is an example of what explains it in more detail.

At first we just get all pictures, not all the attachments of the posts that has been uploaded directly to the post. These images, we can directly display. The syntax must always be in the loop.

<?php
$attachments = get_children( array('post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' => 'image') );
foreach ( $attachments as $attachment_id => $attachment ) {
	echo wp_get_attachment_image($attachment_id);
} ?>

The above example loads via the loop all images and display them. We don't take care about the actual size of the image, in default it will display the thumbnail. By setting post_mime_type = image, it only fetches images and not other attachments of the post.
The function of WordPress, which outputs the image with HTML, requieres the ID of the attachment, so you have to retrieve the ID to the post beforehand, we'll do with get_children().

A few words now to function wp_get_attachment_image() of WP to display the images. As already mentioned, there are several functions that all have a similar structure, and either give back other markup or allow other parameters. For a simple output, this function is best. It is also described in the Codex.

The function allows for 3 parameters:

/**
 * Get an HTML img element representing an image attachment
 *
 * @param int $attachment_id Image attachment ID.
 * @param string $size Optional, default is 'thumbnail'.
 * @param bool $icon Optional, default is false. Whether it is an icon.
 * @return string HTML img element or empty string on failure.
 */
function wp_get_attachment_image($attachment_id, $size = 'thumbnail', $icon = false)

You get the markup back for the img-Tag, like the following example.

<mg width="150" height="150" src="http://example.com/wp-content/uploads/2009/08/DSC00261-150x150.jpg"; class="attachment-thumbnail2 alt="Image Example" title="Example Image" />

The last of the three parameters is not really interesting in association with pictures, since it displays an icon. But the second parameter is there even more exciting, because this allows to set the size of the image. Here you can give either one of the preconfigured sizes, the sizes which you can configure in the settings of WordPress and are created when you upload using the media library. The following options are available.

• Default-Values: thumbnail, medium, large oder full
• Custom sizes via Array: array( width, height ) Example: array(100, 100)

If you pass your own values, then WordPress fetches the appropriate image in dependence of these values. So if you set, for example, 100x100 and the thumbnails are 150px150px, then these images are drawn. If you have your own array of 200x200, it will output the medium image because the thumbnail is too small.

<?php
$attachments = get_children( array('post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' =>'image') );
foreach ( $attachments as $attachment_id => $attachment ) {
	echo wp_get_attachment_image( $attachment_id, array(200, 250) );
} ?>

Images with links

Now I will not always just the pictures, but also have the image with a link to the image in original size. In that case there is the function wp_get_attachment_link(). Here an example:

<?php
$attachments = get_children( array('post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' =>'image') );
foreach ( $attachments as $attachment_id => $attachment ) {
	echo wp_get_attachment_link( $attachment_id, 'medium' );
} ?>

The HTML looks like this.

<a href="http://example.com/wp-content/uploads/2009/08/DSC00261.JPG" title="Example Image"><img src="http://example.com/wp-content/uploads/2009/08/DSC00261-150x150.jpg" class="attachment-thumbnail" alt="Image Example" title="Example Image" height="150" width="150"/></a>

Thus the image in the requested size is generated, and the link was set to the image in original size.

Determine size of the images

Sometimes you want to know in advance how big is the image. There is a function that returns the values as an array. This is an example of the output:

<?php
$attachments = get_children( array('post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' => 'image') );
foreach ( $attachments as $attachment_id => $attachment ) {
	$src = wp_get_attachment_image_src( $attachment_id, 'full' );
	var_dump($src);
} ?>

This simple loop to output the values returns an array.

array
  0 => string 'http://example.com/wp-content/uploads/2009/08/DSC00261.JPG' (length=63)
  1 => int 1632
  2 => int 1224
  3 => boolean false

The order of the array is allocated as follows.

• $src[0] => url
• $src[1] => width
• $src[2] => height
• $src[3] => icon

Thus, it can react to the size, depending on requirements. Alternatively, you can work with the function image_get_intermediate_size($post_id, $size='thumbnail'), which returns some more values. A sample of the output for 'medium':

array
  'file' => string 'DSC00261-300x225.jpg' (length=20)
  'width' => string '300' (length=3)
  'height' => string '225' (length=3)
  'path' => string '2009/08/example-300x225.jpg' (length=28)
  'url' => string 'http://example.com/wp-content/uploads/2009/08/DSC00261-300x225.jpg' (length=71)

Further functions and possibilities

In this context, there are a few other functions that enable the work with attachments or pictures. I do not want to explain each of them, therefore I constribute a small loop for testing purposes. This covers many possibilities and are self explanatory, I think.

<?php
$attachments = get_children( array('post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' => 'image') );
foreach ( $attachments as $attachment_id => $attachment ) {
	echo '<p>';
	echo 'wp_get_attachment_image: ' . wp_get_attachment_image( $attachment_id, array(200,250) ) . '<br />';
	echo 'wp_get_attachment_link: ' . wp_get_attachment_link( $attachment_id ) . '<br />';
	echo 'wp_get_attachment_url: ' . wp_get_attachment_url( $attachment_id ) . '<br />';
	echo 'wp_get_attachment_thumb_url: ' . wp_get_attachment_thumb_url( $attachment_id ) . '<br />';
	echo 'get_attachment_link: ' . get_attachment_link( $attachment_id ) . '<br />';
	$src = image_get_intermediate_size( $attachment_id, 'medium'	 );
	echo 'image_get_intermediate_size. '; var_dump($src); echo '<br />';
	$src = wp_get_attachment_image_src( $attachment_id, 'full', true );
	echo 'wp_get_attachment_image_src. '; var_dump($src); echo '<br />';
	echo 'Title of attachment: ' . apply_filters( 'the_title', $attachment->post_title ) . '<br />';
	echo 'Link to post: ' . get_permalink($image->post_parent) . '<br />';
	echo '<hr style="clear:both;" /></p>';
} ?>

Remember, the syntax must be in the loop of WordPress.

Only one picture to post

Now I have explained how to get the pictures but in general you will probably not need to post all the pictures, but you want just one picture. This occurs, for example, in magazine themes, where a small picture is displayed to make the post more interesting. Through these functions I can give the author of the respective post the control of that picture. Normally I do this in such a way that it explicitly output the first picture from the gallery to the post. Thus, the author can move the image in the gallery by dragging and dropping to the right place.

This is not an own function, you just have to feed get_children() accordingly. The output of the image, and other values to the image is again as described above.

In our first example we pick only the first image from the gallery.

<?php
$attachments = get_children( array(
				'post_parent'    => get_the_ID(),
				'post_type'      => 'attachment',
				'numberposts'    => 1, // show all -1
				'post_status'    => 'inherit',
				'post_mime_type' => 'image',
				'order'          => 'ASC',
				'orderby'        => 'menu_order ASC'
				) );
foreach ( $attachments as $attachment_id => $attachment ) {
	echo wp_get_attachment_image( $attachment_id );
} ?&>

Now the author of the contribution can always choose the first image of what he wants to use.

Alternatively we can turn the tables and get the last image from the Gallery .

<?php
$attachments = get_children( array(
				'post_parent'    => get_the_ID(),
				'post_type'      => 'attachment',
				'numberposts'    => 1, // show all -1
				'post_status'    => 'inherit',
				'post_mime_type' => 'image',
				'order'          => 'DESC',
				'orderby'        =>'menu_order ASC'
				) );
foreach ( $attachments as $attachment_id => $attachment ) {
	echo wp_get_attachment_image( $attachment_id );
} ?>

With the help of numberposts, we specify how many images are to be fetched. So we fetch in the following example the first 2 pics and after the last 2 pictures.

<?php
$attachments = get_children( array(
				'post_parent'    => get_the_ID(),
				'post_type'      => 'attachment',
				'numberposts'    => 1, // show all -1
				'post_status'    => 'inherit',
				'post_mime_type' => 'image',
				'order'          => 'ASC',
				'orderby'        => 'menu_order ASC'
				) );
foreach ( $attachments as $attachment_id => $attachment ) {
	echo wp_get_attachment_image( $attachment_id );
} ?>

Well, the last two pictures, starting with the last picture.

<?php
$attachments = get_children( array(
				'post_parent'    => get_the_ID(),
				'post_type'      => 'attachment',
				'numberposts'    => 2, // show all -1
				'post_status'    => 'inherit',
				'post_mime_type' => 'image',
				'order'          => 'DESC',
				'orderby'        => 'menu_order ASC'
				) );
foreach ( $attachments as $attachment_id => $attachment ) {
	echo wp_get_attachment_image( $attachment_id );
} ?>

Meta-Data of images

WordPress saves various meta data to the images. Now and then these are very useful, and why not simply use them.

First an example to get to the data. This we do with the function wp_get_attachment_metadata(). This function returns quite a lot of data and we can access the size of images, their path and also access the meta data.

<?php
$attachments = get_children( array(
				'post_parent'    => get_the_ID(),
				'post_type'      => 'attachment',
				'numberposts'    => 1, // show all -1
				'post_status'    => 'inherit',
				'post_mime_type' => 'image',
				'order'          => 'ASC',
				'orderby'        => 'menu_order ASC'
				) );
foreach ( $attachments as $attachment_id =>; $attachment ) {
	echo wp_get_attachment_image( $attachment_id );
	$imagemeta = wp_get_attachment_metadata( $attachment_id );
	var_dump($imagemeta); // list values in array

	$aperture          = $imagemeta['image_meta']['aperture'];
	$credit            = $imagemeta['image_meta']['credit'];
	$camera            = $imagemeta['image_meta']['camera'];
	$caption           = $imagemeta['image_meta']['caption'];
	$created_timestamp = $imagemeta['image_meta']['created_timestamp'];
	$copyright         = $imagemeta['image_meta']['copyright'];
	$focal_length      = $imagemeta['image_meta']['focal_length'];
	$iso               = $imagemeta['image_meta']['iso'];
	$shutter_speed     = $imagemeta['image_meta']['shutter_speed'];
	$title             = $imagemeta['image_meta']['title'];
} ?>

In the above code is the output value of a var_dump() in it. Thus we see very quickly which content in the array exists and where they can be accessed.
All values of the meta data, I have written in each variable, so that even less experienced users should understand it.

For a simple picture, of what would be created via cell phone camera, for example, the array looks like this.

array
  'width' => string '1632' (length=4)
  'height' => string '1224' (length=4)
  'hwstring_small' => string 'height='96' width='128'' (length=23)
  'file' => string '2009/08/DSC00261.JPG' (length=20)
  'sizes' =>
    array
      'thumbnail' =>
        array
          'file' => string 'DSC00261-150x150.jpg' (length=20)
          'width' => string '150' (length=3)
          'height' => string '150' (length=3)
      'medium' =>
        array
          'file' => string 'DSC00261-300x225.jpg' (length=20)
          'width' => string '300' (length=3)
          'height' => string '225' (length=3)
      'large' =>
        array
          'file' => string 'DSC00261-1024x768.jpg' (length=21)
          'width' => string '1024' (length=4)
          'height' => string '768' (length=3)
  'image_meta' =>
    array
      'aperture' => string '2.8' (length=3)
      'credit' => string '' (length=0)
      'camera' => string 'W800i' (length=5)
      'caption' => string '' (length=0)
      'created_timestamp' => string '1184253323' (length=10)
      'copyright' => string '' (length=0)
      'focal_length' => string '0' (length=1)
      'iso' => string '100' (length=3)
      'shutter_speed' => string '0.0166666666667' (length=15)
      'title' => string '' (length=0)

Alternative in WordPress 2.9

Using WordPress version 2.9, there is a template tag just for this request, so it is easier and more understandable. You just use the the_post_image() and you can set the size. Default is thumbnail, it is possible thumbnail, medium, large or full.

the_post_image(); // without parameter -> Thumbnail
the_post_image('thumbnail'); // Thumbnail
the_post_image('medium'); // Medium resolution - use full,

As a small alternative is still get_the_post_image() available, whereas the function doesn't have echo, and can optionally have the ID of the post.
get_the_post_image( $size = 'thumbnail', $post_id = NULL )

Conclusion

WordPress offers a lot of different functions to access attachments, whether pictures or other files. Also a part of meta-data is stored, which can be used. Many approaches can be found in the code, primarily in the wp-includes/media.php. Perhaps I could point out some solutions which in my view a better alternative than the use of custom fields, or even scanning the content.