how to get the current page id in wordpress using jquery

1 Views

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.

Post Views: 1

Related posts

Leave a Reply

7 comments 

  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();

  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>

  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.

  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.

  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;
    }