Wordpress and Colorbox with dynamic content

Question

I currently use the following code to pull in content from some custom posts called product using a colorbox:

Wordpress Content:

<a href='#1612' class='inline'>Test</a>

Script:

<script src="<?php echo get_template_directory_uri();?>/js/jquery.colorbox-min.js" type="text/javascript"></script>
<script>jQuery(document).ready(function(){
jQuery(".inline").colorbox({
    inline:true,
    width:"90%",
    maxWidth:800
}).mouseover(function(){ jQuery(this).click();})
jQuery('#cboxContent').mouseover(
    function(){ jQuery(this).click();
}); 

jQuery('#cboxContent').mouseleave(
    function(){ jQuery.colorbox.close();
});
});
</script>

Bottom of page template:

<div style="display:none">
<?php $loop = new WP_Query( array( 'p' => '399', 'post_type' => 'product', 'posts_per_page' => 1 ) ); ?>
    <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
        <div class="inline_content" id="<?php echo $post->ID ?>">
            <h2><?php the_title();?></h2>
            <div class="sixty">
                <?php the_post_thumbnail();?>
            </div>
            <div class="forty">
                <p>
                    <?php the_field('product_description');?>
                </p>
                <button onClick="window.open('<?php the_field('similar_product_link');?>');">See Similar</button>
                <button onClick="window.open('<?php the_field('product_link');?>');" class="dark">Buy</button>
                <?php endwhile; wp_reset_query(); ?>
            </div>
        </div>
</div>

This works great, however I have to add new instances of the last block over and over again, pre filling in the id number of the product. So, for new products added to the site, they won't pull in the content. What is the best way to carry over the href to the lightbox instantly, so it will pull in the right id numbers, just sing one block?

Answer 1

If I understand you right, than you should modify your last block of code like this:

<?php $loop = new WP_Query( array( 'post_type' => 'product', 'posts_per_page' => -1 ) ); ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<div style="display:none">
    <div class="inline_content" id="<?php the_ID(); ?>">
        <h2><?php the_title();?></h2>
        <div class="sixty">
            <?php the_post_thumbnail();?>
        </div>
        <div class="forty">
            <p><?php the_field('product_description');?></p>
            <button onClick="window.open('<?php the_field('similar_product_link');?>');">See Similar</button>
            <button onClick="window.open('<?php the_field('product_link');?>');" class="dark">Buy</button>
        </div>
    </div>
</div>
<?php endwhile; wp_reset_query(); ?>

This code will output one hidden block for every product instance. It will be some trouble if you have many products, so I suggest you to study: https://codex.wordpress.org/Class_Reference/WP_Query , https://codex.wordpress.org/Function_Reference/paginate_links and https://codex.wordpress.org/Pagination

P.S. In the same kind of loop you can output your links

<?php $loop = new WP_Query( array( 'post_type' => 'product', 'posts_per_page' => -1 ) ); ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
    <a href='#<?php the_ID(); ?>' class='inline'>Test</a><br>
<?php endwhile; wp_reset_query(); ?>