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:


// 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);


// 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() ) {
    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){
    <!--Table start-->

    <table class="table table-hover table-bordered">
        <?php $i = 0; ?>
        <?php foreach ($modals as $key => $title) { ?>
        <?php $i++; ?>
          <td><?php echo $i; ?></td>
          <td><a href="#cptmodal_<?php echo $title['id']; ?>" data-toggle="modal"><?php echo $title['title'];?></a></td>
        <?php } ?>
<!--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 class="modal-body">
<p><?php echo $title['content'] ?></p>
<div id="js_div" style="display:none"></div>
<div class="modal-footer">
<button class="btn btn-custom" data-dismiss="modal" aria-hidden="true">Stäng</button>
<?php } ?>
<!--Modal end-->
    <?php }
$output = ob_get_contents();

// Restore original Post Data

return $output;

// Conditional script tag dependent on custom field
if($script['script']) { function cptModal_footer_js() {
<script type="text/javascript">
<?php $script['script']?>
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) {   
    $("#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');
share|improve this question
add comment

Your Answer


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

Browse other questions tagged or ask your own question.