Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

So I wrote this custom post type that works as it should. The post type consist of a table of titles, when the heading is clicked a twitter bootstrap modal is loaded. Now I realized that I need to add an iframe to one of these modals and I need some advice how to do this. My initial solution was a conditional function that loads the iframe from javascript depending on if a custom field is set or not. The actual javascript gets added in the custom field. I have not been able to get this solution to work and need some advice. How would you do it?

My code:

<?php

// Custom Post Type Setup
add_action( 'init', 'cptModal_post_type' );
function cptModal_post_type() {
$labels = array(
    'name' => 'Modals',
    'singular_name' => 'Modal',
    'add_new' => 'Add New',
    'add_new_item' => 'Add New modal',
    'edit_item' => 'Edit modal',
    'new_item' => 'New modal',
    'view_item' => 'View modal',
    'search_items' => 'Search modals',
    'not_found' =>  'No modal',
    'not_found_in_trash' => 'No modal found in Trash', 
    'parent_item_colon' => '',
    'menu_name' => 'FAQ'
);
$args = array(
    'labels' => $labels,
    'public' => true,
    'exclude_from_search' => false,
    'publicly_queryable' => false,
    'show_ui' => true, 
    'show_in_menu' => true,
    'query_var' => true,
    'rewrite' => true,
    'capability_type' => 'page',
    'has_archive' => true, 
    'hierarchical' => false,
    'menu_position' => 21,
    'supports' => array('title','excerpt', 'page-attributes', 'custom-fields')
); 
register_post_type('cptModal', $args);
}

// FRONT END

// Shortcode
function cptModal_shortcode($atts, $content = null) {
// Set default shortcode attributes
$defaults = array(
    'backdrop' => 'true',
    'keyboard' => 'true',
    'show' => 'true'
);

// Parse incomming $atts into an array and merge it with $defaults
$atts = shortcode_atts($defaults, $atts);

return cptModal_frontend($atts);
}
add_shortcode('FAQ_modal', 'cptmodal_shortcode');




// Display latest WftC
function cptModal_frontend($atts){
$args = array( 'post_type' => 'cptModal', 'orderby' => 'menu_order', 'order' => 'ASC');
$loop = new WP_Query( $args );
$modals = array();
while ( $loop->have_posts() ) {
    $loop->the_post();
    if ( '' != get_the_title() ) {
        $title = get_the_title();
        $content = get_the_excerpt();
        $id = get_the_ID();
        $script = get_post_custom_values("script");
        $modals[] = array('title' => $title, 'content' => $content, 'id' => $id, 'divSpecial' => $divSpecial);
    }
}
if(count($modals) > 0){
    ob_start();
    ?>
    <!--Table start-->

    <table class="table table-hover table-bordered">
    <thead>
          <tr>
            <th>#</th>
            <th>Fråga:</th>
          </tr>
    </thead>
    <tbody>
        <?php $i = 0; ?>
        <?php foreach ($modals as $key => $title) { ?>
        <?php $i++; ?>
        <tr>
          <td><?php echo $i; ?></td>
          <td><a href="#cptmodal_<?php echo $title['id']; ?>" data-toggle="modal"><?php echo $title['title'];?></a></td>
        </tr>
        <?php } ?>
    </tbody>
    </table>    
<!--Table end-->
<!--modal start-->
<?php foreach ($modals as $key => $title) { ?>
<div id="cptmodal_<?php echo $title['id']; ?>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel"><?php echo $title['title'];?></h3>
</div>
<div class="modal-body">
<p><?php echo $title['content'] ?></p>
<div id="js_div" style="display:none"></div>
</div>
<div class="modal-footer">
<button class="btn btn-custom" data-dismiss="modal" aria-hidden="true">Stäng</button>
</div>
</div>
<?php } ?>
<!--Modal end-->
    <?php }
$output = ob_get_contents();
ob_end_clean();

// Restore original Post Data
wp_reset_postdata();    

return $output;
}

// Conditional script tag dependent on custom field
if($script['script']) { function cptModal_footer_js() {
?>
<script type="text/javascript">
<?php $script['script']?>
</script>
<?php
}
add_action('wp_footer', 'cptModal_footer_js');
}
?>

The script that I am trying to load in a custom field (1877 is the post id):

<script type="text/javascript"> 
$(function() {
$("#1877").one('click', function(event) {   
    event.preventDefault(); 
    $("#map").html('<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Sophiahemmet,+Valhallav%C3%A4gen+91,+Stockholm,+Sverige&amp;aq=0&amp;oq=sop&amp;sll=37.0625,-95.677068&amp;sspn=36.315864,86.572266&amp;ie=UTF8&amp;hq=Sophiahemmet,+Valhallav%C3%A4gen+91,+Stockholm,+Sverige&amp;t=m&amp;ll=59.344953,18.075211&amp;spn=0.011378,0.032015&amp;output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=Sophiahemmet,+Valhallav%C3%A4gen+91,+Stockholm,+Sverige&amp;aq=0&amp;oq=sop&amp;sll=37.0625,-95.677068&amp;sspn=36.315864,86.572266&amp;ie=UTF8&amp;hq=Sophiahemmet,+Valhallav%C3%A4gen+91,+Stockholm,+Sverige&amp;t=m&amp;ll=59.344953,18.075211&amp;spn=0.011378,0.032015" style="color:#0000FF;text-align:left">View Larger Map</a></small>').css('display','block');
    });  
});
</script>
share|improve this question
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.