Link image with data from the wpdb

Question

It might be a stupid question, but I can't get it to work..

Problem
I have no idea how to link my image on the frontend with the url from the database.

Situation
I've created a Custom Post Type called 'Banners'. On each post I'm able to add a featured image. This will be saved in my database. Also on each post edit page, there is a input area for the banner_url. There I give my banner the link where it should go after clicking on it on the frontend. I'm able now to display the image I want on the page I want. But now I need to get the url out off the database and connent it to my image.

Code

<?php
// function to show home page banner using query of banner post type
function wptutsplus_home_page_banner() {

// start by setting up the query
$get_banner = new WP_Query( array(
    'post_type' => 'banners',
    'meta_query' => array(
      array(
        'key' => 'banner_link',
        'value' => 'https://www.mypage.com'
      )
    )
));

// now check if the query has posts and if so, output their content in a banner-box div
if ( $get_banner->have_posts() ) { ?>
        <?php while ( $get_banner->have_posts() ) : $get_banner->the_post(); ?>

          <div class="container" align="center"><a href=""><?php echo the_post_thumbnail(); ?></a></div>

        <?php endwhile; ?>
<?php }
  wp_reset_postdata();
}
?>

Question
My question is: How do I get the banner_url out of the database? And how am I able to get it to work with the image?

Thanks in advance!

EDIT PROBLEM SOLVED
Thanks to Abdul Awal

<?php
// function to show home page banner using query of banner post type
function wptutsplus_home_page_banner() {

// start by setting up the query
 $get_banner = new WP_Query( array(
  'post_type' => 'banners',
  'meta_query' => array(
    array(
      'key' => 'banner_link',
      'value' => 'https://www.mypage.com'
    )
  )
));

// now check if the query has posts and if so, output their content in a banner-box div
if ( $get_banner->have_posts() ) : while ( $get_banner->have_posts() ) : $get_banner->the_post();

$output = '<div class="container" align="center"><a href="'.get_post_meta( get_the_ID(), 'banner_link', true ).'">'.get_the_post_thumbnail().'</a></div>';

endwhile;
endif;
 wp_reset_postdata();
return $output;
}
?>

Answer 1

Do you need to query only the items that has banner_link value set to https://www.mypage.com ?

If no, you can remove the meta_query part from your query.

<?php
// function to show home page banner using query of banner post type
function wptutsplus_home_page_banner() {

// start by setting up the query
$get_banner = new WP_Query( array(
    'post_type' => 'banners',
    'meta_query' => array(
      array(
        'key' => 'banner_link',
        'value' => 'https://www.mypage.com'
      )
    )
));

// now check if the query has posts and if so, output their content in a banner-box div
if ( $get_banner->have_posts() ) { ?>
        <?php while ( $get_banner->have_posts() ) : $get_banner->the_post(); ?>

          <div class="container" align="center"><a href="<?php echo get_post_meta( $post->ID, 'banner_link', true ); ?>"><?php the_post_thumbnail(); ?></a></div>

        <?php endwhile; ?>
<?php }
  wp_reset_postdata();
}
?>

UPDATE

As you're using it inside a plugin. You can do like the following:

<?php
// function to show home page banner using query of banner post type
function wptutsplus_home_page_banner() {

// start by setting up the query
$get_banner = new WP_Query( array(
    'post_type' => 'banners',
    'meta_query' => array(
      array(
        'key' => 'banner_link',
        'value' => 'https://www.mypage.com'
      )
    )
));

// now check if the query has posts and if so, output their content in a banner-box div
if ( $get_banner->have_posts() ) : while ( $get_banner->have_posts() ) : $get_banner->the_post();

  $output = '<div class="container" align="center"><a href="'.get_post_meta( $post->ID, 'banner_link', true ).'">'.get_the_post_thumbnail().'</a></div>';

endwhile;
endif;
wp_reset_postdata();
return $output;
}
?>

And then call it anywhere with <?php echo wptutsplus_home_page_banner(); ?>

Let me know if it works.

Answer 2

You are looking for get_post_meta()

Your loop should look like:

<?php while ( $get_banner->have_posts() ) : $get_banner->the_post(); ?>

          <div class="container" align="center"><a href="<?php echo get_post_meta( get_the_ID(), 'banner_link', true); ?>"><?php echo the_post_thumbnail(); ?></a></div>

<?php endwhile; ?>

https://developer.wordpress.org/reference/functions/get_post_meta/