In my slider.php I have a loop that calls for a custom post type. That custom post type has a meta box for a slide url (link/title/etc). I can see the loop and everything else is working because in the source code it shows the corrent url from the meta box. But it will NOT load the slider. But lets say I drop a direct path to an image OUTSIDE the loop, the slider will work/load, and it will load the dynamic image from the metabox(as the second slide).

It seems, and I know this is wrong, but its almost as if the image from the metabox is being loaded after the script for the slides. So it will not see that an image exists and will not execute the js code for slides.

My head has the correct js function.

My meta box and post type are wokring and saving.

My home template which has include 'slider.php'. (below)

<div id="slides_wrap">
  <div id="slides_frame"> <!-- frame -->
    <div id="slides">

      <?php include 'slider.php'; ?>

      <!-- pagination things -->
  </div> <!-- frame -->
</div> <!-- slides wrap & shadow-->

My slider.php which has

<!-- start slider -->
<?php $args = array( 'post_type' => 'home_slider', 'posts_per_page' => 10 ); ?>
<?php $loop = new WP_Query( $args ); ?>

<div class="slides_container">
  <?php // query the "slider" custom post type and import its posts into the slider ?>
  <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>

  <?php $slide_img_src = smc_get_the_slide_img_source(); ?>

    <a href="#" title="Dum Slider 1" target="_blank"><img src="<?php echo $slide_img_src; ?>" class="max-image" width="" height="" alt="Slide 1"></a>

  <?php endwhile; ?>

<!-- if i add this below the slider will work and use this image below first (then load the loop???)
<a href="#" title="#" target="_blank"><img src="http://smc-collective.com/okay/images/sliders/dum_slide_2.png" class="max-image" width="" height="" alt="Slide 1"></a> -->

<!-- end slider -->

The slide.js file (the functions for slides) is also loading (obviously), and is being en-queued in the footer.

Im racking my brain, and php is NOT my strong point. I feel like I just cant figure it out, or what to even search for. Thanks in advanced.

Edit - If you need to see any more code, let me know. I dont know what else could be causing the problem.

3 Answers 3


The simplest explanation is that the HTML rendered in your code does not match what you're actually looking for. Without seeing the JS responsible for the slider, it's impossible to say where you went wrong, but you should compare the mocked-up version (that works) with what you're actually getting (HTML source after page render) to see if there were any typos or other potential mistakes.

Another possibility is that, although the URL to your image is correct, it has some strange character in there. Since you're doing this within an HTML attribute, I would suggest running your echo statement through sanitization using esc_attr():

<a href="#" title="Dum Slider 1" target="_blank"><img src="<?php echo esc_attr($slide_img_src); ?>" class="max-image" width="" height="" alt="Slide 1"></a>

If possible, would you mind sharing the slider code?


This line looks like a problem

<?php $slide_img_src = smc_get_the_slide_img_source(); ?>

Maybe you should have

<?php $slide_img_src = $smc_get_the_slide_img_source; ?>

Since $smc_get_the_slide_img_source is not a WordPress function, what is it doing?

It should be fetching your meta box, something like :

$smc_get_the_slide_img_source = get_post_meta($post->ID, 'image_field', true);
  • I have a theme-functions.php which has that function with get_post_meta. It fetches the data and places the src correctly. I can see the img path in the source. But slides.js does not see it??
    – n.stanley
    Jul 15, 2012 at 21:30
  • Run your js in the footer.
    – Wyck
    Jul 15, 2012 at 21:31
  • It is. Enqueue script to footer. With the slide function in head. It loads the script.
    – n.stanley
    Jul 15, 2012 at 21:36
  • Im thinking about trying a slide plugin, and connecting my meta box to it, but then its just silly extra code. This should work. Im using this technique from a theme i have, and removing some of the things like dynamic slide height, etc, that i dont need.
    – n.stanley
    Jul 15, 2012 at 21:41
  • You can run the script before it loads, which is what writing it in head and loading in the footer might very well be doing.
    – Wyck
    Jul 15, 2012 at 22:46

Maybe you should ensure the that the connector of your markup with slider has to run after jquery and after the slide.js

Priorities should be: 1. jQuery 2. Slide.js 3. the connection of the markup and the script.

Good luck! If you need any help, keep us posted!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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