Create a separate JS application for an individual post?

by

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).

1 Answer
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.

Leave a Comment