0

What is the best way to modify the <header> element on all pages? I need to edit the <header> element on every page from:

<header class="light">

To

<header class="light" itemscope="itemscope" itemtype="http://schema.org/WPHeader">

and I would like it to read Is there a way to do this via a custom function? I know I can directly edit my header.php file, but I'd like to avoid that.

Perhaps there a WordPress filter hook that can modify the element for each page of my site? I looked through the WP list of filter hooks, but didn't see anything that would be relevant in this case. I may have missed it though.

The objective of this task is to add schema data, in microdata format, to my site (per the instructions on this page). If there is an easier/better method I would be interested in hearing about it. In the past I've added schema data, in JSON format, using Google Tag Manager. But in that case I had a JSON-LD file already prepared for me. In this particular case I can't figure out how to prepare that file.

  • 1
    Why don't you want to modify the header.php? You can create a child theme to make the changes if you are using a paid theme. – WizardCoder Jun 23 '17 at 11:41
  • @WizardCoder, I typically dislike editing theme files in this manner. If the the theme is updated, and the file in-question is modified by the theme developers, then then I'll have to be sure to re-add my edits to the new 'header.php' file. It adds an extra thing I have to worry about every time the theme is updated. That said, I still do it from time to time. But in this case, I'd like to avoid it if I can. FYI I am already using a child theme. – cag8f Jun 24 '17 at 11:18
2

The <header> elements are usually echoed directly by the theme. So without any hook or filter to change them. In that case, there is no way to change those elements with a function. Check your theme.

You could, of course, use javascript to place you attributes, but that would happen on the user end. Search engines would not see it. Since schema.org attributes are meant for search engines that is pretty useless.

What you could try is buffering the whole page and do a search and replace right before the page is completed. This is likely to run you into serious difficulties, but theoretically it's possible.

So, your best course of action is build a child theme and replace the part where the <header> tags are generated with your version. You would have to make a child theme anyway if you were going into the direction of a custom function as you suggest.

  • It would also be possible to make a plugin, but the easiest way would be to create a child theme. For Schema to be available to any user-agent it really needs to be coded in the source HTML, not manipulated later. The downside to creating a child theme is it's likely you'll need to adjust many files, and every time the parent theme has an update, you'll need to adjust your child theme as well. But, there really aren't any hooks for theme elements like header, footer, nav, etc., so a plugin would probably end up being a fragile regex filter. – WebElaine Jun 23 '17 at 18:39
  • cjbj and WebElaine, thanks to both of you. I am indeed already using a child theme, but would like to avoid editing theme files, mainly for the reasons WebElaine mentioned--I'll have to perhaps edit several files, and actively re-edit them every time the theme is updated. That said, I may have to resort to that in this case. I'll keep pursuing other solutions. One workaround may be to add the schema data in JSON-LD format rather than microdata. – cag8f Jun 24 '17 at 12:10
0

I am not sure that that kind of filter is available in wordpress. But, you could do it though javascript. And moreover, if you would like to make condition check for specific data. you could run in functions.php file.

function schema_filter() {

//write your condition  in here and pass variable to javascript with php code like that

    ?>
    <script>

        jQuery(document).ready(function($){
            $('header').attr('itemscope', 'itemscope');
            $('header').attr('itemtype', 'http://schema.org/WPHeader');
        });

    </script>
    <?php
}
add_action('wp_footer', 'schema_filter');
  • OK thanks for that. I tried adding the code to my functions.php, but the <header> tag does not get modified as expected. There are no JS console errors. Furthermore, as a test, I've also added to the script a line to print "Hello World," $(function () {$('body').append('<p>Hello World!/p>');}); This does indeed print. Thoughts? The page in-question is: dev.horizonhomes-samui.com/properties/hs0457-bangrak – cag8f Jun 24 '17 at 12:07
  • Hi @cag8f , I have updated the code and tested. – por Jun 24 '17 at 18:51
  • Hi @por, thanks very much for the assistance. I've tested your new code, yet am still encountering the same issue: the <header> tag remains unmodified. As before, there are no console errors, and the "Hello World" print statement is executed as expected. If you open the page in-question and view the page source, you can see the jQuery code I'm using. Is <header> being set by some other process after this hook fires? – cag8f Jun 25 '17 at 2:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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