[Resolved] Full Width Title On Single Post / Page

[Hftt]

I couldn’t be happier if GP can display post and page titles in full width.
Can I do like that in GP?

For example – Similar to this one:

http://prntscr.com/73j9eq

Is it possible?

Thanks T!

[Tom]

Do you mean having the page/post title be full width above the below content and sidebars?

If so, I may have an idea 🙂

Let me know!

[Hftt]

Absolutely. 🙂

Full-width Page/Post Title (above). Content + Sidebar (below).

Would it be possible?

[Tom]

For sure 🙂

1. Install a child theme: http://generatepress.com/api/themes/generatepress_child.zip

2. Add the following code to your child theme’s functions.php file:

add_filter( 'the_title', 'generate_remove_page_titles', 10, 2 );
function generate_remove_page_titles( $title, $id = null )
{
	global $post, $generate_content_filter_completed;
	
	if ( $generate_content_filter_completed ) {
		return $title;
	}
	
	if ( ( is_page() || is_single() ) && in_the_loop() && $title == $post->post_title )
		return '';
		
	return $title;
}

add_filter( 'the_content', 'generate_content_filter_completed' );
function generate_content_filter_completed( $content ) 
{
	global $generate_content_filter_completed;
	$generate_content_filter_completed = true;
	return $content;
}

3. Then add this CSS to your child theme’s style.css file:

.page .entry-content,
.single .entry-content {
      margin-top: 0;
}

.page .entry-header,
.single .entry-header {
      display: none;
}

4. Now, you can re-add the title above using a function like this to your child theme’s functions.php file:

add_action('generate_after_header','generate_add_title_below_header');
function generate_add_title_below_header()
{ 
	// If we're not on a page, don't do anything
	if ( is_page() || is_single() ) {
	?>
	<div class="page-header-content generate-page-header generate-content-header page-header-title">
		<div class="inside-page-header-container inside-content-header grid-container grid-parent">
			<header class="entry-header">
				<h1 class="entry-title" itemprop="headline"><?php the_title(); ?></h1>
			</header><!-- .entry-header -->
		</div>
	</div>
	<?php }
}

[Hftt]

Gotcha! Bravo! Thanks T.

Follow your instruction.

1. Remove this from content-single.php.

		<header class="entry-header">
			<?php the_title( '<h1 class="entry-title" itemprop="headline">', '</h1>' ); ?>
			<div class="entry-meta">
				<?php generate_posted_on(); ?>
			</div><!-- .entry-meta -->
		</header><!-- .entry-header -->

2. I couldn’t find –

... <h1 class="entry-title" itemprop="headline"> ...

in content.php. So I don’t remove anything from content.php.

3. Add code snippet in functions.php.

4. 🙂 🙂 I get full width title on single post / page.

Do I still need to change (add / remove) in content.php?

[Tom]

You can leave content.php as it is, it deals with the blog page, so you don’t want to move those titles.

content-page.php and content-single.php are the files you want to alter 🙂

[Hftt]

Alrighty. I will leave content.php as it is.

I don’t even want to look at those .php file. Scared to touch. Just a teeny tiny bit of PHP skill. 🙁

I know CSS and style .entry-title class.

GP is sooooo (d a m n) cool!

Just out of curiosity, how many people are developing GP? Just you … by yourself?

[Tom]

Just me! 🙂

Glad you got it all working!

[Tom]

Just an update, instead of having to copy the content-page.php and content-single.php files into your child theme, you can use this function to remove the title from pages and single post pages:

add_filter( 'the_title', 'generate_remove_page_titles', 10, 2 );
function generate_remove_page_titles( $title, $id = null )
{
	global $post, $generate_content_filter_completed;
	
	if ( $generate_content_filter_completed ) {
		return $title;
	}
	
	if ( ( is_page() || is_single() ) && in_the_loop() && $title == $post->post_title )
		return '';
		
	return $title;
}

add_filter( 'the_content', 'generate_content_filter_completed' );
function generate_content_filter_completed( $content ) 
{
	global $generate_content_filter_completed;
	$generate_content_filter_completed = true;
	return $content;
}

Then add this CSS:

.page .entry-content,
.single .entry-content {
      margin-top: 0;
}

.page .entry-header,
.single .entry-header {
      display: none;
}

A little bit cleaner 🙂

[Hftt]

Hi Tom

I delete content-page.php and content-single.php from child theme.
Add new function and CSS into child theme.

Then,
1. the title from single post
2. previous and next navigation links from post bottom

they all are gone.

Am I missing some steps?
Do I need to leave function from – http://generatepress.com/forums/topic/full-width-title-on-single-post-page/#post-107005 in child theme functions.php?

[Tom]

Ah, flaw in my code!

Try this function:

add_filter( 'the_title', 'generate_remove_page_titles', 10, 2 );
function generate_remove_page_titles( $title, $id = null )
{
	global $post, $generate_content_filter_completed;
	
	if ( $generate_content_filter_completed ) {
		return $title;
	}
	
	if ( ( is_page() || is_single() ) && in_the_loop() && $title == $post->post_title )
		return '';
		
	return $title;
}

add_filter( 'the_content', 'generate_content_filter_completed' );
function generate_content_filter_completed( $content ) 
{
	global $generate_content_filter_completed;
	$generate_content_filter_completed = true;
	return $content;
}

You will still need to use the function you linked to so it re-adds the title below the header. The function above basically makes it so you don’t have to have custom content-page.php and content-single.php files.

[Hftt]

🙂

That one works! Thank you so so much. You’re BATMAN! <– My favorite superhero!

[Tom]

Haha you’re very welcome! 🙂

[Diane]

can this still be used with the newest versions?
I added a child theme and added the code above. but it’s not showing any title or author or date 🙁

[Tom]

Are you trying to remove the page title from all pages?

[Author]

Posts