Show project information in front-end

Show project information in front-end

1. Fetching in a PHP template

To fetch the data in a PHP template you can use get_post_meta: https://developer.wordpress.org/reference/functions/get_post_meta/ (opens in a new tab)

You can fetch all project information in the project template file like this:

<?php $projectInfo = get_post_meta($postId, 'st_project_data', true); ?>

You will then have access to all the data, and can easily output a single value like the sale status:

<?php echo "Sale status:" . $projectInfo->sale_state ?>

2. Accessing project data in JavaScript

If you need to access the data in a JS module.

Load whatever JS files in functions.php

function my_theme_enqueue_scripts() {
    wp_enqueue_script('my-theme-script', get_template_directory_uri() . '/js/my-script.js', array('jquery'), '1.0', true);
}
 
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');

And store the JSON data in a global variable

function my_theme_localize_script() {
    global $post;
 
    // Get the JSON data from the custom meta field.
    $json_data = get_post_meta($post->ID, 'st_project_data', true);
 
    // Pass the JSON data to the JavaScript file.
    wp_localize_script('my-theme-script', 'my_theme_data', array(
        'json_data' => $json_data,
    ));
}
 
add_action('wp_enqueue_scripts', 'my_theme_localize_script');

You can then access and parse the JSON data in JS with

// Check if the JSON data is available.
if (my_theme_data.json_data) {
    // Parse the JSON data.
    const parsedData = JSON.parse(my_theme_data.json_data);
 
    // Access the parsed data and perform your desired actions.
    console.log(parsedData);
}

3. Fetching from WP API

If you need to load the data from whatever front-end framework, you can also get the data via WP API

Query the API with fetch or similar:

const jsonData = fetch('<api_url>/posts/<post_id>').then((res) =>
  res.json()
);
 
const projectData = jsonData.meta.st_project_data.<field_name>

PHP examples

// single-prosjekt.php or wherever you want to access the data
 
<?php
  $projectInfo = get_post_meta(get_the_ID(), 'st_project_data', true);
  $location = $projectInfo->location;
  $images = $projectInfo->images;
  $units_summary = $projectInfo->units_summary;
?>
 
<h1><?php the_title(); ?></h1>
 
<?php if ($location && $location->city): ?>
  <div><?= $location->city ?></div>
<?php endif; ?>
 
<!-- Display unit information -->
<?php if ($units_summary && $units_summary->unsold_units): ?>
  <div>Total unsold: <?= $units_summary->unsold_units->total ?></div>
  <div>Size from: <?= $units_summary->unsold_units->usable_area_from ?> m2</div>
  <div>Size to: <?= $units_summary->unsold_units->usable_area_to ?> m2</div>
  <div>Price from: <?= $units_summary->unsold_units->total_price_from ?></div>
  <div>Price to: <?= $units_summary->unsold_units->total_price_to ?></div>
<?php endif; ?>
 
<!-- Display all images -->
<?php if ($images): ?>
  <?php foreach($images as $image): ?>
    <figure>
      <img src="<?= $image->url ?>" alt="<?= $image->alt ?>" />
    </figure>
  <?php endforeach; ?>
<?php endif; ?>
InstallationEssential Grid compatibility