How to edit specific title instead of all the title calls

Question

I would like to add an html element right before the title of the blog posts. The code I'm using is as follows:

function add_html_above_title($title, $post_id) {
    if (is_single() && $post_id === get_the_ID()) {
        $html = '<div class="custom-html">Custom HTML content above the title</div>';
        // Return the HTML element followed by the original title
        return $html . $title;
    }
    return $title;
}

add_filter('the_title', 'add_html_above_title', 10, 2);

However, the problem with this code is that it also alters the titles used in other parts of the blog post template, like the title of the post used in the breadcrumb. How can I target only the main post title and not the other ones? Can't I for example first check if the title I'm going to modify is inside a specific css class and only then modify it?

Update: The output of debug_backtrace() ran on functions.php in the child theme:

Answer 1

There are several ways to achieve this, none of them elegant. That's because there is no general way to know exactly where get_the_title was called.

(1) Not completely foolproof, but possibly enough in your scenario would be to add is_main_query to your conditions. That would rule out titles generated in secondary loops. However, if the breadcrumb is generated inside the loop, this would obviously not work.

(2) You could use debug_backtrace to find which template file called get_the_title and add this being single.php as a condition. Assuming the theme uses such a template. Also assuming there is no secondary loop in this template.

(3) You could skip the filter on the server side and convert your code to a piece of javascript that detects the presence of a certain class and insert the html on the user end.