[Resolved] Post Badges & WP Show Posts

[webcréateur]

Hi there,

we have to use Post Badges to show a little post badge after WordPress post title because there is no alternative.

https://prnt.sc/owh4xo

Do you know a better solution to show a little post badge after WordPress post title?

Anyway, we also have installed WP Show Post. As soon as we add a badge to a post we get a frontend error:

https://prnt.sc/owh6gx

Can you help us?

[David]

Hi there,

not sure of an alternative solution – how many different ‘badges’ do you need for your titles? May help with finding another method.

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

[webcréateur]

Thank you for reply.

At least 4 or 5 badges.

These contain different texts and it should be possible to assign them flexibly to the posts.

[David]

It will require some PHP and CSS. ( Two article links in the forum sidebar will explain adding PHP and CSS) – but we can try this:

1. First PHP Snippet – Register a Custom Taxonomy called Post Badge – you can then create your own badge terms.

add_action( 'init', 'post_badges_custom_tax' );
function post_badges_custom_tax() {
    register_taxonomy(
        'post-badges',
        'post',
        array(
            'label' => __( 'Post Badge' ),
            'rewrite' => array( 'slug' => 'post-badge' ),
			'hierarchical'      => true,
			'show_in_rest' => true,
        )
    );
}

You will now see ‘Post Badge’ as a taxonomy in your post editor. Just create new terms for each of your badges.

2. Second PHP snippet – filter the Post title to display the badge if one exists:

add_filter('the_title', 'badge_filter_title',10,2);
function badge_filter_title($title, $id) {
    $term = get_the_terms( $post->ID, 'post-badges' );
    if (!$term == '' && get_post_type($id) == "post" && ! is_admin() ) {
        $current_term = $term[0]->slug;
		$badge = '<span class="title-badge badge-' . $current_term . '">' . $current_term . '</span>';
		$title = $title . $badge;
    } 
		return $title;		
}

This will output this HTML inline with the title:

<span class="title-badge badge-slug">slug</span>

3. Now we can style each of our badges. First part is the general styling ie. all title-badges:

.title-badge {
    font-size: 0.3em;
    padding: 6px 6px;
    background-color: red;
    color: #fff;
    border-radius: 2px;
    vertical-align: top;
    margin-left: 10px;
}

Now we can change the style for each badge:

.title-badge.badge-slug {
    background-color: green;
}

Repeat this rule for each of your badges switching slug for each of the badge terms you generated. So if you created a badge called ‘premium’ the CSS selector would be:

.title-badge.badge-premium

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

[webcréateur]

Thank you very much! Very good alternative for us! 🙂

But we still have 3 issues so far with your solution:

1. The Post Badge is not shown everywhere (e.g. if post is output in Front page badge is not visible). I can see it only if I open the post.

2. Same Problem with WP Show Posts like with the Plugin Post badges on Front page. It breaks the news on Front page: https://prnt.sc/owl4la

3. If I use sidebar widget (recent post) and output a posts all post show badge but just one of them has post badge saved? https://prnt.sc/owl7uj

Maybe out config in WP Show Posts breaks it?

Thank you for your efforts.

[David]

Can you link me to your site?

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

[webcréateur]

Yes sure, can I send you a hidden Link somehow with Admin account??

[David]

You can edit your original topic – and use the Site URL field to share the link privately.
Won’t need admin login. If the site is behind a coming soon/maintenance then you can include them in the URL eg.

mysite.com/userYYYYpasswordXXXXX

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

[webcréateur]

Done with admin. URL is just our staging …

[David]

Dealing with the image issue first, looks like something ‘weird’ has happened only to the Images that were imported with the Dispatch Site – for some reason the Alt Text of the image is being filtered to include the badge.

So i edited the featured image for the Navalny Released from Jail post and gave it an alt / caption and description. And this looks to be fine. So if you want to delete the posts that were imported from the site library it should be fine. Let me know.

If you can leave one the old posts intact so we can take a look at why its doing it.

Sidebar titles may be a little more tricky to fix – ill have a think, worst case we will need to exclude them.

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

[webcréateur]

Thank you very much!

But this seems not to be the problem.

I created a complete new Post "A Complete new Post GP" and uploaded a new Picture and set all fields like alt caption description etc. unfortunately same problem on front page in the WP show post are [wp_show_posts name=”Standard”] …

[David]

It only seems to be that List that is the issue – what happens if you create a new WPSP list to display those posts?

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

[webcréateur]

Same problem if I use the same WP Show Post configuration. 😞 It happens if I set the image dimensions: https://prnt.sc/ownptb

[David]

Can you try adding this PHP snippet:

add_filter( 'wpsp_image_title', '__return_empty_string' );

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

[David]

Be good to know if that works – if not we may have an alternative solution. Let us know.

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

[Author]

Posts