bavotasan.com » Lt

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.

Creating a Scrolling Back to Top Button with jQuery

c.bavota — Mon, 28 Jun 2010 20:55:39 +0000

If you take a look way, way, way down at the bottom of this page, you will see a Back to Top button that scrolls the whole page until it reaches to top. It is a pretty simple effect to add to your site and looks a hundred-times cooler than just using your typical anchor name and link. Getting it all to work takes nothing more than a few lines of jQuery version 1.4.2.

First, we need to create our button/link. I am just going to use an anchor tag and some text:

<a href="javascript:void(0)" class="backtotop">Back to Topa>

Next we need to add some jQuery between the tags:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'>script>
<script type='text/javascript'>
jQuery('.backtotop').click(function(){
	jQuery('html, body').animate({scrollTop:0}, 'slow');
});
script>

Remember, you can change the speed by replacing slow with a numerical value. You can also add some easing effects by including the jQuery UI. Read more about easing effects here.

Making Cookies with PHP

c.bavota — Thu, 21 Jan 2010 17:25:01 +0000

I’ve been going nuts over the past month trying to complete a project for a large retail store and it seems like every new request they make requires me to learn something new about PHP. Coding challenges are always great because they lead you to discover new ways to take advantage of what your coding language has to offer. This one is pretty straightforward but great to know.

First we need to set the cookie:

 
  // basic setting
  // setcookie(name, value, expire, path, domain); 
  $expire = time() + 60 * 60 * 24 * 30; // expires in one month
  setcookie('visited','yes',$expire);
?>

The above cookie records that someone has already visited the site. It will expire in one month and the path and domain are set automatically if left blank. If you do not include an expiration time, the cookie will only be stored for the current session.

NOTE: Cookies must always be set before anything else, so be sure to place it above the tag at the top of your file.

Here is how you would retrieve a cookie:

 
  // display one cookie with the name "visited"
  $the_cookie = $_COOKIE['visited'];
 
  // see all cookies
  print_r($_COOKIE); 
?>

To delete a cookie we need to take advantage of the expire variable:

 
  // set the cookie to expire one hour in the past
  $expire = time() - 3600;
  setcookie('visited', '', $expire);
?>

Resource: PHP: setcookie – Manual

Simple Voting for WordPress with PHP and jQuery

c.bavota — Fri, 18 Dec 2009 17:58:03 +0000

This tutorial is no longer up-to-date. Please check out A Better Voting System for WordPress for a more secure and efficient approach.

I needed to create a simple way for site members to vote on a post and the few scripts I found didn’t really work how I needed them to. So I decided to whip something together myself. I developed a pretty basic script using PHP and jQuery to allow members who are signed in to click on a simple link to add their vote to a post.

First you need to add this to your header.php file between the tags. If you notice that you already have the call somewhere else in your header.php file, just delete it.



<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".vote a").click(
function() {
var some = jQuery(this);
var thepost = jQuery(this).attr("post");
var theuser = jQuery(this).attr("user");
jQuery.post("/vote.php", {user: theuser, post: thepost}, 
function(data) {
var votebox = ".vote"+thepost+" span";
jQuery(votebox).text(data);
jQuery(some).replaceWith('Voted');
});
});
});	
script>

When a member clicks on the vote link, the above code will get the post ID and the member’s user ID and send it to a file called vote.php using a post method. The vote.php file will perform everything we need to add the vote.

So let’s create a file called vote.php and add it to your theme’s directory.


$file = dirname(__FILE__);
$file = substr($file, 0, stripos($file, "wp-content") );
 
require( $file . "/wp-load.php");
 
$currentvotes = get_post_meta($_POST['post'], 'votes', true);
$currentvotes = $currentvotes + 1;
 
$voters = get_post_meta($_POST['post'], 'thevoters', true);
if(!$voters) $voters = $_POST['user']; else $voters = $voters.",".$_POST['user'];
 
update_post_meta($_POST['post'], 'votes', $currentvotes);
update_post_meta($_POST['post'], 'thevoters', $voters);
 
echo $currentvotes;
?>

Once the information is posted to vote.php two custom fields are created. One to count the vote and one to add the voter to a list so that they can’t vote again.

Add the code below to your functions.php file, or create a functions.php file if your theme does not have one.

// voting function
function voting($id) {
global $user_ID;
$currentvotes = get_post_meta($id, 'votes', true);
$voters = get_post_meta($id, 'thevoters', true);
$voters = explode(",", $voters);
foreach($voters as $voter) {
	if($voter == $user_ID) $alreadyVoted = true;
}
 
if(!$currentvotes) $currentvotes = 0;
echo '.$id.'">'.$currentvotes.'';
if($user_ID && !$alreadyVoted) echo '
.$id.'" user="'.$user_ID.'">'.__("Vote").'';
if($user_ID && $alreadyVoted) echo '
'.__("Voted").'';
echo '
';
if(!$user_ID) echo '.get_bloginfo('url').'/wp-login.php?action=register">'.__('Register').' '.__('to vote').'.
';
}

Let’s add some CSS to style our voting box.

.vote {
	padding: 5px 0;
	background: #eee;
	border: 1px solid #ddd;
	width :50px;
	text-align: center;
	margin: 10px auto;
	}
 
	.vote a, .vote span.voted {
		cursor: pointer;
		margin-top: 5px;
		padding-top: 5px;
		border-top: 1px solid #ddd;
		display: block;
		}
 
	.vote span.voted {
		cursor: default;
		}

Now all you need to do is add the following within the WordPress loop to have the voting box appear.

 voting($post->ID); ?>

Test it out below:

0
Vote

Using jQuery to make an Expandable Code Box for WP-Syntax

c.bavota — Mon, 02 Nov 2009 17:43:00 +0000

You may have noticed that I’m using a new syntax highlighter for my code snippets. I installed Ryan McGeary‘s WordPress plugin WP-Syntax which uses GeSHi (Generic Syntax Highlighter), a simple highlighting class that supports multiple coding languages. It’s great but I’m not a fan of the horizontal scrollbar that appears if code extends past your site’s width. Instead, I decided to use jQuery to expand the box when you hover over it.

We need to make a few minor changes to the plugin code to get this to work. After you have downloaded, installed and activated the plugin, open up wp-syntax.php and go to line #113:

    if ($line)
    {
        $output .= "\"line_numbers\">";
        $output .= wp_syntax_line_numbers($code, $line);
        $output .= " \"code\">";
        $output .= $geshi->parse_code();
        $output .= "
";
    }
    else
    {
        $output .= "\"code\">";
        $output .= $geshi->parse_code();
        $output .= "
";
    }

We need to add a table to the second output.

    if ($line)
    {
        $output .= "\"line_numbers\">";
        $output .= wp_syntax_line_numbers($code, $line);
        $output .= " \"code\">";
        $output .= $geshi->parse_code();
        $output .= "
";
    }
    else
    {
        $output .= "";
        $output .= "\"code\">";
        $output .= $geshi->parse_code();
        $output .= "
";
        $output .= "
";
    }

Next we need to open up wp-syntax.css to change a few of the styles. Change this:

.wp_syntax {
  color: #100;
  background-color: #f9f9f9;
  border: 1px solid silver;
  margin: 0 0 1.5em 0;
  overflow: auto;
}

to:

.wp_syntax {
  color: #100;
  background-color: #f9f9f9;
  border: 1px solid silver;
  margin: 0 0 1.5em 0;
  overflow: hidden;
  width: 590px;
}

I put a fixed width of 590px because I have set that as the maximum width of my single posts.

Now comes the jQuery. Open up your theme’s header.php file and add the following between your tags.:


<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery(".wp_syntax").hover(function() {
	var width = jQuery("table", this).width();
	var pad = width + 5;
	if (width > 590) {
		jQuery(this)
			.stop(true, false)
			.css({
				zIndex: "100",
				position: "relative"
			})
			.animate({
				width: pad + "px"
			});
		}
	}, function() {
			jQuery(this).stop(true, false).animate({
				width: 590
		});
	});
});
script>

What we are doing above is creating an effect that will only occur when you hover over the code box. It finds the width of the table and animates the expansion to the full width. When you hover out, the box returns to the fixed width of your post. Be sure that you set the two references to 590 to whatever you set your width to in the CSS.

Done and done!

To see this in action check out How to Create a Twitter Feed on Your Web Site.

Resource: Making an Expanding Code Box by Chris Coyier

Win a One-Year Subscription to Layers Magazine

c.bavota — Thu, 01 Oct 2009 19:08:53 +0000

October is here and that means it’s time for another contest. This month I will be giving away a one-year subscription to Layers Magazine. For those who have never heard of Layers Magazine, it is the #1 how-to magazine for everything Adobe. Each issue features tutorials, reviews, designer inteviews and a whole lot more. To win a one-year subscription, all you need to do is link to this post on your site. It is as simple as that.

Just create your own link to this article or use the following code:

Win a One-Year Subscription to Layers Magazine

On November 1st, 2009, I will randomly select a trackback and award the winner a one-year subscription to Layers Magazine.

This contest is only open to residents of Canada and the United States. The winner will be contacted through their Web site on November 1st, 2009. Contest ends October 31st at 11:59pm.

Custom Template for Single Posts in WordPress

c.bavota — Wed, 30 Sep 2009 14:10:44 +0000

If you take a look at the template hierarchy in WordPress, you will notice that you have the ability to create custom templates for different category pages by simply adding the category slug or id to the end of your filename. So category-articles.php will be called before category.php if you query the Articles category. But what if you wanted to have a custom template for every post in the Articles category so that it displayed differently from posts in other categories. By default that can’t be done unless you do a little hacking.

Here is an easy way to create custom templates for single posts in WordPress.

First, we need to figure out the category id of the posts we want to customize. Open up your wp-admin and go to the Categories page. Click on the category you want and then take a look in the address bar. You should see something like this:

The 32 at the end is your category id.

Now open up your single.php file and let’s make a few changes. I will use the single.php file from the Default theme as an example.


/**
* @package WordPress
* @subpackage Default_Theme
*/
 
get_header();
?>
 

 
 if (have_posts()) : while (have_posts()) : the_post(); ?>
 

 previous_post_link('« %link') ?>
 next_post_link('%link »') ?>

 
 post_class() ?> id="post- the_ID(); ?>">
 the_title(); ?>
 

 the_content('Read the rest of this entry »
'); ?>
 
 wp_link_pages(array('before' => 'Pages: ', 'after' => '
', 'next_or_number' => 'number')); ?>
 the_tags( 'Tags: ', ', ', '
'); ?>
 


This entry was posted
 /* This is commented, because it requires a little adjusting sometimes.
You'll need to download this plugin, and follow the instructions:
http://binarybonsai.com/wordpress/time-since/ */
/* $entry_datetime = abs(strtotime($post->post_date) - (60*120)); echo time_since($entry_datetime); echo ' ago'; */ ?>
on  the_time('l, F jS, Y') ?> at  the_time() ?>
and is filed under  the_category(', ') ?>.
You can follow any responses to this entry through the  post_comments_feed_link('RSS 2.0'); ?> feed.
 
 if ( comments_open() && pings_open() ) {
// Both Comments and Pings are open ?>
You can <a href="#respond">leave a responsea>, or <a href="" rel="trackback">trackbacka> from your own site.
 
 } elseif ( !comments_open() && pings_open() ) {
// Only Pings are Open ?>
Responses are currently closed, but you can <a href=" " rel="trackback">trackbacka> from your own site.
 
 } elseif ( comments_open() && !pings_open() ) {
// Comments are open, Pings are not ?>
You can skip to the end and leave a response. Pinging is currently not allowed.
 
 } elseif ( !comments_open() && !pings_open() ) {
// Neither Comments, nor Pings are open ?>
Both comments and pings are currently closed.
 
 } edit_post_link('Edit this entry','','.'); ?>
 


 


 
 comments_template(); ?>
 
 endwhile; else: ?>
 
Sorry, no posts matched your criteria.
 
 endif; ?>
 

 
 get_footer(); ?>

To get this little hack to work all you need to do is add:


if(in_category(32)) {
// Custom Template for Single Posts in Category 32
include 'single-32.php';
} else {
?>

On line #1 and:

 } ?>

All the way at the bottom.

So now your single.php file should look like this:


if(in_category(32)) {
include 'single-32.php';
} else {
?>

/**
* @package WordPress
* @subpackage Default_Theme
*/
 
get_header();
?>
 

 
 if (have_posts()) : while (have_posts()) : the_post(); ?>
 

 previous_post_link('« %link') ?>
 next_post_link('%link »') ?>

 
 post_class() ?> id="post- the_ID(); ?>">
 the_title(); ?>
 

 the_content('Read the rest of this entry »
'); ?>
 
 wp_link_pages(array('before' => 'Pages: ', 'after' => '
', 'next_or_number' => 'number')); ?>
 the_tags( 'Tags: ', ', ', '
'); ?>
 


This entry was posted
 /* This is commented, because it requires a little adjusting sometimes.
You'll need to download this plugin, and follow the instructions:
http://binarybonsai.com/wordpress/time-since/ */
/* $entry_datetime = abs(strtotime($post->post_date) - (60*120)); echo time_since($entry_datetime); echo ' ago'; */ ?>
on  the_time('l, F jS, Y') ?> at  the_time() ?>
and is filed under  the_category(', ') ?>.
You can follow any responses to this entry through the  post_comments_feed_link('RSS 2.0'); ?> feed.
 
 if ( comments_open() && pings_open() ) {
// Both Comments and Pings are open ?>
You can <a href="#respond">leave a responsea>, or <a href="" rel="trackback">trackbacka> from your own site.
 
 } elseif ( !comments_open() && pings_open() ) {
// Only Pings are Open ?>
Responses are currently closed, but you can <a href=" " rel="trackback">trackbacka> from your own site.
 
 } elseif ( comments_open() && !pings_open() ) {
// Comments are open, Pings are not ?>
You can skip to the end and leave a response. Pinging is currently not allowed.
 
 } elseif ( !comments_open() && !pings_open() ) {
// Neither Comments, nor Pings are open ?>
Both comments and pings are currently closed.
 
 } edit_post_link('Edit this entry','','.'); ?>
 


 


 
 comments_template(); ?>
 
 endwhile; else: ?>
 
Sorry, no posts matched your criteria.
 
 endif; ?>
 

 
 get_footer(); ?>
 } ?>

Now all you need to do is create a file called single-32.php and add it to your theme. Code that file however you want your single page posts in category 32 to appear and you are done.

You can also use this hack if you want to create a custom template for a specific post. Just replace in_category() with is_page().

Clearing the
Tag with CSS That Works in IE

c.bavota — Tue, 01 Sep 2009 21:39:09 +0000

There is nothing more annoying than Internet Explorer. Every time you build a site you usually need to add a few CSS hacks just to make sure it works in IE.

Here is some nice CSS to help anyone who wants to use

tags to clear sections of their site.

hr.clear {
	background: none;
	border: 0;
	clear: both;
	display: block;
	float: none;
	font-size: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
	}

Just use the following code whenever you want to clear with an

tag.

<hr class="clear" />

Remove the WordPress Generator

c.bavota — Mon, 10 Aug 2009 15:45:41 +0000

WordPress automatically places a line of text between your tags which states the version you currently have installed. I have read that it is there for statistical reasons which is all fine and dandy, but sometimes showing off which version of WP you are using lets hackers know exactly what vulnerabilities your site has.

For security reasons, I suggest removing the generator, and doing so only takes one line of code.

The WordPress generator line looks like this:

To get rid of it, open up your functions.php file. It is located in your theme’s folder. If there is no functions.php file, create one and just add the following code.

remove_action('wp_head', 'wp_generator');

Be sure to place it between tags.

A Settings Link for Your WordPress Plugins

c.bavota — Mon, 22 Jun 2009 17:47:38 +0000

If you are developing a WordPress plugin, one of the first things I would suggest is adding a “Settings” link directly on the plugins page. This makes it easier for users to quickly access the plugin’s options page without having to search through the admin menu.

It is pretty simple to do, and only takes a few lines of code.

Add the following to your plugin file, within a tag:

// Add settings link on plugin page
function your_plugin_settings_link($links) { 
  $settings_link = 'Settings'; 
  array_unshift($links, $settings_link); 
  return $links; 
}
 
$plugin = plugin_basename(__FILE__); 
add_filter("plugin_action_links_$plugin", 'your_plugin_settings_link' );

Be sure to change the your_plugin.php to the actual filename of your plugin.