Access a local JSON file in Wordpress Theme

Question

Background I am dynamically creating a JSON file of data when a user saves a page in the Wordpress backend. I'm doing this through the hook 'save_post' and saving the file 'network.json' using file_put_contents to the root of my theme folder. I'm doing this so I can access specific data from a js script in my theme.

Current Approach I have a js file enqueued into my theme with the following JS inside of it. The below is working but I'm wondering if it is the best approach for calling a local JSON file within a WP theme.

$.getJSON( "../wp-content/themes/ihdf/network.json", function(data) {
    console.log(data);
});

Is the above the proper and most technically sound way of doing it?

Other Approaches

I've previously used ajax in Wordpress by enqueuing a script and setting up the proper ajax function to call with admin-ajax.php. That seems overly complicated for my needs.

I could also set a js variable within my template file like the below:

var networkJSON = <?php get_template_directory_uri() . '/network.json' ?>

Localize script is the way to do it! See the documentation here. You can enqueue a script with localized data that can be accessed by your other js files. The answer here is the method I'm taking. — Celso
– Celso, Commented Apr 13, 2017 at 10:25

Adriano Monecchi · Accepted Answer · 2017-04-25 18:08:36Z

7

When it comes to working with remote requests on the server side, the file_get_contents() function seems to be a reliable option, but WordPress already includes an exceptionally useful API called HTTP API.

The HTTP API can be used for sending data to and retrieving data from remote APIs, and that also means any requests to your own server.

There are four primary functions that comprise the HTTP API in WordPress:

wp_remote_get() – For retrieving data from an endpoint
wp_remote_post() – For sending data to an endpoint
wp_remote_head() – For sending a HEAD request
wp_remote_retrieve_body() – For retrieving the main body content from the server response

For instance, you could use wp_remote_get() to retrieve data from the network.json file and then parse it along with the wp_localize_script() function, exposing the data you need to your enqueued js file.

Please take as a reference the following function (not tested), but you should not have any issues with it.

-- The Function --

function wp_request_localize_my_json_data() {

    // Helpers to define the $url path
    //$protocol = is_ssl() ? 'https' : 'http';
    $directory = trailingslashit( get_template_directory_uri() );

    // Define the URL
    $url = $directory . 'network.json';

    // Register main js file to be enqueued
    wp_register_script( 'network-js', $directory . 'assets/js/network.js', array('jquery'), false, true  );

    // Make the request
    $request = wp_remote_get( $url );

    // If the remote request fails, wp_remote_get() will return a WP_Error, so let’s check if the $request variable is an error:
    if( is_wp_error( $request ) ) {
        return false; // Bail early
    }

    // Retrieve the data
    $body = wp_remote_retrieve_body( $request );
    $data = json_decode( $body );

    // Localize script exposing $data contents
    wp_localize_script( 'network-js', 'networkJSON', array( 
            'network_url' => admin_url( 'admin-ajax.php' ),
            'full_data' => $data
        )
    );

   // Enqueues main js file
    wp_enqueue_script( 'network-js' );

}
add_action( 'wp_enqueue_scripts', 'wp_request_localize_my_json_data', 10);

If everything goes right, you'll probably end up with the localized data retrieved from the network.json file at your disposal.

Now let's suppose you have a variable named current_user in the network.json file. So in order to access this variable within your enqueued JS file, you would simply do:

<script type="text/javascript">
    var my_data = networkJSON.full_data;
    var user = my_data.current_user;
</script>

edited Apr 25, 2017 at 18:08

answered Apr 24, 2017 at 20:55

Adriano Monecchi

1,2301 gold badge16 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Celso Over a year ago

Thanks @adriano great approach. I didn't think about using the HTTP API given I was working from within my own server but makes sense. One question is how do I avoid using an absolute URL here $url = ''. $protocol . '://example.com/wp-content/themes/ihdf/network.json';

Adriano Monecchi Over a year ago

Hi there @Celso - Sorry for that, the $url variable was meat to be $url = $directory . 'network.json'; - assuming the file exists within your theme's main directory. You could also change it to any other path, for e.g $url = $directory . 'dynamic_data/network/network.json'; - which in turn assumes these directories also exists within your theme's main directory. I've update the code to reflect it.

saber tabatabaee yazdi · Accepted Answer · 2018-06-12 20:27:37Z

1

if you want to read json file in wordpress via plugin or theme, use this function.

function get_local_file_contents( $file_path ) {
    ob_start();
    include $file_path;
    $contents = ob_get_clean();

    return $contents;
}

tonight i want to read a json file in json folder beside my php file in plugin and find this article

i cant do it with file_get_contents()

answered Jun 12, 2018 at 20:27

saber tabatabaee yazdi

4,9953 gold badges53 silver badges63 bronze badges

Collectives™ on Stack Overflow

Access a local JSON file in Wordpress Theme

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related