Append HTML Using Shortcode

Question

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

Johansson · Accepted Answer · 2017-08-05 09:01:15Z

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.

Stack Exchange Network

Append HTML Using Shortcode

1 Answer 1

Your Answer

Hot Network Questions

Append HTML Using Shortcode

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions