Question 30758 in Wordpress Question posted in
The official Wordpress documentation can be found here.

I want to display a php code shortcode in JavaScript, how do I do that? – WordPress

This is my code
enter image description here

<script>
    let myDiv = document.createElement("div");
    myDiv.classList.add('test');
    let my_var = `<?php echo do_shortcode("[elementor-template id="5078"]"); ?>`;
    myDiv.innerHTML = my_var;
    document.querySelector("#instagram").appendChild(myDiv);
</script>
Tags:

2

Answers


  1. 0

    Actually, it is not possible to do it this way because the script is being fired on the client-side while the PHP interpreter is working on the server-side.
    If you are sure that you need to use JS to render some PHP code, I’d suggest sending a request using wp_ajax https://codex.wordpress.org/AJAX_in_Plugins to send a request on a server, and then the server can return any PHP code result that you want. Don’t forget that shortcodes may use additional assets that will not be sent as a response.

    The best way is to use shortcodes in a native form inside the content or PHP templates. Especially the elementor template where you can create template parts for different places of the website easily.

    Login or Signup to reply.
  2. 0

    It’s an enclosure problem:
    You used nested double quotes in your php – resulting in breaking the echo.

    Provided, your <script> tag is in your template php (so your php shortcode could be parsed) try this (replace the shortcode double quotes by single quotes):

    <script>
    let myDiv = document.createElement("div");
    myDiv.classList.add('test');
    let my_var = `<?php echo do_shortcode("[elementor-template id='5078']"); ?>`;
    myDiv.innerHTML = my_var;
    document.querySelector("#instagram").appendChild(myDiv);
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search