I’m gonna post a fiddle because it’s easier to explain.
$("#focus a").mouseenter(
function(){
this.style.color = '#cc0000';
$('<p>content from post that the hovered-over link points to.</p>').replaceAll('#child p');
}
);
How can I access post information that is referenced by a link to that post content? I’d like to use that information to load that post content into another div, but I’m just not sure where to begin with this (what WordPress PHP can I use? JS?). Anything, even screaming at me for being dumb, would be helpful!
To clarify what’s going on in the fiddle,
- Once a user hovers over a link (to another post), the child div loads that linked-to post content.
- Don’t worry about the .click() event. I’m sure solving the above would provide insight into this.
Thanks!
EDIT:
I also believe I should use
this.getAttribute('href')
to get the linked-to post, but I’m not sure what wp function I should (or could!) use to get the content of that post once I have the reference.
You can do it using
jQuery ajax
, well, follow my instructions step by step.1. Create a folder in your theme folder
js
, suppose your theme folder is twentytwelve, so it should be2. Create a file into your
js folder
and name itmyScript.js
3. In your
functions.php
file add4. Also add following code in your
functions.php
5. Now in the
myScript.js
file, add following codePut the above code inside
jQuery(function($){...});
function (the ready event of jQuery). It’ done! Now you can fetch your post content usingajax
.Explanation :
When you’ll click any link inside the element (assume a div) with class name
your_post-entry
, the click event will fire (You know that) and it’ll send a post request tohttp://yourDomain.com/wp-admin/admin-ajax.php
becausemyAjax.ajaxUrl
contains thaturl
and it’s (myAjax object) available to our script throughwp_localize_script
that we have in ourfunctions.php
. Theajax
request will also send some variables to the$_POST
array and those areaction
andpost_url
, thepost_url
contains thepermalink
of the post andadmin-ajax.php
will run ourdo_myAjaxFunction
which will fetch the content of the post and send it back to the browser because we’ve added actions usingadd_action( 'wp_ajax_myAjaxHandler', 'do_myAjaxFunction' )
, which tells theWordPree
that whenever you get an ajax request formyAjaxHandler
action, please run thedo_myAjaxFunction
function. The firstadd_action
iswp_ajax_nopriv_myAjaxHandler
, which is required to make the ajax request work even when user is not login in the wordpress backend, withoutwp_ajax_nopriv_myAjaxHandler
the ajax request won’t work if the user is not logged in. Notice the line$('#ajax_post').html(data);
in thesuccess
callback, it’ll insert the returned data into theelement/div
with anid
ofajax_post
, so make sure to use appropriateid
andclass
name in the click event.If you don’t want to use
ajax
for every post then you can add/generate aclass
for thosepost links
that you want to use ajax, for example,ajaxPost
and in the click event you can useNow you know how to do it so I think you can do it using
mouseenter
instead ofclick
if you need to do this way (you gave an example of mouseenter).Some usefull links : wp_ajax_ and how-to-use-ajax-in-wordpress