The design is very slick, almost minimalist but with a touch of glossy that blend quite well with high quality pictures coming from you portfolio.

Features includes:

• 8 color variations!
• Easy create galleries of your work
• lightbox to show your images full size
• front page slider
• ajax contact form
• custom admin panel
• widget ready
• extensive documentation + 9 screencasts

Prices start at $32 for single license.

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.

Feature rich this theme includes a nice javascript slider to display your latest posts, a dropdown menu and some really nice 3D icons for your feed and twitter link.

Other features includes:

• Unique 3D Styled pages with all PSD /XHTML/CSS/JS/PHP files included.
• Includes Slider and Fade In Styles. (All with descriptions text)
• 2 unique Styles for Navigation Menus (Dropdown menu & Elastic style menu)
• Features: Featured Portfolio Section, Distinctive Services display style, Testimonials, Social updates, Google’s map and many more…
• Valid Contact Form with mandatory fields
• Contact Form Mailer for easy email Submission.
• Ready Landing pages (Confirmation/Error pages)
• Highly Detailed Help Documentations included for step by step guidance.
• W3C Valid code & SEO Optimized.
• Cross Browser Compatible.

This premium theme is available from ThemeForest from $32 for single use license.

This will make a great out of the box magazine or corporate site.

Features include:

• Home – w/jQuery featured slider, w/ 20+ different effects and options easily configurable from the admin options panel.
• Gallery – full width template w/jQuery Lightbox for images
• Contact Page – working form w/validation and Ajax submit
• 404 Error Page
• 8 Pre-made Skins
• Multi-level Dropdown Menu
• Gravatar Ready
• PrettyPhoto – slick lightbox style for viewing images
• Dynamic Image Resizing – Never worry about having to resize your images, upload large images via the Wordpress admin and the theme takes care of the rest generating thumbnails, medium and large size images on the fly with caching. Uses TimThumb (requires GD library).
• All Layout PSD ’s
• Detailed Documentation with 7 Screencasts for quick and easy setup
• Compatible with all major browsers

Available from ThemeForest, starting at $32 for single use licence.

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.

Features list:

• 1 uniquely styled skin (4 more coming soon!) + the ability to create your own Custom Skin.
• All Core Page Templates (Home, Content Page, Image Gallery, Blog Post w/ comments styling, Search/Results, 404, and a Contact Form)
• Custom Admin Panel
• jQuery Lightbox
• jQuery Thumbnail Gallery Slider
• jQuery Homepage Slider
• CU3ER Optional Homepage Slider
• Gracefully degrading code (for older browsers)
• All Layout PSD Files
• Favicon Ready (just overwrite the browser icon with your own)

Prices start at $32 for single use and download include full layered psd, documentation, etc…

The theme also comes with the very popular 3D flash slider to showcase your best work or the latest news of you blog.

The one page template is packed full of functionalities including:

• Custom Admin Panel
• Amazing 3D flash slider
• Unlimited Color Options
• Full layered PSDs
• Contact Form
• Image Gallery Template
• jQuery goddnes (Lightbox, footer bar, …)
• Cufon Font Replacement
• Both Wordpress and HTML versions included!!

The theme is $32 for single use and as usual with Epicera is cross browser compatible, well documented and top quality code.

Note the showcase area to show off you best work and the different templates you can choose from. It also come with a operational contact form and as usual all of the WooFramework 2 goodness.

Other features includes:

• Custom homepage designed to emphasise your most important information, with the option to display a traditional blog instead.
• Custom Woo Widgets for use in the sidebar and in the widgetized footer: Search widget, Ad space widget, Flickr widget.
• 19 delicious colour schemes to choose from!

Bueno is a clea and minimalistic WordPress theme by WooThemes which plays with typography & structure. Stripped of all fancy design elements; the reader’s focus should be on the great content that you produce. Bueno is perfect for the blogger and it’s free!

Features include:

• Grid-based layout, Bueno is not only sexy as hell, but very easy to customize;
• Integrated banner ad management;
• Widgetized sidebar, with some Bueno-specific custom widgets to allow you full control of what happens in your sidebar; and
• 7 different colour schemes to choose from;
• Theme packaged with a .po file for easy theme translation.

The theme comes in 7 different colours and is fully customisable from the admin page, using the award winning WooFramework.

And as usual with WooThemes you also get quality code and top notch support.

WordPress theme available from $70 standards licence.

The professional looking WordPress theme is targeted at businesses and integrates a very nice flash 3D slider which will display pictures of your latest projects like nothing else.

Features includes:

• Valid XHTM Strict1.0 and CSS 2 .1, tableless Design
• Multiple Page templates:
• jQuery Support:
  • 2 different Portfolio/Item slider, supporting unlimited items
  • Dropdown Menu, improved with jQuery
  • jQuery 100% unobtrusive which degrades gracefully if javascript is turned off
  • Gallery Page with lightbox
  • Working ajax/php contact form
• Huge admin area to customize the theme from your Wordpress backend.
• All PSD files I used are included for easier modification
• Extensive Documentation Included

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.

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: 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.

The homepage eatures a nice javascript slider (you can’t avoid them these days) and will showaces your best work like in a elegant fashion.

Other features includes:

• Highly Customizable
• Many backend options
• Widgetized Slider
• 3 Custom Plugin
• 9 Widget Areas
• Custom Admin Panel
• Supports unlimited box on homepage with diffirent variations
• jQuery Improved
• Valid Markup
• Cross browser support
• Included 10 sliced psd file
• Cufon Texts

RT-Theme 5 / Business Theme Wordpress 10 in 1 is available from ThemeForest from $25.

Let’s have a look at a few examples:

List of featrures:

• Extensive Theme Options Panel
• 3 Color Options
• Sleek Slider powered by JQuery
• Infinity Dropdown Menu powered by JQuery
• Fully Working Contact form with field validation
• Pre-installed TimThumb PHP script for dynamic image resizing
• Pre-installed PrettyPhoto JQuery plugin for viewing fullsized images via LightBox

Available from ThemeForest from $30 single use.

Features include:

• Valid XHTML Strict and CSS
• Tableless Coding
• Support png24!
• Change active color via admin panel
• Change theme background via admin panel
• Easy to customize
• Many back-end options to customize the Theme
• Supported by all browsers
• 6 different Widget areas (page, single post, archive, blog, portfolio, contact)
• Full working AJAX contact form (without page refreshing and setup in admin panel)
• Php files included!
• Live validation forms!
• All Layout PSD Files (easy reskinning)
• Built-in pagination system

The styling is crisp and clean with a nice cosy background and uses a lot of javascript effects to give it a modern feeling.

Features include:

• Membership area
• 2 level deep categorisation
• Wishlist
• Custom widgets
• Layered psds
• Pdf and video documentation

The theme is available for $35 from ThemeForest.

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!