0

I have created a custom post type in my wordpress theme dedicated to creating slides for a slider displayed on the homepage, It has a title, slide text and slide url and also featured image.

I'm now trying to get this info from the meta boxes within the custom post type and turn it into a slider that shows as many slides as there are posts.

Currently my outputted code is a bit of a mess and all that is happening is the featured image is being shown, but not in the right place and not with the text etc.

Here is my php code:

<section id="intro" class="main fullscreen">
<div class="slider-wrapper">
<div id="header_slider" class="owl-carousel owl-theme">

<?php $loop = new WP_Query( array( 'post_type' => 'slider', 'posts_per_page' => -1 ) );?>
<?php while ( $loop->have_posts() ) : $loop->the_post();?>

<?php
$slide_text = get_post_meta($post->ID, "_text", true); 
$slide_url = get_post_meta($post->ID, "_url", true); 
$slide_img = the_post_thumbnail(); 
?>

<div class="item slider-info" style="background-color:#3498db;">
<div class="text-slider">
    <p><?php echo $slide_text; ?></p>
        <a href="<?php echo $slide_url; ?>" id="scroll_to">
            <span class="scroll-down">
                <span class="fa fa-angle-down"></span>
            </span>see what we can do for you.</a>            
</div>
<?php echo $slide_img; ?>        
</div>

<?php endwhile; wp_reset_query(); ?>
</div>
</div>
</section>

And this returns the following in my HTML:

<section id="intro" class="main fullscreen">
<div class="slider-wrapper">
<div id="header_slider" class="owl-carousel owl-theme">

<img width="1230" height="620" src="http://resurrectiongroup.thedistractionsband.co.uk/wp-content/uploads/2014/05/slider-4.jpg" class="attachment-post-thumbnail wp-post-image" alt="slider-4" /><div class="item slider-info" style="background-color:#3498db;">
        <div class="text-slider">
            <p></p>
                <a href="#" id="scroll_to">
                    <span class="scroll-down">
                        <span class="fa fa-angle-down"></span>
                    </span>see what we can do for you.</a>            
        </div>
        </div>

<img width="1230" height="620" src="http://resurrectiongroup.thedistractionsband.co.uk/wp-content/uploads/2014/05/slider-1.jpg" class="attachment-post-thumbnail wp-post-image" alt="slider-1" /><div class="item slider-info" style="background-color:#3498db;">
        <div class="text-slider">
            <p>#about</p>
                <a href="#" id="scroll_to">
                    <span class="scroll-down">
                        <span class="fa fa-angle-down"></span>
                    </span>see what we can do for you.</a>            
        </div>
        </div>

</div>
</div>

</section>

I can't figure out what I have done wrong, I'm sure it's something to do with how I've set up the loop, but I'm not sure where to start looking. Any help would be appreciated

2

You are using the_post_thumbnail() which will echo the actual thumbnail. You should use get_the_post_thumbnail() if you want the value to be returned, not echoed.

So, change:

$slide_img = the_post_thumbnail();

To:

$slide_img = get_the_post_thumbnail();

You should also, as Matt points out, make sure you are using the correct meta field names and check if the values are set correctly.

0

It doesn't look like you are correctly referencing your field name in the get_post_meta(); function. I would start there because the rest of your code looks good to me...

get_post_meta($post->ID, "make_sure_this_is_the_full_and _correct_field_name", true); 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.