Pass WordPress Post ID To Another Page

1 Views

Hey going to explain what I am looking for this code to do. Hopefully someone smarter than me can help clean it up and put it together.

What I want to accomplish in general:

Read More

I have a image on a wordpress page and when it is clicked it will open a custom php file in a div on that page that displays a specific wordpress post based on the post ID.

Trying to get the script to work, but some things I am unsure of how to put together correctly.

This is what I have now:

The image link is essentially passing the URL of the post I want to load in the div. So first thing I need is the script to take the url of the post and get the post ID so the custom page can use it.

First Line gets the link from the image link. Second line would get post ID from URL. Not sure if this is 100% correct. Not sure if variable will work like that? It works on a page if I input the url manually. 

var post_link = $(this).attr("href");
$post_id = url_to_postid($post_link);

This is what I have for the whole thing:(Doesn’t work, just an example of what I am trying to accomplish) 

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){
    $.ajaxSetup({cache:false});
    $("a.ajax").click(function(){
        var post_link = $(this).attr("href");
        $post_id = url_to_postid($post_link);
        $("#tabs").html("loading...");
        $("#tabs").load(custom-page.php);
        return false;
    });
});

</script>

I am not sure the best way to pass the id variable so the custom php page can use it to load that post in the div. That part is missing.

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. I figured out how to accomplish this through trial and error. So here it is if anyone finds this and needs it.

    Link For Image:

    -class tells script this is the link. You will put the slug of post for href.

    <a href="SlugOfPostGoesHere" class="ajax" </a>

    Div on same page, this div will load custom php page from script:

    <div id="tabs">

</div>

    Script In Header:

    -Pulls slug from href and creates variable.(postslug in this case)

    -Loads “loading…” in div #tabs while loading.

    -Loads custom php page in the div #tabs on that same page with the variable appended to url.(you won’t see this in browser)

    -Scrolls to top of page.

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){
    $.ajaxSetup({cache:false});
    $("a.ajax").click(function(){
        var postslug = $(this).attr("href")
        $("#tabs").html("loading...");
        $("#tabs").load("../custom-page.php?slugid=" + postslug);
        $("html, body").animate({ scrollTop: 0 }, 600);
        return false;
    });
});
</script>

    And then on your custom PHP Page you need to put:

    <?php require( "wp-load.php" ); ?>

    (or whatever the path is to that wordpress page so you can use wp functions)

    Also this code to get the ID of the post from the slug that you passed in the URL:

    -First Line gets post slug from variable slugid in url and sets it to variable $slug.

    -Second line creates full URL from slug.

    -Third line gives you post ID from url.

    <?php
$slug = $_GET['slugid'];
$url = ("http://www.yourwebsite.com/" .$slug);
$postid = url_to_postid($url);
?>

    Now you can code page to use post ID to load the content you want.