bavotasan.com » List

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.

Using Ajax with WordPress

c.bavota — Mon, 02 Aug 2010 18:53:53 +0000

A little while back, I updated Magazine Basic and added the Ajax save function. When I uploaded it to WordPress to await approval, I received some feedback on how I could incorporate Ajax using the admin-ajax.php file instead of the sloppy way I had it coded. All of the core Ajax functions in WordPress rely on admin-ajax.php and using it for custom scripts is extremely easy to implement.

Let’s take a look at all the pieces you need to get it working. In this example I will build a small mailing list function that will send out an email to the admin when a person clicks submit.

Here’s our form:


	
	
	 admin_url(); ?>/wp-admin/images/wpspin_light.gif" alt="" class="ajaxsave" style="display: none;" />

Here’s the jQuery:

jQuery(document).ready(function(){
	jQuery("#mailinglist").submit(function()	{
		if(jQuery("#mailinglistemail").val()=="") {
			jQuery("#mailinglist #message").text("Please enter your email address.");
			return false;
		} else {
			var email = jQuery('#mailinglistemail').val();
			if(email.indexOf("@") == -1 || email.indexOf(".") == -1) {
				jQuery("#mailinglist #message").text("Please enter a valid email address.");
				return false;
			} else {
				var data = {
					action: 'join_mailinglist',
					email: email
				};
				jQuery("#mailinglistsubmit").hide();
				jQuery(".ajaxsave").show();
				jQuery.post("", data,
				function(response){
					jQuery(".ajaxsave").hide();
					jQuery("#mailinglistsubmit").show();
					jQuery("#mailinglist #message").html(response);
				});		
				return false;
			}
		} 
 
	});
});

Let me explain each part.

When a user clicks submit, we need to check that the email field is not empty. If it is empty, we let the user know by sending the “Please enter your email address.” message and we stop the form from being submitted by including the return false; line.

if(jQuery("#mailinglistemail").val()=="") {
	jQuery("#mailinglist #message").text("Please enter your email address.");
	return false;
}

Next, we’ll do a simple validation to make sure the email address actually contains the @ symbol and a period. If not, send an error message and return false.

var email = jQuery('#mailinglistemail').val();
if(email.indexOf("@") == -1 || email.indexOf(".") == -1) {
	jQuery("#mailinglist #message").text("Please enter a valid email address.");
	return false;
}

Once all that is done and everything is good, we can submit our form. This is where admin-ajax.php comes into play. When using admin-ajax.php, you need to include an action callback to make it work. Our callback is join_mailinglist. This is going to interact with our PHP to make everything work on the backend. Let’s create a data variable to store our action and our email value.

var data = {
	action: 'join_mailinglist',
	email: email
};

Now we will hide our submit button and have a loader graphic appear to let people know something is going on. Then will will use the jQuery .post function to send everything out to the admin-ajax.php file. Once the function is complete and a response is given, the loader will disappear, the submit button will return and a success message, or error message will indicate what happened.

jQuery("#mailinglistsubmit").hide();
jQuery(".ajaxsave").show();
jQuery.post("", data,
function(response){
	jQuery(".ajaxsave").hide();
	jQuery("#mailinglistsubmit").show();
	jQuery("#mailinglist #message").html(response);
});		
return false;

With the form and the jQuery in place, all we need now is some PHP.

The admin-ajax.php file requires two action filters.

add_action('wp_ajax_my_action', 'my_action_callback');
add_action('wp_ajax_nopriv_my_action', 'my_action_callback');

The first action will only work if users are logged in. The second is if users don’t have to be logged in. For our requirements, it should look like this:

add_action('wp_ajax_join_mailinglist', 'join_mailinglist_callback');
add_action('wp_ajax_nopriv_join_mailinglist', 'join_mailinglist_callback');

Here is our join_mailinglist_callback function, which needs to be added to functions.php:

function join_mailinglist_callback() {
	$email = $_POST['email'];
	if(!empty($email)) {
		$yourEmail = 'c@bavotasan.com';
		$subject = 'Add me to your mailing list';
		$success = mail($yourEmail, $subject, $email);
		if(!empty($success)) {
			echo 'Your email is subscribed to our mailing list.';
		} else {
			echo 'There was a problem. Please try again.';
		}
	}
	die();
}

With everything in place, you will get a form that works like the one below.

The New Google Font API

c.bavota — Mon, 24 May 2010 15:55:04 +0000

Using the standard Web safe fonts is quickly becoming a thing of the past thanks to modern alternatives like @font-face kits and the new Google Font API. Taking a quick look through the Getting Started guide shows just how simple it is to apply the API to your Web site. All you have to do is add a link between your site’s head tags to the CSS file hosted on Google, and then you can call the chosen font throughout your stylesheet.

Here is an example of the link:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

Then you can use the font like this:

>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
>

Check out a list of available font in the font directory. They are all licensed for commercial and non-commercial use.

8 jQuery Plugins to Improve the Way your Forms Look

c.bavota — Tue, 13 Apr 2010 19:55:38 +0000

When it comes to forms, every browser displays inputs, select drop downs and buttons differently. You can style certain elements using CSS but things like radio buttons and checkboxes are determined by the browser. Luckily, there are some cool jQuery plugins available that help you add a little bit more style to your forms.

Here are a list of jQuery plugins that can help get your forms looking a bit more impressive:

jqTransform

jqTransform allows you to skin form elements with color changes on both mouse rollover and mouse click event.
http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/

Example:

Niceforms

Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort.
http://www.emblematiq.com/lab/niceforms/

Example:

Uniform

Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.
http://pixelmatrixdesign.com/uniform/

Example:

jNice

jNice helps you create custom looking form elements that function like normal form elements using jQuery and CSS.
http://plugins.jquery.com/project/jNice

Example:

jQuery FormOne

jQuery FormOne (aka JQF1) claims to be the most complete form styling plugin and it does seem to cover all the bases.
http://www.azurem.com/jqf1/

Example:

CRIR

CRIR styles only radio buttons and checkboxes. It does a cool job of it but you will still need to use CSS to style other elements of your form.
http://www.chriserwin.com/scripts/crir/index.php

Example:

jQuery Checkbox

jQuery Checkbox was designed to replace the default checkboxes with super awesome switches. It also works with radio buttons.
http://widowmaker.kiev.ua/checkbox/

Example:

File Style

File Style allows you to choose an image to replace the default browse button when using a file input field.
http://www.appelsiini.net/projects/filestyle

Example:

10 Great Free Mac Apps for Web Developers

c.bavota — Fri, 13 Nov 2009 21:06:15 +0000

I have been a Mac man for almost ten years now, and though many Web developers swear to working on a PC, I find my Mac has everything I need to develop, design and program Web sites. Luckily there are tons of great free apps available to help any developer work more efficiently on their Mac.

Here is a list of 10 great free Mac apps for Web developers that I use:

TextWrangler

TextWrangler is the powerful general purpose text editor with some great features. Whether you are working with HTML, CSS, PHP or any other Web programming language, TextWrangler has everything you need to easily edit your code.
http://www.barebones.com/products/textwrangler/index.html

MAMP

MAMP installs Apache, Mysql and PHP on your Mac to create a fully functioning Web environment which will allow you to test all aspects of your Web site locally. It’s smart to have an environment to test and work with offline before making your changed on your live site.
http://www.mamp.info/en/mamp/index.html

Paparazzi!

Paparazzi! is a small utility for Mac OS X that takes screen shots of Web pages. This is helpful for creating your portfolio or sending screen shots to clients.
http://derailer.org/paparazzi/

YemuZip

YemuZip is an easy-to-use application for making zip files. Just drag, drop, name your zip file and you’re done. The native Mac file compressor utility adds Mac-specific info to zip files that, when extracted on a PC, looks like garbage.
http://www.yellowmug.com/yemuzip/

VirtualBox

VirtualBox is a general-purpose full virtualizer for x86 hardware that allows Mac user to load Windows software on their desktop. Creating an IE testing environment on your Mac is pretty simple using VirtualBox.
http://www.virtualbox.org/

Skype

Everyone probably already uses this, and if you don’t, you should. Skype is great to communicate with clients from around the globe. Skype to Skype is free for instant messaging and calls.
http://www.skype.com/

GIMP

GIMP is an open source versatile graphics manipulation package similar to Adobe’s Photoshop, but it won’t put you in the poor house. It may not be as robust but GIMP has some amazing features and who can beat the price.
http://www.gimp.org/

Cyberduck

Cyberduck is an open source FTP, SFTP, WebDAV, Cloud Files and Amazon S3 browser for the Mac. It features an easy to use interface with quickly accessible bookmarks.
http://cyberduck.ch/

SvnX

SvnX is an open source GUI for most features of the svn client binary. It allows you to browse your working copies, spot changes and operate on them but also to browse logs and revisions of your repositories.
http://www.lachoseinteractive.net/en/community/subversion/svnx/features/

Sequel Pro

Sequel Pro is a fast, easy-to-use Mac database management application for working with MySQL databases.
http://www.sequelpro.com/

Display a List of Upcoming Posts in WordPress

c.bavota — Tue, 10 Nov 2009 05:10:51 +0000

When you have completed a post in WordPress, you have the ability to save it as a draft, publish it immediately or schedule a future date when it will be published automatically. This is extremely helpful if you want to plan ahead or if you use your WP site for events. Creating a simple list of upcoming posts lets your visitors know what they can look forward to and is pretty simple to do.

The following code can be placed in your sidebar on within any template.


$futurePosts = new WP_Query();
$futurePosts->query('showposts=5&post_status=future&order=ASC');
 
if ($futurePosts->have_posts()) : while ($futurePosts->have_posts()) :
?>

 the_title(); ?>
 the_time(get_option('date_format')); ?>

 endwhile; else: ?>

 No upcoming events.

 endif; ?>

If you want to only display future posts from a specific category, you can add a cat=$id to the query like so:

$futurePosts->query('showposts=5&post_status=future&order=ASC&cat=12');

Be sure to change the “12″ to the category ID.

Display Random Posts in WordPress

c.bavota — Mon, 19 Oct 2009 17:16:23 +0000

I am working on a new WordPress site and I wanted to display a selection of random posts at the bottom of every page. It is pretty simple to do, but I also wanted to make sure that on single post pages, the current post would be excluded. That took a little bit more figuring out but I got it working.

Here is a quick piece of code to insert into your WordPress templates so that you can display a list of random posts, excluding the current post that is displayed.

 
global $post;
$postid = $post->ID;
$args = array(
'orderby' => 'rand',
'showposts'=>5,
'post__not_in'=>array($postid)
);
query_posts($args);
echo '';
while (have_posts()) : the_post();
echo '.get_permalink().'" title="'.the_title('','',false).'">'.the_title('','',false).'
';
endwhile;
echo '
';
?>

You can always change the number of random posts displayed by increasing or decreasing the ‘showposts’ variable. You can also make it category specific by adding a 'cat'=>24, to the $args array, where ’24′ is the category ID.

Get Familiar with HTML 5

c.bavota — Thu, 27 Aug 2009 14:19:26 +0000

If you work on the web you have probably heard about HTML 5. It is the next evolutionary step in web programming and the sooner you familiarize yourself with it the better.

There is a lot going on in HTML 5 and instead of getting into it myself, I think I should just suggest a few articles I have come across to steer you all in the right direction.

WC3 – A vocabulary and associated APIs for HTML and XHTML
Smashing Magazine – HTML 5 and the Future of the Web
A List Apart – A Preview of HTML 5

If you knew nothing about it before, checking out these articles will fill your mind with so much HTML 5 your eyes will bulge.

Securing Your Site’s Directories

c.bavota — Fri, 17 Jul 2009 16:51:22 +0000

If you store files or images in a folder called “images”, and people enter www.yoursite.com/images as a URL, they will see a list of all the files you have in that directory. A quick way to solve this is to create an empty index.html or index.php file and upload it to the directory. This will load an empty page instead of showing a content list.

Another way of doing this is by modifying (or creating) a .htaccess file. Just place:

Options -indexes

in your .htaccess file and it will do the same thing as adding an index.html file to your folder.

Remove wp_list_pages() Links for Parent Pages

c.bavota — Sat, 13 Jun 2009 17:48:53 +0000

Creating a page list in WordPress is super easy. All it takes is one function call: . The only problem with the list is if you have sub-pages categorized under pages that you only want to use as a way to organize your pages. Your parents pages are still linked to in the list but most likely they will be empty. I decided to create a quick function to solve this problem.

Just place this in your theme’s functions.php file.


function removeParentLinks() {
$pages = wp_list_pages('echo=0&title_li=');
$pages = explode("", $pages);
$count = 0;
foreach($pages as $page) {
if(strstr($page,"")) {
$page = explode('', $page);
$page[0] = str_replace('','',$page[0]);
$page[0] = preg_replace('/\/','',$page[0]);
if(count($page) == 3) {
$page[1] = str_replace('','',$page[1]);
$page[1] = preg_replace('/\/','',$page[1]);                
}
$page = implode('', $page);
}
$pages[$count] = $page;
$count++;
}
$pages = implode('',$pages);
echo $pages;
}
?>

Now just replace your wp_list_pages(); function with removeParentLinks(); and away you go.

NOTE: This only works for page lists that are three levels deep or less.