bavotasan.com » piece

Use jQuery to Replace a Word with a Link

c.bavota — Mon, 09 Aug 2010 20:54:46 +0000

If you use a word multiple times on your site and you don’t feel like going through all your posts to replace every instance of it, you can use jQuery to search your page and do the replacing for you. I wanted to replace a word throughout an entire site with a link and all it took was a small piece of code.

If you don’t already have jQuery loaded into your page, include this before your closing .

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'>script>

That will load up jQuery from Google.

Now you just need to include this in your site’s footer, before the closing . (Why in the footer? Because including your JavaScript after all of your code is the efficient way to do it.)

<script type="text/javascript">
(function($) {
  var thePage = $("body");
  thePage.html(thePage.html().replace(/jQuery/ig, 'jQuery')); 
})(jQuery)
script>

Since jQuery doesn’t have a core function for replacing text, we will use the JavaScript replace() function. The i after the slash makes the search and replace case-insensitive, and the g makes it global.

I have the script working on this page to replace every instance of the word jQuery with a link to the jQuery Web site.

Excluding Pages from WordPress Search

c.bavota — Thu, 08 Jul 2010 20:05:18 +0000

When people visit my site and do a search, I assume they’re looking for results within my posts and not in any of my static pages. Too bad WordPress automatically searches through both. In order to exclude pages from the WordPress search, you need to add a small piece of code to the functions.php file. I found a solution on WP Recipes but I was not a fan of having to add all of my category IDs in order to make it work. So I decided to modify it a bit.

function SearchFilter($query) {
    if ($query->is_search) {
        $query->set('post_type', 'post');
    }
    return $query;
}
 
add_filter('pre_get_posts','SearchFilter');

I forced it to just search for posts through setting the post_type. You can also make it do the opposite by setting the post_type to page.

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.

Force WordPress to use the Latest Version of jQuery

c.bavota — Fri, 02 Apr 2010 15:20:43 +0000

If you’re using WordPress 2.9.x, then the latest version of jQuery included is 1.3.2. What if you want to take advantage of new features in version 1.4, like delaying an animation queue or binding multiple event handlers? You can easily add a link in your header to the latest version, but that might end up conflicting with some plugins or themes.

The best approach would be to use the following piece of code to let WordPress know that you want to load the current version instead.

Place this into your theme’s functions.php file:

function current_jquery($version) {
        global $wp_scripts;
        if ( ( version_compare($version, $wp_scripts -> registered[jquery] -> ver) == 1 ) && !is_admin() ) {
                wp_deregister_script('jquery'); 
 
                wp_register_script('jquery',
                        'http://ajax.googleapis.com/ajax/libs/jquery/'.$version.'/jquery.min.js',
                        false, $version);
        }
}
 
add_action( 'wp_head', current_jquery( '1.4.2' ) ); // change number to latest version

If jQuery is updated, all you have to do is change the version number when calling the function.

Reference: Binary Bonsai

Using jQuery for a Simple Animated Fade Effect

c.bavota — Mon, 15 Mar 2010 19:57:26 +0000

I know I have already done a fade effect between two images with jQuery, but here is a quick little piece of code that will just add a nice animated fade effect to single images. Whenever a person hovers over an image, we will use jQuery to lower the opacity to make it appear lighter. Easy and not that impressive but still pretty cool.

Make sure you first call jQuery.

<script type='text/javascript' src='jquery.js'>script>

Then just add the following code and all your images will have a slight fade when you hover over them.

<script type="text/javascript">
  $(document).ready(function(){
    $("img").hover(function() {
      $(this).stop().animate({opacity: "0.8"}, 'slow');
    },
    function() {
      $(this).stop().animate({opacity: "1"}, 'slow');
    });
  });
script>

If you only want this to occur on certain images than just make sure to change the first jQuery selector to the class name of the images your want this effect to affect.

Try it out below:

Find the Category ID using the Category Slug in WordPress

c.bavota — Thu, 31 Dec 2009 17:40:52 +0000

This is a quick little piece of code that I have been using a lot lately. I needed to get the category ID but all I had to work with was the category slug. Luckily WordPress has a neat little function called get_term_by() which makes it super easy. The function can be used to get a lot more information but for this example I am just going to extract the ID.

The function works like this:

 get_term_by( $field, $value, $taxonomy, $output, $filter ) ?>

$field: (string) (required) Either ‘slug’, ‘name’, or ‘id’. Default: None
$value: (string|integer) (required) Search for this term value. Default: None
$taxonomy: (string) (required) Taxonomy Name. Default: None
$output: (string) (optional) Constant OBJECT, ARRAY_A, or ARRAY_N. Default: OBJECT
$filter: (string) (optional) default is raw or no WordPress defined filter will applied. Default: ‘raw’

We are going to use it like this to get the ID with the category slug ‘tutorials’:

 
$theCatId = get_term_by( 'slug', 'tutorials', 'category' );
$theCatId = $theCatId->term_id;
?>

If you insert a print_r() function you can echo out all the information that the get_term_by() function contains. Use something like this and see if there is other information that you might want to extract:

 
$theCatId = get_term_by( 'slug', 'tutorials', 'category' );
print_r($theCatId);
?>

Then all you would have to do is use whichever term your see between those square brackets like so:

 
$theCatId = get_term_by( 'slug', 'tutorials', 'category' );
$theCatId = $theCatId->description;
?>

Using PHP to Remove an HTML Tag from a String

c.bavota — Tue, 01 Dec 2009 21:54:49 +0000

There are times when you need to strip one specific HTML tag from a string and the PHP function strip_tags() doesn’t work the way you want it to. strip_tags() allows for certain exclusions, but why would you use that when you only want to exclude one tag and include all other tags? Especially when you can use preg_replace().

Here is a quick little piece of code that can be modified for any specific HTML tag you want to remove from a string. I am using it below to remove an image tag.


$string = 'Here is your content with an image tag ' ;
$string = preg_replace("/]+\>/i", "", $string); 
 
echo $string // will output "Here is your content with an image tag" without the image tag
?>

You can replace the img in the preg_replace() function for it to work with whichever HTML tag you wish.

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.

Turn Plain Text URLs into Active Links using PHP

c.bavota — Thu, 03 Sep 2009 16:02:22 +0000

I was putting together a bit of code to pull in a Twitter feed, similar to what you see in the footer of bavotasan.com. I got everything working properly but the only problem was all of the URLs were just plain text instead of active links. I figured out a way to automatically turn the URLs into active links using a small piece of PHP.

$text = ereg_replace("[[:alpha:]]+://[^<>[:space:]]+[[:alnum:]/]","\"\\0\">\\0", $text);

The code finds all instances of http:// and converts the string into an active link by surrounding it with an anchor tag.

Check if a Number is Even or Odd with PHP

c.bavota — Thu, 07 May 2009 20:52:21 +0000

Ever needed to check if a number is even or odd? If so, here is a pretty simple piece of code that does just that.


$num = 13;
if($num&1) {
echo 'The number is odd.';
} else {
echo 'The number is even.';
}
?>