Designs By Nick the Geek

Genesis Based WordPress Development and Tutorials for Everyone

How I Make Custom Fields Easier in Genesis

I work with custom fields a good amount. Clients want all kinds of easy to fill in data so I work with the Custom Meta Box class from Bill, Jared, and others. I’ve talked about that a fair bit. I think it is great and getting better. Not sure how something becomes better than great but it does with each new version. Working with custom fields in WordPress can be daunting. Often you end up having to do some really complex code or have some weird HTML output when you aren’t using the fields. Read on to see how I use some custom code and Genesis for WordPress to make custom fields easier.

Advanced Custom Fields Mini Review

I recently did a simple project, and by recently I mean today. It is a personal site and while the CMB class is super fast and easy I wanted to test out the Advanced Custom Fields plugin that some of my dev friends have recomended as of late. It is a pretty slick interface and something I think your moderate to advanced user will feel very comfortable with. Novice users might find it challenging but should pick up on how it all works without too much trouble. I’m not getting away from the CMB script for my client sites any time soon though. I like to let my clients have pretty free reign, but I do draw the line at giving them options that will only confuse them. If they need custom fields I will do it because I will also code in the output and things will go much more smoothly. Speaking of output …

Adding Custom Fields Has Never Been Easier

I don’t know why I didn’t think of this before. Working with basic custom fields in Genesis is actually pretty simeple. The genesis_custom_field() functions are really easy to use, but you have to do some funky stuff to wrap your custom field. It ends up looking something like this

if( genesis_get_custom_field( 'field_name' )
    echo '<div class="field_name">' . genesis_get_custom_field( 'field_name' ) .'</div>';

Now that is fine but when you have about half a dozen custom fields it gets confusing and weird. Today it occurred to me that I can make this better.

/**
* Gets the custom field value if available and places it in a defined pattern.
* Place %value% where the custom field value should be if custom field is returned.
*
* @uses genesis_get_custom_field()
* @param string $field the id of the custom field to check/retrieve.
* @param string $wrap HTML to return if custom field is returned.
* @param boolean $echo default false. echo wraped field value if available and set to true.
* @returns string/boolean the custom field/wrap output or false if nothing
*
*/
function ntg_get_custom_field( $field, $wrap = '%value%', $echo = false ){

	$custom_wrap = false;

	if( $value = genesis_get_custom_field( $field ) )
		$custom_wrap = str_replace( '%value%', $value, $wrap );

		if( $echo && $custom_wrap )
			echo $custom_wrap;

		return $custom_wrap;

}

I really like the way this works because of how easy it is to output the content, even conditional content.

Some Cool Examples

Here is how I’m using it in my personal project

add_action( 'genesis_after_post', 'ntg_story_details', 5 );
function ntg_story_details() {

	if( ! is_single() )
		return;

	$avatar = get_avatar( get_the_author_meta( 'ID' ), 65 );

	ntg_get_custom_field( '_author_notes', '<div class="author-box">'. $avatar .'<h4>Story Teller Notes</h4>%value%</div>', true );
}

Basically I’m outputting a custom “author box” with information about the story I’m telling. You can see hwo this works in practice at my Bedtime Stories by Me site on a single post page. Notice that I can handle outputting on a single line and if I skip the Author Notes custom field for a post, nothing gets output. It makes the markup nice and clean instead of having this weird empty box.

But it gets much cooler, because this returns “false” if the field is empty. This means I can still output my box, but with default content, in only two lines of code.

add_action( 'genesis_after_post', 'ntg_story_details', 5 );
function ntg_story_details() {

	if( ! is_single() )
		return;

	$avatar = get_avatar( get_the_author_meta( 'ID' ), 65 );

	if( ! ntg_get_custom_field( '_author_notes', '<div class="author-box">'. $avatar .'<h4>Story Teller Notes</h4>%value%</div>', true ) )
		echo '<div class="author-box nothing-to-say">'. $avatar .'<h4>Story Teller Notes</h4><p>Guess I don't have anything else to say. Carry on.</p></div>';
}

This only adds one more line of code over the code in my first example. See how easily you can make pretty complex custom field output with this.

Armed with this function and the examples now you can write beautiful code and use custom fields in Genesis for WordPress more effectively.

Do you work with custom fields a lot? What cool tricks have you found with them?

Related Posts

Comments

    • Richard,

      Sorry for the delay, this somehow got kicked into spam and I never saw it. Custom fields are extra data you can add to a post, page, or custom post type. I most often use them with custom post types, but I also use them on my personal blog with posts. On my personal blog I have some custom boxes that can be used for data like the URL for an mp3 file or a link. If I fill those in and use the corresponding post format lots of cool things happen on the front end of the site.

      I have it set to play the mp3 in a player or automatically redirect users to the link. I also have fields for quote authors and several other help things.

  2. Hi Nick, interesting posts and I have a question if that is alright.
    How would you go about setting up a custom field so it only shows on a mobile devices?
    I am trying to add a click to call button on top of the agency theme and have it only display on mobile handsets . I am still learning code so any help appreciated.

  3. Nick, Nice Post. I got ever thing you said, but somehow I am still confused on a note about – Relation between Custom Post and Custom Field, or are they entirely different.
    It would be a relief if you can either explain or share any link of good description about it.

    Thanks.

    • A custom field is dat that may be added to a post, page or any other custom post type if supported by the post type. This is extra information beyond the standard title, content, permalink …. information.

      The custom meta data could be added via custom meta boxes like the SEO fields in Genesis.

  4. Thanks, well after reading your piece, along with some literature from Joseph Foley and Justin Tadlock, I believe now I pretty much get the difference between Custom Post Types, Custom Fields and Custom Taxonomy.
    Your articles always teach something new. Keep up the good work.
    Thanks.

    • Now that I’ve been fiddling with this, I am wondering if you might be able to answer a question for me. I created a checkbox field and am having troubled editing the code to have it return a string of comma separated values when multiple choices are selected rather than just “array.” I know I need to edit it somehow from get_field to the_field, but I’m having trouble getting it to work with the genesis functions. Any help you can provide would be great. Thanks!

      • If you are using a plugin that creates the fields then you can use their functions to retrieve and format the data. Genesis doesn’t work well for array values.

  6. Nick. . .
    I am working on a project with a CPT and using several custom meta boxes. Three of the metaboxes are for images.

    I have also created several add_image_size options for various purposes on the site.

    When I use the genesis_get_custom_field to call the image, how can I tell it to use one of the new image sized? The uploaded image is loading perfectly, but I cannot seem to figure out how to tell it to use the ‘project’ image create.

    Any suggestions?

    • That is actually a bit tricky. Since it isn’t a featured image you can’t using the default image functions in WordPress or Genesis. Instead you will have to build your own image function using the image ID in your custom field instead of the image URL. You could make the image ID a hidden field, which is probably what I would do, then things will be a bit simpler in the post editor.

      If you look in the Genesis image functions file you will see how the ID can be used to get the image in a specific size. To save you some time, here is a link to the WP codex article on the function you will need to use
      http://codex.wordpress.org/Function_Reference/wp_get_attachment_image

      If you just want to src, so you can do some classes or a custom alt tag, there is a simple function you can use for that too
      http://codex.wordpress.org/Function_Reference/wp_get_attachment_image_src

      • I’m probably about to show my ignorance. . . BUT. . .

        Where do I find the image ID?

        Are you available for hire? 🙂

  7. Aloha, Nick –
    I need to add an expandable text box above (a growing list of) Posts in a Page. I made the page using this advice: http://my.studiopress.com/tutorials/category-blog-page/

    An example is here:
    http://www.micronesialandgrant.org/research/college-of-micronesia-fsm/yap-agricultural-experiment-station

    And this shows you were I want to add the text box:
    http://www.micronesialandgrant.org/example-page

    Can you please tell me how to make this happen?

    thanks, jim

    • copy the page_blog.php file from the genesis/ directory to your child theme directory. Then edit the file to add this before genesis() 

      add_action( 'genesis_loop', 'genesis_standard_loop', 5 );

  8. Hey, Nick. I am working on a new site where I want to review local spots (I.e. – Travel) and am thinking that custom fields are the way to go to standardize every post. I tried a set of codes from elsewhere online, and they do work, but the code looks horrid. I tried your code instead, but it crashes my site. I just upgraded to WP 3.6, but am NOT using the beta Genesis 2.o,

    Could this be why your code is not working? Everything else appears fine.