Grow your CSS skills. Land your dream job.

Using Jquery .load in WordPress

  • # December 23, 2009 at 12:09 pm

    I’m trying to load some php into a div after the first image of a wordpress post. I thought that with Jquery’s selectors it was natural to use Jquery for the job.

    Initially I tried:

    $j(document).ready(function() {
    $j(‘p:first’).append(‘<?php include(‘new-box.php’); ?>’)
    });

    But that didn’t seem to work.

    Then, I DID successfully add the div using:

    $j(document).ready(function() {
    $j(‘p:first’).append(‘<div id="new-box">Ooga Booga<br /></div>’)
    });

    But I could not get anything into the div with .load. I first tried:

    $j(document).ready(function() {
    $j(‘p:first’).append(.load("new-box.php"));
    });

    Then I tried putting in the div first then loading the content like so:

    var $j = jQuery.noConflict();

    $j(document).ready(function() {
    $j(‘p:first’).append(‘<div id="new-box">hooga<br /></div>’)
    $j("#new-box").load("new-box.php");
    });

    The file listed is in the theme dir of WP. My thoughts are that WP is making the relative url’s wonky, but I can’t see to get php calls like template_url() working in the .load().

    Any suggestions?

    Thanks!

    # December 24, 2009 at 8:37 am

    I was correct. The problem DOES seem to be connected with WP. I got it to work with a full path to the file I want to load. The problem now is using <?php bloginfo(‘template_url’); ?> the get the theme path.

    It would appear that the main problem is that php loads serverside while Jquery does IN browser so mixing the two are complicated. (thanks apljdi)

    Ideas how to call the template theme path in jquery?

    # December 25, 2009 at 8:03 am

    I found a better solution here.

    http://aext.net/2009/10/wordpress-hack- … t-content/

    By adding the content this way I can access plugins and wp hooks which weren’t working with the above solution.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".