Voodoo Press

I have taken a liking lately to Yoast’s SEO plugin.  So far, it just plain works.  Now I am not the type of guy to worry too much about this stuff.  I apply little tweaks here and there and maybe it helps.  But the plugin offers a lot of things I like, like bread crumbs, and easy access to my .htaccess file, and robots.txt.  Only a few things have to change to enjoy this plugin.  Let’s dig in to this.

So if you followed along earlier, we have already copied header.php to our child theme.  Like I mentioned in that article, I think it is best to do this, as there are many changes to make to the header.  The first thing we are going to do here is to get our title ready for the plugin.  This isn’t the title you see by your posts or anything.  It is the title picked up by search engines, and also you see it at the very top of your browser.

So in your header.php you will find this:

<title><?php
	/*
	 * Print the <title> tag based on what is being viewed.
	 */
	global $page, $paged;

	wp_title( '|', true, 'right' );

	// Add the blog name.
	bloginfo( 'name' );

	// Add the blog description for the home/front page.
	$site_description = get_bloginfo( 'description', 'display' );
	if ( $site_description && ( is_home() || is_front_page() ) )
		echo " | $site_description";

	// Add a page number if necessary:
	if ( $paged >= 2 || $page >= 2 )
		echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) );

	?></title>

All kinds of stuff in there. It helps spit out some pretty well formed titles. But if you want the full yumminess of Yoast’s plugin (and you do!) then replace all that stuff there with this simple bit of code:

<title><?php wp_title(''); ?></title>

Crazy simple right? Swapping out that big old block for this allows Yoast’s plugin to properly take control of the title section. Otherwise you get some double output, and generally unpredictable results.

Now let’s take a look at another cool feature from the plugin. The breadcrumbs. They may be good for SEO, they are probably good for your users in some situations. Whatever, I like em. End of story for me. If you want to use them, here’s what I did. Now, this portion is a little subjective, what you do depends on where you want the breadcrumbs, and how you want them styled. I put them right at the end of header.php, under the last line which opend the main div. Here’s my code:

	<div id="main">

	<?php if ( function_exists('yoast_breadcrumb') ) {
		yoast_breadcrumb('<div id="navCrumbs"><p id="breadcrumbs">','</p></div>');
	} ?>

That’s all it takes to get the breadcrumbs to show up. Now the styling is a bit off for me, So I had to add and edit some css. Here’s the new stuff.

#navCrumbs {
	font-size: 1.1em;
	margin-bottom: 15px;
}
p#breadcrumbs {
	border-top: 2px solid #999999;
	border-bottom: 2px solid #999999;
	padding: 10px 0;
}

Nothing much to it, I just had to adjust some spacing and get sizes and borders just right. Now there is still a large gap in there, which we fix with a minor edit.

TwentyTen’s default css has this:

#main {
	clear: both;
	overflow: hidden;
	padding: 40px 0 0 0;
}

I needed to fix it for my breadcrumbs. I changed it to this:

#main {
	clear: both;
	overflow: hidden;
	padding: 15px 0 0 0;
}

Exactly how you do this depends on your setup. I recently decided to copy all of twentyten css into my child theme style.css. So I just edit it directly. If you are using the @import rule, you can just copy that block of code to overwrite twentyten’s rules for #main.

That’s all the hacking away at header.php I’m doing today. But tomorrow will be superfly. I plan to remove the text link above the header. But it’s also a link to the homepage. So in preparation for that, we will turn the entire header image into a link. Word!

This contest is open until the end of the day on February 16, 2012. You can enter using each method once per day!

We spent yesterday figuring out how to get rid of all the green in 2014 and set up a new colour. I like the looks of that, but there is still one more thing bugging me. I’ve had several posts over the years about the same thing. I don’t like how narrow things are in the theme! Well, here’s a quick fix to change that!

I only just set this up and haven’t thoroughly tested every little detail. Everything looks good to me right now, but as always, if you find I missed something feel free to leave me a comment and I’ll get adjust my code on here!

There’s just a little thinking to do here, we need to come up with our numbers. I’ll give you the defaults along with my changes and you can make your own decisions. Now a bit of a disclaimer again, I’m almost certain there is some ratios and formulas that were used in the development of the original theme – I didn’t use any. I just set things where I wanted them and guessed at the rest. That 786px for hentry is the width I needed to make sure my featured images touched up against the left sidebar – I found this number through trial and error to be honest (I had started at 752, but th eimage had a gap, so I increased until it was perfect). It looks good right now, but there might be slight adjustments needed to my numbers.

• The overall default maximum width is 1260px, I increased this to 1420px
• The content area (hentry) column is 672px, I increased this to 786px
• The actual content is 474px, I increased this to 654px

So now I just cruised through the CSS looknig for any of the default entries and changing them to mine. Here’s what I came up with:

.site {
	max-width: 1420px;
}

.site-header {
	max-width: 1420px;
}

.hentry {
	max-width: 786px;
}

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
	max-width: 654px;
}

.post-navigation,
.image-navigation {
	max-width: 654px;
}

.archive-header,
.page-header {
	max-width: 654px;
}

.contributor-info {
	max-width: 654px;
}

.comments-area {
	max-width: 654px;
}

.site-main .mu_register,
.widecolumn > h2,
.widecolumn > form {
	max-width: 654px;
}

That goes into your child theme’s style.css file under the @import line (if you are unfamiliar with child themes, see my writeup here). You can save that and refresh your page to check it out. It looks pretty good, but we have one more thing to take care of.

In your child theme’s functions.php file you will need to add this

$content_width = 654;

// CHANGE DEFAULT THUMBNAIL SIZE
function voodoo_twentytwelve_setup() {
	set_post_thumbnail_size( 786, 410, true );
}
add_action( 'after_setup_theme', 'voodoo_twentytwelve_setup', 11 );

somewhere after the opening php tag. This takes care of adjusting the thumbnail/featured image as well as any embeds. Feel free to tweak that image height of 410 to suit your needs.

There we go with another quick tweak. Everything looks good on my end so far! So, do you plan on adjusting anything with the 2014 theme? Did I miss something? Feel free to let me know in the comments!

I came across a couple of posts recently which showed me how to monitor my website uptime using Google Docs. They both work great, one is for a single site. That is suffucient for many users, and you can use multiple copies, 1 to monitor each site. The next one is inspired by the first, but allows for multiple sites in a single sheet. These are fantastic tools that set up easily. Check it out:

All I did was follow the simple instructions. I’ve tested both, and both work perfectly, so just pick one based on your preferences. Set it up, and run it. Here’s what it looks like (on my phone anyway):

Here’s the downside of this. It showed my just how often my sites were going down. A minute here, a minute there. Several times going down for 15 or 20 minute blocks. The sheets keep a running log of up and down times for you too, plus you get emails whenever your sites go up or down.

I definitely recommend you play around with this… it just might drive you to a new host!

I dig twentyeleven. It’s got a lot of fun features and it looks pretty good. There were a couple of things I didn’t like, however. The header is kind of GIANT. So I’m going to need to take care of that. Also, although it is flexible width, the maximum width was a bit too narrow for my taste. Also, I need wider sidebars, I don’t like things looking so cramped over there. While I’m messing with the header, I have my own logo for VoodooPress, no need for the site name to be up top. I’m going to get rid of that, and while I’m at it relocate the search and site description to overlay my header image. Finally, I like my widgets to have their own home, they need a nice box to seperate them from the content a little. It’s pretty easy to get this all done, check it out!

So the first thing I need to do, is to widen the max-width of the theme. You’ll notice some extra css in some of my examples. I also reduced margins in some places. Twentyeleven had too much white space for my taste. Some people love it that way, but hey, this is what I like! Before we get into this too far, make sure you have your child theme set up. If you forget how, run over here and check it out. Just remember, that tutorial is for twentyten. You’ll have to just adjust the header and import rule to refer to twentyeleven.

Here’s where the theme width is set up in twentyeleven’s style.css:

/* =Structure
----------------------------------------------- */

body {
	padding: 0 2em;
}
#page {
	margin: 2em auto;
	max-width: 1000px;
}

Really all you need to do there is adjust the max-width in #page. Here’s my final view:

#page {
	margin: 1.5em auto;
	max-width: 1050px;
	border-top: 15px solid #bbb;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-o-border-radius: 15px;
	border-radius: 15px;
}

Honestly, that’s it. You’ll see I have some extra stuff in there. I tweaked the margin to reduce the gutters on the side, and I added a think rounded border to the top. That’s just for my visual taste, When I remove all the info from above the header image, it looked a bit harsh. I liked the idea of just a little visual interest up top.

So with that out of the way, I realized that with a wider theme, I’d need a wider header image. This is super simple. I just made a functions.php file in my child theme and added (NOTE: this is new update code to add a filter, which is the preferred way to do this):

//CUSTOM HEADER SIZE
add_filter( 'twentyeleven_header_image_height', 'voodoo_header_height');
function voodoo_header_height($param) {
return 175;
}
add_filter( 'twentyeleven_header_image_width', 'voodoo_header_width');
function voodoo_header_width($param) {
return 1050;
}

For informational purposes, below is the old function I used to adjust the header image. It worked, but one of our readers pointed out in the comments that we weren’t using the best method. So I recommend you use the above code, the code below is just kept for comparison.

//CUSTOM HEADER SIZE
add_action( 'after_setup_theme', 'voodoochild_theme_setup' );

if ( !function_exists( 'voodoochild_theme_setup' ) ):
function voodoochild_theme_setup() {
	define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyeleven_header_image_height', 175 ) );
	define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyeleven_header_image_width', 1050 ) );
}
endif;

Don’t forget the opening php tag at the top if you are started a brand new functions.php file. OK, now with that above function I’ve altered twentyeleven’s header image from 1000x288px to a wider and shorter 1050x175px. Of course you can just do the width and leave the height line out, or use different values.

With the new header image in place, any new header you upload either through the header menu, or using the featured image uploader will be in that size. But I’ve had VoodooPress going for a bit, and it used to use twentyten, which had different header sizes. Chances are your site will not look right if you already have posts with thumbnails. No problem, I’ve got you covered! Check out this handy plugin here. It’ll regenerate your thumbnails and get everything looking so good once again.

One final thing I needed to deal with to get my headers to work properly. Sometimes I like to use images that are smaller than the header. By default if you do that, it won’t be used as your header image. Well, I copy header.php from twentyeleven and put it into my theme. I need to tweak some things further on it, so I need my own copy used. I found this bit of code toward the bottom of header.php:

	has_post_thumbnail( $post->ID ) &&
	( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH ) ) ) &&
	$image[1] >= HEADER_IMAGE_WIDTH ) :
// Houston, we have a new header image!

I just deleted

&&
							$image[1] >= HEADER_IMAGE_WIDTH

So I was left with:

	has_post_thumbnail( $post->ID ) &&
	( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT ) ) ) ) :
// Houston, we have a new header image!

And that allows for featured images smaller than the minimum size to still be used. So we are getting pretty close to good here. We’ve got a wider theme, a wider header image to fit the theme and more options for our header image size. Tomorrow, we’ll finish this off. Tweaking the rest of the white space, readjusting the header some more, and prettying up the widget areas. After that, I’ll post up my header.php and style.css code in case I forgot anything, so you can peep my finished product so far. Once I have myself a nice basic child theme done to my liking, it’ll be time to look for new fun to be had.

I needed a contact form for VoodooPress.  Normally I use cforms.  It’s very powerful, but it seemed like too much for a simple form.  I decided to give the Contact Form 7plugin a try this time.  I came across a few challenges getting it set up perfectly with my twentyten child theme.  But it was a cool learning experience.  Let’s take a look at what I did.  A lot of this information may help you on themes besides twentyten as well, it’s just focused on that.

Just a note, something is happening to the displayed code below that I can’t figure out. Certain bits of code are being parsed into the number 1. Where you see that, all that is missing is the bit of code from the CF7 plugin which displays the field. I hope you can still follow along with this.

Obviously the first step here is to install and activate the plugin.  Then go ahead and set up your form.  You can stick with the default, or you can make your own.  I’m not going to go into a lot of detail on configuring the form, as there is plenty of info on their website about that. But one thing to note is that you may wish to change the layout of your form a little. I really didn’t like the default layout. Here is the code you are given:

<p>Your Name (required)<br />
     </p>

<p>Your Email (required)<br />
    [email* your-email] </p>

<p>Subject<br />
     </p>

<p>Your Message<br />
    [textarea your-message] </p>

<p>[submit "Send"]</p>

It didn’t seem all that semantic to me, so I went ahead and redid it. You really only need to keep the stuff in square brackets, the rest is up to you. So here is the above form layed out again in a manner I prefer.

<fieldset class="name">
 
<label>Your Name (required)</label>
</fieldset>

<fieldset class="email">
 [email* your-email]
<label>Your Email (required)</label>
</fieldset>

<fieldset class="subject">
 
<label>Subject</label>
</fieldset>

<fieldset class="message">
 [textarea your-message]
<label>Your Message</label>
</fieldset>

<fieldset class="submit">
 [submit "Send"]
</fieldset>

Of course you don’t need to follow along with that, I just wanted to show you that you are free to code away in the plugin’s form edit area as much as you like. Also, the classes aren’t necessary on the fieldsets, it can just say fieldset. I put them there out of habit in case I want to to style each later down the road. I don’t even use them right now.

After I set up the form, I noticed the layout completely sucked to put it mildly. We have 3 major problems here for controlling our own layout. Even though we are using a child theme of twentyten, twentyten’s form css is acting on our form. Also, Contact Form 7 has it’s own styling. And finally there is an autop feature, which adds paragraph and linebreaks into the source.

The first thing I wanted to do was get rid of twentyten’s influence. This is quite easy. There are many ways to accomplish the same thing here, but the goal is to make sure the form you put on your page is no longer inside of the entry-content div class. The easiest way I thought was to make a page template. If you aren’t familiar with page templates, read up! They are very useful. This page template is a combination of twentyten’s (from WP 3.1) page.php and loop-page.php. I just combined everything into one file. I only changed one line here. I changed the div class=entry content here:

				<h1 class="entry-title"><?php the_title(); ?></h1>
			<?php } ?>

			<div class="entry-content">
				<?php the_content(); ?>

To read div class=”form-content”. I am using this page only for the contact form, so I just needed to get rid of entry-content as twentyten styles forms within entry-content. If I am not being too clear, or you just wanna see what I did, take a look at the full template

<?php
/*
Template Name: Contact Form
*/
get_header(); ?>

		<div id="container">
			<div id="content" role="main">

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

				<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
					<?php if ( is_front_page() ) { ?>
						<h2 class="entry-title"><?php the_title(); ?></h2>
					<?php } else { ?>
						<h1 class="entry-title"><?php the_title(); ?></h1>
					<?php } ?>

					<div class="form-content">
						<?php the_content(); ?>
						<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
						<?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?>
					</div><!-- .entry-content -->
				</div><!-- #post-## -->

				<?php comments_template( '', true ); ?>

<?php endwhile; // end of the loop. ?>

			</div><!-- #content -->
		</div><!-- #container -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

You can just save that as a new file in your child theme called contact.php, and apply it to a page, and you have solved a big part of your styling problem.

Next up is Contact Forms 7 styling. We can get rid of that super easily. Just plop this down into your functions.php:

//DEREGISTER CONTACT FORM 7 STYLES
add_action( 'wp_print_styles', 'voodoo_deregister_styles', 100 );

function voodoo_deregister_styles() {
	wp_deregister_style( 'contact-form-7' );
}

Now if you plan to let Contact Forms 7 handle your styling, that’s cool. But I wanted to do my own. And yes, I will share that with you shortly as well. But remember, after the previous 2 steps, you will have no css on your form. It’ll look narsty. But that’s cool. Let’s fix the last problem and then you can get to work on styling. I’ll show you my own css for my form, chock full of css3 goodness.

OK, now twentyten’s default form styling doesn’t have us in it’s clutches. And we are free of Contact Form 7’s default styling. Why does the form still seem like it has some styling? It’s because there is an autop feature that automatically inserts paragraph and line breaks into your source code. If you view your output source from within the browser, you’ll see em. Let’s get ’em! You’ll need to use ftp or a file manager with your host to accomlish this step. We are going to edit wp-config.php. My rule here, never touch this file without backing it up first. Got it backed up? Good! You just need to scroll down and find the stop editing happy bloggin line towards the bottom, and add one line of code above that line so it looks like this:

define ('WPCF7_AUTOP', false );   // set to false to remove <br> tags

/* That's all, stop editing! Happy blogging. */

And that my friends is it as far as stripping away outside influences off of your Contact Form. If you check out your form now, you’ll truly hate it. No styling at all! Well, you are now free to add your own styling to your child theme’s style.css, and have it actually work as you expected. Wanna peek at mine? Sure thing! Like I said earlier, it’s chock full of CSS3 goodies. Shadows, Alphas, Gradients, even animations for webkit browsers. I feel they are a good combination of bold but not over the top. If you haven’t played around with CSS3 yet, there’s good news. Everything degrades nicely for browsers that don’t support it yet. It is very cool on the ones that do, and it looks like a nice clean form on browsers like IE. You can see it yourself on my contact page. Anyway, here’s my css, please note, this will only work if you laid out your form as I did above! You can have different itmes than I do of course, I actually have many more than that. Just the layout style needs to match.

/* CONTACT FORM 7 SPECIFIC STUFF*/
.wpcf7 {
	margin-left: 50px;
	background: #9e9786;
	background: rgba(158, 151, 134, 0.6);
	padding: 15px;
	border: none;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	-o-border-radius: 7px;
	border-radius: 7px;
}
.wpcf7-form fieldset {
	margin: 0 0 10px 0;
}
.wpcf7-form fieldset label {
	display: block;
	font-weight: bold;
	line-height: 1.4;
	color: #666;
	color: rgba(0, 0, 0, 0.6);
	text-shadow: 0 1px 1px #fff;
	margin-left: 10px;
}
.wpcf7-form fieldset:last-child {
	margin: 0;
}
.wpcf7-form fieldset input[type="text"],
.wpcf7-form fieldset textarea {
	width: 215px;
	padding: 5px 8px;
	font-size: 1.2em;
	color: #666;
	border: none;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 12%, from(#999), to(#fff));
	background-image: -moz-linear-gradient(0% 12% 90deg, #fff, #999);
	background: #FFFFFF url('images/grad.jpg') left top repeat-x;
	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	border-radius: 4px;
}
.wpcf7-form fieldset textarea {
	width: 430px;
}
.wpcf7-form input[type="submit"] {
	padding: 8px 15px;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
	line-height: 1;
	color: #444;
	border: none;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#bbb));
	background-image: -moz-linear-gradient(0 100% 90deg, #fff, #bbb);
	background: #FFFFFF url('images/grad.jpg') left top repeat-x;
	-webkit-border-radius: 23px;
	-moz-border-radius: 23px;
	-o-border-radius: 23px;
	border-radius: 23px;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.wpcf7-form fieldset input[type="text"]:focus, .wpcf7-form fieldset textarea:focus,
.wpcf7-form fieldset input[type="text"]:hover, .wpcf7-form fieldset textarea:hover {
	border: 1px solid #401f1f;
	-webkit-box-shadow: 0 0 12px rgba(64, 31, 31, 0.5);
	-moz-box-shadow: 0 0 12px rgba(64, 31, 31, 0.5);
	box-shadow: 0 0 12px rgba(64, 31, 31, 0.5);
}
@-webkit-keyframes pulse {
	0% {
		-webkit-box-shadow: 0 0 12px rgba(64, 31, 31, 0.2);
	}
	50% {
		-webkit-box-shadow: 0 0 12px rgba(64, 31, 31, 0.9);
	}
	100% {
		-webkit-box-shadow: 0 0 12px rgba(64, 31, 31, 0.2);
	}
}
.wpcf7-form fieldset input[type="text"]:focus,
.wpcf7-form fieldset textarea:focus {
	-webkit-animation: pulse 1.5s infinite ease-in-out;
}
.wpcf7-form fieldset input[type="submit"]:hover,
.wpcf7-form fieldset input[type="submit"]:focus {
	-webkit-animation: pulse 1.5s infinite ease-in-out;
}

That was an eyefull eh? A lot of cool stuff on there to check out. Google is your friend if you don’t know much about CSS3 or styling forms. It’s where I learned everything. And a little note, my css will style all Contact Form 7 forms cross site. If you want to target individual forms, you will need to swap out .wpcf7-form for the form specific ID you get for each form. You can see it in your browser source.

That’s it for cleaning up CSS influences and getting your form styled. As a little bonus for those of you who stuck around to the very end, here’s a performance improvement. By default, Contact Form 7 loads it’s javascript on every page. We don’t need it loading if there is no form on the page. Check out this little snippet for your functions.php file:

//DEREGISTER CONTACT FORM 7 SCRIPTS ON ALL PAGES WITH NO FORM
add_action( 'wp_print_scripts', 'voodoo_deregister_javascript', 100 );
function voodoo_deregister_javascript() {
	if ( !is_page('contact-us') ) {
		wp_deregister_script( 'contact-form-7' );
	}
}

That works for me. It only loads the scripts on my contact form page, which is named ‘contact-us’. You’ll obviously need to swap that out for your page name. If you have more than one page, that’s cool, just be sure to put them in an array, like:

//NOTE this is just one line from the above block to illustrate using the array
if ( !is_page( array('contact-us', 'contact-them', 'contact-someone-else') ) ) {

And that’s it. There you have the ins and outs of Contact Form 7 and using it in a twentyten child theme. I hope you learned something. I know I did today!

I ran into an interesting problem today. My podcasting plugin over on my blog flaked out on an upgrade. The music player still works, but the download links disappeared. Now that site relies on the music downloads. I just couldn’t have that. The developers are looking for a fix, but I needed the functionality now. So I came up with a nifty band-aid.

The first thing I did was look at how the music was included into my post. I fill out a little form on the backend and the music gets inserted into my posts, with a player, and links and everything. Well I noticed that this was all done with a custom field. Once I entered my music information and saved the post, a custom field was created called enclosure. This enclosure has enclosed in the value all the information to make everything work. My gut instinct was to just echo out

get_post_meta($post_id, $key, $single);

inside of an a href link to make it work. But I had a problem. The value was actually set up like this:

url to media
size of file
type of file
encoding info

We had multiple lines of data. I originally thought that if I set the $single value to true, it would only echo out the first line. You can read about the $single value, and all about custom fields here. Well, that isn’t the case. The $single set to true only grabs the first value if you have multiple key value pairs with the same key. I had a multi-line value, and only needed the first line, the url to the media.

So I did a fair bit of googling, and came across this article. This article showed me that if I have a multi-line value set up, I can include

$items = get_post_meta($post->ID, 'ItemInfo');

in my loop to grab the entire value.

It would then return that all in an array, which I could break up in a foreach loop, breaking apart the multi-line value by enforcing the line breaks that are in the custom field value. The example code given on that site looks like:

foreach($items as $item) {

$item = nl2br($item);
list($name,$src,$price,$desc) = explode('<br />',$item);

echo "<div class="item">";
echo "<h2>$name</h2>";
echo "<img src="".trim($src)."" />";
echo "<br />Price: $price";
echo "<br />Description: $desc";
echo "</div><br />";

}

If you look at the link I provided, it will make a lot more sense, I’m just summarizing here. Now I didn’t need all the info output. I just needed the first line output (the media url) as a download link. So I took that example code given, and tweaked it for my own use. Here’s what I came up with real quick:

	<?php if( get_post_meta($post->ID, "enclosure", true) ): ?>
		<?php $items = get_post_meta($post->ID, 'enclosure'); ?>
		<?php foreach($items as $item) {

			$item = nl2br($item);
			list($name,$src,$price,$desc) = explode('<br />',$item);

			echo "<a href="$name">Download</a>";
			} ?>
	<?php endif; ?>

And it worked perfectly. We set up on line 1 to only do the code if the enclosure key actually exists. Then on line two we grab the values associated with enclosure key, and spit it out in an array. We break each line down on a line break and assign it to a variable. And then I only needed the first line, which is assigned to $name, so I just spit out $name inside of a link.

I know this will come in handy in the future for me. So I just wanted to share the info with you in case you run into a similar situation. My downloads work again until the plugin is fixed, and I’m happy!

Over the past three days we’ve accomplished quite a bit. First we set up a form to post from the front end. Once we had the form all set up, we dropped in some code to allow images to be uploaded with the form. And finally we added in the ability to use custom meta boxes on our form to collect additional information in custom fields for us to use. That’s a lot of code. Plus I had some difficulties with code that sometimes worked and sometimes did not. I got that all fixed. I thought it might be best to drop the full code I have in one post so that we can review it together.

So let’s take a look at the code. Now I’m pretty much just going to drop what I have here for you to look at it. I’m not going to spend too much time explaining it. If you have questions you can always go back to the original posts that are all linked above. So first off let’s take a look at the main form page. Now remember that I use a twenty ten child theme. So my code will reflect that. Your’s may be slightly different depending on what theme you use. If you recall I made a page template, kept in a basic loop, and added in my form and processing code. Here is the complete final results of that:

<?php
/*
Template Name: Rate Wine Form
*/
?>
<?php
if( 'POST' == $_SERVER['REQUEST_METHOD'] && !empty( $_POST['action'] ) &&  $_POST['action'] == "new_post") {

	// Do some minor form validation to make sure there is content
	if (isset ($_POST['title'])) {
		$title =  $_POST['title'];
	} else {
		echo 'Please enter the wine name';
	}
	if (isset ($_POST['description'])) {
		$description = $_POST['description'];
	} else {
		echo 'Please enter some notes';
	}

	$tags = $_POST['post_tags'];
	$winerating = $_POST['winerating'];

	// ADD THE FORM INPUT TO $new_post ARRAY
	$new_post = array(
	'post_title'	=>	$title,
	'post_content'	=>	$description,
	'post_category'	=>	array($_POST['cat']),  // Usable for custom taxonomies too
	'tags_input'	=>	array($tags),
	'post_status'	=>	'publish',           // Choose: publish, preview, future, draft, etc.
	'post_type'	=>	'post',  //'post',page' or use a custom post type if you want to
	'winerating'	=>	$winerating
	);

	//SAVE THE POST
	$pid = wp_insert_post($new_post);

             //KEEPS OUR COMMA SEPARATED TAGS AS INDIVIDUAL
	wp_set_post_tags($pid, $_POST['post_tags']);

	//REDIRECT TO THE NEW POST ON SAVE
	$link = get_permalink( $pid );
	wp_redirect( $link );

	//ADD OUR CUSTOM FIELDS
	add_post_meta($pid, 'rating', $winerating, true);

	//INSERT OUR MEDIA ATTACHMENTS
	if ($_FILES) {
		foreach ($_FILES as $file => $array) {
		$newupload = insert_attachment($file,$pid);
		// $newupload returns the attachment id of the file that
		// was just uploaded. Do whatever you want with that now.
		}

	} // END THE IF STATEMENT FOR FILES

} // END THE IF STATEMENT THAT STARTED THE WHOLE FORM

//POST THE POST YO
do_action('wp_insert_post', 'wp_insert_post');

?>

<?php get_header(); ?>

		<div id="container">
			<div id="content" role="main">

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

				<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
					<?php if ( is_front_page() ) { ?>
						<h2 class="entry-title"><?php the_title(); ?></h2>
					<?php } else { ?>
						<h1 class="entry-title"><?php the_title(); ?></h1>
					<?php } ?>

					<div class="form-content">
						<?php the_content(); ?>

		<!-- WINE RATING FORM -->

		<div class="wpcf7">
		<form id="new_post" name="new_post" method="post" action="" class="wpcf7-form" enctype="multipart/form-data">
			<!-- post name -->
			<fieldset name="name">
				<label for="title">Wine Name:</label>
				<input type="text" id="title" value="" tabindex="5" name="title" />
			</fieldset>

			<!-- post Category -->
			<fieldset class="category">
				<label for="cat">Type:</label>
				<?php wp_dropdown_categories( 'tab_index=10&taxonomy=category&hide_empty=0' ); ?>
			</fieldset>

			<!-- post Content -->
			<fieldset class="content">
				<label for="description">Description and Notes:</label>
				<textarea id="description" tabindex="15" name="description" cols="80" rows="10"></textarea>
			</fieldset>

			<!-- wine Rating -->
			<fieldset class="winerating">
				<label for="winerating">Your Rating</label>
				<input type="text" value="" id="winerating" tabindex="20" name="winerating" />
			</fieldset>

			<!-- images -->
			<fieldset class="images">
				<label for="bottle_front">Front of the Bottle</label>
				<input type="file" name="bottle_front" id="bottle_front" tabindex="25" />
			</fieldset>

			<fieldset class="images">
				<label for="bottle_rear">Back of the Bottle</label>
				<input type="file" name="bottle_rear" id="bottle_rear" tabindex="30" />
			</fieldset>

			<!-- post tags -->
			<fieldset class="tags">
				<label for="post_tags">Additional Keywords (comma separated):</label>
				<input type="text" value="" tabindex="35" name="post_tags" id="post_tags" />
			</fieldset>

			<fieldset class="submit">
				<input type="submit" value="Post Review" tabindex="40" id="submit" name="submit" />
			</fieldset>

			<input type="hidden" name="action" value="new_post" />
			<?php wp_nonce_field( 'new-post' ); ?>
		</form>
		</div> <!-- END WPCF7 -->

		<!-- END OF FORM -->
						<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
						<?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?>
					</div><!-- .entry-content -->
				</div><!-- #post-## -->

				<?php comments_template( '', true ); ?>

<?php endwhile; // end of the loop. ?>

			</div><!-- #content -->
		</div><!-- #container -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

So that form has code from all three tutorials in it. It has the basic post from front end form. It has the code in place for allowing image uploads. It also has the custom field meta box code in it. The next bit of code we need goes in functions.php. This is the bit for allowing the image uploads.

function insert_attachment($file_handler,$post_id,$setthumb='false') {
	// check to make sure its a successful upload
	if ($_FILES[$file_handler]['error'] !== UPLOAD_ERR_OK) __return_false();

	require_once(ABSPATH . "wp-admin" . '/includes/image.php');
	require_once(ABSPATH . "wp-admin" . '/includes/file.php');
	require_once(ABSPATH . "wp-admin" . '/includes/media.php');

	$attach_id = media_handle_upload( $file_handler, $post_id );

	if ($setthumb) update_post_meta($post_id,'_thumbnail_id',$attach_id);
	return $attach_id;
}

That’s it for the posting bit. I’ll add in a couple more bits of code, the stuff you need for displaying the extra stuff in the form. For instance the images in my form will upload and attach to the post, and the last image becomes the featured image. But the images attached to the post are not set to display. Here’s the code that goes in your loop to actually display the images:

<div class="wineBottles">
<?php
$args = array( 'post_type' => 'attachment', 'numberposts' => -1, 'post_status' => null, 'post_parent' => $post->ID );
$attachments = get_posts($args);
if ($attachments) {
	foreach ( $attachments as $attachment ) { ?>
		<div class="wineImage">
			<span class="wineTitle">
		<?php echo apply_filters( 'the_title' , $attachment->post_title ); ?>
			</span>
		<?php the_attachment_link( $attachment->ID , false ); ?>
		</div>
	<?php }
}
?>
</div>

As I said before, there is some various css selectors added in there. You’ll need to swap them out, or define them in your css. I won’t be getting into styling stuff in this tutorial as that’s a matter of personal preference. Finally we need the bit of code for displaying the data from the custom field in the form. This also goes in your loop, wherever you want the data output. You’ll need to change this up to make use of your data however you need it, this is a very basic example:

				<div class="wineRating">
				<?php if( get_post_meta($post->ID, "rating", true) ): ?>
				<?php echo get_post_meta($post->ID, "rating", true); ?>
				<?php endif; ?>
				</div>

And that is all of it. Every bit of code I’ve used so far to get my post from front end form working properly. I hope this helps you out some. Now take this and run with it, you can do so much stuff once you understand how this all works.

UPDATE: @trusktr helped me out by leaving a comment over on the wordpress answers site. I haven’t had a chance to play with this yet, but wanted to get it up here asap for users playing around with this form. Trusktr reports that in the validation code at the top changing:

 isset ($_POST['description'])

 to

$_POST['description'] != ''

Solves our problems and stops the form from posting when it should not. If anyone messes around with this, let us know how it works out!