Get the current post ID as a variable in Javascript

Question

I'm trying to echo the post ID in a post Javascript and not having any luck.

var post_id = '123';  // works fine

var post_id = '<?php global $post; echo $post->ID; ?>';  // echos 'ID; ?>'

var post_id = '<?php echo $post->ID;?>';  // echos 'ID; ?>'

Is there a correct way to echo the post ID?

Answer 1

You can pass variables to javascript using wp_localize_script function: https://codex.wordpress.org/Function_Reference/wp_localize_script

Add the following to functions.php

if(!function_exists('load_my_script')){
    function load_my_script() {
        global $post;
        $deps = array('jquery');
        $version= '1.0'; 
        $in_footer = true;
        wp_enqueue_script('my-script', get_stylesheet_directory_uri() . '/js/my-script.js', $deps, $version, $in_footer);
        wp_localize_script('my-script', 'my_script_vars', array(
                'postID' => $post->ID
            )
        );
    }
}
add_action('wp_enqueue_scripts', 'load_my_script');

And your js file (theme-name/js/my-script.js):

jQuery(document).ready(function($) {
        alert( my_script_vars.postID );
});

Note:

If you are trying to pass integers you will need to call the JavaScript parseInt() function.

Answer 2

It is available in the post_ID hidden field for both published and new posts. You can get it by using this simple jQuery code.

jQuery("#post_ID").val()

Answer 3

I use this -

document.querySelector('.status-publish').getAttribute('id');

This gives you post-xxx where xxx is the post number. You can then replace post- with an empty string.

var id = document.querySelector('.status-publish').getAttribute('id').replace("post-", "");

Answer 4

Ok, got it. Maybe this'll help someone. In theme functions.php:

function pid() {

global $current_screen;
$type = $current_screen->post_type;

    ?>
    <script type="text/javascript">
    var post_id = '<?php global $post; echo $post->ID; ?>';
    </script>
    <?php

} 
add_action('wp_head','pid');

Answer 5

to frontend postID = jQuery('article').attr('id').slice(5);

to backend post_ID = jQuery('#post_ID').val();

Answer 6

NB. As of WP 4.5 it is recommended to use wp_add_inline_script(), rather than wp_localize_script() - the later being intended for localization.

See: wp_localize_script() > More Info

wp_add_inline_script()

Answer 7

On the post edit screens when Gutenberg is enabled, you may use a JS variable set by the wp.media object.

wp.media.view.settings.post.id,

On the front end, the best approach was already outlined above.