show category with colour above event title views

[Pau]

Dear TECPRO,

Thanks again in advance for your support

In a previous ticket, we learn how to add category next to event title by doing this

https://theeventscalendar.com/knowledgebase/add-category-prefix-to-event-titles/

Im using The Events Calendar Category Colors plugin, so the category shows correctly with the right colour

BUT

I need the category with colour background to be separated from the title see attached image

I know very well you don’t offer customisation support, im just asking if you can hint the code snippet to ‘separate’ the event category from the Title field (but still showing)

Just that, many, many thanks

[Nico]

Hi Pau,

Thanks for getting touch with us, and glad to help you out once again here 🙂

The snippet will show categories in the title in a lot of places. Are you trying to modify this just in the event list widget as in the screenshot or do you want to modify the behaviour in all the site?

Also, can you please send me a link to the site where I can see this?

Please let me know about it and I’ll help you out,
Have a great weekend,
Nico

[Pau]

Hi Nico, thanks!

I want to make this change across the site, mostly list and photo views (and maybe day).

the site is :

http://79.170.44.126/ref-spainculturescience.co.uk/

http://79.170.44.126/ref-spainculturescience.co.uk/events/

As you can see (apart from other issues to be solved later) is the categories and title get very confusing as they are

so (and I’m not asking about CSS) I would like to ‘separate’ the category from the title if that makes sense

[Nico]

Perfect Pau, thanks for confirming!

I’m a bit out of time today but I’ll look into this tomorrow and make sure I find a solution for list, photo and day views + event lists widget.

Thanks for the patience while I work on this,
Best,
Nico

[Pau]

Thanks Nico, looking forward to it!

🙂

[Nico]

Hey Pau,

Here’s the snippet, add it to the theme’s (or child theme’s) functions.php file and let me know if it works for you:

/* Tribe add category after the title in list views and list widgets */
function tribe_add_category ( ) {

$cats = get_the_terms( get_the_ID(), Tribe__Events__Main::TAXONOMY);

if ( empty($cats) ) return false;

$cat_titles = array();

foreach( $cats as $i ) {
$cat_titles[] = $i->name;
}

// adjust markup if needed
echo '

' . implode(', ', $cat_titles) . '

';

}

// you can also use tribe_events_before_the_event_title
add_action( 'tribe_events_after_the_event_title', 'tribe_add_category' );
// you can also use tribe_events_list_widget_before_the_event_title
add_action( 'tribe_events_list_widget_after_the_event_title', 'tribe_add_category' );


Please remove the previous snippet!
Best,
Nico

[Pau]

Dear Nico, thanks again,

The site crashes when I remove the previous code snippet:

// Prepends category name(s) to the event titles
function tribe_events_title_include_cat ($title, $id) {

	$separator = ' » '; // HTML Separator between categories and title
	$cats = get_the_terms($id, 'tribe_events_cat');
	$is_ajax = defined('DOING_AJAX') && DOING_AJAX;
	$is_truly_admin = is_admin() && !$is_ajax;

	if (tribe_is_event($id) && $cats && !is_single() && !$is_truly_admin) {
		$cat_titles = array();
		foreach($cats as $i) {
			$cat_titles[] = $i->name;
		}
		$title = implode(', ', $cat_titles) . $separator . $title;
	}

	return $title;
}
add_filter('the_title', 'tribe_events_title_include_cat', 100, 2);

and add the new one:

/* Tribe add category after the title in list views and list widgets */
function tribe_add_category ( ) {
         
    $cats = get_the_terms( get_the_ID(), Tribe__Events__Main::TAXONOMY);
 
    if ( empty($cats) ) return false;
 
    $cat_titles = array();
 
    foreach( $cats as $i ) {
        $cat_titles[] = $i->name;
    }
 
    // adjust markup if needed
    echo '<p>' . implode(', ', $cat_titles) . '</p>';
     
}
 
// you can also use tribe_events_before_the_event_title 
add_action( 'tribe_events_after_the_event_title', 'tribe_add_category' );
// you can also use tribe_events_list_widget_before_the_event_title 
add_action( 'tribe_events_list_widget_after_the_event_title', 'tribe_add_category' );

(is ok because i did back up de functions.php and re-installed via FTP)

What could I be doing wrong?

[Nico]

Tnanks for following up Pau and sorry to hear about this issue 🙁

Most probably this is a formatting issue. Try pasting the new snippet in a plain text editor (like notepad in Windows or TextEdit -in plain text mode- for Mac), once the code is there copy it again to your file and re-test.

Also, I’ve tested the code locally and it’s running smoothly!

Please let me know if you can get this right,
Best,
Nico

[Pau]

Hi Nico, lol

yes, you are right, I tried that and works

BUT

I have the titles in the colour label and the categories as header title!! (see attached image)

It supposed to be the opposite; as it is, but the categories with their colour label, and the titles on the header (the client has put/written some categories with the title, but ignore that, you’ll have the idea)

kind of funny

can we fix that final issue?

many, many thanks!

[Pau]

to be very clear, see next attached image

[Pau]

This reply is private.

[Nico]

This reply is private.

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts