1

I've written a WordPress plugin that has a shortcode. The shortcode resides on a WordPress page on which there are other shortcodes. The other shortcodes output HTML and I would like to append HTML from my shortcode to that output.

I was wondering if I could use a DOMDocument and getElementById to accomplish this.

The WordPress page is like this:

[Shortcode #1]

[Shortcode #2]

[Shortcode #3]

[date_info]

My plugin does this:

function date_important_info(){

ob_start();
display_date($date);
$html = do_shortcode( ob_get_clean() );
return $html;

function display_date($date){ ?>
    <div style="">
        <span>Date:</span>
        <span><?php echo $date ?></span>
    </div>  
<?php }
}

add_shortcode('date_info','date_important_info');

Currently, my shortcode output appears at the bottom of the Wordpress page. I want the output from my shortcode to get appended to a div in the HTML that is output by one of the other shortcodes.

  • why not just pull the code from shortcode 3 (if that's where you're trying to add your sc output) and add it to your own sc function of date_info? then don't call sc 3. – pressword Aug 4 '17 at 19:58
0

First things first. You shouldn't really use echo inside a shortcode, unless there is NO way to return the value. In your case your can simply convert it to a function that returns a value:

function date_important_info(){

    return display_date($date);

    function display_date($date){ 
        $data = "
            <div id='my-shortcode' style=''>
                <span>Date:</span>
                <span> {$date} </span>
            </div>";
        return $data;
     }
}

add_shortcode('date_info','date_important_info');

Now, about your problem with appending the data. You can select the HTML output of your shortcode and append it to another element by using jQuery. Here's a quick example:

// Get shortcode's content
var content = $('#my-shortcode').outerHTML();
// Add it after the element you want
$('#the-element').after(content);

I've added an ID to your shortcode's wrapper, to be able to select it via jQuery. You can also use .append() or .before(), based on your needs.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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