I've created a custom post type called project for my Wordpress theme, which works fine. Each project has several custom fields, including a set of x and y values that indicate where the project should show on the front page (see the style section of the code below: I know it's not working but I'm showing what I want to achieve in pseudo code).
I could display the x value as <?php the_field('x'); ?>
and <?php the_field('y'); ?>
, as defined by the WordPress's Advanced Custom Field's documentation. However, how do I get the x and y value from PHP to the JavaScript, so I can use them to set the left
and top
value of the div that indicates where they should be on the front page?
Considering that there are many projects and I'm getting different sets of xs and ys in a loop, I'm thinking about writing all the x and y values into an external json file, and then load them back with JavaScript. Is this a feasible option, considering WordPress's structure? Or is there a better option to get these pairs of x and y values from PHP to JavaScript? I know AJAX is always an option, but I'm wondering if there is a simpler way, as I can almost get these exact value pairs in DOM already...
<?php
$args = array(
"post_type" => "project"
);
$projects = new WP_Query($args);
while($projects->have_posts()){
$projects->the_post();
?>
<a class="project" href="<?php the_permalink(); ?>" style="top:x'px'; left: y'px'">
<p><?php the_field("title"); ?></p>
</a>
<?php
}
?>