2

Automattic is building a React.js based theme called Picard. All the JS code is in picard.js, which you can see a reference to below. Although WordPress doesn't have a "router" per se (as explained here), React.js does and it is being used in this application to change the URL when a post is displayed.

My question is, if I wanted to build a JS application to display the posts (say in a file called posts.js), how can I use a different JS application (say in a file called post.js) to display an individual post?

In other words, if I don't want to use a client side router, but rather just have a small JS application created (and lazy loaded) for an individual post, and then if a user clicks back to see the lists of posts, have posts.js loaded.

function picard_scripts() {
    wp_enqueue_style( 'picard-style', get_stylesheet_uri(), '20150405' );
    wp_register_script( 'picard-script', get_template_directory_uri() . 
        '/picard.js', array(), '20150506', true );
    wp_enqueue_script( 'picard-script' );
    wp_enqueue_style( 'genericons', get_template_directory_uri() . 
        '/genericons/genericons.css', array(), '3.4' );
}
add_action( 'wp_enqueue_scripts', 'picard_scripts' );

In case you're wondering, I don't want to use a client side router because I find them buggy, but I do want to build UI's in JavaScript, so I'd prefer to just rely on WordPress to handle the URL/routing (even though WordPress doesn't have a router).

6
  • This is too meta for me and maybe others. I don't see any problem with doing anything, generally speaking, you just set ajax or json end points and write the JS to use them. This sounds trivial to me so I assume you are asking for something else but I am not sure what. Oct 4, 2015 at 0:27
  • the question basically is, how to use/load a different js flle for different endpoints. i.e. I wish to use main.js file for the posts lists, and then code contained in post.js file whenever I access an endpoint for a single post
    – Leahcim
    Oct 4, 2015 at 1:22
  • why not to send the JS with the data coming from the endpoint? You can probably detect when you already loaded it and avoid double loading it. Oct 4, 2015 at 1:32
  • not sure how to do that. First of all, the data coming from the end point is set in the the wp-rest api plugin. Can I add more to what is sent back, and, if so, how can I send back js? you mean a link to a file or...? Note, I'm not at all experienced with WordPress or php
    – Leahcim
    Oct 4, 2015 at 1:42
  • Yes, you can add elements to the json returned by the REST API. Of course you will have to code something server side for it. Once you have the JS at the client you can create a script element with it, and set some indication that this type os script was loaded so you will not have to load it again. Having the script in different JS files in different URL and pass the URL is probably cleaner but you will pay for it with some latency on first load of the JS (you will have to wait for it to load before being able to do anything). cont... Oct 4, 2015 at 1:59

1 Answer 1

1

I'm going to try to put an answer together based on my understanding of the information provided.

I'll outline a couple of assumptions before I start working through the logic:

1) Like Picard you'll bypass the standard WP template hierarchy in favor of an index.php fall through.

2) The endpoints will be provided by the WP REST API plugin.

3) For the sake of keeping the theme as simple as possible we'll place the routing logic in functions.php.

From here you need to decide if the site will be built as a single page asynchronous application or standard request/response style web site.

The single page application will rely more heavily on front-end routing. You may also have both posts.js and post.js preloaded depending on your JS structure/framework. Your URLs will contain hashes and your JS will map the routes to API endpoints.

// basic example - your route patterns may vary
http://domain.com/#posts
http://domain.com/#post/my-post-slug

The standard style web site will allow PHP to handle the routing. Your URLs will follow the standard WP structure and functions.php will enqueue your JS libraries based on the request:

// very basic routing logic - add any conditions as needed
function enqueue_template_scripts() {
    // load posts.js for blog page
    if(is_home()) {
        wp_enqueue_script('post-list', 'posts.js');
    }
    // load post.js for single requests
    if(is_single()) {
        wp_enqueue_script('post-single', 'post.js');
    }
}
add_action('wp_enqueue_scripts', 'enqueue_template_scripts');

NOTE: Other action hooks may work better for you depending on what you choose to do within your routing logic. I used 'wp_enqueue_scripts' in this example to demonstrate script inclusion.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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