I am using javascript (angular.js) to make page animated page transitions in a wordpress site. I am not experienced enough to have the site completely built in angular and then display posts etc using angular (JSON? etc) to access the php.

Rather I have the the inital wordpress PHP generate angular elements;


<div ng-app="scdApp" id="ang-container">
    <div ng-view ng-controller="ViewCtrl" ng-class="animationStyle" class="view"></div>

which then access separate PHP files to display content etc.

app.js (part of)

AppModule.config(function($routeProvider) {

        .when('/page:pageNumber', {
            templateUrl: function ($routeParams) {
                return '/...../html/page' + $routeParams.pageNumber + '.php';
            controller: "PageCtrl"
            redirectTo: "/page1"

Currently, when the angular transitions occur asynchronously (AJAX?) I can access the wordpress PHP functions by crudely adding to one of these php files;


require './..../wp/wp-load.php';

$post = new StdClass;
$post->ID = $ID_I_wish_to_set;

However, I feel this is essentially loading wordpress twice, and I have to do it for each individual page it seems. Is there any way to access the wordpress PHP stuff from these 'separate' PHP files after the 'initial' template-angular-test.php file has loaded?

From the comments, it seems I need to grab wordpress stuff using JSON? But can I do this after the initial page has loaded? I have only posts of a custom post type displaying (animating) this way.

  • 1
    Not 100% certain I get what you want, you might want to and probably should extend on that, to get the answer you want. Generally I would say making use of WordPress' AJAX API and/or JSON API (not officially part - yet) seems to be logical. – Nicolai Nov 12 '14 at 16:35
  • @ialocin - Edited the question to be more clearer in what I wish to achieve – myol Nov 13 '14 at 10:31
  • 1
    Seems a bit clearer to me, but I'm actually not an expert in integrating AngularJS into WordPress, I just wanted to help you to get the help you want. @RyanLoremIpsum answer seems a good starting point. As for how to do it, the plugin he linked should help you, take a closer look how it is done there. After taking a very brief look, they use the WP JSON API (and there is no need to load WP again). Generally JSON is (in my mind) definitely the way to go, because you want the footprint to be as small as possible. – Nicolai Nov 13 '14 at 13:32

I believe the AngularJS plugin has solved this problem by filtering the content with the_content1 filter. They are using post meta to determine when the content should be loaded client side, but you can write your own function to determine when this is appropriate. This way the content is filtered instead of creating a new $post object.

Here is an example from the plugin WordPress › AngularJS for WordPress « WordPress Plugins

function angularFilter( $content ) {
        global $post;

        $meta = get_post_meta($post->ID, 'angularjsLoad', true);
        $meta = intval($meta);

                $content = '<ng-post-content id="'.$post->ID.'"></ng-post-content>';

        return $content;
add_filter('the_content', 'angularFilter', 10, 3);

I imagine you will need to filter the content so that it is similar to this line, except using the appropriate directive for your project $content = '<ng-post-content id="'.$post->ID.'"></ng-post-content>';

Also, you should probably be calling your script with wp_enqueue_script2.

This is the recommended method of linking JavaScript to a WordPress generated page.

If you are certain that you must make an AJAX request to PHP after the page has loaded, you will really need to study AJAX in Plugins « WordPress Codex. Note the variations in the wp_ajax action depending on whether the user is logged in (authenticated) and the ajaxurl for the viewer-facing side.

To summarize this process:

  • You must determine how to call your script. wp_enqueue_script() is recommended.
  • Your script needs to define the action, data to be passed (post ID, for example) and the AJAX url to pass it to.
  • In functions.php, add an action hook that is triggered by your AJAX request. You can do this with wp_ajax_(action)3. If the action in your script is called "foo", this would look like add_action( 'wp_ajax_foo', foo_callback );
  • In functions.php, write your callback function "foo_callback". Within this function you can include whatever PHP functions you need. For example, if you just need to display content from a single post and you got the post ID from your script, you could use get_post_field( 'post_content', $post_id ) to display it.

This selected answer by whiteletters and blankspaces is a good example with some explanation of how this process works: https://stackoverflow.com/a/15315024/2407742

Hopefully that points you in the right direction so that you can search or ask a more specific question if you are stuck.

| improve this answer | |
  • Thanks, this will likely help, but I still need to figure out how to get the 'initial' wordpress to communicate with the 'new' php files – myol Nov 13 '14 at 10:32
  • I had linked to the wrong reference. I have edited it to link to the filter (not the function) the_content. Does that make more sense now? codex.wordpress.org/Plugin_API/Filter_Reference/the_content – iyrin Nov 13 '14 at 13:32
  • Excellent, this is much clearer. Would you mind however clarifying Your script needs to define the action, data to be passed (post ID, for example) and the AJAX url to pass it to. ? – myol Nov 13 '14 at 15:18
  • 2
    When you look at examples you'll see something like var data = { 'action': 'my_action', 'whatever': 1234 };. The data is also where you'll need to define the post_id. The url: should be set to where this $_POST data is to be posted (admin-ajax.php). See "AJAX in Plugins" codex for more details about the url. The data will be passed as $_POST data to your hooked function. codex.wordpress.org/AJAX_in_Plugins – iyrin Nov 13 '14 at 16:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.