We're merging with GenerateBlocks! Learn more here.

[Resolved] Output Custom Field in Div Class

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Output Custom Field in Div Class

  • 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)
  • Author
    Posts
  • #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?

    #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>';
        }
    }
    #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.

    #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 );
    #5285
    Janek
    Participant

    And I take it if I wanted to class each of those differently I’d be complicating things even more? 🙂

    #5298
    Tom
    Keymaster

    What do you mean by classing them?

    #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?

    #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>';
        }
    }
    #5333
    Janek
    Participant

    Awesome! Thank you for helping with this, I thought the code would be much more complex. Always learning something new! 🙂

    #5337
    Tom
    Keymaster

    Glad I could help! 🙂

    #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.

    🙂

    #5424
    Tom
    Keymaster

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

    #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.

    #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;
        }
    }
    #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?

Viewing 15 posts - 1 through 15 (of 24 total)
  • You must be logged in to reply to this topic.