Topic: Display Categories & Tags with other Entry Meta

MalcolmMcAtee
April 12, 2024 at 5:22 am
Hello, I am trying to remove the Categories & Tags from the Entry Footer and Move them up top the Entry Header along with Post Date.

This is what I have so far:
```
add_filter('generate_footer_entry_meta_items', '__return_empty_array' );

add_filter('generate_header_entry_meta_items', function( $items ) {
    return array(
        'date',
	'categories',
        'tags',
    );
} );
```
This works well, but I would also like to be able to include the default icons for categories and tags, and include some explanatory text around the values in the array. Perhaps something like this:

Posted on: March 15, 2024 • Categories: Cat1, Cat2, Cat3 • Tags: Tag1, Tag2, Tag3

Thanks, Malcolm

Ying

April 12, 2024 at 8:06 am

Hi Malcolm ,

Try this CSS

.entry-meta >* {
    display: block !important;
}

span.posted-on:before {
    content: "Posted on: ";
}

span.cat-links:before {
    content: "Categories: ";
}

span.tags-links:before {
    content: "Tags: ";
}

.entry-header .gp-icon {
    display: inline-block;
}

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

MalcolmMcAtee
April 12, 2024 at 8:21 am

Thanks for your help.

This works, but I was hoping for a PHP solution. Mostly just for my education purposes, but maybe this is Generate press method?

— Maloclm

Ying

April 12, 2024 at 9:08 am

This is the simplest method 🙂

There are other methods:

1. PHP snippet:

add_filter( 'generate_inside_post_meta_item_output', function( $output, $item ) {
	if ( 'categories' === $item ) {
        return ' Categories:  ';
    }
	if ( 'tags' === $item ) {
        return ' Tags: ';
    }
	if ( 'date' === $item ) {
        return ' Published on: ';
    }
    return $output;
}, 50, 2 );

But you still need this CSS:

.entry-meta >* {
    display: block !important;
}
.entry-header .gp-icon {
    display: inline-block;
}

2. Using a block element – post meta template, you can create your own layout and add the category/ tag list of terms via GB’s button block or GB’s headline block.

MalcolmMcAtee

April 13, 2024 at 4:28 am

Thank you for your help.

Here is the complete PHP needed.

add_filter('generate_footer_entry_meta_items', '__return_empty_array' );

add_filter('generate_header_entry_meta_items', function( $items ) {
    return array(
        'date',
	'categories',
        'tags',
    );
} );

add_filter( 'generate_inside_post_meta_item_output', function( $output, $item ) {
	if ( 'categories' === $item ) {
        return ' Categories:  ';
    }
	if ( 'tags' === $item ) {
        return ' Tags: ';
    }
	if ( 'date' === $item ) {
        return ' Published on: ';
    }
    return $output;
}, 50, 2 );

What do the 50 & 2 at the end signify?

.entry-meta >* {
    display: inline-block !important;
}

.entry-meta .gp-icon {
    display: inline-block !important;
}

I switched the entry meta to inline-block as I want everything to sit on one line. I am still unable to make the default icons appear.

Thanks, Malcolm

David
April 14, 2024 at 4:20 am

Hi there,

the 50 is the priority
multiple function callbacks can be made from the same hook.
the priority allows you to set the order in which those functions are fired.
A lower number starting at 0 will fire first.
Here we used 50 to fire it later then any callback the theme may be making.

the 2 is the number of expected arguments required by the filter hook.
ie. $output & $item

Can i see the site so i can see whats up with the icons ?
MalcolmMcAtee
April 19, 2024 at 4:49 am

Hello, sorry for the late response

https://malcolmmcatee.com/blog/

Thanks, Malcolm

David

April 19, 2024 at 5:11 am

OK, from scratch.

Use this PHP:


add_filter( 'generate_header_entry_meta_items', function() {
    return array(
	'date',
        'categories',
        'tags',
    );
} );

add_filter( 'generate_footer_entry_meta_items', function( $items ) {
    return array_diff( $items, [ 'categories', 'tags' ] );
} );

add_filter( 'generate_inside_post_meta_item_output', function( $output, $item ) {
	if ( 'categories' === $item ) {
        return $output . 'Categories:  ';
    }
	if ( 'tags' === $item ) {
        return $output . 'Tags: ';
    }
	if ( 'date' === $item ) {
        return 'Published on: ';
    }
    return $output;
}, 50, 2 );

And this CSS:


.entry-header .entry-meta  {
    display: flex;
    column-gap: 10px;
}
.entry-header .entry-meta .gp-icon {
    display: inline-block;
}

That should keep the icons before the labels before the category and tags

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Display Categories & Tags with other Entry Meta