1

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!

Improve this question
2
  • There's probably a pure code solution that I'm not aware of, but I often use the free plugin WP Code for problems like this. In the "Header and Footer" section of the plugin, enter your code in the "Header" box and save. Should show up on every page in the <head> section. Just tested it with the Twenty Twenty-Three theme and it works with that.
    – YourManDan
    Commented Aug 3, 2023 at 13:59
  • note that a map block would provide solutions for this. Likewise you don't need to use PHP to generate the center JSON, data attributes 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 using data attributes 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

1 Answer 1

Reset to default
0

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:

  • manually constructing JSON like that is dangerous! It's much easier to do <?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 errors
  • that JS should be in a javascript file, not inline, I can see it was included in the header so that you could print out the post meta values, but this should have been done in data attributes read off of document.getElementById("gmap") e.g. <div data-lat="123" data-long="456">
  • A simple block named 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
Improve this answer
2
  • Thank you very much for your hints, Tom! This is fairly new to me. data... wp_json_encode... block.json... I'll dig into it in order to understand the whole thing. Will get back soon. Thanks again.
    – Ferienflieger
    Commented Aug 3, 2023 at 18:50
  • building a block isn't strictly what you asked for, but, it is something you should take an interest in, there are many more options than you might be aware of, or than what I mentioned, but I don't want to sidetrack your question. You can always create new questions for new questions and get proper answers instead of short comments :)
    – Tom J Nowell ♦
    Commented Aug 3, 2023 at 18:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.