Trying to get primary category to show on Elementor Posts badge

Resolved

(@jayjay57)

Hey all,

I absolutely love TSF plugin, it’s now my go-to SEO plugin for WordPress! For the past week, I’ve just been struggling with one small issue on my website.

I’m using the Elementor Posts widget to display posts in a grid and also using the badge feature (category taxonomy). Unfortunately, this causes the badge to display the first category alphabetically if a post is in multiple categories. I’d rather the primary category, as selected by TSF, to be the only one displayed on the badge.

I’ve found the following code which does exactly this, but sadly it’s for Yoast SEO. I was wondering if anyone would be able to modify this to work with TSF?

/**
 * Replace original card skin with skin that uses the primary tag set by yoast seo
 */
add_action( 'elementor/widget/posts/skins_init', function( $widget ) {
  
	if (!class_exists('\\WPSEO_Primary_Term')) {
		return;
	}

	class CardSkinWithPrimaryTerm extends \ElementorPro\Modules\Posts\Skins\Skin_Cards {
		protected function render_badge() {
			$taxonomy = $this->get_instance_value( 'badge_taxonomy' );
			if ( empty( $taxonomy ) || ! taxonomy_exists( $taxonomy ) ) {
				return;
			}

			$primary_term = new \WPSEO_Primary_Term( $taxonomy, get_the_ID() );

			if ( ! $primary_term || ! $primary_term->get_primary_term() ) {
				return parent::render_badge();
			}

			$primary_term = get_term( $primary_term->get_primary_term(), $taxonomy );

			?>
			<div class="elementor-post__badge"><?php echo $primary_term->name; ?></div>
			<?php
		}
	}

	// unregister the original cards skin including all hooks
	$original = $widget->get_skin( 'cards' );	
	remove_action( 'elementor/element/posts/section_layout/before_section_end', [ $original, 'register_controls' ] );
	remove_action( 'elementor/element/posts/section_query/after_section_end', [ $original, 'register_style_sections' ] );
	remove_action( 'elementor/element/posts/cards_section_design_image/before_section_end', [ $original, 'register_additional_design_image_controls' ] );
	$widget->remove_skin( 'cards' );

	//reregister skin
	$widget->add_skin( new CardSkinWithPrimaryTerm( $widget ) );
} );

Thanks so much for your time! The website is https://easywithai.com if it helps.

The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

Plugin Author

Sybre Waaijer

(@cybr)

1 year, 3 months ago

Howdy!

I have no idea if this works, but it should do the same (and more securely), and then with TSF instead of Yoast’s primary term selection:

// Replace the original card skin with skin that uses the primary term set by TSF.
add_action(
	'elementor/widget/posts/skins_init',
	function ( $widget ) {

		if ( ! function_exists( 'tsf' ) ) return;

		class CardSkinWithPrimaryTerm extends \ElementorPro\Modules\Posts\Skins\Skin_Cards {

			protected function render_badge() {

				$taxonomy = $this->get_instance_value( 'badge_taxonomy' );

				if ( ! taxonomy_exists( $taxonomy ) )
					return;

				$primary_term = tsf()->get_primary_term( get_the_ID(), $taxonomy );

				if ( empty( $primary_term->name ) )
					return parent::render_badge();

				printf(
					'<div class=elementor-post__badge>%s</div>',
					esc_html( $primary_term->name )
				);
			}
		}

		// unregister the original cards skin, including all hooks
		$original = $widget->get_skin( 'cards' );
		remove_action( 'elementor/element/posts/section_layout/before_section_end', [ $original, 'register_controls' ] );
		remove_action( 'elementor/element/posts/section_query/after_section_end', [ $original, 'register_style_sections' ] );
		remove_action( 'elementor/element/posts/cards_section_design_image/before_section_end', [ $original, 'register_additional_design_image_controls' ] );
		$widget->remove_skin( 'cards' );

		//reregister skin
		$widget->add_skin( new CardSkinWithPrimaryTerm( $widget ) );
	}
);

Thread Starter

jayjay57

(@jayjay57)

1 year, 3 months ago

Sybre, that worked!! Thank you so much. Absolutely amazing 🙂 Hopefully this can be helpful to others who are looking to do the same!

Plugin Author

Sybre Waaijer

(@cybr)

1 year, 3 months ago

Cheers! I’m glad it worked first try 🙂

If you’d like, please leave us a review: https://tsf.fyi/review. Thank you!

ediblemaine

(@ediblemaine)

1 year, 1 month ago

Hi, This is exactly what I need but where do I place this code? HELP!

Thread Starter

jayjay57

(@jayjay57)

1 year, 1 month ago

Hi ediblemaine, you should place the code in your theme’s “functions.php” file at the very bottom. It’s recommended to use a child theme otherwise it will be overwritten whenever you update your theme.

I hope it works for you as well. All credit goes to Sybre Waaijer for making the code usable!

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Trying to get primary category to show on Elementor Posts badge’ is closed to new replies.