Skip Navigation

[Resolved] Add class if post title more than a certain number of characters

This thread is resolved. Here is a description of the problem and solution.

Problem:
How to add class to anchor if post title is more than certain number of characters.

Solution:
To count the number of characters you can use jQuery and using jQuery you can easily add/remove the class name to the anchor tag.

You can find the proposed solution with the following reply:
https://toolset.com/forums/topic/add-class-if-post-title-more-than-a-certain-number-of-characters/#post-392959

Relevant Documentation:

This support ticket is created 7 years, 11 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Kolkata (GMT+05:30)

This topic contains 2 replies, has 2 voices.

Last updated by GeorgeM4735 7 years, 11 months ago.

Assisted by: Minesh.

Author
Posts
#392712

I am using a custom shortcode to truncate the post title inside a View.

In functions.php I use:

// Trim custom field shortcode
add_shortcode('trim', 'trim_shortcode');
function trim_shortcode($atts, $content = '') {
  $content = wpv_do_shortcode($content);
  $length = (int)$atts['length'];
  if (strlen($content) > $length) {
    $content = substr($content, 0, $length) . '…';
  }
  return $content;
  
}

Then inside the View:

[trim length="27"][wpv-post-title][/trim]

It works fine(title gets trimmed by 27 characters) but I would like to add a conditional statement which adds a class named "tooltips" to the parent container if the post title length is greater than 27 characters like this:

<a title="[wpv-post-title]" class="custom-link tooltips" href="[wpv-post-url]" data-id="[wpv-post-id]">[trim length="27"][wpv-post-title][/trim]</a>

IS there a way to write a View conditional statement for this?

#392959

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Hello. Thank you for contacting the Toolset support.

I think this can be easily achieved by adding jQuery code to your view's JS box.

You should fetch all the anchors using jquery and run a loop, check each anchor text character count and add class accordingly.

This links may help you:
=> http://stackoverflow.com/questions/18823065/how-can-i-get-the-text-inside-an-anchor-tag-in-jquery
=> http://stackoverflow.com/questions/3871228/get-text-from-anchor-tag

#392996

Brilliant Minesh, I made it work!

jQuery(document).ready(function($){

	$(".link").each(function(){
    	if ( $(this).text().length > 27 ) {
        	$(this).addClass('tooltips');
        }
	});
  
}); 

Thanks again for your pointers!

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.