Here is a brief summary of the project:

Community Funded will connect people, ideas and resources in historic new ways, empowering our communities and promoting “grass-roots economic recovery.” Anything’s possible when it’s Community Funded.

Please sign up to be a part of something really special.

Here is a link to our Facebook page with some more info and response from the public: https://www.facebook.com/CommunityFunded

This code can be placed in your theme’s functions.php or in a plugin. You can replace “administrator” with any role that you choose.

function wp_admin_role_limiter() {
     if ( ( is_user_logged_in() ) && ( preg_match( '/wp-admin/', $_SERVER['REQUEST_URI'] ) ) ) {
          if ( !current_user_can( 'administrator' ) ) {
	       header( 'Location: http://www.domain.com/custom-profile-page/' );
	  }
     }
}
add_action( 'admin_head', 'wp_admin_role_limiter' );

https://github.com/matthewaprice/Google-Base-Feed-Parser

So for my example, let’s say that you want to have users add images to a specific post from the front end. For this demonstration, it can be a photo gallery that you want multiple users to be able to add to.

First things first, make a form in your template that will let the users choose multiple images to add to the post’s gallery.

<!-- you can place the upload script into your theme folder or in a plugin -->
<form action="/path/to/upload/script/upload.php" method="POST" enctype="multipart/form-data">
	<input type="file" name="files[]" multiple>
	<!-- The following hidden field contains the post id for which you will be uploading images to -->
	<input type="hidden" name="post_id" value="100">
	<input type="submit" class="btn" value="Start Upload »">
</form>

Now here is the contents of upload.php

<?php
// if you have this in a file you will need to load "wp-load.php" to get access to WP functions.  If you post to "self" with this code then WordPress is by default loaded
require $_SERVER['DOCUMENT_ROOT'] . "/wp-load.php";
// require two files that are included in the wp-admin but not on the front end.  These give you access to some special functions below.
require $_SERVER['DOCUMENT_ROOT'] . "/wp-admin/includes/file.php";
require $_SERVER['DOCUMENT_ROOT'] . "/wp-admin/includes/image.php";

// required for wp_handle_upload() to upload the file
$upload_overrides = array( 'test_form' => FALSE );

global $current_user;
get_currentuserinfo();
$logged_in_user = $current_user->ID;

// count how many files were uploaded
$count_files = count( $_FILES['files'] );

// load up a variable with the upload direcotry
$uploads = wp_upload_dir();

// foreach file uploaded do the upload
foreach ( range( 0, $count_files ) as $i ) {

	// create an array of the $_FILES for each file
	$file_array = array(
		'name' 		=> $_FILES['files']['name'][$i],
		'type'		=> $_FILES['files']['type'][$i],
		'tmp_name'	=> $_FILES['files']['tmp_name'][$i],
		'error'		=> $_FILES['files']['error'][$i],
		'size'		=> $_FILES['files']['size'][$i],
	);

	// check to see if the file name is not empty
	if ( !empty( $file_array['name'] ) ) {

	 	// upload the file to the server
	    $uploaded_file = wp_handle_upload( $file_array, $upload_overrides );

		// checks the file type and stores in in a variable
	    $wp_filetype = wp_check_filetype( basename( $uploaded_file['file'] ), null );	

	    // set up the array of arguments for "wp_insert_post();"
	    $attachment = array(
	    	'post_mime_type' => $wp_filetype['type'],
	    	'post_title' => preg_replace('/\.[^.]+$/', '', basename( $uploaded_file['file'] ) ),
	    	'post_content' => '',
	    	'post_author' => $logged_in_user,
	    	'post_status' => 'inherit',
	    	'post_type' => 'attachment',
	    	'post_parent' => $_POST['post_id'],
	    	'guid' => $uploads['baseurl'] . '/' . $file_array['name']
	    );

	    // insert the attachment post type and get the ID
	    $attachment_id = wp_insert_post( $attachment );

		// generate the attachment metadata
		$attach_data = wp_generate_attachment_metadata( $attachment_id, $uploaded_file['file'] );

		// update the attachment metadata
		wp_update_attachment_metadata( $attachment_id,  $attach_data );

                // this is optional and only if you want to.  it is here for reference only.
                // you could set up a separate form to give a specific user the ability to change the post thumbnail
                // set_post_thumbnail( $_POST['post_id', $attachment_id );

	}
}
// setup redirect.  i used the referer so that i can say "file uploaded" in a div if the files query string variable is set.
header("Location: " . $_SERVER['HTTP_REFERER'] . "/?files=uploaded");
?>

Now automatically, any image uploaded to this form will be added to the gallery for this page/post. Depending upon your server’s limits for uploaded files, you will be limited to an amount of data that can be uploaded at once.

You could definitely put this script into a js file and then enqueue it, but for the purposes of this demo, this works ok too.

Here is a demo video:  

function make_categories_selector_collapsable() {
?>
<script>
jQuery(document).ready(function() {
	// first we need to hide the children to only see the top level categories
	jQuery('#categorychecklist ul.children').css('display','none');

	// This removes the label functionality as when we click the category name we do not necessarily want to select the item's checkbox, just want to expand the list
	jQuery('#categorychecklist label').each(function() {
		var labelHtml = jQuery(this).html();
		jQuery(this).replaceWith(labelHtml);
	});

	// we now want to grab each of the >li<'s so that we can use a click function
	jQuery('#categorychecklist li').each(function() {
		jQuery(this).click(function() {
		// so when the item is clicked it shows the sub categories
		jQuery(this).children().show();
	});
});

});
</script>
<?
}

add_action( 'admin_head' , 'make_categories_selector_collapsable' );

I am using this in a scenario where there are images that have been uploaded to the server that are very small 200×200 and rather large 1000×1200. The size of my display box in this example is 400×400.

Here is a demo: http://www.matthewaprice.com/image-resize-demo/

Here is how you implement the class.

// this first line relies on the GD Image Library to get the image's dimensions
$size = getimagesize('/path/to/your/image.jpg'); // can be from root of server or http://...
$new_image = new ImageResizer('400'); // Set the size of the box that will house the images
$new_image->setOriginalImageWidth($size[0]); // Input the original image's height
$new_image->setOriginalImageHeight($size[1]);
// Output the new dimensions as an array.  The "margin-top" argument says that you also want to center the image top/bottom.  This dynamically creates a "margin-top" css rule based on the new height of the image. Without it, your image will just be centered left/right
$new_dimensions = $new_image->outputNewDimensions('margin-top');

Here is the HTML

<div style="width: 400px; height: 400px;">
<!-- You can create a css rule for this, but for the demo it is easier to show inline -->
	<!-- This div will center the image "left/right" and "top/bottom" -->
	<div style="text-align: center; margin-top: <?php echo $new_dimensions['margin_top']; ?>px;">
		<!-- The style rules here are the new computed width and height of the image -->
		<img src="/path/to/your/image.jpg" style="width: <?php echo $new_dimensions['width']; ?>px; height: <?php echo $new_dimensions['height']; ?>px;">
	</div>
</div>

And here is the class. I have used this with WordPress to access images not imported by WordPress that are on a different server. So in this case it is a plugin. You can definitely take just the class and use in your app as necessary.

<?php
/*
Plugin Name: Image Resizer
Plugin URI: http://www.matthewaprice.com/resize-image-on-the-fly-to-fit-in-a-square-box/
Description: This plugin give you the ability to resize images on the fly to fit in a square fixed width/height box
Version: 1.0
Author: Matthew Price
Author URI: http://www.matthewaprice.com
License: GPL2
*/	

class ImageResizer {

        private $bounds;

	public function __construct($bounds) {

		$this->bounds = $bounds;

	}

	public function setOriginalImageWidth($width) {

		$this->original_width = $width;

	}	

	public function setOriginalImageHeight($height) {

		$this->original_height = $height;

	}	

	public function outputNewDimensions($margin = '') {

		if ( ($this->original_width < $this->bounds) && ($this->original_height < $this->bounds) ) {
			// keep the original dimensions as the image is by default smaller than bounds
			$new_width = $this->original_width;
			$new_height = $this->original_height;
			$margin_top = ($this->bounds - $new_height) / 2;
		} else if ( ($this->original_width > $this->bounds) && ($this->original_width == $this->original_height) ) {
			// square image larger than bounds
			$ratio = $this->original_width / $this->bounds;
			$new_width = $this->bounds;
			$new_height = round($this->original_height / $ratio);
			$margin_top = ($this->bounds - $new_height) / 2;
		} else {
			// start resizing image to get new width and height
			if ($this->original_width > $this->original_height) {
				// width is bigger than height
				$ratio = $this->original_width / $this->bounds;
				$new_width = $this->bounds;
				$new_height = round($this->original_height / $ratio);
				$margin_top = ($this->bounds - $new_height) / 2;
			} else if ($this->original_height > $this->original_width) {
				// height is bigger than width
				$ratio = $this->original_height / $this->bounds;
				$new_height = $this->bounds;
				$new_width = round($this->original_width / $ratio);
				$margin_top = ($this->bounds - $new_height) / 2;
			}
		}

		$new_image_dimensions['width'] = $new_width;
		$new_image_dimensions['height'] = $new_height;
		if ($margin) { $new_image_dimensions['margin_top'] = $margin_top; }	

		return $new_image_dimensions;	

	}		

}
?>

Introducing a new tool! This site lets you create a snippet that you can embed or give to someone else to display your blog articles outside of your site. I built this as there are some hosted shopping cart solutions where you cannot run PHP, and you cannot style elements in an iFrame not from your own site. It would be great to use WordPress’ great blogging capability and have the posts automatically fed to your shopping cart or other site.

By creating WordPressFeeder.com, I got around both of these issues. The generated code creates stylable elements on your external site.

Here is a simple demo of this in action view demo

Here is a more complex implementation. This includes post thumbnails and category feeds. The three “featured” sections on the bottom of the page are driven by WordPress posts with this technology. As it generates <ul>s with a class on them, you can have multiple instances. Just change the class name in the jQuery that is generated along with your css. I currently work for a development firm where i installed this technology on one of their servers for them to use on their sites.

Feel free to let me know any suggestions, feature requests, or issues you may have with this by commenting on this post.

The first step is to simply put in a link to your feed (example feeds are on the site) and choose from the following options:

• Article content character limit
• You can choose what you want your article titles to be wrapped in: h1 ,h2, span, div, etc
• How many posts do you want to show
• Read more link customization. You can pick from up to 9 options
• and…Whether or not you want to display The Post Thumbnail

In order to use the post thumbnail (this assumes that your theme has them enabled), you need to add a function (provided on www.wordpressfeeder.com) to your theme’s functions.php as the_post_thumbnail() is not natively included by WordPress’ RSS Feeds.

Once you generate the code, you get some javascript, css, and html to use. The javascript goes either in your html <head> or in a scripts.js file for your site. Note: this code requires jQuery right now. Hopefully i will have an option soon to support other javascript frameworks and possibly framework independent. But for now, it is only jQuery.

All you have to place in your html is: “<ul class=”wordpress-feeder”></ul>”

The javascript dynamically fills the <ul> with <li>s for the number of posts you selected. Every item in the <ul> gets wrapped in an element for easy styling with CSS. Here is the standard CSS you can use with it:

.wordpress-feeder { } // the main ul that contains the feed
.wordpress-feeder li { } // this is the container for each article
.wordpress-feeder li  h2 { } // this will be what you chose on the options page
.wordpress-feeder li .pubdate { } // this is the container for the post date
.wordpress-feeder li .description { } // this is the container for the article text
.wordpress-feeder li .image { } // this is the container for the image.

// there is currently no customization for the date, so if you dont' want to use it, just "display:none;" on that element

View Demo

Here is the HTML Markup
You can start any of the LIs with class=”selected” to have that tab start as the selected item. The tab navigation is set up in the javascript. This way, if javascript is disabled the tabs go away and all the content in the tabs is displayed. Thanks to Kyle Geminden for this.

<div id="tabs-content">
	<div id="tab-content-1">here is some content for tab 1</div>
	<div id="tab-content-2">here is some content for tab 2</div>
	<div id="tab-content-3">here is some content for tab 3</div>
</div>

Here is the CSS
You can change the last line here to match the LI that you want to display by default

#tabs { margin: 0; padding: 0; list-style-type: none; overflow: hidden; }
#tabs li { cursor: pointer; float: left; margin: 5px; padding: 5px; background: #EFEFEF; }
#tabs li.selected { background: #888888; }
#tabs-content { clear: both; }
#tabs-content.js > div { display: none; }
#tabs-content.js > #tab-content-1 { display: block; }

Here is the Javascript/jQuery

$('#tabs-content').before('<ul id="tabs"><li id="tab-1" class="selected">Tab 1</li><li id="tab-2">Tab 2</li><li id="tab-3">Tab 3</li></ul>');
$('#tabs-content').addClass('js');	

	$("#tabs li").each(function() {

		$(this).click(function() {
			var tabId = $(this).attr('id');
			var tabId = tabId.split('-');
			var tabContent = document.getElementById('tab-content-' + tabId[1]);
			tabContent.style.display = 'block';
			$(this).addClass('selected');
			$(this).siblings().removeClass('selected');
			$(tabContent).siblings().css('display','none');
		});

	});

UPDATE – March 25. 2012

So I have been asked to provide code that makes these tabs bookmarkable. Well…here it is!
In order to get these to be bookmarked, I make up a $_GET variable that is specific to these tabs.

So after the normal tab js code if you put this and the url is http://domain.com/?tab=1
this will overwrite the tab function and highlight the one you want.

see: View Revised Demo
there are direct links on this page to the tabs

if ( getQueryString('tab') != '' ) {
        // get the value of the query string var called "tab"
	var tab = getQueryString('tab');
        // remove all the "selected" classes from the LIs
	$('#tabs li').each(function() { $(this).removeClass(); });
        // based off of the tab in the query string, readd the "selected" class back to the appropriate tab
	$('#tabs li#tab-' + tab).addClass('selected');
        // hide all of the content divs
	$('#tabs-content > div').css({'display':'none'});
        // based off of the tab in the query string, make the selected tab visible
	$('#tabs-content #tab-content-' + tab).css({'display':'block'});
}

WHERE getQueryString(); is the function below

// http://www.bloggingdeveloper.com/post/JavaScript-QueryString-ParseGet-QueryString-with-Client-Side-JavaScript.aspx
function getQueryString(key, default_) {
	if (default_==null) default_="";
	key = key.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
	var regex = new RegExp("[\\?&]"+key+"=([^&#]*)");
	var qs = regex.exec(window.location.href);
	if(qs == null)
		return default_;
	else
		return qs[1];
}

See live demo I installed at: http://www.belocalnc.org. For example, try clicking on “For Business” and then “Membership” and then on “For Community.” The nav collapses appropriately and stays open to the last item clicked on the resulting page.

The code here is CSS and a few of jQuery that are effective and work well with the generated menus from wp_nav_menu().

First you must make sure that your current theme supports these types of menus. Add this to your themes “functions.php” if it is not already there.

add_theme_support('menus');
register_nav_menus(
	array(
	  'primary_navigation' => 'Primary Navigation',
	  'utility_navigation' => 'Utility Navigation' // i like to set up a coupple at first in case i need them later
	)
);

Here is the html in your header.php

<nav id="nav-main" role="navigation">
	<?php wp_nav_menu(array('theme_location' => 'primary_navigation')); ?>
</nav>

Now here is the CSS for the nav

// Portions adapted from http://rootstheme.com
// The CSS here is slightly different from the live demo as i didn't include any of the images that are on the live site
#nav-main ul { list-style: none; margin: 0; padding :0; text-align: left; }
#nav-main ul a {
  display: block;
  text-decoration: none;
}
#nav-main ul li { display:inline-block; width: 100%;}
#nav-main ul li a {
	text-decoration:none;
	display:block;
	font-size:1.0em;
	padding: 10px 0px 10px 25px;
	color:#464646;
	margin: 0px 0px;
	border-top: 1px #a9aaa9 solid;
	letter-spacing: 1px;
}

#nav-main ul li a:hover { background: #ffffff; }
#nav-main ul li ul li a:hover { background: none; color: #0f6cb6; }
#nav-main ul li ul { position: relative; top: -2px; }

#nav-main ul ul li a { background: none; border: none; padding: 2px 0px 2px 0px; margin: 0 0 0 27px; }
#nav-main ul ul li ul { margin: 0 0 0 8px; }

ul.sub-menu li.current-menu-item  { color: #0f6cb6 !important; font-weight: bold; } 

Lastly, we can add this to either your themes “scripts.js” file, or just in your header.php

  // Portions of this were adapted from "http://www.i-marco.nl/weblog/jquery-accordion-menu/".
  // It only went one level deep.
  // This now accounts for more levels of accordion.

$(document).ready( function($) {

  // This hides all the sub menus on page load
  $('#nav-main ul.sub-menu').hide();
  // This makes sure that all the sub menus are open when applicable
  $('#nav-main li.current-menu-item').children().show();
  // This keeps the nav open to the item that you are navigating to.
  $('#nav-main li.current-menu-item').parents().show(); 

  $('#nav-main ul li a').click(
    function() {
      var checkElement = $(this).next();
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        return false;
        }
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
		$(this).parent().siblings("li:has(ul)").find("ul").slideUp('normal');
        $('#nav-main ul ul li ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
        return false;
        }
      }
    );
  $('#nav-main ul ul li a').click(
    function() {
      var checkElement = $(this).next();
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        return false;
        }
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#nav-main ul ul').slideUp('normal');
        $('#nav-main ul ul li ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
        return false;
        }
      }
    );	

});