2

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?

  • Are you doing it outside loop or inside.? And also you can use the second method to echo it. But remember if you put it inside single quotes than it Wil consider as a string. You Need to parse it before using it – Kvvaradha Dec 15 '15 at 1:00
  • Did you check get_queried_object_id() or get_the_ID()? – jgraup Dec 15 '15 at 1:02
7

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.

5

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()
  • 2
    This isn't always available, and can't be relied on. The hidden input with post_ID is added in the editor and not the front end, so it's not available to use in a theme. As long as you're aware of the limitations, this may be totally fine. – Morgan Estes Mar 7 '18 at 17:50
2

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');
  • I would remove the $type = $current_screen->post_type; – talsibony Jan 9 '18 at 17:11
  • I would generally avoid this method. Writing JS inside of php is generally bad practice and this particular method creates render blocking script. I suggest a solution midway between the suggestions. Assuming you're using a theme like the OP, you can easily add a hidden input in HTML and pass the post id by using get_the_ID(). (Inside of your template files, or it could be added to header.php) Once you have the hidden input, (though it could honestly be any DOM element), it's easily called from JQuery. This method allows for securely checking permissions and avoids render blocking. – JRad the Bad May 4 '19 at 18:49
2

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-", "");
1

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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