How To Shorten Post Titles that Wrap When Displayed as Teasers
When displaying the post title in a teaser, Thesis displays the whole title. This can be too long for the line and hence wrap, which causes the adjacent teasers to be misaligned. This can make the make look a bit untidy: especially in the example of the previous post where we have three teasers per row where we only want to display the post title and a thumbnail image.
To get around this I used jQuery to truncate longer titles and add an ellipsis (…)
The changes to custom_functions.php were as follows
add_action ('wp_head','add_jquery_stuff'); //put the query in the header
function add_jquery_stuff () {
?>
<script type="text/javascript">
function shorten(sometext,maxlen) { return ((sometext.length<=maxlen)?sometext:(sometext.substr(0,maxlen-3)+"...")); }
</script>
<script type="text/javascript">
jQuery(document).ready( function () {
jQuery('.teaser h2.entry-title a').each(function(index){ //gets the link in all teaser headlines
var t = jQuery(this).text();
jQuery(this).text(shorten(t,40)); //truncate to 40
});
});
</script>
<?php
}
If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
{ 8 comments… read them below or add one }
This is interesting because it require further thought about how to create a title that will be compelling in the first 40-50 characters.
I notice from elsewhere some work going into Thesis teasers. I haven’t dug into that yet, but I notice someone who posted a feature request on Trac for better teaser versus excerpt handling didn’t get a lot of traction. It’s a sore point for me because while excerpts can be teasers, teasers don’t have to be excerpts. The difference seems to be totally lost on a number of people.
BTW, moderating comments is really no longer necessary given a suite of plugins. I check my spam queue a couple of times per week for false positives, and it’s all just humming along now. I would contact you but I didn’t see an easily accessible contact form or an email address.
Dave Doolin´s last blog ..DIY WordPress: Thesis Theme Custom Splash Page
Dave,
I would not normally want to shorten the title. The challenge was that a client of mine wanted 3 teasers per row where the teaser consisted of only a headline and a 200px by 250px thumbnail immediately beneath the headline. The visual effect of this was spoiled if the headline wrapped as the 3 thumbnails in the row would be misaligned. Hence I came up with the jQuery solution to shorten the headline so it did not wrap.
As for compelling titles then I try and meet three challenges:
it is laden with good keywords for the Search Engines
it is meaningful article title for the human reader
it scores well enough on the Advanced Marketing Institute Headline Analyzer – this post scores a reasonable 40%
For spam detection I use Akismet and WP-SpamFree, I see your blog uses nospamnx, I will check this out. Thanks
Apologies for the lack of a contact form. I will add a contact link ot the menu and email you separately .
Russel,
I have tried your script, works well. Is there a way to have it look for a custom field for the title (also a short title) and if it can find it then run the script? That way you could control the text if it cuts off in a funny way.
Hi Erik,
Please try using the following version of the shorten javascript which breaks at the end of the last word and hence reads much better.
Russel, thanks will definitely give that a whirl.
Is there any function that will replace the teaser heading with a custom field? Would like to combine your script if possible if no custom field is found.
Hi Erik,
I am not aware of an existing solution for this.
However it could be programmed relatively easily by creating a PHP procedure that runs at the hook ‘thesis_hook_after_teaser_headline’.
The procedure would get the text from the custom field and create a line of jQuery javascript that replaces the teaser title by the custom text.
Please note that this would just work for the human reader of the page; search engines would see the original teaser title.
Regards
Russell
Hi Russel,
So I made an attempt to get this going, Im not sure why this is not working,
add_action (‘thesis_hook_after_teaser_headline’,'replace_title’); // replace the teaser title
function replace_title () {
?>
$(document).ready(function() {
$(‘a’).replaceWith(‘
I have been replaced
‘);
});
<?php
}
Hi Erik,
A couple of suggestions: firstly try replacing the $ by jQuery – this gets around potential conflicts with other javascript libraries; and secondly, I think the replaceWith will be applied to the first anchor link on the page which is not correct; the replace_title PHP routine needs to get the title from the custom field using the $post variable and then yse jQuery that applies the replacement to each teaser title. Something like
[js]
function replace_title () {
global $post;
$post_id = $post->ID;
$new_title = get_post_custom_values(‘my_new_title’, $post_id);
?>
<script type="text/javascript">
jQuery(document).ready( function () {
jQuery(‘div .post-<?php echo $post_id;?> .teaser h2.entry-title a’).html("<?php echo $new_title; ?>");
});
</script>
<?php
}
[/js]
I have not checked this but I think it is closer.