Display page title at (static) homepage

Hello Guido,

We have indeed looked at this in the past and have decided against creating an option for this for the simple reason that to add a title to the static home page, all you need to do is add a Heading Block to the top of the page (in addition to the title).

If this is not possible or if we have misunderstood your requirement, please let me know.

Thanks,

Oliver

Hi Oliver,

You are right, I can add the heading block for the page title. But to duplicate the styling from other pages (the bold underlining) I must add custom CSS. The page title on other pages is wrapped in a header tag and this tag is targeted with this styling.

Guido

Hello Guido,

Yes, you need to do the following to make it look exactly like the other pages …

1. Add a Header Block and set the width to “Wide Width” in the block toolbar
2. In the Header Block’s settings under “Advanced” add entry-title to the “ADDITIONAL CSS CLASS(ES)” option
3. Wrap the Header Block in a Group Block by clicking the three dot icon in the block toolbar and select “Group”
4. In the Group Block’s settings under “Advanced” add entry-header to the “ADDITIONAL CSS CLASS(ES)” option
5. Add the following CSS to “Customizer – Additional CSS” …

.home .entry-header {
border-bottom: 3px solid var(--global--color-border);
padding-bottom: calc(2 * var(--global--spacing-vertical));
margin-bottom: calc(3 * var(--global--spacing-vertical));
}

Oliver

Hi Oliver,

Thanks!
Do you consider adding this as setting in a next version of your plugin?

Guido

Hi Guido,

OK, let me just revisit that idea; here’s the code that the theme uses to decide whether to show the title on a page or not …

<?php if ( ! is_front_page() ) : ?>
    <header class="entry-header alignwide">
        <?php get_template_part( 'template-parts/header/entry-header' ); ?>
        <?php twenty_twenty_one_post_thumbnail(); ?>
    </header><!-- .entry-header -->

The theme uses the is_front_page() function which doesn’t have a filter and although we could override it globally to always return false, that would have side effects elsewhere and is a very bad idea.

Instead, we could inject the entry-header further down the page by filtering the theme’s use of the_content() …

<div class="entry-content">
    <?php
    the_content();

… using a combination of adding the_content filter hook when is_front_page() returns true.

It would be important to make sure that this function is only added when get_template_part_template-parts/content/content-page filter hook fires and then for it to remove itself immediately otherwise any use of the_content() on the front page would be affected!

But … this would render the entry-header in the entry-content container not above it. It may be that that doesn’t matter and the title would end up looking as it does on other pages anyway. The only way to rectify that would be to use some JavaScript to move the element after the page had loaded but I don’t think that would be necessary.

Obviously we’d need to inject the afore mentioned CSS.

I think it’s definitely doable. And probably a good idea seeing as adding the Heading Block doesn’t render the title as on other pages.

I’ll get this scheduled in and let you know when it’s done.

Oliver

Hi Oliver,

Thanks again. Will look into this myself as well..
But I already notice that class alignwide is added to the header tag, so when including the header in the content section, this might cause a conflict if content section doesn’t have the same alignment / width. But this is just a quick observation without looking at the styling.

Because this might be quite some work you can always decide to include this in the premium version ??

Guido

We’ll get this in the free plugin; if we were to put it in the premium plugin then we wouldn’t be able to talk about it here due to forum guidelines!

I’ll let you know when it’s done but your comment about content alignment / width is a valid one and why we mentioned about maybe needing some JavaScript to move the injected element out of (and above) the main content area.

Oliver

Hi Oliver,

Have taken another look at this theme. Yes, it should be above the main content area, but only because of the featured image. By default title is displayed above this image.

Guido

Yes …

<?php if ( ! is_front_page() ) : ?>
    <header class="entry-header alignwide">
        <?php get_template_part( 'template-parts/header/entry-header' ); ?>
        <?php twenty_twenty_one_post_thumbnail(); ?>
    </header><!-- .entry-header -->
<?php elseif ( has_post_thumbnail() ) : ?>
    <header class="entry-header alignwide">
        <?php twenty_twenty_one_post_thumbnail(); ?>
    </header><!-- .entry-header -->
<?php endif; ?>

As you can see above, when the front page has a featured image, the entry-header is created to contain it. This means that the new option’s JavaScript will need to see if the entry-header exists already and if so insert the title above it otherwise it will need to create the entry-header and move the title accordingly.

Oliver

OK. I’ve just pushed a new version with options “Customizer – Content Options – Show Title on Front Page”.

Please update and let me know if that works for you.

Please make sure you delete any blocks you added with the class entry-header or entry-title as this may break the plugin’s new option.

Oliver

Hi Oliver,

I can confirm it works as expected, many thanks!

I do get a warning with debugging turned on, related to your plugin:

Deprecated: The PSR-0 Requests_... class names in the Requests library are deprecated. Switch to the PSR-4 WpOrg\Requests\... class names at your earliest convenience. in?
See this temp screenshot.

Guido

Those errors seem to be related to the block editor. Can you please provide:

1. What version of PHP you are running.
2. Confirm you have Twenty Twenty-One theme active
3. Confirm what you are using to “turn on debugging”
4. What other plugins you have active

Thank you.

Oliver

Hi,

Because I noticed this warning before I will open a new topic for this.

Guido

Ah, OK. Thank you!