WordPress custom field image display on hover for portfolio grid thumbnails using functions.php

Other Questions Wordpress
1

I’m working on a WordPress site that shows products in a portfolio grid layout. The theme uses a standard index.php for the loop and handles content output through a functions file based on post type and configuration.

I want to create a hover effect where moving the mouse over the main thumbnail shows a different image stored in a custom field named “hover-thumb”. I’ve tried implementing this but the hover image source appears empty in the HTML output even though the hover functionality seems to work.

I’m not experienced with programming so this is challenging for me. I modified the functions file code by adding PHP inside the overlay span element but something isn’t working correctly. The src attribute stays empty when I inspect the page source.

I’d prefer to add this functionality to my child theme’s functions file instead of modifying the parent theme files, but I’m not sure how much of the original code I need to include or how to properly override just the parts I want to change.

<?php
$thumbnail_src = '';

$img_width = 'on' === $full_width ? 1080 : 400;
$img_width = (int) apply_filters( 'custom_portfolio_img_width', $img_width );

$img_height = 'on' === $full_width ? 9999 : 284;
$img_height = (int) apply_filters( 'custom_portfolio_img_height', $img_height );
$css_class = 'on' === $full_width ? 'main_portfolio_image' : '';
$alt_text = get_the_title();
$featured_img = get_thumbnail( $img_width, $img_height, $css_class, $alt_text, $alt_text, false, 'PostImage' );
$thumbnail_src = $featured_img["thumb"];

if ( '' !== $thumbnail_src ) : ?>
    <a href="<?php the_permalink(); ?>">
    <?php if ( 'on' !== $full_width ) : ?>
        <div class="portfolio_thumbnail">
    <?php endif; ?>
            <?php display_thumbnail( $thumbnail_src, $featured_img["use_timthumb"], $alt_text, $img_width, $img_height ); ?>
    <?php if ( 'on' !== $full_width ) : ?>
            <div class="image_overlay"><?php $secondary_image = get_post_meta($post->ID, 'hover-thumb', true); ?>
            <img class="overlay-image" src="<?php echo $secondary_image; ?>" /> </div>
        </div>
    <?php endif; ?>
    </a>
2

try using get_field('hover-thumb') if you’re using ACF. also, check if the custom field has data by adding var_dump($secondary_image) right after you get it. sometimes the field name isn’t exactly what you think it is.

3

Had the same issue with custom meta fields in WordPress. Empty src happens because WordPress stores custom field values differently depending on how they’re created. Don’t just echo the meta value directly - validate it first and handle different storage formats. Wrap your image output in a conditional: if (!empty($secondary_image) && filter_var($secondary_image, FILTER_VALIDATE_URL)) before the img tag. Some themes store relative paths in custom fields, so you might need to add the site URL. For your child theme’s functions.php, hook into the right action or filter instead of copying the whole function. Use hooks like wp_head for custom CSS hover effects, or override the specific function if your parent theme allows it.

4

Your custom field probably doesn’t exist or it’s storing a file ID instead of the actual URL. WordPress usually saves images as attachment IDs in custom fields. Replace your current line with $secondary_image = wp_get_attachment_url(get_post_meta($post->ID, 'hover-thumb', true)); - this converts the ID to a proper URL. Don’t forget to add global $post; at the top of your function. Still getting empty results? Double-check the exact field name in your WordPress admin. Sometimes there’s hidden characters or typos that break the lookup.