0

I'm trying to create a shortcode to display the post categories with custom format (ex.: I need to display emoji acf field before each category).

I'm using version 6.0 of WordPress and the Full Site Editing to create the templates. I've added the shortcode in the single post template and inside the query loop block in the index template. It works fine for each single post page, but in the index page with all posts listed is showing the same category (the category of the first post) for every post.

I'm new to php and WordPress development. Any help on how to solve this issue will be much appreciated.

Code for the shortcode below:

function my_theme_post_categories_shortcode() {
    $post_id = get_the_ID();
    $post_categories = get_the_category( $post_id );
    $output = '';

    if ( $post_categories ) {
        foreach( $post_categories as $category ) {
            $category_emoji = get_term_meta( $category->term_id, 'emoji', true);
            $category_color = get_term_meta( $category->term_id, 'category_color', true);

            $output .= '<a href="' . esc_url(get_category_link( $category->term_id )) . '" style="color: var(--wp--preset--color--' . $category_color . ');">' . '<span class="emoji" aria-hidden="true">' . $category_emoji . '</span>' . $category->cat_name . '</a>';
        }
    }

    return '<div class="post-categories">' . $output . '</div>';
}
add_shortcode( 'post_categories', 'my_theme_post_categories_shortcode' );

I've managed to add the emoji to the core categories list block that lists all categories via filters, with the following code. But I can't manage to do the same for the core post terms categories that lists the categories of each post.

function my_theme_custom_list_categories( $list ) {
    $categories = get_categories();

    if ( $categories ) {
        foreach( $categories as $cat ) {
            $cat_emoji = get_term_meta( $cat->term_id, 'emoji', true);

            $find = '<a href="' . esc_url(get_term_link( $cat )) . '">';
            $replace = '<a href="' . esc_url(get_term_link( $cat )) . '">' . '<span class="emoji" aria-hidden="true">' . $cat_emoji . '</span><span class="cat-name">';
            $list = str_replace( $find, $replace, $list );
            $find = '</a>';
            $replace = '</span></a>';
            $list = str_replace( $find, $replace, $list );
        }
    }

    return $list;
}
add_filter( 'wp_list_categories', 'my_theme_custom_list_categories');
4
  • It might be easier to build a server rendered block, that way when you register it you can say that you need the post ID context and have it given to you, rather than having to call get_the_ID and hoping for the best
    – Tom J Nowell
    Commented Jun 22, 2022 at 17:07
  • @TomJNowell Thank you for your comment. I have no idea how to build a server rendered block. Can you provide a code example or reference any guide on how to do that? I've also tried to add_filter() to the_category to change the output of the default post terms categories, but with no success. Commented Jun 22, 2022 at 17:42
  • also have you considered using the standard category list methods that come with core instead of a shortcode, then inserting the emoji and colour via filters?
    – Tom J Nowell
    Commented Jun 22, 2022 at 20:12
  • I've tried to edit the standard post categories block via filters, but didn't manage to get there. Not sure which hook I should use in this case. With some research and trial and error I managed to add the emoji in the wp categories list via filter. But can't get it right for the post categories. Commented Jun 22, 2022 at 21:36

1 Answer 1

0

I totally forgot to post here the answer with the solution I found to this question. So, a year later, here it is. I found a filter to modify the core post terms categories, adding the respective emoji and color, and it worked perfectly with the query loop block.

function my_theme_custom_post_categories( $links ) {
    $post_id = get_the_ID();
    $post_categories = get_the_category( $post_id );

    if ( $post_categories ) {
        foreach( $post_categories as $category ) {
            $category_link = get_term_link( $category );
            $category_emoji = get_term_meta( $category->term_id, 'emoji', true );
            $category_color = get_term_meta( $category->term_id, 'category_color', true );

            $find = '<a href="' . esc_url( $category_link ) . '" rel="tag">';
            $replace = '<a href="' . esc_url( $category_link ) . '" rel="tag" style="--category-color: var(--wp--preset--color--' . $category_color . '); --category-color-bg: var(--wp--custom--rgba-color--' . $category_color . '-bg);"><span class="emoji" aria-hidden="true">' . $category_emoji . '</span>';
            $links = str_replace( $find, $replace, $links );
        }
    }

    return $links;
}
add_filter( 'term_links-category', 'my_theme_custom_post_categories' );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.