Force highlighting in h1 outside article tag?

Problem solved – I just wrapped the contents of the <h1 class="entry-title"> tag in an <article> tag!

I thought that by doing so it would make a train-wreck of the page, but it hasn’t, so all seems well.

That fired me up to write a function to enable a “remove highlighting” link on the page.

Brilliant plug-in. Thanks!

Hi, do I understand correctly that you placed the H1 in a dedicated <article> tag?

Semantically the H1 needs to be inside the ARTICLE tag together with the article content. Only then it will be correctly interpreted as the title of the post content. If you wrap the H1 in a separate (dedicated) ARTICLE tag, then it becomes the title of a different (empty) article, which is actually worse that before (the H1 outside the article, but probably still the only H1 on the page?)

So although it is working for highlights, the solution will make thinks very confusing for visually impaired visitors (using screen reader software) and for search engines.

Something to consider ??

I realise it’s not ideal, for the reasons you mention, but the only way I saw to enable highlighting of the title in the page that is linked to from the excerpt (the title of which page is displayed by the child theme’s header.php), was to wrap the <h1 class="entry-title> inside that header.php with the (admittedly spurious) <article> tag.

I had to create this <h1 class="entry-title> in my child theme’s header.php (commenting it out in the child theme’s template-parts/post/content.php and effectively transposing it from there to the header.php) in order to force the title to appear above the post thumbnail (“featured image”) in the search results (in the page linked to by the excerpt).

It would be better if the plugin provided a custom <span> class for such situations, but as it doesn’t I can’t see any other way of getting the title to become highlighted in the search results inside the page linked to by the (found) excerpt.

Would it be possible to add a custom element (a tag of some sort) to the hlst_selectors array by way of a function in the child theme’s functions.php and wrap the contents of the h1 in that instead ?

• This reply was modified 3 years, 1 month ago by sadhaka.

I tried wrapping the content of the h1 in <div class="bbp-topic-content"> (which selector I can’t see being used in twentyseventeen), and it worked for the title, but of course then no other instances of the search term on the page were highlighted, since the script only uses the first selector it finds; thus it found no other instances of bbp-topic-content and ignored the following <article>. tag.

But in the end I managed to fix it by changing the way I moved the post title to go above the featured image:

Instead of tinkering around with a new h1 in header.php, I moved the whole code block that shows the featured image from header.php (the block that produces the <div class="single-featured-image-header">), without the spurious <article> tags, and dumped that code in template-parts/post/content.php, just underneath where I had before commented-out the_title( '<h1 class="entry-title">', '</h1>' );.

Now having an enclosing <article> tag, it appears to work on the page title and the contents, and (hopefully) your concerns are no longer an issue (though if you see any obvious mistakes there, I’d appreciate it if you’d let me know).