Like last year, they have released a  new bundle including 50 files, picked from the different market places. All that for $20! At this price it’s almost free Envato themes, audio, flash, artwork and 3D rendering you’re getting.

So rather than thinking about it just click on the banner and get yourself a pretty good deal right now!

Pretty amazing when you consider the quality of the themes those guys are doing. Don’t wait, go on the site now: WooThemes.

My dream package of 5 for 1:

Inspire

Spectrum

Diarise

Postcard

Delegate

excerpt_length

The name says it all, it allowd you to change the length of the excerpt displayed. The usage is very simple:

function mytheme_excerpt_length( $length ) {
	return 40;
}
add_filter( 'excerpt_length', 'mytheme_excerpt_length' );

The above function changes the number of words returned by the excerpt to 40. The code goes in your theme functions.php.

excerpt_more

Again pretty self explanatory, this one changes the end of the excerpt to whatever you want. For example, to add a link you would add this to your functions.php:

function mytheme_excerpt_more( $more ) {
	return ' &hellip; <a href="'. get_permalink() . '">' . __('Continue reading', 'mytheme') . '</a>';
}
add_filter( 'excerpt_more', 'mytheme_excerpt_more' );

This code will add a ‘Continue Reading’ link at the end of each excerpt and change the default ‘[...]‘ at the end to ‘…’

The plugin is called WPtouch and is freely available from the WordPress plugin repository here. it comes with a built in mobile friendly theme with an Apple style design that works.

Everything is there to make your mobile users at ease with a nice layout the will fit the screen and display your posts and pages nicely.

It also includes ajax loading for content so you loose less time waiting for the browser to load and more time actually reading. Having the content fitting the view port is much better when using a small screen. No more horizontal scroll and zoom.

There are loads of options in the backend to customize the theme but if it’s not enough you can always get your hands dirty and change the code. It is WordPress code after all and if you are familiar with theme design then you should be able to get by quite easily.

With the rapid increase in mobile browsing over the past few month this is something every site should consider.

The menu builder will allow you to create a menu from any categories, pages and links, order them by drag and drop, create submenus, etc. If you are a WooTheme user you are already using this menu builder so you now what I am talking about.

Now to make you theme compatible with this new feature there are small step you need to take:

1 Tell WP your theme uses the menu builder

Add this simple line to your functions.php file

// This theme uses wp_nav_menu()
add_theme_support( 'nav-menus' );

Use the new function

Then Use the wp_nav_menu in your header:

<?php wp_nav_menu( 'sort_column=menu_order&container_class=menu-header' ); ?>

And that’s it. I know it’s short but that’s why it’s called a quick tip :p

Today’s “little details” will focus on the date display. Particularly present on blog, the date is often left aside and displayed as a simple string. While this approach is indeed working for some designs, other take advantage of this added information to play with typography, space or support the rest of the design with colours.

But lets have a look at some examples:

Some Premium themes with nice date styling

Styling the date of posts is the little detail that can make your design even better. Have some examples you would like to share? Feel free to post them in the comments section.

Many good theme are good because they include some bespoke back end functionalities. But when demoing a theme you usually don’t get to try them out.

The Playground is based on a WPMU install using all the themes available and you can create new pages, posts, post comments and change skins, style, etc…

Now let’s see if ThemeForest take the same approach and open the theme testing to the backend as well.

So the basics here are:

• we call a page using ajax, passing the id of the post
• The page grabs the content of the post we requested and returns it to the script
• We then output the content in a div and “simplemodal” it

And for the result, click on this link.

Note: be sure to dowload the latest version of both jQuery and SimpleModal.

The major problem when it comes to ajax and WordPress is that you need to call a php script that will have access to all the WordPress built in functions. The solution came from this post from John Faulds.

Basically you create a page template that will be in charge of grabbing the post from the id we pass and returning the content to the script.

This is going to be a simple loop like this:

<?php
/*
Template Name: Ajax Handler
*/
?>
<?php
	$post = get_post($_GET['id']);
?>
<?php if ($post) : ?>
	<?php setup_postdata($post); ?>
	<div class="whatever">
		<h2 class="entry-title"><?php the_title() ?></h2>
		<div class="entry-content">
			<?php the_content(); ?>
		</div>
	</div>
<?php endif; ?>

Save this code in a file called ajax-handler.php in you theme folder. Now if you go in your admin panel and create a new page, you should be able to select this template as the page template. So I have created a page in WordPress called Ajax Handler with the template “Ajax Handler” assigned to it. The special function we use here, get_post(), will grab the content of a post with the Id we’ve passed with ajax as a GET variable.

Talking about ajax, lets have a look at the function to do the stuff:

jQuery(document).ready(function() {
	jQuery('a.postpopup').click(function(){
		id = jQuery(this).attr('rel');
		jQuery('<div id="ajax-popup"></div>').hide().appendTo('body').load('http://urlofyoursite.com/ajax-handler/?id='+id).modal();
		return false;
	});
});

note: in the ‘load’ function you want to use the permalink to the page NOT the path the template file of the ajax handler.

note 2: I am using ‘jQuery’ instead of $ because I use the jQuery included in WordPress which is in no conflict mode. If you use normal jQuery then replace all occurrences of ‘jQuery’ by $ in my javascript snippet. This code would go in an external javascript file you would include on your page or in the header. But the first option is recommended.

This a very simple way to do it, thanks to jQuery. This means: when a click on a link with a class postpopup, get the id from its rel attribute, create a empty div, load the page ‘ajax-handler’ and add the content of the data returned to the div. Then SimpleModal it.

The html for the link should look like this:

<a href="javascript:;" rel="postid" class="postpopup">this link</a>

note: in this html it would be better to replace the href by the actual url of the post, so if someone hasn’t got javascript enable they can still view the content.

And that’s it, all done. To get everything to work you will of course need to include jQuery and SimpleModal on your page. Don’t forget to hide your ajax handler page from your blig navigation. If your theme is using the wp_list_pages function you can pass a parameter ‘exclude=id_of_the_page’ to exclude it from the list.

And for the result, click on this link.

Support location of category templates based on category-slug as well as category-id

This is probably the feature that will help most CMS developer. It works the same way as sidebars does. You add the slug of the category to the name of the file and when you display this category WordPress will look for the template and use it to output the posts.

Example: You want a specific template for the “Members” category. You create a file in your theme called category-members.php. When displaying the members category WordPress use this template. This allow for a complete control over each category display like page templates do for pages.

Image editor

At least, we will be able to crop, resize and rotate pictures from the backend. The feature is accessible just after you’ve uploaded a picture by clicking on the “edit picture” link.

Trash

Ever deleted a post and realized to late that it was the wrong one? The addition of the trash state let you bring back deleted posts, pages and pictures for the dead.

Post Thumbnail

Probably one of the most hacked / plugged in feature on WordPress. The 2.9 version adds the ability to attache a picture to a post and use it in conjunction with the post_image() template function to display it. The obvious use for it is when you want to get this kind of layout:

Embeds

Easier way to embed media using oEmbed.

Raise the version of MySQL supported from 4.0 to 4.1.2

The MySQL requirement have been raised to 4.1.2 which will allow the developers to use new SQL functions and hopefully speed up stuff a bit. More info there:

Canonical tag support

The canonical tag is used by search engines to avoid duplicated content issue. It will be added to single posts and pages.

register_theme_directory()

Plugins will be able to set a new directory for WordPress to look for themes.

Widgets outside of sidebars

the new widget() function will let you call widgets outside the traditional registered sidebar.

Comment metadata

Add support for metadata to comments. The is the same function as per metadata on posts and pages and will allow you to use new variable in your templates.

Let’s have a look at a few examples:

It is especially interesting to see how they are implemented in a WordPress environment so I have shortlisted a few WordPress powered sites that uses javascript sliders in one way or another.

Radium

internet dreams

Branded07

Tutorial9

Copimaj Interactive

HyperX Local

Split Mango

IconDock

We <3 ™

Ankara Halı Yıkama Merkezi

Do it yourself

If you like that you might want to implement one yourself. It’s easier than what it looks like and even if you don’t now much about javascript you should be able to pull it off. All we need to do is a custom query that displays posts from a specific category. Then a javascript that takes those posts and turn them in a slider.

The code could look like that (goes in you template file, either header.php or index.php or the homepage template):

<?php
//only display if on the frontpage
if(is_front_page()):  ?>

<div id="banner">
	<?php
	//get the posts from the slider category
	$homeslider = new WP_Query(array(
		'cat' => $id_of_the_category,
		'showposts' => $how_many_posts,
		'post_type' => 'post',
		'post_status' => 'publish',
		'caller_get_posts' => 1)
	);
	if ($homeslider->have_posts()) :
	?>

	<div class="wrapper">

		<ul>
			<?php while ($homeslider->have_posts()) : $homeslider->the_post(); ?>
				<li class="slider post">
					<div class="slider_text hentry">
						<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
						<?php
						//reset more to be able to display the read more link
						global $more;
						$more = 0;
						the_content('Read more...');
						?>
					</div>
				</li>
			<?php endwhile; ?>
		</ul>
	</div>
	<?php endif; ?>
</div>
		
<?php endif; ?>

Then grab the fantastic code from Chris Coyier’s AnythingSlider script and add this at the top of the file:

$(document).ready(function() {
	$('#banner').anythingSlider({
			easing: "swing",                // Anything other than "linear" or "swing" requires the easing plugin
			autoPlay: false,                 // This turns off the entire FUNCTIONALY, not just if it starts running or not
			startStopped: false,            // If autoPlay is on, this can force it to start stopped
			delay: 3000,                    // How long between slide transitions in AutoPlay mode
			animationTime: 600,             // How long the slide transition takes
			hashTags: true,                 // Should links change the hashtag in the URL?
			buildNavigation: true,          // If true, builds and list of anchor links to link to each slide
			pauseOnHover: true,             // If true, and autoPlay is enabled, the show will pause on hover
			startText: "Start",             // Start text
			stopText: "Stop",               // Stop text
			navigationFormatter: null       // Details at the top of the file on this use (advanced use)
	});
});

Add the CSS and images from AnythingSlider and don’t forget to call the javascript file (after the jQuery call) and the CSS file in the header. Remember that if you use the jQuery from WordPress you have to change the $ by jQuery in the file and the code at the top.

Ready made solutions

Now if you like the slider effect then there are a few WordPress themes out there that will give you just that:

Pacifica, ThemeForest, from $30 single use.

Levitation, ThemeForest, from $35 single use

Twicet, ThemeForest, from $35 single use

Vibrant CMS, WooThemes, from $70 single use (plus one free theme!)

The Gazette Edition, WooThemes, from $70 single (plus one free theme!)

You see that often on FAQs pages for example or other long page where inner navigation is needed.

The point here is to automate the process of creating a content table in WordPress. We are going to produce a list of a certain type of headers at the top of the page/post and link them with anchors to the document. Something similar to this:

Sounds good but there is a limitation. We are not going to support nested titles list for now. It is possible but it would make the code much more complex.

The code is pretty simple and will consist of one function hooked to the filter “the_content” available in WordPress. Using a shortcode like content_table tag=”h2″  between [] will tell the function to generate the table.

Let’s get startedBack to top

Here is the full code. I’ll go in more details below.

/**
 * Function to auto generate a content table from the content
 * @author Ben  http://wordpressthemescollection.com
 * @since 1
 */
add_filter('the_content', 'get_content_table');

function get_content_table($content){

	preg_match('/\[content_table\s(.*?)\]/', $content, $m);
	if($m[0]):
		$attr = shortcode_parse_atts($m[1]);
		
		$in_tag = $attr['tag'];

		preg_match_all('|<'.$in_tag.'>(.*)</'.$in_tag.'>|', $content, $titles);
		
		//if there are titles, build the content table
		if($titles[1]){

			$max = count($titles[1]);
			$counter = 0;
			$content_table = "<div id='content_table'><a name='go_content_table' id='go_content_table'></a><h3>Content table</h3><ul class='xoxo ct_column'>";
			foreach($titles[1] as $title):

				if($counter >= ceil($max/2)){
					$content_table .= "</ul><ul class='xoxo ct_column'>";
					$counter = 0;
				}
				$counter++;

				$content_table .= '<li><a href="#'.slug($title).'">'.$title.'</a></li>';

			endforeach;
			$content_table .= "</ul></div>";
		}
		//echo $content_table;
		//replace the shortcode by the content table
		$content = str_replace('<p>'.$m[0].'</p>', $content_table, $content);

		//add "back to top" links in headers
		$content = preg_replace("|<".$in_tag.">(.*)</".$in_tag.">|e", "'<'.$in_tag.' name=\"'.slug('$1').'\" id=\"'.slug('$1').'\">$1<a class=\"backtop\"href=\"#go_content_table\">Back to top</a></'.$in_tag.'>'", $content);

	endif;

	return $content;
}

function slug($string)
{
	$slug = trim($string);
	$slug= preg_replace('/[^a-zA-Z0-9 -]/','', $slug); // only take alphanumerical characters, but keep the spaces and dashes too...
	$slug= str_replace(' ','-', $slug); // replace spaces by dashes
	$slug= strtolower($slug); // make it lowercase
	return $slug;
}

So, what have we got there.Back to top

add_filter('the_content', 'get_content_table');

The function add_filter is a built function in WordPress which link functions to a particular trigger. In this case we use the filter the_content, which is called just before WordPress prints out the content of a post/page. The filter will pass the content of the post/page to each functions hooked to it. Now all we need is work on the content using the function get_content_table we’ve just hooked.

The get_content_table function.Back to top

preg_match('/[content_tables(.*?)]/', $content, $m);
	if($m[0]):

First we need to find out if the content table is requested so we search for the string content_table (parameters) (between []). If we find one then we carry on, if not we just return the content untouched.

$attr = shortcode_parse_atts($m[1]);

$in_tag = $attr['tag'];

preg_match_all('|<'.$in_tag.'>(.*)</'.$in_tag.'>|', $content, $titles);

If the shortcode is there we need to get which tag needs to be used to build the table. WordPress provides a function to do that in the shortcode api. Once we have the targeted tag we can do a search for it in the content and put the results in an array.

Now the interesting stuff:Back to top

if($titles[1]){

	$max = count($titles[1]);
	$counter = 0;
	$content_table = "<div id='content_table'><a name='go_content_table' id='go_content_table'></a><ul class='xoxo ct_column'>";
	foreach($titles[1] as $title):

		if($counter >= ceil($max/2)){
			$content_table .= "</ul><ul class='xoxo ct_column'>";
			$counter = 0;
		}
		$counter++;

		$content_table .= '<li><a href="#'.slug($title).'">'.$title.'</a></li>';

	endforeach;
	$content_table .= "</ul></div>";
}

If the right type of titles are present then we start building the  content_table. First we find out how many elements we’ve got then create a div container to hold everything and start the first unordered list.

When we reach half of the elements we close the first ul and open a new one to create to list. This will help if you want to split the content table in two columns. Note: we have to slug the titles to use them as anchor links and keep the code valid.

The next is to add the back to top link to the existing titles:

$content = preg_replace("|<".$in_tag.">(.*)</".$in_tag.">|e", "'<'.$in_tag.' name="'.slug('$1').'" id="'.slug('$1').'">$1<a class="backtop"href="#go_content_table">Back to top</a></'.$in_tag.'>'", $content);

We use the power of regular expressions and callback function to get that sorted. I think this was the trickiest bit of the code.

If you place this code in you function folder and add a the content_table tag=”X” (between [], don’t forget the double quotes around the tag) shortcode (where X is the tag used for your titles) then you should get a nice content table where you have added the shortcode. Add some simple styling and you’re done!

Free Wood textures on psd tuts+

Free Icon set from Graphic River

Free file of the month from ThemeForest

So enjoy those free stuff and don’t forget to check the selection of non free but premium WordPress themes we have here.

We are concentrating here on two aspects that seem to be the most important in the current trend but feel free to share anything else in the comments.

Social Sites

P2 Theme

The P2 theme is the updated version of one called Prologue. It has been developed by Automatic, the guys behind WordPress and some other great stuff. What the theme does is transform you blog into a Twitter like platform. It’s almost better than Twitter as new posts are updated automatically using Ajax. It is particularly suited for company who need a internal messaging app where employees can share links and have small discussions. Matt Mullenweg explains on his blog how P2 changed Automatic.

WordPress Mu

WordPress Mu is not actually a plugin or a theme but a set of modified core files that allow you to set up your own WordPress.com like site. Being able to create an infinity of blogs with one install is pretty amazing. And seeing how good it runs on WordPress.com it seems to be scalable as hell. You download Wp Mu like you would download WordPress and the install is pretty much the same but you will need some server configuration knowledge if you want to make the most of it.

BuddyPress

BuddyPress is a Wp Mu plugin that will transform you mu install into a fully featured social platform very similar to Facebook. Friends, groups, Status, profile and blog, it’s all there to start your own social site. And of course it has the flexibility and styling possibilities of WordPress.

Wootube

Wootube is a premium WordPress theme from WooThemes that will help you create you own Youtube like site. The styling is clean and uses the famous WooThemes framework to give you the flexibility you need.

E-commerce / Affiliate

E-commerce themes

wpShop Reloaded

eGoods

Those two themes from ThemeForest are premium themes that will turn your WordPress install in a shopping cart. If you already have a WordPress powered site and want some basic e-commerce functionalities then this should be ideal. Of course theydon’t stack up against the likes of Magento and Prestashop but if you just need to sell a few things they are perfect. wpshop-reloaded $35 for single use. eGoods $30 for single use.

Product Affiliator

The Product Affiliator theme from ThemeForest again is will help you sell affiliate product. So it is in a way like the two themes above but here you don’t deal with payements and cart. Product Affiliator $25 for single use.

Less is often better and that’s something we designers seem to forget to satisfy our lust for intricate designs. Detail is what makes a good design, and minimal is all about that. Minimal is fresh, often very usable and doesn’t blow your mind up with things to concentrate on.

We’ve done a small selection of nice minimalist WordPress sites and a few minimal themes to quick start your next project.

Some themes to get you started

Minimo is a simple and attractive one page portfolio showcase theme, $10 for single use (demo)

Minimal WordPress Template, $25 for single use (demo)

Apricot, a nice free WordPress themes. Might need some adjustement to make the most of the latest versions of wordpress but it is a good start.

Press from Obox. Premium template, single use cost $50 but the theme is awesome

The Envato network celebrates its 3 years of operation this week and Collis promised us exiting stuff to share and giveaway.

The most interesting for us is of course the market place bundle, $300 worth of files for $20!! Files will be selected from all over the market place and sold in a Bundle for 3 days only during this week. So be ready to jump, the link is right here: Envato’s market place bundle.

But so far there is nothing that allow you to restrict access to a part of your blog to registered members, apart from the password you can add on a single post/page.

Some solutions have been suggested in the past and we are trying here to compile the best of those to make the ultimate members page.

The brief:

• Content shouldn’t be accessible from non logged users.
• Provide an easy way to login, without going to the default WordPress backend
• Allow people to post articles to be reviewed
• Protect Rss feed, archives, index, etc from displaying restricted posts
• Allow admin to use subcategories on the Members posts

Limitations:

• Users won’t be able to set the category of their post themselves, which in a way is a good thing. Each submitted post will go to the default ‘Members’ category. The admin can then add subcategories if needed.
• You need a category.php file in your theme, might change in the future though

The code will pretty much all go in the function.php file as a php class. We are gonna use WordPress categories here, no page with custom template. That’s the way we started it but it seems more flexible using the default categorisation rather than a custom page template, especially for sub-categories.

This tutorial is for people with some knowledge in php. You might pull it off by raw copy-paste but it’s always better to understand what you are doing in case something goes wrong. And as usual do this at your how risks, it worked for us on test sites, but you never know…backup backup backup!

The files

For the lazy here is everything you need in two files: one to include in your function.php and the category.php template you need: members.zip

So should we get started?

Category exclusion

This tutorial is based on the fact that your members only category is called ‘Members’. If you want to change the name to something else you will have to make sure every reference to ‘members’ as the category is changed.

This is the function that will hide the members category from archives, general Rss feed, index. It also redirects someone not logged and trying to access the members rss to the Members category page with the log in form. We have a small issue here but we’ll talk about it later.

/*
* Exclude members and sub members categories from feed, index, archives, etc...
*/
function exclude_category($query) {

	if($query->is_feed && !is_user_logged_in() && ($query->in_category == 'members' || $this->post_is_in_descendant_category($this->members_id))){
		header("HTTP/1.0 403 forbidden"); 
		header('Location: '.get_category_link($this->members_id));
		exit;
	}

	if (!$query->is_admin && !$query->in_category == 'members' && !$this->post_is_in_descendant_category($this->members_id)){
		$query->set('cat', '-'.$this->members_id);
	}
	return $query;
}

This is a quick function that will find out if a post’s assigned categories are descendants of target categories.

/**
 * Tests if any of a post's assigned categories are descendants of target categories
 * From wordpress codex http://codex.wordpress.org/Function_Reference/in_category
 *
 * @param mixed $cats The target categories. Integer ID or array of integer IDs
 * @param mixed $_post The post
 * @return bool True if at least 1 of the post's categories is a descendant of any of the target categories
 * @see get_term_by() You can get a category by name or slug, then pass ID to this function
 * @uses get_term_children() Gets descendants of target category
 * @uses in_category() Tests against descendant categories
 * @version 2.7
 */
function post_is_in_descendant_category( $cats, $_post = null )
{
	foreach ( (array) $cats as $cat ) {
		// get_term_children() accepts integer ID only
		$descendants = get_term_children( (int) $cat, 'category');
		if ( $descendants && in_category( $descendants, $_post ) )
			return true;
	}
	return false;
}

Members category template

Next we need this special template for the members category. The template will go into an other function in our class and this function will be called in the category.php file.

/* 
 * Print out the template to use in members categories
 * Login form that redirect to same page
 * Post editor for members to post a new entry
 * Display of latest members posts
 */
function get_members_template(){ 
	//you don't want anyone to be able to send you some random post requests do you?
	if(is_user_logged_in()){
		//if a post is submitted, check it and create a new post in the databse if ok
		if($_POST['submit']){

			$submit = 1;

			if($_POST['title'] == ''){
				$error .= '<li>Please type in a title for your article</li>';
			}
			if($_POST['content'] == ''){
				$error .= '<li>Please type in the content of you article</li>';
			}

			if($error == ''){

				$your_post_title = $_POST['title'];
				$your_post_content = $_POST['content'];
				// Create post object
				$my_post = array();
				$my_post['post_title'] = $your_post_title;
				$my_post['post_content'] = $your_post_content;
				$my_post['post_status'] = 'pending';
				$my_post['post_author'] = $user_ID;
				$my_post['post_category'] = array(get_cat_id('members'));
				$my_post['post_type'] = 'post';

				// Insert the post into the database
				$postId = wp_insert_post($my_post);

				if(!empty($postId) && $postId != 0)
				{
					$message .= "<li>The article has been submited and will go live in the next 48hrs if approved</li>";
					$your_post_title = '';
					$your_post_content = '';
				}
				else $error .= "An error occured with your post";
			}
		}
	}
	?>

	<h2 class="pagetitle">Archive for the &#8216;<?php single_cat_title(); ?>&#8217; Category</h2>

	<?php 
	/*
	 * If user not logged in display login form
	*/
	if(!is_user_logged_in()): ?>

		<h3>Members access only</h3>
		<p>
			The content of this page is reserved to members of the website only.
		</p>
		<form action="<?php echo wp_login_url($_SERVER['REQUEST_URI']); ?>" method="post" id="memberslogin">

			<h3>Are you a member?</h3>

			<p>If you are a member, please use the form below to login</p>

			<ol>
				<li class="inline"><label for="log">Username</label><input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="22" /></li>
				<li class="inline"><label for="pwd">Password</label><input type="password" name="pwd" id="pwd" size="22" /></li>
				<li><input type="submit" name="submit" value="Send" class="button" /><label for="rememberme"><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label></li>
			</ol>
		</form>
	<?php

	else:

	?>
		<div class="adminaccess">
			<a href="javascript:;" id="open-members-form">Submit an article &raquo;</a>
			<?php //first display the form to add a new post ?>
			<form id="members-post" action="" method="post" class="<?php if($submit) echo 'open'; ?>">
				<?php if($error != ''): ?>
					<ul class="error">
						<?php echo $error; ?>
					</ul>
				<?php endif; ?>
				<?php if($message != ''): ?>
					<ul class="success">
						<?php echo $message; ?>
					</ul>
				<?php endif; ?>
				<div id="form-section-author" class="form-section">
					<div class="form-label"><label for="title">Article title</label> <em>*</em></div>
					<div class="form-input"><input id="title" name="title" type="text" value="<?php echo $your_post_title ?>" size="40" tabindex="3" /></div>
				</div><!-- #form-section-author .form-section -->

				<div id="form-section-comment" class="form-section">
					<div class="form-label"><label for="Content">Article content</label> <em>*</em></div>
					<div class="form-textarea"><textarea id="content-area" name="content" cols="65" rows="12" tabindex="6"><?php echo $your_post_content ?></textarea></div>
				</div><!-- #form-section-comment .form-section -->
				<p><em>*</em> required fields</p>
				<div class="form-submit"><input id="submit" name="submit" type="submit" value="<?php _e('Submit your article for review', 'thematic') ?>" /></div>
			</form>
			<a href="<?php echo wp_logout_url(get_bloginfo('url')) ?>">Logout</a>
		</div>
		
		<div class="navigation">
			<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
			<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
		</div>
		
		<?php 

		//Then display the latest post for the current category
		while ( have_posts() ) : the_post() ?>

			<div class="hentry">
				<h2><?php the_title() ?></h2>
				<div class="entry-content">
					<?php the_content('read more'); ?>
					<span class="meta-prep meta-prep-author">By</span>
					<span class="author vcard">
						<a class="url fn n" href="'<?php get_author_link(false, $authordata->ID, $authordata->user_nicename)?>" title="View all posts by <?php echo get_the_author() ?> ">
							<?php echo get_the_author(); ?>
						</a>
					</span>
				</div>
			</div><!-- .post -->

		<?php endwhile; ?>
		
		<div class="navigation">
			<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
			<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
		</div>
		
		

	<?php endif;
}

The comments should hopefully be enough to let you understand what is happening. Basically if someone not logged in he will see the login form, if he is he will see a post submission form, a logout button and the latest post in the category.

Category.php file

Now we need to change the category.php file to call this function if we are in the right category:

<?php get_header(); ?>

<div id="content">
	<?php //if in the members category, call the template ?>
	<?php if(in_category('members') || $members_object->post_is_in_descendant_category($members_object->members_id)): ?>
		
		<?php $members_object->get_members_template(); ?>
	<?php //else do normal stuff ?>
	<?php else: ?>
		
		<h2 class="pagetitle">Archive for the &#8216;<?php single_cat_title(); ?>&#8217; Category</h2>
		
		<?php if (have_posts()) : ?>
		
			<div class="navigation">
				<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
				<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
			</div>

			<?php while (have_posts()) : the_post(); ?>
				<div <?php post_class() ?>>
					<h3 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
					<small><?php the_time('l, F jS, Y') ?></small>

					<div class="entry">
						<?php the_content() ?>
					</div>

					<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>

				</div>

			<?php endwhile; ?>

			<div class="navigation">
				<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
				<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
			</div>
			
		<?php else :
			printf("<h2 class='center'>Sorry, but there aren't any posts in the %s category yet.</h2>", single_cat_title('',false));
		endif; ?>
		
	<?php endif; ?>
</div>
<?php get_sidebar(); ?>

<?php get_footer(); ?>

Add tinyMCE

Just a quick cosmetic fix on the textarea in the form. Adding some style capabilities will make it easier for users to structure their posts.

//add tinymce to members page to build a more friendly post editor
function addtinymce() {

	if(in_category('members')){ ?>
		<script language="javascript" type="text/javascript" src="<?php echo get_bloginfo('url') ?>/wp-includes/js/tinymce/tiny_mce.js"></script>
		<script language="javascript" type="text/javascript">
			tinyMCE.init({
							mode : "none",
							theme : "advanced",
							theme_advanced_buttons1 : "bold,italic,strikethrough|,|,bullist,numlist,outdent,indent,|,link,unlink,|,formatselect",
							theme_advanced_buttons2 : "",
							theme_advanced_buttons3 : "",
							language : "en",
							theme_advanced_toolbar_location : "top",
							remove_linebreaks:"1",
							paste_auto_cleanup_on_paste : true,
							theme_advanced_blockformats : "Text=, Title 1=h3, Title 2=h4, Title 3=h5, Title 4=h6,Quote=blockquote",
							theme_advanced_toolbar_align : "left"});
		tinyMCE.execCommand("mceAddControl", true, "content-area");
		</script>
		
	<?php
	}
}

All in all

Now we have all our function we need to wrap them up in an object and hook them in the different places. So the full code, without the category.php modification of course, looks like this:

class Members_Section{

	var $members_id;

	function Members_Section(){
		add_filter('wp_footer', array($this,'addtinymce')); //hook the tinymce functions to the footer
		add_filter('pre_get_posts', array($this, 'exclude_category')); //hook the exclude category function
		$this->members_id = get_cat_id('members'); //get the id of the members page once and for all
	}

	//add tinymce to members page to build a more friendly post editor
	function addtinymce() {

		if(in_category('members')){ ?>
			<script language="javascript" type="text/javascript" src="<?php echo get_bloginfo('url') ?>/wp-includes/js/tinymce/tiny_mce.js"></script>
			<script language="javascript" type="text/javascript">
				tinyMCE.init({
								mode : "none",
								theme : "advanced",
								theme_advanced_buttons1 : "bold,italic,strikethrough|,|,bullist,numlist,outdent,indent,|,link,unlink,|,formatselect",
								theme_advanced_buttons2 : "",
								theme_advanced_buttons3 : "",
								language : "en",
								theme_advanced_toolbar_location : "top",
								remove_linebreaks:"1",
								paste_auto_cleanup_on_paste : true,
								theme_advanced_blockformats : "Text=, Title 1=h3, Title 2=h4, Title 3=h5, Title 4=h6,Quote=blockquote",
								theme_advanced_toolbar_align : "left"});
			tinyMCE.execCommand("mceAddControl", true, "content-area");
			</script>
			
		<?php
		}
	}

	/*
	 * Exclude members and sub members categories from feed, index, archives, etc...
	*/
	function exclude_category($query) {

		if($query->is_feed && !is_user_logged_in() && ($query->in_category == 'members' || $this->post_is_in_descendant_category($this->members_id))){
			header("HTTP/1.0 403 forbidden"); 
			header('Location: '.get_category_link($this->members_id));
			exit;
		}
	
		if (!$query->is_admin && !$query->in_category == 'members' && !$this->post_is_in_descendant_category($this->members_id)){
			$query->set('cat', '-'.$this->members_id);
		}
		return $query;
	}

	/**
	 * Tests if any of a post's assigned categories are descendants of target categories
	 * From wordpress codex http://codex.wordpress.org/Function_Reference/in_category
	 *
	 * @param mixed $cats The target categories. Integer ID or array of integer IDs
	 * @param mixed $_post The post
	 * @return bool True if at least 1 of the post's categories is a descendant of any of the target categories
	 * @see get_term_by() You can get a category by name or slug, then pass ID to this function
	 * @uses get_term_children() Gets descendants of target category
	 * @uses in_category() Tests against descendant categories
	 * @version 2.7
	 */
	function post_is_in_descendant_category( $cats, $_post = null )
	{
		foreach ( (array) $cats as $cat ) {
			// get_term_children() accepts integer ID only
			$descendants = get_term_children( (int) $cat, 'category');
			if ( $descendants && in_category( $descendants, $_post ) )
				return true;
		}
		return false;
	}
	
	
	/* 
	 * Print out the template to use in members categories
	 * Login form that redirect to same page
	 * Post editor for members to post a new entry
	 * Display of latest members posts
	 */
	function get_members_template(){ 
		//you don't want anyone to be able to send you some random post requests do you?
		if(is_user_logged_in()){

			if($_POST['submit']){

				$submit = 1;

				if($_POST['title'] == ''){
					$error .= '<li>Please type in a title for your article</li>';
				}
				if($_POST['content'] == ''){
					$error .= '<li>Please type in the content of you article</li>';
				}

				if($error == ''){

					$your_post_title = $_POST['title'];
					$your_post_content = $_POST['content'];
					// Create post object
					$my_post = array();
					$my_post['post_title'] = $your_post_title;
					$my_post['post_content'] = $your_post_content;
					$my_post['post_status'] = 'pending';
					$my_post['post_author'] = $user_ID;
					$my_post['post_category'] = array(get_cat_id('members'));
					$my_post['post_type'] = 'post';
					// Insert the post into the database
					$postId = wp_insert_post($my_post);

					if(!empty($postId) && $postId != 0)
					{
						$message .= "<li>The article has been submited and will go live in the next 48hrs if approved</li>";
						$your_post_title = '';
						$your_post_content = '';
					}
					else $error .= "An error occured with your post";
				}
			}
		}
		?>

		<h2 class="pagetitle">Archive for the &#8216;<?php single_cat_title(); ?>&#8217; Category</h2>

		<?php 
		/*
		 * If user not logged in display login form
		*/
		if(!is_user_logged_in()): ?>

			<h3>Members access only</h3>
			<p>
				The content of this page is reserved to members of the website only.
			</p>
			<form action="<?php echo wp_login_url($_SERVER['REQUEST_URI']); ?>" method="post" id="memberslogin">

				<h3>Are you a member?</h3>

				<p>If you are a member, please use the form below to login</p>

				<ol>
					<li class="inline"><label for="log">Username</label><input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="22" /></li>
					<li class="inline"><label for="pwd">Password</label><input type="password" name="pwd" id="pwd" size="22" /></li>
					<li><input type="submit" name="submit" value="Send" class="button" /><label for="rememberme"><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label></li>
				</ol>
			</form>
		<?php

		else:

		?>
			<div class="adminaccess">
				<a href="javascript:;" id="open-members-form">Submit an article &raquo;</a>
				<form id="members-post" action="" method="post" class="<?php if($submit) echo 'open'; ?>">
					<?php if($error != ''): ?>
						<ul class="error">
							<?php echo $error; ?>
						</ul>
					<?php endif; ?>
					<?php if($message != ''): ?>
						<ul class="success">
							<?php echo $message; ?>
						</ul>
					<?php endif; ?>
					<div id="form-section-author" class="form-section">
						<div class="form-label"><label for="title">Article title</label> <em>*</em></div>
						<div class="form-input"><input id="title" name="title" type="text" value="<?php echo $your_post_title ?>" size="40" tabindex="3" /></div>
					</div><!-- #form-section-author .form-section -->

					<div id="form-section-comment" class="form-section">
						<div class="form-label"><label for="Content">Article content</label> <em>*</em></div>
						<div class="form-textarea"><textarea id="content-area" name="content" cols="65" rows="12" tabindex="6"><?php echo $your_post_content ?></textarea></div>
					</div><!-- #form-section-comment .form-section -->
					<p><em>*</em> required fields</p>
					<div class="form-submit"><input id="submit" name="submit" type="submit" value="<?php _e('Submit your article for review', 'thematic') ?>" /></div>
				</form>
				<a href="<?php echo wp_logout_url(get_bloginfo('url')) ?>">Logout</a>
			</div>
			
			<div class="navigation">
				<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
				<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
			</div>
			
			<?php while ( have_posts() ) : the_post() ?>

			<div class="hentry">
				<h2><?php the_title() ?></h2>
				<div class="entry-content">
					<?php the_content('read more'); ?>
					<span class="meta-prep meta-prep-author">By</span>
					<span class="author vcard">
						<a class="url fn n" href="'<?php get_author_link(false, $authordata->ID, $authordata->user_nicename)?>" title="View all posts by <?php echo get_the_author() ?> ">
							<?php echo get_the_author(); ?>
						</a>
					</span>
				</div>
			</div><!-- .post -->

			<?php endwhile; ?>
			
			<div class="navigation">
				<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
				<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
			</div>
			
			

		<?php endif;
	}
}
// Create the members object
$members_object = new Members_Section();

The hooks are in the constructor of the class and get called when we create the object (last line). This class goes in a separate file that then gets included in your function.php file or straight in the function.php, that’s up to you.

Some issues

There are some issues we couldn’t resolve. The main one is about the rss of the members category. The way Firefox caches rss feeds make the solution not perfect. If you are not logged in you will be redirected, no problem, but then if you login and go back to the rss feed, the browser cache will kick in and you will get redirected again.

The other small issue is in TinyMCE, the style dropdown we’ve added has got a strange default value. Not a big deal but still could be better.

If anyone has an idea about those to problem feel free to discuss in the comment section. And of course the discussion is open for comment, questions and anything related to the above.

And to make it even better they have used a javascript layout script called JS Masonry which order the page so it keeps a nice structure.

If you ave a look at the demo you’ll see that each post is cleverly placed so their is no spaces left unused. Interesting, very interesting…

The template come in two files: dark and bright and each as different colour schemes included to choose from. The theme as a bold typographic clean theme ideally suited for artists photographers and all kind of creative portfolios.

You are granted one free us in any kind of project and you may not redistribute the file in any way. Make good use of it.

We expect those two to get even more attention in the next few month and having them in vector format will definitely come handy. So here they are, feel free to download the pack. The archive contain one layered psd file for each and both are 100% shape made.

You can use those in any project, commercial or personal and you don’t have to give credits to us (but links are always appreciated). Of course we would love to here from you in the comments on how you’ve used them.

The archive: Palm Pre and Iphone vector pack