[Resolved] Change the post title and meta information order

[Pradeep]

Hello there,

I would like to make some changes to posts archive page so it would only display the featured image, date without the year, hr/separator and then the post title – in that particular order. Is there a way to achieve the rest using hooks/filters?

Many thanks in advance!

GeneratePress 2.2.2

GP Premium 1.7.8

[Tom]

Hi there,

1. Make it so the featured image is set to above the title: https://docs.generatepress.com/article/adjusting-the-featured-images/

2. Disable all the post meta excerpt the date: https://docs.generatepress.com/article/blog-content-layout/

3. Add this PHP to move the date above the title:

remove_action( 'generate_after_entry_title', 'generate_post_meta' );
add_action( 'generate_before_entry_title', 'generate_post_meta' );

4. Add this PHP to remove the year:

add_filter( 'generate_post_date_output', function() {
	$time_string = '<time class="entry-date published" datetime="%1$s" itemprop="datePublished">%2$s</time>';
	if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
		$time_string = '<time class="updated" datetime="%3$s" itemprop="dateModified">%4$s</time>' . $time_string;
	}

	$time_string = sprintf( $time_string,
		esc_attr( get_the_date( 'c' ) ),
		esc_html( get_the_date( 'F j' ) ),
		esc_attr( get_the_modified_date( 'c' ) ),
		esc_html( get_the_modified_date( 'F j' ) )
	);

	return sprintf( '<span class="posted-on">%1$s</span> ', // WPCS: XSS ok, sanitization ok.
		sprintf( '<a href="%1$s" title="%2$s" rel="bookmark">%3$s</a>',
			esc_url( get_permalink() ),
			esc_attr( get_the_time() ),
			$time_string
		)
	);
} );

5. Add this CSS to add a line above the title:

h2.entry-title {
    border-top: 1px solid #ddd;
}

Let me know if that does the trick or not 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Pradeep]

Hello Tom,

Many thanks for the quick reply. Everything except this works very well:
remove_action( 'generate_after_entry_title', 'generate_post_meta' );

Any suggestions other than CSS? Many thanks in advance.

For the reference of anyone looking for a similar solution later, I used the below CSS to generate the border above, as it allows me to control the length of the line.

h2.entry-title:before {
    content: ""; 
    display: block; 
    margin: 0 auto; 
    width: 50%; /* This controls the length of the line*/
    padding-top: 20px; 
    border-bottom: 4px solid #191E32; /* This creates the border*/
	margin-bottom: 20px;
}

[Tom]

That code isn’t removing the post date below the title?

Try this:

add_action( 'after_setup_theme', function() {
    remove_action( 'generate_after_entry_title', 'generate_post_meta' );
} );

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Pradeep]

Hello Tom,

Your last snippet worked like a charm! I may have another question relate to removing excerpt so I’ll get back to you with that and then close the topic.

Many thanks for support!

Pradeep

[Tom]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Pradeep]

Hello again,

This maybe a big ask. Is there a way to convert the WooCommerce Single Product page tabs to appear vertically, with their data (like an accordion)?

Many thanks in advance.

[David]

Hi there,

that would require custom development. There are some free and premium plugins out there that do this as an alternative. None of which i have used as they don’t get very good reviews….

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts