Add H1 to page listing all posts

Hi @jbgglgdev,

Are you trying to alter an existing element, or are you trying to add a new element to the post page? It looks like the current blog post title is already wrapped in an H1 element.

Hi Evan,
I am trying to add a new element, a h1 title, to the blog page (the page listing all the blog post) not to a blog post.

Hi @jbgglgdev,

Are you trying to add the page title that appears on all of the other pages?

If so, inside of the MU plugin that you setup in the previous support thread you can try adding the following code:

/**
 * Add the page title to the blog page.
 *
 * @action primer_after_header
 *
 * @return mixed Markup for the page-title template.
 */
function primer_blog_page_title() {

	if ( ! is_home() ) {

		return;

	}

	get_template_part( 'templates/parts/page-title' );

}
add_action( 'primer_after_header', 'primer_blog_page_title', 12 );

This should add the same page title markup that exists on the other pages, to the blog page. is_home() is a conditional built into WordPress which checks if the user is on the blog listing page (set inside of the ‘Reading Settings’ settings on the dashboard).

is_home() reference

Let me know if that helps out at all, or if there is something else you were referring to.

thank’s for that one too. I only want to add a title to this specific Blog Posts page, not to indivudual post.
JB

Have you given the above a try?

Hi Evan, I just did.. and it did not allow me to ad a H1 on top of the page
https://ranktopay.com/google-blog-seo/

The idea is to add a H1 above the last blog post (Analyser etc…)
JB

Hi @jbgglgdev,

If your blog page is set in the settings (Settings > Reading > Posts Page) then the following code should work:

/**
 * Add additional H1 tag to blog page.
 *
 * @return mixed Markup for the additional title.
 */
function primer_additional_blog_h1() {

	if ( ! is_home() ) {

		return;

	}

	printf(
		'<h1>%s</h1>',
		esc_attr__( 'Additional H1', 'primer' )
	);

}
add_action( 'primer_after_header', 'primer_additional_blog_h1', 15 );

almost there ?? it does add the h1 but not in a very nice formated place, it’s on the left on the page

That’s correct – you’ll have to tweak things so that it fits in with the theme. Without adding it to the title container which I provided in the previous response, you should add classes/styles as needed to get things fitting right. We don’t have any styles built out for an element in that location because there is no element there in the base theme.

You can use the following CSS styles as a starting point. You may want to add a class to the h1 element, and tweak the following CSS to target that element.

.additional-title {
    max-width: 1100px;
    display: block;
    margin: 0 auto;
    padding: 1% 1rem;
}

or, on your site, you can exclude the class on the new h1 and do

body.blog .hero + h1 {
    max-width: 1100px;
    display: block;
    margin: 0 auto;
    padding: 1% 1rem;
}

Evan

• This reply was modified 7 years, 6 months ago by Evan Herman.
• This reply was modified 7 years, 6 months ago by Evan Herman.
• This reply was modified 7 years, 6 months ago by Evan Herman.
• This reply was modified 7 years, 6 months ago by Evan Herman.
• This reply was modified 7 years, 6 months ago by Evan Herman.

I must admin that you lost me on that one ??
I will try to understand and turn this around.

thank you for the help
JB

Bravo ! works perfectly with
body.blog .hero + h1 {
max-width: 1100px;
display: block;
margin: 0 auto;
padding: 1% 1rem;
}

Very nice and now pretty well SEO optimized page.
Google page 1 position 9 so far
All the best
JB

Hey @jbgglgdev,

Awesome! That is great news!

I’m glad you were able to get things looking right and I’m very glad we could be of some help. If you are enjoying the theme we would love a positive review in the WrodPress.org repo https://www.ads-software.com/support/theme/primer/reviews/#new-post

Have a great rest of your day!

Evan