0

I want to show an iframe at the top of a specific Tag page, so once I have is_tag('my_tag'), I will add the iframe before the title of the page.

I've tried this code to show the iframe before the content of the page, but it didn't work:

// Show the iFrame at the beginning of the page
function show_iframe($content) {
    if ( is_tag('my_tag') ) {
        $before = '<iframe src="https://www.example.com" sandbox="allow-scripts allow-same-origin"></iframe>';
        return $before . $content;
    }
    return $content;
}
add_filter('the_content', 'show_iframe');

Is there any hook that runs before printing the title of the page? or any way to echo an HTML code before a chosen div in the page?

  • You can edit the template file directly as your iframe does not depend on any dynamic data. – Max Yudin Mar 25 at 11:56
  • I don't want to touch the original files of the theme or WordPress core. – Jafar Abazeed Mar 26 at 8:59
0

First, in WordPress lingo 'content' does not include 'title'. (Also, be careful with 'title'. Sometimes it means 'the heading above the main content, and below the site navigation and/or masthead', and sometimes it means the html title, which is a piece of text the browser shows at the top of the window or tab, in its history, etc. In this case, it sounds like you're referring to the former.

Second, in this case there isn't a hook to modify the title. Instead, modify a template. You might worry that you'd have to modify several template files, since web pages for the site will look different. Fortunately, usually, for consistency the top part of different kinds of web pages will look the same. So, you probably just have to modify header.php or some template part (probably in template-parts/header).

  • Can we do something without modifying the files of the theme? Like adding an action or something to the functions.php file? – Jafar Abazeed Mar 26 at 9:02
  • One clarification: there are title modification hooks, but I don't think just prepending your html will work. Anyway, yes, you shouldn't modify a third-party theme directly. That's what child themes are for. By modifying its functions.php you're already modifying the theme. That said, copying-and-modifying archive templates might be problematic because they're might be several. So instead I'm proposing a jQuery solution, which I'm adding separately. Time permitting, I'll see if there's a workable PHP solution. – Loren Rosen Mar 27 at 1:53
  • Thanks @LorenRosen, using a jQuery script seems to be the only solution right now. – Jafar Abazeed Mar 28 at 7:16
0

Use javascript in the browser. Here's a jQuery solution. Note the details depend on the theme details, your tags, desired iframe url, etc.

In functions.php add

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );
function my_theme_enqueue_scripts() {
    wp_enqueue_script('title-tweak',
                      get_stylesheet_directory_uri() . '/js/title-tweak.js',
                      array('jquery'));

}

and make the file (in your theme) js/title-tweak.js, containing

(function( $ ) {
    $(document).ready(
        function(){
            if ($("body").hasClass("tag-my_tag")) {
                $(".page-title").before ('<iframe src="http://www.gravatar.com/avatar"></iframe>');
            }

        } ); 
})(jQuery);

Addendum I did it a slightly more complicated way, because at one time the simpler way didn't work. But (at least on my browser) it does now.

(function( $ ) {
    $(document).ready(
        function(){
                $(".body.tag-my_tag page-title").before ('<iframe src="http://www.gravatar.com/avatar"></iframe>');
        } ); 
})(jQuery);

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.