'how to get the current page id in wordpress using jquery

how to get a page id in wordpress using jquery alone.I am planing to change some styles of a page using a custom script for which i need to know page id.

jquerywordpress


Solution 1:[1]

function get_current_page_id() {
    var page_body = $('body.page');

    var id = 0;

    if(page_body) {
        var classList = page_body.attr('class').split(/\s+/);

        $.each(classList, function(index, item) {
            if (item.indexOf('page-id') >= 0) {
                var item_arr = item.split('-');
                id =  item_arr[item_arr.length -1];
                return false;
            }
        });
    }
    return id;
}

Add this function to your code. You can now get the page id by using:

var id = get_current_page_id();

Solution 2:[2]

Use wp_localize_script.

function my_custom_vars() {

global $wp_query;
    $vars = array(
        'postID' => $wp_query->post->ID,
    );

wp_localize_script( 'myvars', 'MyScriptVars', $vars );
}  

add_action ('wp_enqueue_scripts', 'my_custom_vars');

You can use the vaiables in your scripts this way..

<script type="text/javascript">
    var MyPostID = MyScriptVars.postID;
</script>

Solution 3:[3]

If you want to get the current page id in jQuery alone you can do it in following steps:

  • First make hidden input or hidden HTML tag and add the current page id in it by id of the element: c_pageid and the value get_the_ID();
  • In your jQuery file you can get this value by id like var pageId=$("#c_pageid").val();

This may solve your problem.

Solution 4:[4]

$(document).ready(function() {
    if ($("body").hasClass("page-id-3202")) {   
        // code here
    }
});

Solution 5:[5]

The best way to do this is by adding global javascript variables via PHP.

To do this first add the following script to your page.php template file:

<script>
var pageId = <?php echo isset($posts[0]) ? $posts[0]->ID : 'null'; ?>;
</script>

Now in in your javascript code you are able to use this global variable like this.

<script>
if(pageId !== undefined && pageId) {
 // do some code based on pageId
}
</script>

You can use this same technique to use other WordPress variables in javascript.

Solution 6:[6]

var pageId="<?php echo get_the_ID(); ?>"

Use the above line in your script

Solution 7:[7]

var current_page_id = get_current_page_id();

    function get_current_page_id() {
        var page_body = $('body.page');
        var page_id = '';
        if(page_body) {
            var classList = page_body.attr('class').split(/\s+/);

            $.each(classList, function(index, item) {
                if (item.indexOf('page-id') >= 0) {
                    page_id = item;
                    return false;
                }
            });
        }
        return page_id;
    }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Abhik
Solution 3 DᴀʀᴛʜVᴀᴅᴇʀ
Solution 4 Tyler2P
Solution 5 Wim Mostmans
Solution 6 Srividhya
Solution 7

Related Questions