WordPress Theming http://wptheming.com Design, Customization, & Consulting Sun, 05 Sep 2010 21:02:17 +0000 en hourly 1 wordpress-theminghttp://feedburner.google.com How to Upload Images to WordPress http://wptheming.com/2010/08/upload-images-to-wordpress/ http://wptheming.com/2010/08/upload-images-to-wordpress/#comments Mon, 30 Aug 2010 18:22:31 +0000 Devin http://wptheming.com/?p=1041 This is a video tutorial showing how to upload your photos and other images into WordPress posts and pages. It explains how to align images to the left or right, how to add a caption, and how to display multiple images in a gallery:

Click here to view the embedded video.

]]> http://wptheming.com/2010/08/upload-images-to-wordpress/feed/ 0 How to Make an Events Custom Post Type http://wptheming.com/2010/08/how-to-make-an-events-custom-post-type/ http://wptheming.com/2010/08/how-to-make-an-events-custom-post-type/#comments Fri, 20 Aug 2010 22:14:21 +0000 Devin http://wptheming.com/?p=1021 There are several event plugins for WordPress, but all of them seem to work by adding additional tables to the database and setting up a new or complicated user interface.

I was working on a project with Bruce Robinson, an orchestra marketer, where we wanted to just display the events using just a simple custom post type. After stumbling down a couple wrong paths, I found a very simple and elegant solution by making the event date mirror the actual post date.

You can download a child theme of Twenty Ten with all the code that has the code I describe here.

Explanation

First, you’ll need to set up an event post type (and, as always, I’ll send you to Justin Tadlock’s post if you want to learn more about how this works):

?View Code PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

/**
 * Enable Custom Post Types for Events
 */
 
// Registers the new post type and taxonomy
 
function devinsays_event_posttype() {
	register_post_type( 'events',
		array(
			'labels' => array(
				'name' => __( 'Events' ),
				'singular_name' => __( 'Event' ),
				'add_new' => __( 'Add New Event' ),
				'add_new_item' => __( 'Add New Event' ),
				'edit_item' => __( 'Edit Event' ),
				'new_item' => __( 'Add New Event' ),
				'view_item' => __( 'View Event' ),
				'search_items' => __( 'Search Event' ),
				'not_found' => __( 'No events found' ),
				'not_found_in_trash' => __( 'No events found in trash' )
			),
			'public' => true,
			'supports' => array( 'title', 'editor', 'thumbnail', 'comments' ),
			'capability_type' => 'post',
			'rewrite' => array("slug" => "events"), // Permalinks format
			'menu_icon' => get_bloginfo('stylesheet_directory') . '/images/calendar-icon.gif',  // Icon Path
			'menu_position' => '5'
		)
	);
}
 
add_action( 'init', 'devinsays_event_posttype' );

Altering the “Publish Date” text

We’ll need to filter the text on the event custom post type edit page. So, instead of saying “Publish immediately” in the upper right- it’ll say “Event Date: [the current date]“. You also need a conditional, so this text only gets filtered on your new event post type.

Props to Peter Westwood for posting his code and explaining how to do this.

?View Code PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// Change the "Scheduled for" text on Event post types changing the translation
// http://blog.ftwr.co.uk/archives/2010/01/02/mangling-strings-for-fun-and-profit/
function devinsays_translation_mangler($translation, $text, $domain) {
        global $post;
	if ($post->post_type == 'events') {
 
		$translations = &get_translations_for_domain( $domain);
		if ( $text == 'Scheduled for: <b>%1$s</b>') {
			return $translations->translate( 'Event Date: <b>%1$s</b>' );
		}
		if ( $text == 'Published on: <b>%1$s</b>') {
			return $translations->translate( 'Event Date: <b>%1$s</b>' );
		}
		if ( $text == 'Publish <b>immediately</b>') {
			return $translations->translate( 'Event Date: <b>%1$s</b>' );
		}
	}
 
	return $translation;
}
 
add_filter('gettext', 'devinsays_translation_mangler', 10, 4);

Displaying Scheduled Posts

You should now have a working post type that allows you to set up events. However, I assume you’ll want to post events that are upcoming rather than ones that have already occurred. Since a future date will make the event post “scheduled”, we’ll need to add a bit of code to make scheduled posts appear instead of giving a 404 error to non logged in users. Here’s the code for that:

?View Code PHP
1
2
3
4
5
6
7
8
9
10
11

// Show Scheduled Posts
 
function devinsays_show_scheduled_posts($posts) {
   global $wp_query, $wpdb;
   if(is_single() && $wp_query->post_count == 0) {
      $posts = $wpdb->get_results($wp_query->request);
   }
   return $posts;
}
 
add_filter('the_posts', 'devinsays_show_scheduled_posts');

Displaying Events in a Template

Everything should now be set up to create new events and view the posts separately. But what if you want to query those events from different page template AND only show the events that are coming up, rather than ones that have already expired? Well, simple. You just query your future event posts:

?View Code PHP
1
2
3
4
5

$args = array( 'post_type' => 'events',
							   'posts_per_page' => '10',
							   'post_status' => 'future',
							   'order' => 'DESC');
				query_posts($args);

You can see the full code for this in the type-events.php template in the Events TwentyTen theme.

More with Metaboxes?

I also wanted to explain the road I went down before exploring the above solution. It involved using metaboxes to store the date- but I realized it was unworkable to do a query for the posts when there was a large amount of events (too many database queries to actually sort and display them).

Even with the above caveat, it might be useful to add a date metabox if you wanted to have an end time for your event, or use a date field for some other use.

This section will be a bit shorter on explanation- but if you want to know more about how meta boxes work, please see my other post on it.

To add a metabox for the end date, you’ll need a callback on the event post type array:

?View Code PHP
1

'register_meta_box_cb' => 'add_events_metaboxes'

A Date Metabox

Then you’d need to set up the actual boxes to display:

?View Code PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

// Add the Events Meta Boxes
 
function add_events_metaboxes() {
	add_meta_box('devinsays_events_date', 'End Date', 'devinsays_events_date', 'events', 'side', 'default');
}
 
// The Event Date Metabox
 
function devinsays_events_date() {
	global $post, $wp_locale;
 
	// Use nonce for verification ... ONLY USE ONCE!
	echo '<input type="hidden" name="eventmeta_noncename" id="eventmeta_noncename" value="' . 
	wp_create_nonce( plugin_basename(__FILE__) ) . '" />';
 
	$time_adj = current_time('timestamp');
 
	$month = get_post_meta($post->ID, '_month', true);
 
	if ( empty($month) ) {
		$month = gmdate( 'm', $time_adj );
	}
 
	$day = get_post_meta($post->ID, '_day', true);
 
	if ( empty($day) ) {
		$day = gmdate( 'd', $time_adj );
	}
 
	$year = get_post_meta($post->ID, '_year', true);
 
	if ( empty($year) ) {
		$year = gmdate( 'Y', $time_adj );
	}
 
	$hour = get_post_meta($post->ID, '_hour', true);
 
	if ( empty($hour) ) {
		$hour = gmdate( 'H', $time_adj );
	}
 
	$min = get_post_meta($post->ID, '_minute', true);
 
	if ( empty($min) ) {
		$min = '00';
	}
 
	$month_s = "<select name=\"_month\">\n";
	for ( $i = 1; $i < 13; $i = $i +1 ) {
		$month_s .= "\t\t\t" . '<option value="' . zeroise($i, 2) . '"';
		if ( $i == $month )
			$month_s .= ' selected="selected"';
		$month_s .= '>' . $wp_locale->get_month_abbrev( $wp_locale->get_month( $i ) ) . "</option>\n";
	}
	$month_s .= '</select>';
 
	echo $month_s;
 
	echo '<input type="text" name="_day" value="' . $day  . '" size="2" maxlength="2" />';
	echo '<input type="text" name="_year" value="' . $year . '" size="4" maxlength="4" /> @ ';
	echo '<input type="text" name="_hour" value="' . $hour . '" size="2" maxlength="2"/>:';
	echo '<input type="text" name="_minute" value="' . $min . '" size="2" maxlength="2" />';
 
}

Saving the Meta Data

You’d also want to save the all that information:

?View Code PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

// Save the Metabox Data
 
function devinsays_save_events_meta($post_id, $post) {
 
	// verify this came from the our screen and with proper authorization,
	// because save_post can be triggered at other times
	if ( !wp_verify_nonce( $_POST['eventmeta_noncename'], plugin_basename(__FILE__) )) {
		return $post->ID;
	}
 
	// Is the user allowed to edit the post or page?
	if ( !current_user_can( 'edit_post', $post->ID ))
		return $post->ID;
 
	// OK, we're authenticated: we need to find and save the data
	// We'll put it into an array to make it easier to loop though.
 
	$events_meta['_month'] = $_POST['_month'];
	$events_meta['_day'] = $_POST['_day'];
	$events_meta['_year'] = $_POST['_year'];
	$events_meta['_hour'] = $_POST['_hour'];
	$events_meta['_minute'] = $_POST['_minute'];
	$events_meta['_eventtimestamp'] = $events_meta['_year'] . $events_meta['_month'] . $events_meta['_day'] . $events_meta['_hour'] . $events_meta['_minute'];
 
	// Add values of $events_meta as custom fields
 
	foreach ($events_meta as $key => $value) { // Cycle through the $events_meta array!
		if( $post->post_type == 'revision' ) return; // Don't store custom data twice
		$value = implode(',', (array)$value); // If $value is an array, make it a CSV (unlikely)
		if(get_post_meta($post->ID, $key, FALSE)) { // If the custom field already has a value
			update_post_meta($post->ID, $key, $value);
		} else { // If the custom field doesn't have a value
			add_post_meta($post->ID, $key, $value);
		}
		if(!$value) delete_post_meta($post->ID, $key); // Delete if blank
	}
 
}
 
add_action('save_post', 'devinsays_save_events_meta', 1, 2); // save the custom fields

Code for Displaying the Date in a Easy Format

And perhaps add a bit of code that will allow you to display the end date easily on the page:

?View Code PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// Get the Month Abbreviation
 
function devinsays_get_the_month_abbr($month) {
	global $wp_locale;
	for ( $i = 1; $i < 13; $i = $i +1 ) {
				if ( $i == $month )
					$monthabbr = $wp_locale->get_month_abbrev( $wp_locale->get_month( $i ) );
				}
	return $monthabbr;
}
 
// Get the Month Abbreviation
 
function devinsays_get_the_event_date() {
	global $post;
	$eventdate = '';
	$month = get_post_meta($post->ID, '_month', true);
	$eventdate = devinsays_get_the_month_abbr($month);
	$eventdate .= ' ' . get_post_meta($post->ID, '_day', true) . ',';
	$eventdate .= ' ' . get_post_meta($post->ID, '_year', true);
	$eventdate .= ' at ' . get_post_meta($post->ID, '_hour', true);
	$eventdate .= ':' . get_post_meta($post->ID, '_minute', true);
	echo $eventdate;
}

Query Issues

I had originally planned to use the metaboxes to store the event date, rather than using the publish date, but moved to the other route when I realized I’d need another query variable in order to display the posts. But, if you didn’t have many and weren’t worried about a huge amount of database queries, you could always do something like this to display the posts by the meta data:

?View Code PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<?php
 
				$time_adj = current_time('timestamp');
				$current_time = gmdate( 'Y m d H i', $time_adj);
				$current_time = str_replace(' ', '', $current_time);
				?>
 
				<?php           
				$args = array( 'post_type' => 'events',
							   'meta_key' => '_eventtimestamp',
							   'orderby' => 'meta_value',
							   'posts_per_page' => '-1',
							   'order' => 'ASC');
				query_posts($args);		
				?>
 
            <?php if (have_posts()) : ?>
            <?php while (have_posts()) : the_post(); ?>
 
            <?php $event_timestamp = get_post_meta($post->ID, "_eventtimestamp", true); ?>
            <?php if ( ($event_timestamp - $current_time) > 0 ) { ?>
 
            <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
			<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
 
			<div class="entry-meta">
				<span class="meta-prep"><b>Event date:</b></span> <span class="entry-date"><?php devinsays_get_the_event_date(); ?></span>
			</div><!-- .entry-meta -->
 
            <div class="entry-summary">
				<?php the_excerpt(); ?>
 
			</div><!-- .entry-summary -->
		</div><!-- #post-## -->
        
        <?php } ?>
 
        <?php endwhile;
		endif; ?>

What do you think?

I know a lot of people are working on ways to do events well. Ideally a terrific plugin will come along that makes this all very easy. I just wanted to spur the process. If anyone has any comments or improvement for the code, please let me know.

And again, my sample Events TwentyTen theme can be downloaded here.

]]> http://wptheming.com/2010/08/how-to-make-an-events-custom-post-type/feed/ 7 How to Add a Metabox to a Custom Post Type http://wptheming.com/2010/08/custom-metabox-for-post-type/ http://wptheming.com/2010/08/custom-metabox-for-post-type/#comments Thu, 05 Aug 2010 22:50:27 +0000 Devin http://wptheming.com/?p=989 Most custom post types in WordPress will need (or could benefit from) a unique set metaboxes for entering information.

For example, a “photography” post type might need fields for “location of photo”, “type of camera”, etc. And an “event” post type would probably need a “location” and an “event date”.

Metaboxes aren’t the easiest to set up- so I’ve written up this tutorial which shows how to add a one line field for “location” to an “event” post type.

Hopefully, you’ll be able to use this guide to add any sort of metaboxes you need.

Set Up the Post Type

If you are unfamiliar with how to set up custom post types, check out Justin Tadlock’s excellent tutorial. For this example, I am going to use a post type called “Event”, which goes in my functions.php file:

?View Code PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

// Registers the new post type and taxonomy
 
function wpt_event_posttype() {
	register_post_type( 'events',
		array(
			'labels' => array(
				'name' => __( 'Events' ),
				'singular_name' => __( 'Event' ),
				'add_new' => __( 'Add New Event' ),
				'add_new_item' => __( 'Add New Event' ),
				'edit_item' => __( 'Edit Event' ),
				'new_item' => __( 'Add New Event' ),
				'view_item' => __( 'View Event' ),
				'search_items' => __( 'Search Event' ),
				'not_found' => __( 'No events found' ),
				'not_found_in_trash' => __( 'No events found in trash' )
			),
			'public' => true,
			'supports' => array( 'title', 'editor', 'thumbnail', 'comments' ),
			'capability_type' => 'post',
			'rewrite' => array("slug" => "events"), // Permalinks format
			'menu_position' => 5,
			'register_meta_box_cb' => 'add_events_metaboxes'
		)
	);
}
 
add_action( 'init', 'wpt_event_posttype' );

You may have your own custom post type set up completely different, but that’s fine. The important line of code for the metaboxes is ‘register_meta_box_cb’ => ‘add_events_metaboxes’- which calls the function to build the metaboxes.

You can rename the function to whatever you like, for instance ‘register_meta_box_cb’ => ‘add_photography_metaboxes’ might be better for a photography post type.

Add Meta Box

The following code adds a metabox to the right side of the screen under the “Publish” box:

?View Code PHP
1
2
3
4
5

// Add the Events Meta Boxes
 
function add_events_metaboxes() {
	add_meta_box('wpt_events_location', 'Event Location', 'wpt_events_location', 'events', 'side', 'default');
}

You can read the full parameters for add_meta_box in the codex. I also listed them here:

?View Code PHP
1

<?php add_meta_box( $id, $title, $callback, $page, $context, $priority, $callback_args ); ?>

For the example above:

  • $id is “wpt_events_location”- or the html id that will be applied to this metabox.
  • $title is “Event Location”. This appears at the top of the new metabox when displayed.
  • $callback is the function “wpt_events_location” which will load the html into the metabox.
  • $page is “events”, the name of our custom post type.
  • $context is “side”. If you wanted it to load below the content area, you could put “normal”.
  • $priority controls where the metabox will display in relation to the other metaboxes. You can put “high”, “low” or “default”.

If you wanted to have two sets of metaboxes, perhaps one on the side and one below the content area, you could do something like this (Note: Don’t use this if you’re following the tutorial step by step, this is just an example of how it would be done):

?View Code PHP
1
2
3
4
5
6

// Add the Events Meta Boxes
 
function add_events_metaboxes() {
	add_meta_box('wpt_events_date', 'Event Date', 'wpt_events_date', 'events', 'side', 'default');
	add_meta_box('wpt_events_location', 'Event Location', 'wpt_events_location', 'events', 'normal', 'high');
}

You’d then have to make sure the two function wpt_events_date and wpt_events_location were defined to call the html code to go inside the metaboxes.

Generating the HTML for the Metabox

Continuing with the first example above, we’ll now have to generate the code that goes inside our “Event Location” metabox. To keep this as simple as possible, we’re just going to make one field:

?View Code PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// The Event Location Metabox
 
function wpt_events_location() {
	global $post;
 
	// Noncename needed to verify where the data originated
	echo '<input type="hidden" name="eventmeta_noncename" id="eventmeta_noncename" value="' . 
	wp_create_nonce( plugin_basename(__FILE__) ) . '" />';
 
	// Get the location data if its already been entered
	$location = get_post_meta($post->ID, '_location', true);
 
	// Echo out the field
	echo '<input type="text" name="_location" value="' . $location  . '" class="widefat" />';
 
}

At this point you should have a metabox showing up in your post. If you check your “events” post type, it should load on the right side like in the screenshot I posted. This will generate any html you choose, so, you could put as many input fields in here as you like, or html descriptions.

In order to class the inputs and descriptions correctly, check out the source code for other write panels in WordPress. See how they do textareas and select boxes. You can even add icons and generated text in these spots.

Saving

If you had tried to save your metabox data before this point, it just would have disappeared on the refresh because it wasn’t being saved. Here’s the code that updates the metabox when you click “Update” (adapted from Nathan Rice in the AgentPress theme):

?View Code PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

// Save the Metabox Data
 
function wpt_save_events_meta($post_id, $post) {
 
	// verify this came from the our screen and with proper authorization,
	// because save_post can be triggered at other times
	if ( !wp_verify_nonce( $_POST['eventmeta_noncename'], plugin_basename(__FILE__) )) {
	return $post->ID;
	}
 
	// Is the user allowed to edit the post or page?
	if ( !current_user_can( 'edit_post', $post->ID ))
		return $post->ID;
 
	// OK, we're authenticated: we need to find and save the data
	// We'll put it into an array to make it easier to loop though.
 
	$events_meta['_location'] = $_POST['_location'];
 
	// Add values of $events_meta as custom fields
 
	foreach ($events_meta as $key => $value) { // Cycle through the $events_meta array!
		if( $post->post_type == 'revision' ) return; // Don't store custom data twice
		$value = implode(',', (array)$value); // If $value is an array, make it a CSV (unlikely)
		if(get_post_meta($post->ID, $key, FALSE)) { // If the custom field already has a value
			update_post_meta($post->ID, $key, $value);
		} else { // If the custom field doesn't have a value
			add_post_meta($post->ID, $key, $value);
		}
		if(!$value) delete_post_meta($post->ID, $key); // Delete if blank
	}
 
}
 
add_action('save_post', 'wpt_save_events_meta', 1, 2); // save the custom fields

This code checks to make sure the user has privileges to update the post, then saves all the input data into the array $events_meta.

An Additional Example

If we wanted to have additional fields, we’d need to output them in the metabox callback (in this case: wpt_events_location) and make sure they’re saved in the by adding them to the array in wpt_save_events_meta.

This is how you would add an additional field for “dress code”. First, update the function wpt_events_location to:

?View Code PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// The Event Location Metabox
 
function wpt_events_location() {
	global $post;
 
	// Noncename needed to verify where the data originated
	echo '<input type="hidden" name="eventmeta_noncename" id="eventmeta_noncename" value="' . 
	wp_create_nonce( plugin_basename(__FILE__) ) . '" />';
 
	// Get the location data if its already been entered
	$location = get_post_meta($post->ID, '_location', true);
        $dresscode = get_post_meta($post->ID, '_dresscode', true);
 
	// Echo out the field
        echo '<p>Enter the location:</p>';
	echo '<input type="text" name="_location" value="' . $location  . '" class="widefat" />';
        echo '<p>How Should People Dress?</p>';
        echo '<input type="text" name="_dresscode" value="' . $dresscode  . '" class="widefat" />';
 
}

Now add the extra array item to wpt_save_events_meta- so it looks like this:

?View Code PHP
1
2

$events_meta['_location'] = $_POST['_location'];
$events_meta['_dresscode'] = $_POST['_dresscode'];

Displaying the Metabox Information in a Template

To display the metabox information in your page templates, you’ll need to fetch the metabox data stored in the post. If you’re inside the loop, you would do it like this:

?View Code PHP
1

<?php echo get_post_meta($post->ID, "_location", true); ?>

More information about this is available in the codex: http://codex.wordpress.org/Function_Reference/get_post_meta

Other Tutorials

There’s a few other tutorials on the web that have been extremely helpful for figuring this stuff out. One of the best is: How to Create a Better Meta Box in WordPress.

Please share the code and enjoy.

]]> http://wptheming.com/2010/08/custom-metabox-for-post-type/feed/ 9 Adding Columns to the WP Edit Pages http://wptheming.com/2010/07/column-edit-pages/ http://wptheming.com/2010/07/column-edit-pages/#comments Sat, 31 Jul 2010 22:47:51 +0000 Devin http://wptheming.com/?p=971 A couple weeks ago I released the Portfolio Theme, which uses custom post types to display images and portfolio information. Since the featured image is a key component of the post type, I wanted a way to display that from the post dashboard- along with the title, taxonomy, author, comments, and post date.

I couldn’t find any code snippets available that did exactly what I wanted, but I did get close with WP Engineer’s post about adding thumbnails to post and pages and Shiba’s post about adding custom post type columns.

You’re welcome to download the Portfolio Theme and see how all the code was included. The code below is just the specific part about adding columns to edit screen.

Note, I already have a custom post type “portfolio” built. If you wanted to use these columns with a “art” post type for instance, you would need to swap out the name.

?View Code PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

//  Add Columns to Portfolio Edit Screen
 
add_filter("manage_edit-portfolio_columns", "portfolio_edit_columns");
 
add_action("manage_posts_custom_column",  "portfolio_columns_display", 10, 2);
 
add_theme_support( 'post-thumbnails', array( 'portfolio' ) );
 
function portfolio_edit_columns($portfolio_columns){
	$portfolio_columns = array(
		"cb" => "<input type=\"checkbox\" />",
		"title" => _x('Title', 'column name'),
		"thumbnail" => __('Thumbnail'),
		"portfolio-tags" => __('Tags'),
		"author" => __('Author'),
		"comments" => __('Comments'),
		"date" => __('Date'),
	);
	$portfolio_columns['comments'] = '<div class="vers"><img alt="Comments" src="' . esc_url( admin_url( 'images/comment-grey-bubble.png' ) ) . '" /></div>';
	return $portfolio_columns;
}
 
function portfolio_columns_display($portfolio_columns, $post_id){
	switch ($portfolio_columns)
	{
		// Code from: http://wpengineer.com/display-post-thumbnail-post-page-overview
 
		case "thumbnail":
			$width = (int) 35;
			$height = (int) 35;
				$thumbnail_id = get_post_meta( $post_id, '_thumbnail_id', true );
				// image from gallery
				$attachments = get_children( array('post_parent' => $post_id, 'post_type' => 'attachment', 'post_mime_type' => 'image') );
				if ($thumbnail_id)
					$thumb = wp_get_attachment_image( $thumbnail_id, array($width, $height), true );
				elseif ($attachments) {
					foreach ( $attachments as $attachment_id => $attachment ) {
						$thumb = wp_get_attachment_image( $attachment_id, array($width, $height), true );
					}
				}
					if ( isset($thumb) && $thumb ) {
						echo $thumb;
					} else {
						echo __('None');
					}
			break;	
		case "portfolio-tags":
			if ($tag_list = get_the_term_list( $post->ID, 'portfolio-tags', '', ', ', '' ) ) {
				echo $tag_list;
			} else {
					echo __('None');
				}
			break;			
	}
}
]]> http://wptheming.com/2010/07/column-edit-pages/feed/ 0 Browser Body Classes in WordPress http://wptheming.com/2010/07/browser-body-classes/ http://wptheming.com/2010/07/browser-body-classes/#comments Tue, 20 Jul 2010 17:48:55 +0000 Devin http://wptheming.com/?p=947 You should be able to add this code to any WordPress site. It extends the default body classes to include browser detection. So, if you want to add a specific style for IE6, you can just class it like .ie6 #mydiv { }. I think it’s more elegant than pulling up multiple stylesheets for all the different browsers.

If the code doen’t work right off the bat, make sure your theme uses the body_class() function. Your body tag should look something like this:

?View Code PHP
1

<body <?php body_class(); ?>>


Browser Body Classes Code

?View Code PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

<?php
 
/**
 * Extends the body_class(); to include browser detection
 * Props to Thematic: http://wordpress.org/extend/themes/thematic
 */
 
function browser_body_class($classes) {
 
	// A little Browser detection shall we?
	$browser = $_SERVER[ 'HTTP_USER_AGENT' ];
 
	// Mac, PC ...or Linux
	if ( preg_match( "/Mac/", $browser ) ){
		$classes[] = 'mac';
 
	} elseif ( preg_match( "/Windows/", $browser ) ){
		$classes[] = 'windows';
 
	} elseif ( preg_match( "/Linux/", $browser ) ) {
		$classes[] = 'linux';
 
	} else {
		$classes[] = 'unknown-os';
	}
 
	// Checks browsers in this order: Chrome, Safari, Opera, MSIE, FF
	if ( preg_match( "/Chrome/", $browser ) ) {
		$classes[] = 'chrome';
 
		preg_match( "/Chrome\/(\d.\d)/si", $browser, $matches);
		$classesh_version = 'ch' . str_replace( '.', '-', $matches[1] );      
		$classes[] = $classesh_version;
 
	    } elseif ( preg_match( "/Safari/", $browser ) ) {
			$classes[] = 'safari';
 
			preg_match( "/Version\/(\d.\d)/si", $browser, $matches);
			$sf_version = 'sf' . str_replace( '.', '-', $matches[1] );      
			$classes[] = $sf_version;
 
	     } elseif ( preg_match( "/Opera/", $browser ) ) {
			$classes[] = 'opera';
 
			preg_match( "/Opera\/(\d.\d)/si", $browser, $matches);
			$op_version = 'op' . str_replace( '.', '-', $matches[1] );      
			$classes[] = $op_version;
 
	     } elseif ( preg_match( "/MSIE/", $browser ) ) {
			$classes[] = 'msie';
 
			if( preg_match( "/MSIE 6.0/", $browser ) ) {
				$classes[] = 'ie6';
			} elseif ( preg_match( "/MSIE 7.0/", $browser ) ){
				$classes[] = 'ie7';
			} elseif ( preg_match( "/MSIE 8.0/", $browser ) ){
				$classes[] = 'ie8';
			} elseif ( preg_match( "/MSIE 9.0/", $browser ) ){
				$classes[] = 'ie9';
			}
 
	        } elseif ( preg_match( "/Firefox/", $browser ) && preg_match( "/Gecko/", $browser ) ) {
				$classes[] = 'firefox';
 
				preg_match( "/Firefox\/(\d)/si", $browser, $matches);
				$ff_version = 'ff' . str_replace( '.', '-', $matches[1] );      
				$classes[] = $ff_version;
 
	        } else {
				$classes[] = 'unknown-browser';
	        }
 
	return $classes;
}
 
add_filter('body_class','browser_body_class');
 
?>

I’ve been trying to add mobile detection as well, but haven’t yet had any luck. Any ideas why the following wouldn’t work?

?View Code PHP
1
2

} elseif ( preg_match( "/iPhone/", $browser ) ){
		$classes[] = 'iPhone';
]]> http://wptheming.com/2010/07/browser-body-classes/feed/ 4 How to Edit the Text of Any Website http://wptheming.com/2010/07/edit-the-text-of-any-website/ http://wptheming.com/2010/07/edit-the-text-of-any-website/#comments Tue, 20 Jul 2010 05:16:31 +0000 Devin http://wptheming.com/?p=940 If you type the following javascript code snippet into your navigation bar, you should be able to edit any text on the page:

?View Code JAVASCRIPT
javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

Video Demo

Click here to view the embedded video.

I learned this neat little trick from Matt Thompson at the last Refresh Austin.

]]> http://wptheming.com/2010/07/edit-the-text-of-any-website/feed/ 2 Portfolio Theme http://wptheming.com/2010/07/portfolio-theme/ http://wptheming.com/2010/07/portfolio-theme/#comments Sun, 18 Jul 2010 04:57:43 +0000 Devin http://wptheming.com/?p=926 portfolio pages, takes advantage of the new menu navigation, and includes a ton of neat features.]]> I’m proud to announce a new html5 portfolio theme. It uses custom post types for portfolio pages, takes advantage of the new menu navigation, and includes a ton of neat features. Here’s a video screencast of how it works:

Click here to view the embedded video.

Download It | Demo It

The theme just got included in the WordPress Themes Directory. You can demo it here. Or download a copy and try it out.

Examples of the Portfolio Theme in Action

Peter Bergting – Comic Book Artist and Writer

What’s New in Version 0.4

  • Changed title filter priority in simple-custom-post-type-archives.php
  • Added better handling for the Simple Custom Post Type Archives plugin
  • Updated the menu_postion for the portfolio post type
  • Combined the portfolio post type and custom taxonomy into the same init hook
  • Added better labels to the portfolio post type
  • Updated the hover states on the menu to use stop(true)
  • Added thumbnails and taxonomy tags to the column view for portfolio post type
  • Added an icon to the portfolio post type

Credits

Portfolio was built on the solid foundation of Toolbox:
http://wordpress.org/extend/themes/toolbox

Styles, especially the menus and buttons, were inspired by Canvas:
http://www.woothemes.com/2010/02/canvas/

Jquery rollovers for portfolio items was based on code by:
http://graphpaperpress.com/themes/workspace/

Uses Custom Post Type Archives plugin to enable portfolio paging and permalinks:
http://www.cmurrayconsulting.com/software/wordpress-custom-post-type-archives/

Special Thanks

Also, special thanks to Michael Fields and Jake M Gold who helped test the theme and gave excellent feedback + code suggestions.

Instructions and Common Questions

How to Set Up a Portfolio Item:

When you activate the Portfolio Theme, you will see a new post type called “Portfolio”. Click “Add New Item” and you will be taken to the edit page where you can add a title, description, and tags for your portfolio piece.

To add the portfolio image, click “Set featured image” on the right side of the screen beneath “Portfolio Tags”. This will take you to the media uploader to add your image. When you finish, click “Use as Featured Image”.

404 Errors:

This theme uses custom post types. If you are getting a 404 error when you try and view the portfolio posts, reset your permalinks. You can do this by going to “Settings > Permalinks” and re-saving the permalink structure.

Portfolio Items Disappear:

If you change themes, chances are your portfolio pieces will disappear from the dashboard. Fear not! They are still saved in the database- your new theme just wasn’t programmed to list and display them.

If you are handy with code, you can just copy the two extensions “portfolio-post-type.php” and “simple-custom-post-type-archives.php” into your new theme and call them from the functions.php file. You’ll also have to build new template files to display the custom post types in your theme. If coding isn’t your thing, you could hire a WordPress developer to help you out with the project.

How do I change the size of the thumbnail images?

At some point I will probably make theme options for this, but for now you’ll have to do this through the code. Open the file portfolio-post-type.php in the “extensions” folder, and fine the line of code that says: add_image_size( ‘portfolio-thumbnail’, 215, 175, true );. The first number “215″ is the width- the second number “175″ is the height. Note, that there is a clear div generated every 3 items to start the next row- so if you change this to only have two items across, you’ll also need to update that code in type-portfolio.php.

Can I stop the featured image showing in double in the portfolio?

The featured image should not show up twice in the single post view. Make sure that you didn’t accidentally insert the image into the post (it pulls automatically). If you want to manually insert the images and put whatever content you want into the post- delete these lines from single-portfolio.php:

?View Code PHP
34
35
36

<?php if (has_post_thumbnail()) {
     the_post_thumbnail('large');
 }?>

Can I display my portfolio items in with my regular posts?

Yes, but you’ll just need to update the query call on every template where you want both to appear. See Justin Tadlock’s article about this. The intention of this theme was to have them live separately.

Can I change the permalink slug from “portfolio” to a name of my own choosing?

If you know a little about how custom post types work it shouldn’t be that difficult. You’d need to change the registered post type from “portfolio” to something like “art” (for example), and update the labels and queries. Perhaps in a later version of the theme I’ll make an option for this, but for now you’ll have to dig through the code a bit or hire someone to make the needed changes.

]]> http://wptheming.com/2010/07/portfolio-theme/feed/ 39 Woo Real Estate Speculation http://wptheming.com/2010/07/woo-real-estate-speculation/ http://wptheming.com/2010/07/woo-real-estate-speculation/#comments Thu, 15 Jul 2010 16:25:09 +0000 Devin http://wptheming.com/?p=909 Real Estate theme in the next 6-8 weeks. I know there's a huge need for this- because I've built one based off the Canvas framework for a client. Here's a screencast showing the theme.]]> Woo Themes announced that they are coming out with a new Real Estate theme in the next 6-8 weeks. I’ve built multiple real estate sites for clients, so I know there’s a strong demand for this. In fact, I recently built one of my own based on Woo Theme’s Canvas (affiliate).

How a Real Estate Theme Might Work

Any new real estate theme in WordPress will be taking advantage of custom post types for property listings and meta boxes to list the property details. Here’s a walkthrough of the real estate theme I built, and my speculations on how the new Woo Theme might work:

Click here to view the embedded video.

The service this theme was built for will be launched in the next few weeks at REI Theme.

]]> http://wptheming.com/2010/07/woo-real-estate-speculation/feed/ 5 Custom Post Type Resources http://wptheming.com/2010/07/custom-post-type-resources/ http://wptheming.com/2010/07/custom-post-type-resources/#comments Fri, 02 Jul 2010 01:05:28 +0000 Devin http://wptheming.com/?p=859 The ability to create custom post types was a great feature added in WordPress 2.9 and then expanded in 3.0. It allows us to create completely different types of content than the standard “Pages” and “Posts” we’re all used to.

To get started with custom post types, here’s my recommended list of links and resources:

General Overview of Custom Post Types

Custom post types in WordPress

Justin Tadlock has the best all around reference guide for building custom post types. This article has several code snippets and in-depth explanations of how to build custom post types, add taxomonies, and display the posts on your site. There’s also a follow-up article explaining how to display the custom post types on your home page.

Custom Post Types by WP Engineer

WP Engineer does really solid posts about new WordPress features. This one has a list of the arguments you might need when setting up a custom post type array.

WordPress Codex for Custom Post Types

The WordPress codex has basic reference for custom post types.

Adding Meta Boxes to Custom Post Types

When you create a custom post type, you are able to specify which metaboxes are available on the edit screen. The metaboxes generally included with the post are title, content, excerpt, and custom fields.

But if you’re using the post types in new or interesting way, you’ll likely need more custom metaboxes. For instance, if you were making a real estate web site, you’d probably want the “Properties” custom post type to have boxes for entering the address, list price, amount of bedrooms, etc. To add these, you’ll need to create new custom meta boxes.

How to create a Meta Box

There’s several tutorials out there for creating custom meta boxes, and most of them will work for custom post types- even if it was written before WordPress 3.0 came out. This post by Deluxe Blog Tips in the most in-depth and well documented one I’ve found.

I’ve also found it helpful to look at the code from premium theme developers like WooThemes. They have some really nice custom meta areas that are added to posts. You can download one of their free themes if you want to see how those are built.

Custom Taxonomies

A Refresher on Custom Taxonomies

You won’t be using custom post types for long before you realize there needs to be a way to organize them. Pages and posts currently use categories and tags as taxonomies- but if you were making a post type called “Movies”, it might make sense to build a taxonomy for “Actors” to tag your posts in. This article by Justin Tadlock has code examples and explanations for using taxonomies.

In Depth Explanation of Taxonomies

If you still don’t quite understand what taxonomies are, I’d recommend checking out this article by Michael Fields. There’s also an entertaining screencast that explains what a taxonomy is and how you might use one.

Other Tutorials

Voosh Themes has a terrific tutorial for creating a professional portfolio using custom post types.

Plug-Ins for Managing Custom Post Types

Simple Custom Post Type Archives

One problem with custom post types is a lack of templates. Out of the box, WordPress only has support for single-customposttype.php. If you have archives, or want a multiple listing, you’ll need to build the template redirects in or use a page template. Jake Goldman built a plug-in to handle this issue. Michael Fields wrote an article and code snippet to address it. And Matt Weibe has a plugin that’s not in the repository, but also handles the issues of redirects.

Convert Post Types

Perhaps you have a lot of posts on your site, let’s say for a portfolio, that you now want to convert into a custom post type. Rather than copying everything over by hand, you could use this handy plug-in. It’s also hosted in the WordPress repository.

Custom Post Type UI

If you’re unfamiliar with PHP code, you can still add custom post types to your site. Brad Williams of WebDevStudios made a nice user interface that allows you to set up the custom post types and define the taxonomies, all from the comfort of your WordPress dashboard.

Themes and Plugins That Use Custom Post Types

I expect we’ll see gallery, podcasting, and real estate themes soon- along with plugins for calendars, forums and e-commerce.

Estate

Estate is a real estate theme by Woo Themes (affiliate link) that uses custom post types for property listings.

Portfolio Theme

Portfolio Theme is a free GPL theme that I’ve released. You can add various images to your portfolio post type to display them on your site. It’s excellent for artists or web designers. Feel free to look at the code and use it for your own projects.

WP E-Commerce

The WP-Ecommerce Plugin is scheduled to use custom post types in their next release.

WP Bids

WP Bids uses a custom post type to generate client proposals and job estimates.

TBTestimonials

Manage your client testimonials with Custom Post Types. There’s even a spiffy widget.

Add Your Own Links

There’s still a lot of work being developed for custom post types. If you notice a new tutorial, theme or plugin that I haven’t mentioned, please add it to the comments so I can put it in the post.

]]> http://wptheming.com/2010/07/custom-post-type-resources/feed/ 12 Custom Post Types with Woo Themes http://wptheming.com/2010/07/woo-custom-post-type/ http://wptheming.com/2010/07/woo-custom-post-type/#comments Thu, 01 Jul 2010 21:25:11 +0000 Devin http://wptheming.com/?p=853 If you’re building a custom post type for a Woo Theme, there’s actually a lot of styles and functions you can use so your meta boxes match the Woo styling and work in the same way that Woo Custom Meta boxes do.

The code snippets below will build a video post type with a taxonomy, complete with custom meta boxes for adding additional information specific to the post type.

If you are looking for more information on how custom post types work, I’d highly recommend Justin Tadlock’s post on using Custom Post Types in WordPress.

Create a New File for You Custom Post Type Code

There’s a lot of code here, so I would add this line to your the functions file of your child theme:

?View Code PHP
1
2
3
4
5

/*-----------------------------------------------------------------------------------*/
// Create Custom Post Types
/*-----------------------------------------------------------------------------------*/
 
require_once(STYLESHEETPATH . '/extensions/video-post-type.php');

Add the Code for Making the Custom Post Type

Then create a folder called “extensions” in your child theme directory, and make a new file called “video-post-type.php”. In that file add this code:

?View Code PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355

<?php
/*
Plugin Name: Video Post Types
Plugin URI: http://www.wptheming.com
Description: Video post types for WordPress 3.0 and above.
Author: Devin Price
Version: 0.1
Author URI: http://wptheming.com
*/
 
/*-----------------------------------------------------------------------------------*/
// This plug-in adds a custom post type called "videos"
//
// To run properly this plug-in should be used with Canvas by Woo Themes
// http://www.woothemes.com/2010/02/canvas/
//
// You can use a plug-in to create additional templates to display the post type.  Try:
// http://www.cmurrayconsulting.com/software/wordpress-custom-post-type-archives/
//
//  Use echo get_post_meta($post->ID, "examplemetadata", true); to call the meta data
//  within the post templates.
/*-----------------------------------------------------------------------------------*/
 
 
/*-----------------------------------------------------------------------------------*/
// Registers the Video Post Types
/*-----------------------------------------------------------------------------------*/
 
function wpt_video_posttype() {
	register_post_type( 'videos',
		array(
			'label' => __('Videos'),
			'singular_label' => __('Video'),
			'public' => true,
			'supports' => array( 'title', 'editor', 'excerpt', 'thumbnail' ),
			'capability_type' => 'post',
			'rewrite' => array('slug' => 'videos'), // Permalinks format
			'query_var' => 'videos', // This goes to the WP_Query schema
		)
	);
}
 
add_action( 'init', 'wpt_video_posttype' );
 
/*-----------------------------------------------------------------------------------*/
// Adds Custom Post Support for Thumbnails
/*-----------------------------------------------------------------------------------*/
 
add_theme_support( 'post-thumbnails', array( 'videos' ) );
 
add_image_size( 'video-thumbnails', 230, 115, true );
 
/*-----------------------------------------------------------------------------------*/
// Build the Taxonomies
/*-----------------------------------------------------------------------------------*/
 
add_action( 'init', 'wpt_create_db_taxonomies', 0 );
 
function wpt_create_db_taxonomies() {
	register_taxonomy( 'video-category', 'videos', array( 'hierarchical' => true, 'label' => 'Video Categories', 'query_var' => true, 'rewrite' => true ) );
	register_taxonomy( 'video-tag', 'videos', array( 'hierarchical' => false, 'label' => 'Video Tags', 'query_var' => true, 'rewrite' => true ) );
	}
 
/*-----------------------------------------------------------------------------------*/
// Adds Meta Boxes to Video Edit Screen
// Relies on Canvas specific functions
/*-----------------------------------------------------------------------------------*/
 
function video_content_metabox_add() {
    if ( function_exists('add_meta_box') ) {
        add_meta_box('woothemes-video-settings','Video Settings','video_posts_metabox_create','videos','normal');
		add_meta_box('woothemes-settings',get_option('woo_themename').' Custom Settings','woothemes_metabox_create','videos','normal');
    }
}
 
add_action('admin_menu', 'video_content_metabox_add'); // Triggers video_posts_metabox_create
 
/*-----------------------------------------------------------------------------------*/
// Custom fields for WP write panel
// This code is protected under Creative Commons License: http://creativecommons.org/licenses/by-nc-nd/3.0/
//
//  This was duplicated from functions/admin-custom.php to load the new metabox
/*-----------------------------------------------------------------------------------*/
 
function video_posts_metabox_create() {
    global $post;
	$woo_metaboxes = get_option('woo_video_template');  
    $output = '';
    $output .= '<table class="woo_metaboxes_table">'."\n";
    foreach ($woo_metaboxes as $woo_id => $woo_metabox) {
    if(        
                $woo_metabox['type'] == 'text' 
		OR      $woo_metabox['type'] == 'select' 
		OR      $woo_metabox['type'] == 'checkbox' 
		OR      $woo_metabox['type'] == 'textarea'
		OR      $woo_metabox['type'] == 'calendar'
		OR      $woo_metabox['type'] == 'radio'
		OR      $woo_metabox['type'] == 'images') {
            $woo_metaboxvalue = get_post_meta($post->ID,$woo_metabox["name"],true);
			}
 
            if (empty($woo_metaboxvalue) && isset($woo_metabox['std'])) {
                $woo_metaboxvalue = $woo_metabox['std'];
            }
 
            if($woo_metabox['type'] == 'text'){
 
                $output .= "\t".'<tr>';
                $output .= "\t\t".'<th class="woo_metabox_names"><label for="'.$woo_id.'">'.$woo_metabox['label'].'</label></th>'."\n";
                $output .= "\t\t".'<td><input class="woo_input_text" type="'.$woo_metabox['type'].'" value="'.$woo_metaboxvalue.'" name="woothemes_'.$woo_metabox["name"].'" id="'.$woo_id.'"/>';
                $output .= '<span class="woo_metabox_desc">'.$woo_metabox['desc'].'</span></td>'."\n";
                $output .= "\t".'<td></td></tr>'."\n";  
 
            }
 
            elseif ($woo_metabox['type'] == 'textarea'){
 
                $output .= "\t".'<tr>';
                $output .= "\t\t".'<th class="woo_metabox_names"><label for="'.$woo_metabox.'">'.$woo_metabox['label'].'</label></th>'."\n";
                $output .= "\t\t".'<td><textarea class="woo_input_textarea" name="woothemes_'.$woo_metabox["name"].'" id="'.$woo_id.'">' . $woo_metaboxvalue . '</textarea>';
                $output .= '<span class="woo_metabox_desc">'.$woo_metabox['desc'].'</span></td>'."\n";
                $output .= "\t".'<td></td></tr>'."\n";  
 
            }
 
            elseif ($woo_metabox['type'] == 'calendar'){
 
                $output .= "\t".'<tr>';
                $output .= "\t\t".'<th class="woo_metabox_names"><label for="'.$woo_metabox.'">'.$woo_metabox['label'].'</label></th>'."\n";
                $output .= "\t\t".'<td><input class="woo_input_calendar" type="text" name="woothemes_'.$woo_metabox["name"].'" id="'.$woo_id.'" value="'.$woo_metaboxvalue.'">';
                $output .= '<span class="woo_metabox_desc">'.$woo_metabox['desc'].'</span></td>'."\n";
                $output .= "\t".'<td></td></tr>'."\n";  
 
            }
 
            elseif ($woo_metabox['type'] == 'select'){
 
                $output .= "\t".'<tr>';
                $output .= "\t\t".'<th class="woo_metabox_names"><label for="'.$woo_id.'">'.$woo_metabox['label'].'</label></th>'."\n";
                $output .= "\t\t".'<td><select class="woo_input_select" id="'.$woo_id.'" name="woothemes_'. $woo_metabox["name"] .'">';
                $output .= '<option value="">Select to return to default</option>';
 
                $array = $woo_metabox['options'];
 
                if($array){
 
                    foreach ( $array as $id => $option ) {
                        $selected = '';
 
                        if(isset($woo_metabox['default']))  {                            
							if($woo_metabox['default'] == $option && empty($woo_metaboxvalue)){$selected = 'selected="selected"';} 
							else  {$selected = '';}
						}
 
                        if($woo_metaboxvalue == $option){$selected = 'selected="selected"';}
                        else  {$selected = '';}  
 
                        $output .= '<option value="'. $option .'" '. $selected .'>' . $option .'</option>';
                    }
                }
 
                $output .= '</select><span class="woo_metabox_desc">'.$woo_metabox['desc'].'</span></td></td><td></td>'."\n";
                $output .= "\t".'</tr>'."\n";
            }
 
            elseif ($woo_metabox['type'] == 'checkbox'){
 
                if($woo_metaboxvalue == 'true') { $checked = ' checked="checked"';} else {$checked='';}
 
                $output .= "\t".'<tr>';
                $output .= "\t\t".'<th class="woo_metabox_names"><label for="'.$woo_id.'">'.$woo_metabox['label'].'</label></th>'."\n";
                $output .= "\t\t".'<td><input type="checkbox" '.$checked.' class="woo_input_checkbox" value="true"  id="'.$woo_id.'" name="woothemes_'. $woo_metabox["name"] .'" />';
                $output .= '<span class="woo_metabox_desc" style="display:inline">'.$woo_metabox['desc'].'</span></td></td><td></td>'."\n";
                $output .= "\t".'</tr>'."\n";
            }
 
            elseif ($woo_metabox['type'] == 'radio'){
 
            $array = $woo_metabox['options'];
 
            if($array){
 
            $output .= "\t".'<tr>';
            $output .= "\t\t".'<th class="woo_metabox_names"><label for="'.$woo_id.'">'.$woo_metabox['label'].'</label></th>'."\n";
            $output .= "\t\t".'<td>';
 
                foreach ( $array as $id => $option ) {
 
                    if($woo_metaboxvalue == $id) { $checked = ' checked';} else {$checked='';}
 
                        $output .= '<input type="radio" '.$checked.' value="' . $id . '" class="woo_input_radio"  name="woothemes_'. $woo_metabox["name"] .'" />';
                        $output .= '<span class="woo_input_radio_desc" style="display:inline">'. $option .'</span><div class="woo_spacer"></div>';
                    }
                    $output .=  '</td></td><td></td>'."\n";
                    $output .= "\t".'</tr>'."\n";    
                 }
            }
			elseif ($woo_metabox['type'] == 'images')
			{
 
			$i = 0;
			$select_value = '';
			$layout = '';
 
			foreach ($woo_metabox['options'] as $key => $option) 
				 { 
				 $i++;
 
				 $checked = '';
				 $selected = '';
				 if($woo_metaboxvalue != '') {
				 	if ($woo_metaboxvalue == $key) { $checked = ' checked'; $selected = 'woo-meta-radio-img-selected'; }
				 } 
				 else {
				 	if ($option['std'] == $key) { $checked = ' checked'; } 
					elseif ($i == 1) { $checked = ' checked'; $selected = 'woo-meta-radio-img-selected'; }
					else { $checked=''; }
 
				 }
 
					$layout .= '<div class="woo-meta-radio-img-label">';			
					$layout .= '<input type="radio" id="woo-meta-radio-img-' . $woo_metabox["name"] . $i . '" class="checkbox woo-meta-radio-img-radio" value="'.$key.'" name="woothemes_'. $woo_metabox["name"].'" '.$checked.' />';
					$layout .= '&nbsp;' . $key .'<div class="woo_spacer"></div></div>';
					$layout .= '<img src="'.$option.'" alt="" class="woo-meta-radio-img-img '. $selected .'" onClick="document.getElementById(\'woo-meta-radio-img-'. $woo_metabox["name"] . $i.'\').checked = true;" />';
				}
 
			$output .= "\t".'<tr>';
			$output .= "\t\t".'<th class="woo_metabox_names"><label for="'.$woo_id.'">'.$woo_metabox['label'].'</label></th>'."\n";
			$output .= "\t\t".'<td class="woo_metabox_fields">';
			$output .= $layout;
			$output .= '<span class="woo_metabox_desc">'.$woo_metabox['desc'].'</span></td></td><td></td>'."\n";
			$output .= '</td>'."\n";
			$output .= "\t".'</tr>'."\n";
 
			}
 
            elseif($woo_metabox['type'] == 'upload')
            {
				if(isset($woo_metabox["default"])) $default = $woo_metabox["default"];
				else $default = '';
 
                $output .= "\t".'<tr>';
                $output .= "\t\t".'<th class="woo_metabox_names"><label for="'.$woo_id.'">'.$woo_metabox['label'].'</label></th>'."\n";
                $output .= "\t\t".'<td class="woo_metabox_fields">'. woothemes_uploader_custom_fields($post->ID,$woo_metabox["name"],$default,$woo_metabox["desc"]);
                $output .= '</td>'."\n";
                $output .= "\t".'</tr>'."\n";
 
            }
        }
 
    $output .= '</table>'."\n\n";
    echo $output;
}
 
 
/*-----------------------------------------------------------------------------------*/
// Adds the Video Metabox Options
/*-----------------------------------------------------------------------------------*/
 
add_action('admin_head','video_add_custom');
 
function video_add_custom() {
 
	// Video Metabox Options
	$video_metaboxes = array(
 
	"thumbail" => array (
		"name" => "thumbnail",
		"label" => "Video Thumbnail",
		"type" => "upload",
		"desc" => "Upload file here..."
	),
	"videoembed" => array (
		"name" => "videoembed",
		"label" => "Video Embed Code",
		"type" => "textarea",
		"desc" => "This will be used on the video post page."
	),
 
);
 
update_option('woo_video_template',$video_metaboxes); 
 
}
 
/*-----------------------------------------------------------------------------------*/
// Saves the metabox fields to the WooTheme Options
// Duplicates the woothemes function woothemes_metabox_handle ()
/*-----------------------------------------------------------------------------------*/
 
function video_metabox_handle(){   
 
    global $globals;
    $woo_metaboxes = get_option('woo_video_template');
 
    if(isset($_POST['post_ID']))
		$pID = $_POST['post_ID'];
    $upload_tracking = array();
 
 
    if (isset($_POST['action']) && $_POST['action'] == 'editpost'){                                   
        foreach ($woo_metaboxes as $woo_metabox) { // On Save.. this gets looped in the header response and saves the values submitted
            if($woo_metabox['type'] == 'text' 
			OR $woo_metabox['type'] == 'calendar' 
			OR $woo_metabox['type'] == 'select' 
			OR $woo_metabox['type'] == 'radio'
			OR $woo_metabox['type'] == 'checkbox' 
			OR $woo_metabox['type'] == 'textarea' 
			OR $woo_metabox['type'] == 'images' ) // Normal Type Things...
                {
                    $var = "woothemes_".$woo_metabox["name"];
                    if (isset($_POST[$var])) {            
                        if( get_post_meta( $pID, $woo_metabox["name"] ) == "" )
                            add_post_meta($pID, $woo_metabox["name"], $_POST[$var], true );
                        elseif($_POST[$var] != get_post_meta($pID, $woo_metabox["name"], true))
                            update_post_meta($pID, $woo_metabox["name"], $_POST[$var]);
                        elseif($_POST[$var] == "") {
                           delete_post_meta($pID, $woo_metabox["name"], get_post_meta($pID, $woo_metabox["name"], true));
                        }
                    }
                    elseif(!isset($_POST[$var]) && $woo_metabox['type'] == 'checkbox') { 
                        update_post_meta($pID, $woo_metabox["name"], 'false'); 
                    }      
                    else {
                          delete_post_meta($pID, $woo_metabox["name"], get_post_meta($pID, $woo_metabox["name"], true)); // Deletes check boxes OR no $_POST
                    }    
                }
 
            elseif($woo_metabox['type'] == 'upload') // So, the upload inputs will do this rather
                {
                $id = $woo_metabox['name'];
                $override['action'] = 'editpost';
                    if(!empty($_FILES['attachement_'.$id]['name'])){ //New upload          
                           $uploaded_file = wp_handle_upload($_FILES['attachement_' . $id ],$override); 
                           $uploaded_file['option_name']  = $woo_metabox['label'];
                           $upload_tracking[] = $uploaded_file;
                           update_post_meta($pID, $id, $uploaded_file['url']);
                    }
                    elseif(empty( $_FILES['attachement_'.$id]['name']) && isset($_POST[ $id ])){
                        update_post_meta($pID, $id, $_POST[ $id ]); 
                    }
                    elseif($_POST[ $id ] == '')  { delete_post_meta($pID, $id, get_post_meta($pID, $id, true));
                    }
                }
               // Error Tracking - File upload was not an Image
               update_option('woo_custom_upload_tracking', $upload_tracking);
            }
 
        }
}
 
add_action('edit_post', 'video_metabox_handle');
 
 
?>

Displaying That Information in a Template

Great. Now you’ve got the new video post type built, along with meta boxes for the video embed code and a thumbnail image. To display the video when you visit go to that custom post type, you could create a new template called single-video.php- and paste the following:

?View Code PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

<?php get_header(); ?>
 
    <!-- #content Starts -->
	<?php woo_content_before(); ?>
    <div id="content" class="col-full">
 
    	<div id="main-sidebar-container">    
 
            <!-- #main Starts -->
            <?php woo_main_before(); ?>
            <div id="main">
 
                <?php if (have_posts()) : $count = 0; ?>
                <?php while (have_posts()) : the_post(); $count++; ?>
 
                <div class="videoembed">
 
                <?php
 
				$video_embed_code =  get_post_meta($post->ID, "videoembed", true);
 
				if (!empty($video_embed_code)) {
 
                	echo $video_embed_code;
 
                } else {
 
    				the_post_thumbnail( array(640,9999) );
 
				} ?>
 
                </div>
 
                 <!-- Post Starts -->
                <?php woo_post_before(); ?>
 
 
 
                <div <?php post_class(); ?>>
 
 
                    <?php woo_post_inside_before(); ?>
 
 
                    <h1 class="title"><?php the_title(); ?></h1>
 
                    <div class="entry">
 
 
                        <?php the_content(); ?>
 
 
       			    <div class="clear"></div>
 
                    </div><!-- /.entry -->
 
                    <?php edit_post_link( __('{ Edit }', 'woothemes'), '<span class="small">', '</span>' ); ?>
 
                    <?php woo_post_inside_after(); ?>
 
                </div><!-- /.post -->
                <?php woo_post_after(); ?>
 
                <?php $comm = get_option('woo_comments'); if ( 'open' == $post->comment_status && ($comm == "page" || $comm == "both") ) : ?>
                    <?php comments_template(); ?>
                <?php endif; ?>
 
            <?php endwhile; else: ?>
                <div class="post">
                    <p><?php _e('Sorry, no posts matched your criteria.', 'woothemes') ?></p>
                </div><!-- /.post -->
            <?php endif; ?>  
 
            </div><!-- /#main -->
            <?php woo_main_after(); ?>
 
            <?php get_sidebar(); ?>
 
		</div><!-- /#main-sidebar-container -->         

		<?php get_sidebar('alt'); ?>
 
    </div><!-- /#content -->
	<?php woo_content_after(); ?>
 
<?php get_footer(); ?>

In this code I duplicated a lot of the WooThemes functions so that I could alter them in the child theme. If you don’t want to duplicate the code, you could just build the meta boxes directly into the panel rather than relying on the WooThemes code. Read this post from Dulexe Blog Tips for more information on how to do this.

]]> http://wptheming.com/2010/07/woo-custom-post-type/feed/ 2