Home › Forums › Pro Support › Output Custom Field in Div Class
Tagged: custom fields, div style
- This topic has 23 replies, 3 voices, and was last updated 4 years ago by
Tom.
-
AuthorPosts
-
July 16, 2018 at 5:44 pm #5265
Janek
ParticipantGood morning,
I’m trying to use this code that you uploaded here awhile back to display a custom meta key:
add_action( 'wpsp_after_content', 'tu_add_custom_meta' ); function tu_add_custom_meta() { $meta = get_post_meta( get_the_ID(), '_custom_meta_key_name_here', true ); if ( isset( $meta ) && '' !== $meta ) { echo $meta; } }
Just wondering is there a way to modify this so I could have it display within a Div Class for styling purposes?
July 16, 2018 at 9:20 pm #5267Tom
KeymasterFor sure:
add_action( 'wpsp_after_content', 'tu_add_custom_meta' ); function tu_add_custom_meta() { $meta = get_post_meta( get_the_ID(), '_custom_meta_key_name_here', true ); if ( isset( $meta ) && '' !== $meta ) { echo '<div class="my-class-here">' . $meta . '</div>'; } }
July 17, 2018 at 1:21 am #5276Janek
ParticipantAwesome, and another question. How would I adjust this to add multiple different metas/custom fields?
For instance I have another CPT that uses multiple custom fields.
July 17, 2018 at 7:55 pm #5284Tom
KeymasterYou’d have to set up multiple variables.
So instead of:
$meta = get_post_meta( get_the_ID(), '_custom_meta_key_name_here', true );
You’d do:
$meta = get_post_meta( get_the_ID(), '_custom_meta_key_name_here', true ); $another_meta = get_post_meta( get_the_ID(), '_another_custom_meta_key_name_here', true ); $one_more = get_post_meta( get_the_ID(), '_one_more_custom_meta_key_name_here', true );
July 17, 2018 at 7:58 pm #5285Janek
ParticipantAnd I take it if I wanted to class each of those differently I’d be complicating things even more? 🙂
July 18, 2018 at 8:10 pm #5298Tom
KeymasterWhat do you mean by classing them?
July 18, 2018 at 8:28 pm #5302Janek
ParticipantFor instance if I have an event list displayed in WPSP I would like one custom field for event date to have a front end class of .event-date and then another custom field for featuring attraction have a class of .featuring so I can style them separately. Does that make sense?
July 19, 2018 at 8:10 pm #5318Tom
KeymasterYou would just duplicate the
echo
line:add_action( 'wpsp_after_content', 'tu_add_custom_meta' ); function tu_add_custom_meta() { $meta = get_post_meta( get_the_ID(), '_custom_meta_key_name_here', true ); $another_meta = get_post_meta( get_the_ID(), '_another_custom_meta_key_name_here', true ); $one_more = get_post_meta( get_the_ID(), '_one_more_custom_meta_key_name_here', true ); if ( isset( $meta ) && '' !== $meta ) { echo '<div class="my-class-here">' . $meta . '</div>'; } if ( isset( $another_meta ) && '' !== $another_meta ) { echo '<div class="another-class-here">' . $another_meta . '</div>'; } if ( isset( $one_more ) && '' !== $one_more ) { echo '<div class="one-more-class-here">' . $one_more . '</div>'; } }
July 21, 2018 at 3:11 am #5333Janek
ParticipantAwesome! Thank you for helping with this, I thought the code would be much more complex. Always learning something new! 🙂
July 21, 2018 at 10:02 pm #5337Tom
KeymasterGlad I could help! 🙂
July 25, 2018 at 11:37 pm #5418Janek
ParticipantHey Tom,
Sorry to reopen this ticket.
I’m using Custom Fields again but this time I’m using an image array and when I use the method outlined above it just outputs the image array number as text instead of displaying the image. Just wondering how I might go at displaying an image with the same code you provided?
I found this on the ACF plugin site https://www.advancedcustomfields.com/resources/image/
Just unsure how I integrate their code half way down the page into what you wrote up for me.🙂
July 26, 2018 at 9:11 pm #5424Tom
KeymasterDid you try the “Basic array” example on that page?
July 26, 2018 at 9:19 pm #5426Janek
ParticipantI did but I couldnt work out how to integrate it with the existing code. :\
I to be honest I struggle with PHP.
July 27, 2018 at 5:59 pm #5437Tom
KeymasterIt would be something like this:
add_action( 'wpsp_after_content', 'tu_add_custom_meta' ); function tu_add_custom_meta() { $meta = get_post_meta( get_the_ID(), '_custom_meta_key_name_here', true ); $another_meta = get_post_meta( get_the_ID(), '_another_custom_meta_key_name_here', true ); $one_more = get_post_meta( get_the_ID(), '_one_more_custom_meta_key_name_here', true ); if ( isset( $meta ) && '' !== $meta ) { echo '<div class="my-class-here">' . $meta . '</div>'; } if ( isset( $another_meta ) && '' !== $another_meta ) { echo '<div class="another-class-here">' . $another_meta . '</div>'; } if ( isset( $one_more ) && '' !== $one_more ) { echo '<div class="one-more-class-here">' . $one_more . '</div>'; } if ( function_exists( 'get_field' ) ) { $image = get_field('image'); if ( ! empty( $image ) ): ?> <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /> <?php endif; } }
July 27, 2018 at 6:45 pm #5441Janek
ParticipantAwesome, that worked! Thank you!
Just one or two more questions and I swear I’ll be done with this.
If I had more than one image field how would I go about inserting that?
For instance at the moment I have:
$image = get_field('advertisement_desktop');
But I also have this field that I want to include
$image = get_field('advertisement_mobile');
I also need a way to display one or the other depending on breakpoint. Which I was going to do with CSS. Is there a simple way to output these in separate divs classes?
-
AuthorPosts
- You must be logged in to reply to this topic.