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 @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.

Have you given the above a try?

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 );

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 6 years, 11 months ago by Evan Herman.
• This reply was modified 6 years, 11 months ago by Evan Herman.
• This reply was modified 6 years, 11 months ago by Evan Herman.
• This reply was modified 6 years, 11 months ago by Evan Herman.
• This reply was modified 6 years, 11 months ago by Evan Herman.