bavotasan.com » length

Shorten Your Post Titles in WordPress

c.bavota — Fri, 16 Jul 2010 15:24:22 +0000

This is not a function that you would need to use often, but I came across a reason to use it recently and I thought it might be a good idea to share it. All it does is limit the number of words in your title, just in case you don’t want it to wrap onto a second line. I used it in the featured slideshow on Magazine Premium since the size of the boxes is fixed.

Include this in your functions.php file between the PHP tags:

function short_title($after = '', $length) {
	$mytitle = explode(' ', get_the_title(), $length);
	if (count($mytitle)>=$length) {
		array_pop($mytitle);
		$mytitle = implode(" ",$mytitle). $after;
	} else {
		$mytitle = implode(" ",$mytitle);
	}
	return $mytitle;
}

Then you can use it within the WordPress loop like this:

 echo short_title('...', 8); ?>

If you would rather count by characters instead of just words, you can add this function to your functions.php file instead of the one above:

function short_title($after = null, $length) {
	$mytitle = get_the_title();
	$size = strlen($mytitle);
	if($size>$length) {
		$mytitle = substr($mytitle, 0, $length);
		$mytitle = explode(' ',$mytitle);
		array_pop($mytitle);
		$mytitle = implode(" ",$mytitle).$after;
	}
	return $mytitle;
}

Quick Function to Shorten the Post Title in WordPress

c.bavota — Tue, 06 Apr 2010 20:46:16 +0000

For some reason, a lot of people seem to be using extremely long post titles. I am a firm believer in making a title as precise as possible to make it easier on people who are trying to actually find your article. Sure, I guess you can throw in as many keywords as you want in hopes that you might get more from Google, but I doubt that will really do anything for your site’s SEO.

In case you are one of those people who feel the need for extremely long post titles and you want to display them in places where they might not fit, here is a quick piece of code that you can add to your functions.php file.

function short_title($after = '', $length) {
	$mytitle = explode(' ', get_the_title(), $length);
	if (count($mytitle)>=$length) {
		array_pop($mytitle);
		$mytitle = implode(" ",$mytitle). $after;
	} else {
		$mytitle = implode(" ",$mytitle);
	}
	return $mytitle;
}

You can call the function like so:

 
// short_title($after, $length)
echo short_title('...', 10); 
?>

The above code will truncate your title at 10 words and add a trailing ellipsis.

Creating Shadows with CSS3

c.bavota — Mon, 01 Mar 2010 19:33:36 +0000

CSS3 has introduced some cool effects that give you control over elements of design that were once only possible using images. One of the new effects I have been having a lot of fun with lately is the box shadow. Many, if not all, of the new CSS3 effects only work on Safari 4, Firefox 3.5 and Google Chrome. Just one more reason to make sure to use one of those browsers.

It is easy to create a shadow effect with CSS3 by using the box-shadow style. There are six variables which the style accepts.

Inset
Creates a shadow on the inside of the element instead of on the outside.

Horizontal length
The amount of positive or negative space on the X axis between the shadow and the main element.

Vertical length
The amount of positive or negative space on the Y axis between the shadow and the main element.

Blur radius
The amount of blur on the shadow. Minimum of zero.

Spread radius
The amount of spread defines a larger or smaller shadow.

Color
The color of the shadow.

Basic example:

box-shadow: 6px 6px 12px #000000;
-webkit-box-shadow: 6px 6px 12px #000000;
-moz-box-shadow: 6px 6px 12px #000000;

Demo:

This is an example of the new box shadow style in CSS3.

The color variable accepts a hex code (#000000), name (black) or rgb code(0,0,0). It also accepts rgba, which allows for an alpha channel. Using rgba gives you the ability to add opacity to your shadow to soften it and let the background color through.

Example with alpha transparency:

box-shadow: -10px 10px 20px rgba(0, 0, 0, .5);
-webkit-box-shadow: -10px 10px 20px rgba(0, 0, 0, .5);
-moz-box-shadow: -10px 10px 20px rgba(0, 0, 0, .5);

Demo:

This is an example of the new box shadow style in CSS3 using rgba for the color variable.

Creating an inner shadow requires the inset variable.

Inset example:

box-shadow: inset 1px 1px 10px #111111;
-webkit-box-shadow: inset 1px 1px 10px #111111;
-moz-box-shadow: inset 1px 1px 10px #111111;

Demo:

This is an example of the new box shadow style in CSS3 using the inset variable.

You can easily set whether you want the shadow to larger or smaller that your main element by adding an amount to the spread variable.

Spread example:

box-shadow: 0px 16px 10px -10px #444444;
-webkit-box-shadow: 0px 16px 10px -10px #444444;
-moz-box-shadow: 0px 16px 10px -10px #444444;

Demo:

This is an example of the new box shadow style in CSS3 using a spread amount.

There are tons of possibilities and if you really want to go crazy you can define multiple shadows. Just separate them all by commas.

Multiple shadows example:

box-shadow: 0 0 20px #e15f5f, 10px 12px 20px #5fb3e1, -10px 12px 20px #5fe168, -10px -12px 20px #e1dc5f, 10px -12px 20px #e15fcd;
-webkit-box-shadow: 0 0 20px #e15f5f, 10px 12px 20px #5fb3e1, -10px 12px 20px #5fe168, -10px -12px 20px #e1dc5f, 10px -12px 20px #e15fcd;
-moz-box-shadow: 0 0 20px #e15f5f, 10px 12px 20px #5fb3e1, -10px 12px 20px #5fe168, -10px -12px 20px #e1dc5f, 10px -12px 20px #e15fcd;

Demo:

This is an example of the new box shadow style in CSS3 with multiple shadows defined.

Quick & Easy Excerpt Mods Coming in WordPress 2.9

c.bavota — Wed, 28 Oct 2009 15:14:55 +0000

I just stumbled across these two little pieces of code and thought that they might be useful to some people out there who want to mess around with the default settings for the_excerpt() function in WordPress. The first one gives you the power to change the number of words displayed by the function the_excerpt(), and yes, you can have more than 55 words. The second piece of code allows you to change the trailing [...] that appears at the end of your excerpt.

Both features are set to be added to version 2.9 of WordPress, but the first currently works in version 2.8.5. Just add these to your theme’s functions.php file.

function new_excerpt_length($length) {
	return 20;
}
add_filter('excerpt_length', 'new_excerpt_length');

Change the number “20″ to whatever number you want.

function new_excerpt_more($more) {
	return '[.....]';
}
add_filter('excerpt_more', 'new_excerpt_more');

Change “[.....]” to whatever you want.