[Support request] Displaying Post Title On Desktop In Header And Before Content On Rest

[Robert]

What I am trying to do is have a header element containing the post title and date that is displayed on desktop resolutions, then just be the hero on tablet and mobile. On tablet and mobile resolutions, the post title and date should show in the normal WP way. The header element, set to display on all posts, has the following code and functions as expected:

<div class="hide-on-tablet hide-on-mobile">	
	<h1><b>{{post_title}}</b></h1>
	<p><i>{{post_date}}</i></p>
</div>

I have found through reading this forum that, because I used the post title tag, the title will not display anywhere else. I also found code for a hook element here that restores the post title placement (bud I’m not sure how to add back the date yet). This hook restores the title for all resolutions and adding a div class to hide it on the desktop or a style to center it causes the entire post body to disappear. The code currently in the hook is as follows (execute PHP is checked):

<?php 
	echo '<h1>' . get_the_title() . '</h1>';
?>

While the hook does indeed add the post title back, I cannot seem to hide it on desktop resolutions or get it centered. I attempted the following code in both Simple CSS and the Additional CSS in the theme customizer. Unfortunately, this code does not work when the header and hook elements above are enabled.

/*Center Blog Titles*/
h1.entry-title {
    text-align: center;
}

/*Hide Blog Title On Desktop*/
@media (min-width:769px){
body.single .inside-article h1.entry-title {
    display: none;
}
}

The ultimate goal is to have the header hero contain the title and date on desktop, then just the hero on the rest (this part is currently working). On tablet and mobile the post title and date should be displayed in the typical WP manner, but it needs to be centered rather than left aligned.

[Fernando]

Hi Robert,

You’re on the right track with regards to the look you’re going for. Can you try modifying the CSS you added into something like this?:

/*Center Blog Titles*/
.single .inside-article h1 {
    text-align: center;
}

/*Hide Blog Title On Desktop*/
@media (min-width: 1025px){
   .single .inside-article h1 {
    display:none;
    } 
}

Hope this helps!

[Robert]

Thanks! That did the trick for the title. I was sure it was something simple sleep deprivation was keeping me from seeing

How would I get the post date to show under the same conditions as the title?

[Robert]

Hi, I was still wondering what the code needs to be to do the same for the post dates.

[Ying]

Hi Robert,

I’m not sure it’s a good idea to have more than 1 <h1> tags on the post as search engine might throw a multiple <h1> tags error on your site.

I would suggest just use the header element to present the <h1>.

Let me know what you think.

[Robert]

Ying, I’m not exactly sure what your mean.

The post_title and post_date tags are used in the post header element and set to only be visible on tablet and mobile (I’ve since decided the header element is the better option for mobile). The post_title and post_date tags are hidden in the header element for tablet views as it does not display properly. This means there is no post title or date visible on tablet resolution as it seems to block the use of the normal placements in the post.

The tablet view should show the post title and date in the usual WP placement.

If there is a better way to achieve this, please detail out how to do it. Thanks.

[Ying]

Search engine reads the HTML, though we don’t see it on frontend visually, but there are more than 1 <h1> in the HTML.

And Google especially doesn’t like using display:none; to hide the <h1> title.

Generally speaking, I don’t think it’s a good idea.

But if you still want it to be done, you can use this code to add post date:

<?php 
	echo '<p>' . get_the_date() . '</p>';
?>

[Robert]

OK, I see what you mean about the HTML.

Am I correct in assuming that the code will always have the <h1> tags due to the header element even when it is set to not be visible in tablet resolution? If so, then maybe displaying an h2 header visible only on tablet resolutions with the post title would achieve the look without messing up the HTML.

Also, would using the above code for the post date mess anything?

[Ying]

Am I correct in assuming that the code will always have the <h1> tags due to the header element even when it is set to not be visible in tablet resolution

Actually the <h1> tags are added by the code. If you remove <h1>and </h1>from the code, then there’ll be no <h1> tags from the header element, but it will still remove the default <h1> title from the post.

<div class="hide-on-tablet hide-on-mobile">	
	<h1><b>{{post_title}}</b></h1>
	<p><i>{{post_date}}</i></p>
</div>

and this code also adds <h1>.

<?php 
	echo '<h1>' . get_the_title() . '</h1>';
?>

I mean, technically you can remove the <h1> tags from 1 set of the codes so that there’s only 1 <h1>on the post page. But I’m not sure if it will run into any other potential issues.

[Robert]

Changing the code in the hook element to the following removed the second h1 set.

<?php 
	echo '<h2><center>' . get_the_title() . '</center></h2>';
	echo '<p><i><center>' . get_the_date() . '</center></i></p>';
?>

Is there a way to make this hook only apply to tablet resolution?

[Robert]

Or better yet, I changed the post_title tag in the header element to h2 and the hook element to h1. This keeps only one set of h1 tags on the post and the CSS I was using to hide the title on desktop and mobile resolutions continues to work. Now all I’d need is to figure out how to hide the post date on desktop and mobile.

[Ying]

Is there a way to make this hook only apply to tablet resolution?

I had an idea, if you can create another header element but with only the background image (an HTML comment is needed in the element content area in order to make the background image to show), we can use this PHP snippet to make the 3 elements to work it out. You just need to replace the element ID.

add_filter( 'generate_element_display', function( $display, $element_id ) {
    if ( !wp_is_mobile() && 2442/*hook element*/ === $element_id || !wp_is_mobile() && 2447/*header element with no text*/ === $element_id) { 
        $display = false;
    }
   if ( wp_is_mobile() && 2440 === $element_id/*header element with text*/) { 
        $display = false;
    }
    return $display;
}, 10, 2 );

In this way, you can have the header element with <h1> tag, and you don’t need to add the get_the_title()to the hook element, you also don’t need any CSS to hide anything.

You can find the element ID in the element editor URL:
https://www.screencast.com/t/3c7jKthKJwl6

More info about wp_is_mobile: https://developer.wordpress.org/reference/functions/wp_is_mobile/

[Robert]

So, I can see that there is only one set of h1 tags now with both the header and hook elements enabled. However, the post title and dates have gone back to not being visible outside of the header element. Here is the code I have in so far:

Header With Text (id=85): Displayed on Post, All Posts

<div class="hide-on-tablet">
	<h1><b>{{post_title}}</b></h1>
	<p><i>{{post_date}}</i></p>
</div>

Header Without Text (id=304): Displayed on Post, All Posts
<--!Comment-->

Hook (id=198): Generated before content and displayed on Post, All Posts. Execute PHP is checked.

<?php 
	echo '<h1><center>' . get_the_title() . '</center></h1>';
	echo '<p><i><center>' . get_the_date() . '</center></i></p>';
?>

The snippet I added is:

add_filter( 'generate_element_display', function( $display, $element_id ) {
    if ( !wp_is_mobile() && 198/*hook element*/ === $element_id || !wp_is_mobile() && 304/*header element with no text*/ === $element_id) { 
        $display = false;
    }
   if ( wp_is_mobile() && 85 === $element_id/*header element with text*/) { 
        $display = false;
    }
    return $display;
}, 10, 2 );

I have removed any CSS that was intended to alter the visibility of the post titles or dates.

[Elvin]

Hi Robert,

I think hook element w/ the ID of 198 won’t be necessary if you’re going w/ Ying’s approach as the theme’s default header and meta will appear if Hook Element w/ ID 85 is set to false.

Your site actually displays double titles and double meta if you check it on your phone.

If you’re using wp_is_mobile(), you’ll have to check thing on an actual mobile device as the inspection won’t work properly for a desktop browser as wp_is_mobile() depends on detection of the browser user agent string ($_SERVER[‘HTTP_USER_AGENT’]).

[Robert]

Ok, I think something may have gotten lost going down this particular rabbit hole, lol.

The goal is for the header element that includes the post date and title to display on BOTH desktop AND mobile. I need it to NOT display on tablet. On tablet I need the post title AND post date to display in the usual WP fashion.

[Author]

Posts