Site logo

Archived topic

Change the post title and meta information order

7 replies · Started by Pradeep on March 12, 2019

Viewing posts 1–8 of 8

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!

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

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

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

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

No problem :)

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.

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

This archived topic is closed to new replies.