bavotasan.com » WordPress

Increase Max Upload File Size in WordPress

c.bavota — Tue, 17 Jan 2012 21:12:51 +0000

Sometimes, you need to upload a large file to your site, and the default 8mb limit in WordPress isn’t enough. I attempted to change my limit directly on my server, then in the .htaccess file and then in wp-config.php but neither change worked for me. Then I came across this little snippet by Word Impressed which actually worked and allowed me to increase my max upload file size limit.

All you need to do is create a php.ini file and upload it into your /wp-admin folder. Then add the following:

memory_limit = 32M
upload_max_filesize = 32M
post_max_size = 32M
file_uploads = On

You can change 32m to whatever max file size you want.

Update to Add Logo to Admin Plugin

c.bavota — Thu, 12 Jan 2012 20:40:32 +0000

I have had a lot of requests to revisit and update my Add Logo to Admin WordPress plugin so today I sat down and went over the code. There have been quite a few changes in WordPress 3.3 so I had to make things a little different but the plugin is now compatible with the latest release of WP.

If you have any feedback please leave a comment below or open up a discussion in my support forum.

Shortcode to Encode Email in WordPress Posts

c.bavota — Wed, 11 Jan 2012 22:18:05 +0000

A while back I wrote a short tutorial entitled “A Clever and Safe Way to Display your Email Address” which explained how you could use CSS to safely display your email on a web page. That way still works well but if you’re using WordPress, you can take advantage of a function called antispambot() to display emails addresses anywhere on your site.

If you code a page template directly, you can add the function like so:

antispambot("youremail@yoursite.com");

I needed a away to take advantage of the antispambot() function within my post and page content, so I decided to create a shortcode that would make it super easy to reuse.

// EMAIL ENCODE SHORTCODE
function email_encode_function( $atts, $content ){
	return '.antispambot("mailto:".$content).'">'.antispambot($content).'';
}
add_shortcode( 'email', 'email_encode_function' );

Once you add the above code snippet to your theme’s function.php file you can use the following structure to safely display an email address in your post or page content:

[email]you@you.com[/email]

You can read more about antispambot() in the codex: http://codex.wordpress.org/Function_Reference/antispambot

Log in to WordPress using an Email Address

c.bavota — Wed, 28 Dec 2011 16:26:52 +0000

I needed to figure out how to allow a user to use either their username or email address to log into WordPress. It took a bit of rooting around but the final piece of code ended up being pretty simple.

function login_with_email_address($username) {
	$user = get_user_by_email($username);
	if(!empty($user->user_login))
		$username = $user->user_login;
	return $username;
}
add_action('wp_authenticate','login_with_email_address');

Place that in your functions.php file and you will be able to sign into your WordPress site using an email address or by default, the username.

Holiday Bundle

c.bavota — Tue, 06 Dec 2011 17:42:51 +0000

The year is almost over and the holidays are coming closer, so I thought it would be a good time to package together some WordPress themes and offer people a great deal. For the month of December, you can now get Magazine Premium, Magazine Flow and Arturo all for only $99.99. That’s a savings of almost $80! All you have to do is click on the link below to take advantage of this amazing deal.

Purchase Now

A Better Voting System for WordPress

c.bavota — Mon, 24 Oct 2011 11:14:56 +0000

I published a tutorial quite a while back called Simple Voting for WordPress with PHP and jQuery. It was not without its problems, and recently I needed to improve on it for a client, so I thought it would be a good idea to finally release an updated version.

The original tutorial relied on an outside PHP file to process the votes but now I use the built-in Ajax function in WordPress. That way it’s more secure and efficient. To get everything started, let’s take a look at the jQuery required:

<script type="text/javascript">
/* 	
(function($) {
	$("#vote").not(".disabled").click(function() {
		var el = $(this);
		var nonce = $("input#voting_nonce").val();
		var data = {
			action: 'add_votes_options',
			nonce: nonce,
			postid: 'ID; ?>',
			ip: 'REMOTE_ADDR']; ?>'			
		};
		$.post('admin-ajax.php'); ?>', data,
		function(response){
			if(response!="-1") {
				el.html("VOTED").unbind("click");
				if(response=="null") {
					alert("A vote has already been registered to this IP address.");
				} else {
					$("#votecounter").html(response);
					alert("Thanks for your vote.");
				}
			} else {
				alert("There was a problem registering your vote. Please try again later.");
			}
		});
		return false;
	});
})(jQuery);
/* ]]> */
script>

If the vote button is clicked, it will send the Ajax request and process it accordingly, depending on a few things. The only thing missing, is the code to register a cookie once the vote has been calculated so that voters can only vote once. Let’s include two cookie functions originally created by Peter-Paul Koch and add a block of code to our original script:

<script type="text/javascript">
/* 	
(function($) {
	function setCookie(name,value,days) {
	    if (days) {
	        var date = new Date();
	        date.setTime(date.getTime()+(days*24*60*60*1000));
	        var expires = "; expires="+date.toGMTString();
	    }
	    else var expires = "";
	    document.cookie = name+"="+value+expires+"; path=/";
	}
 
	function getCookie(name) {
	    var nameEQ = name + "=";
	    var ca = document.cookie.split(';');
	    for(var i=0;i < ca.length;i++) {
	        var c = ca[i];
	        while (c.charAt(0)==' ') c = c.substring(1,c.length);
	        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	    }
	    return null;
	}
 
	$("#vote").not(".disabled").click(function() {
		var el = $(this);
		el.html('');
		var nonce = $("input#voting_nonce").val();
		var data = {
			action: 'add_votes_options',
			nonce: nonce,
			postid: 'ID; ?>',
			ip: 'REMOTE_ADDR']; ?>'			
		};
		$.post('admin-ajax.php'); ?>', data,
		function(response){
			if(response!="-1") {
				el.html("VOTED").unbind("click");
				if(response=="null") {
					alert("A vote has already been registered to this IP address.");
				} else {
					$("#votecounter").html(response);
					alert("Thanks for your vote.");
				}
				var cookie = getCookie("better_votes");
				if(!cookie) {
					var newcookie = "ID; ?>";
				} else {
					var newcookie = cookie + ",ID; ?>";
				}
				setCookie("better_votes", newcookie, 365);
			} else {
				alert("There was a problem registering your vote. Please try again later.");
			}
		});
		return false;
	});	
})(jQuery);
/* ]]> */
script>

Now a cookie will be registered once the vote has been tallied. This is all the jQuery we need to make our voting system work. If jQuery is not already loaded in your WordPress theme, you may also need to add this into your header.php file before the wp_head() code:

php wp_enqueue_script( 'jquery' ) ?>

The following is the PHP code that we need to process the vote on the server side. This will need to be placed in your theme’s functions.php file. If the file doesn’t exist, just create it and make sure this code is placed between the PHP tags:

add_action("wp_ajax_add_votes_options", "add_votes_options");
add_action("wp_ajax_nopriv_add_votes_options", "add_votes_options");
function add_votes_options() {
	if (!wp_verify_nonce($_POST['nonce'], 'voting_nonce'))
		return;
 
	$postid = $_POST['postid'];
	$ip = $_POST['ip'];
 
	$voter_ips = get_post_meta($postid, "voter_ips", true);
	if(!empty($voter_ips) && in_array($ip, $voter_ips)) {
		echo "null";
		die(0);
	} else {
		$voter_ips[] = $ip;
		update_post_meta($postid, "voter_ips", $voter_ips);
	}	
 
	$current_votes = get_post_meta($postid, "votes", true);
	$new_votes = intval($current_votes) + 1;
	update_post_meta($postid, "votes", $new_votes);
	$return = $new_votes>1 ? $new_votes." votes" : $new_votes." vote";
	echo $return;
	die(0);
}

The two action calls at the beginning hook into the Ajax function from the jQuery. We need both since one is for logged-in users and the other is for guests. Next we check for the security nonce, and end the process if it is not set correctly. This is a huge improvement over my old code that had absolutely no security whatsoever. If all is good, we start processing the vote by checking if the voters IP address has already been registered. If so, the process stops and returns a “null” value. Otherwise we registered the vote and IP address and echo out the total votes.

If you take a look at the jQuery above, you can see how the different responses will be processed. A “null” response will alert the voter that their IP address has already been registered so their new vote will not count. A response of “-1″ means something went wrong and we alert the voter. If everything goes well, the vote is registered, the voter is thanked and the total number of votes increases on the page.

There you have all the jQuery and PHP required to get it working on the backend, but you still need some PHP/HTML in order for things to work on the front end.


// This will display "0 votes" and increase as votes are added
$votes = get_post_meta($post->ID, "votes", true);
$votes = !empty($votes) ? $votes : "0";
if($votes == 1) $plural = ""; else $plural = "s";
echo ''.$votes.' vote'.$plural.'
';
?>
 

// This will display the vote button and disable it if a cookie has already
// been set. We also add the security nonce here. 
$hasvoted = $_COOKIE['better_votes'];
$hasvoted = explode(",", $hasvoted);
if(in_array($post->ID, $hasvoted)) {
	$vtext = "VOTED";
	$class = ' class="disabled"';
} else {
	$vtext = "VOTE";
	$class = "";
}
?>
 echo $class; ?>> echo $vtext; ?>
 if(function_exists('wp_nonce_field')) wp_nonce_field('voting_nonce', 'voting_nonce'); ?>

So there you have it, a more efficient voting system for WordPress that is secure and will hopefully double guard you against fraudulent voting. You can see this working live on the new Bloodshots website. It will only be active between Oct 24th and Oct 28th while people can vote for the films.

An Even Better Author List in WordPress

c.bavota — Fri, 30 Sep 2011 17:11:32 +0000

I already wrote about this a while back in “How to Display an Author List with Avatars in WordPress” but I recently realized that it needed updating. There’s a better way of collecting and displaying all the information and you can also add a few variables to give you more control over the output.

Let’s start off with creating our variables:

$display_admins = false;
$order_by = 'display_name'; // 'nicename', 'email', 'url', 'registered', 'display_name', or 'post_count'
$role = ''; // 'subscriber', 'contributor', 'editor', 'author' - leave blank for 'all'
$avatar_size = 32;
$hide_empty = true; // hides authors with zero posts

Next we can add the code to gather our contributors:

if(!empty($display_admins)) {
	$blogusers = get_users('orderby='.$order_by.'&role='.$role);
} else {
	$admins = get_users('role=administrator');
	$exclude = array();
	foreach($admins as $ad) {
		$exclude[] = $ad->ID;
	}
	$exclude = implode(',', $exclude);
	$blogusers = get_users('exclude='.$exclude.'&orderby='.$order_by.'&role='.$role);
}
$authors = array();
foreach ($blogusers as $bloguser) {
	$user = get_userdata($bloguser->ID);
	if(!empty($hide_empty)) {
		$numposts = count_user_posts($user->ID);
		if($numposts < 1) continue;
	}
	$authors[] = (array) $user;
}

Now that we have all the information we need, let’s display it:

echo '';
foreach($authors as $author) {
	$display_name = $author['display_name'];
	$avatar = get_avatar($author['ID'], $avatar_size);
	$author_profile_url = get_author_posts_url($author['ID']);
 
	echo ', $author_profile_url, '">', $avatar , ', $author_profile_url, '" class="contributor-link">', $display_name, '
';
}
echo '
';

If we put all the code together we get the following:


$display_admins = false;
$order_by = 'display_name'; // 'nicename', 'email', 'url', 'registered', 'display_name', or 'post_count'
$role = ''; // 'subscriber', 'contributor', 'editor', 'author' - leave blank for 'all'
$avatar_size = 32;
$hide_empty = true; // hides authors with zero posts
 
if(!empty($display_admins)) {
	$blogusers = get_users('orderby='.$order_by.'&role='.$role);
} else {
	$admins = get_users('role=administrator');
	$exclude = array();
	foreach($admins as $ad) {
		$exclude[] = $ad->ID;
	}
	$exclude = implode(',', $exclude);
	$blogusers = get_users('exclude='.$exclude.'&orderby='.$order_by.'&role='.$role);
}
$authors = array();
foreach ($blogusers as $bloguser) {
	$user = get_userdata($bloguser->ID);
	if(!empty($hide_empty)) {
		$numposts = count_user_posts($user->ID);
		if($numposts < 1) continue;
	}
	$authors[] = (array) $user;
}
 
echo '';
foreach($authors as $author) {
	$display_name = $author['display_name'];
	$avatar = get_avatar($author['ID'], $avatar_size);
	$author_profile_url = get_author_posts_url($author['ID']);
 
	echo ', $author_profile_url, '">', $avatar , ', $author_profile_url, '" class="contributor-link">', $display_name, '
';
}
echo '
';
?>

All it needs is a little CSS to style it:

.contributors .avatar {	
	float: left;
	clear: both;
	background: #fff;
	padding: 2px;
	border: 1px solid #ccc;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	box-sizing: content-box; 
	-moz-box-sizing: content-box; 
	-webkit-box-sizing: content-box; 
	}
 
	.contributors .avatar:hover  {
		border-color: #999;
		}
 
.contributors .contributor-link {
	float: left;
	margin: 10px 0 0 10px;
	}

You can play around with the CSS to get it looking the way you want and with the variables in place, you can control exactly what type of author list will be displayed.

Create a Black & White Thumbnail in WordPress

c.bavota — Tue, 13 Sep 2011 18:37:52 +0000

A while back I worked on a site that required a hover effect where a black and white image faded into a color image. I wrote a tutorial called Creating a Mouseover Fade Effect with jQuery on the jQuery technique I used for the hover. That effect no longer requires jQuery since we can now use CSS3 transitions (see A Simple Fade with CSS3) but the real issue was with having to upload two separate images to get the effect to work, which required an image editing software like Photoshop. Thankfully, Otto just wrote a great article on a way that you can use some built in WordPress functions and a little PHP to automatically create a black and white thumbnail when you upload an image.

First we need to create a new thumbnail using add_image_size(). We’ll use the same thumbnail settings from the WordPress Media page in the wp-admin. Add this to your functions.php file within the PHP tags:

add_action('after_setup_theme','bw_images_size');
function bw_images_size() {
	$crop = get_option('thumbnail_crop')==1 ? true : false;
	add_image_size('thumbnail-bw', get_option('thumbnail_size_w'), get_option('thumbnail_size_h'), $crop);
}

With that in place, we can now add the following function which will automatically create a black and white thumbnail:

add_filter('wp_generate_attachment_metadata','bw_images_filter');
function bw_images_filter($meta) {
	$file = wp_upload_dir();
	$file = trailingslashit($file['path']).$meta['sizes']['thumbnail-bw']['file'];
	list($orig_w, $orig_h, $orig_type) = @getimagesize($file);
	$image = wp_load_image($file);
	imagefilter($image, IMG_FILTER_GRAYSCALE);
	//imagefilter($image, IMG_FILTER_GAUSSIAN_BLUR);
	switch ($orig_type) {
		case IMAGETYPE_GIF:
			$file = str_replace(".gif", "-bw.gif", $file);
			imagegif( $image, $file );
			break;
		case IMAGETYPE_PNG:
			$file = str_replace(".png", "-bw.png", $file);
			imagepng( $image, $file );
			break;
		case IMAGETYPE_JPEG:
			$file = str_replace(".jpg", "-bw.jpg", $file);
			imagejpeg( $image, $file );
			break;
	}
	return $meta;
}

Whenever you upload an image, this function will create a new black and white thumbnail automatically. I also added a Gaussian Blur but commented it out. Remove those two slashes “//” to add a Gaussian Blur to your new black and white thumbnail. See other available filters.

Once you’ve added the above code, you can use get_post_thumbnail() within your WordPress loop to display the two images for the effect:

if(function_exists('has_post_thumbnail') && has_post_thumbnail()) { 
	echo '.get_permalink().'" class="fade-image">';
	the_post_thumbnail('thumbnail-bw', array('class'=>'fade-image-a'));
	the_post_thumbnail('thumbnail', array('class'=>'fade-image-b'));
	echo '';
}

This displays both images and surrounds them by an anchor tag. All we need is a little CSS3 to get our fade working:

.fade-image {
	display: block;
	position: relative;
	width: 150px;
	height: 150px;
	}
 
	.fade-image-a,
	.fade-image b {
		position: absolute;
		left: 0;
		top: 0;
		}
 
	.fade-image-a {
		z-index: 5;
		opacity: 1;
		transition: opacity .25s ease-in-out;
		-moz-transition: opacity .25s ease-in-out;
		-webkit-transition: opacity .25s ease-in-out;
   		}	
 
		.fade-image-a:hover {
			opacity: 0;
			}

The fade will only work in browsers that support CSS3 transitions but everything else should work on any server that supports the latest release of WordPress.

Add a Post’s Category Name to Body Class in WordPress

c.bavota — Thu, 11 Aug 2011 15:44:49 +0000

I was working with Digibomb on presswork.me and we needed to add the current post’s category name to the body class in order to style the page differently from the others.

All it took was a few lines of code added to the functions.php file:

function add_category_name($classes = '') {
   if(is_single()) {
      $category = get_the_category();
      $classes[] = 'category-'.$category[0]->slug; 
   }
   return $classes;
}
add_filter('body_class','add_category_name');

With that in place, you should now see a new class at the end of your body tag when you are on a single post or single page.

Shortcode for HTML5 Video Tag in WordPress

c.bavota — Sun, 31 Jul 2011 13:43:58 +0000

HTML5 has made it a lot easier to include certain elements. Especially videos, since you no longer have to embed them with all those parameters. Here’s a short code snippet that will add an HTML5 video shortcode to WordPress. Just include this code in your functions.php file and you are ready to go:

function html5_video($atts, $content = null) {
	extract(shortcode_atts(array(
		"src" => '',
		"width" => '',
		"height" => ''
	), $atts));
	return '.$src.'" width="'.$width.'" height="'.$height.'" controls autobuffer>';
}
add_shortcode('video5', 'html5_video');

Now you can use the following shortcode in your post:

[video5 src="http://your-site/videos/your-video.mp4" width="720" height="480"]

You can read more on which browsers support which formats at http://en.wikipedia.org/wiki/HTML5_video.