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.

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.

• php
• plugin-development
• shortcode

• 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 Commented Aug 4, 2017 at 19:58

1 Answer 1

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.