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.

Viewing 15 posts - 1 through 15 (of 24 total)

1 2 →

Author

Posts
July 16, 2018 at 5:44 pm #5265
Janek
Participant
Good 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 #5267
Tom
Keymaster
For 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 #5276

Janek
Participant

Awesome, 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 #5284
Tom
Keymaster
You’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 #5285

Janek
Participant

And 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 #5298

Tom
Keymaster

What do you mean by classing them?

July 18, 2018 at 8:28 pm #5302

Janek
Participant

For 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 #5318
Tom
Keymaster
You 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 #5333

Janek
Participant

Awesome! 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 #5337

Tom
Keymaster

Glad I could help! 🙂

July 25, 2018 at 11:37 pm #5418

Janek
Participant

Hey 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 #5424

Tom
Keymaster

Did you try the “Basic array” example on that page?

July 26, 2018 at 9:19 pm #5426

Janek
Participant

I 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 #5437
Tom
Keymaster
It 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 #5441

Janek
Participant

Awesome, 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?
Author

Posts

Viewing 15 posts - 1 through 15 (of 24 total)

1 2 →

You must be logged in to reply to this topic.

[Resolved] Output Custom Field in Div Class