How can I add script and PHP code to the <head> section of a theme template of a particular Category that utilizes the built-in block editor in WP?
Here's an example:
<script type="text/javascript">
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("gmap"), {
<?php
$lat= get_post_meta($post->ID, 'gmap-latitude', true);
$lon= get_post_meta($post->ID, 'gmap-longitude', true);
echo 'center: {lat: '.$lat.', lng: '.$lon.'},';?>
zoom: 14,
});
}
window.initMap = initMap;
</script>
Some background info:
I'm trying to transition the theme of my website using old-school template files (ex., single-map.php) to the new twenty twenty-three WP theme using its built-in block editor.
And one of my website's Category ("Map") has 3.000+ pages, all of which with the above code in their <head> section (and another script in the <body>). Then, in the post editing screen of each page, I entered latitude and longitude values using Custom Fields.
Besides a solution for my initial problem, if there's a better way of doing this, I'm eager to know!
How can I add script and PHP code to the <head> section of a theme template of a particular Category that utilizes the built-in block editor in WP?
Here's an example:
<script type="text/javascript">
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("gmap"), {
<?php
$lat= get_post_meta($post->ID, 'gmap-latitude', true);
$lon= get_post_meta($post->ID, 'gmap-longitude', true);
echo 'center: {lat: '.$lat.', lng: '.$lon.'},';?>
zoom: 14,
});
}
window.initMap = initMap;
</script>
Some background info:
I'm trying to transition the theme of my website using old-school template files (ex., single-map.php) to the new twenty twenty-three WP theme using its built-in block editor.
And one of my website's Category ("Map") has 3.000+ pages, all of which with the above code in their <head> section (and another script in the <body>). Then, in the post editing screen of each page, I entered latitude and longitude values using Custom Fields.
Besides a solution for my initial problem, if there's a better way of doing this, I'm eager to know!
How can I add script and PHP code to the section of a theme template of a particular Category that utilizes the built-in block editor in WP?
The same way you were always supposed to in classic themes, nothing has changed!
Use the wp_head action in combination with the is_category action.
Note that while classic themes allowed you to modify the head tag directly via header.php, block themes don't, but doing that was never best practice to begin with.
Other notes:
<?php echo wp_json_encode( [ 'center' => [ 'lat' => ...], 'zoom' => 14 ) ); ?>, now the contents of those post meta can't break your JS and give you syntax errorsdata attributes read off of document.getElementById("gmap") e.g. <div data-lat="123" data-long="456">Ferienflieger/map-block that printed out lat and long on a div using a server side rendered block could be done entirely with PHP and a block.json file. This would make inserting blocks easier, optimise your site by allowing WP to only add the JS when the block is used, allow multiple maps if you so wanted, eliminate the need to put anything in the header, and avoid mistakes in the site editor. You could even give it a pretty map icon that shows up in the outliner
<head>section. Just tested it with the Twenty Twenty-Three theme and it works with that. – YourManDan Commented Aug 3, 2023 at 13:59centerJSON,dataattributes can do this already, and you can already use WP APIs to attach data to objects without having to manually print it out like that so this approach is already not ideal in a classic theme . Take a look at developer.wordpress.org/reference/functions/… and also consider usingdataattributes as right now this approach makes multiple maps impossible. Similarly in non-block themes you're meant to use filters to put stuff in the head – Tom J Nowell ♦ Commented Aug 3, 2023 at 14:37