In my opinion, one of the best ways to learn about wordpress theme development is to take one of the many clean and nicely layed out free themes and start customizing them yourself.

With this hands on approach with a working model, you have the ability to see for yourself what is happening to the theme with each of the changes that you make. The guesswork becomes less guessy when you have an established functionable framework to start with, and then the tweaking teaching takes you through each step of the personalization process.

With this practical application approach, the bits of theoretical learning that you may have acquired through reading and oral presentations fall into place and begin to make sense to you in a whole new way. So here I have tried to focus on those themes that have outstanding layouts and builds while still leaving you room for plenty of personal customization.

Blogs

Freemium

The Freemium theme was designed by Paul Kadysz and developed by Dariusz Siedlecki. Its clean look and level of customization makes it the perfect choice for either a business or personal blog.

Features

• jQuery menu
• quick submitting to web2.0 websites support
• flickrRSS plugin support
• threaded comments support
• feedBurner subscribe via email support
• a lot of advertising spots (125×125, 120×600, 300×250)
• 2 widget ready sidebars

Download Freemium | Demo

Elegant Grunge

Elegant Grunge is an unwashed yet crisp Wordpress theme designed by Michael Tyson and inspired by wefunction.com. Customization options include per-page and per-post configuration to turn on and off features such as automatic image framing, and a global configuration interface allowing you to turn on/off the RSS link, set your own copyright message, or add your own extra header content.

Features

• Very configurable sidebar: Choose from no sidebar, a right sidebar, or two right sidebars
• The option to select a custom image as the header
• A ‘feature’ footer that you can add widgets to.
• Automatic surrounding of all images with a frame packed with eye-candy that makes images really pop out.

Download/Demo Elegant Grunge

Irresistible

Irresistible is a visually-rich personal blog, with a little bit of a multimedia focus, incorporating video-options and widgets. It includes a widgetized sidebar, with some Irrestible-specific custom widgets to allow you full control over what happens in your sidebar

Features

• Use as a standard blog or use the customized homepage layout
• Integrated banner ad management;
• Seamlessly integrated video player;
• 9 different colour schemes to choose from

Download Irresistible | Demo

SuperFresh

SuperFresh is a 3 Column theme with 2 widget-ready sidebars and a featured post section in the main page. It’ is compatible with up to WordPress 2.8 and has been tested in Firefox, Internet Explorer 6 & 7, Opera, and Safari.

Features

• about me section in the sidebar which link to the about page.
• customized gallery page
• Special comment fields with avatar.
• Alternative formatting for comment fields.

Download SuperFresh | Demo

Just Lucid

Just Lucid is a clean and professional looking layout with separate stylesheets for 800px width, as well as 1024px width (the default). The sidebar and footer are both widgetized and ready to go.

Download Just Lucid | Demo

Modicus

Modicus is a very flexible theme which includes an optional home page as well as both a 2 and 3 column layout.

Features

• Minimalist: Very clean, spacious and easy to read.
• Fast: Lightweight, for speed.
• Ad-friendly: The columns are sized specifically to accept standard ad formats.
• Easy to install: You can install without plugins, though five plugins are recommended and included.

Download Modicus | Demo

DailyPress

DailyPress is a theme developed specifically for those people who update their blogs daily.

Features

• Widget Ready Sidebars
• Tabbed Content
• Banner Ad Ready
• Minimalistic Color Scheme
• Social Bookmoarking Options

Download DailyPress | Demo

Versatility Lite

Versatility Lite is a two column, ad-ready, widgetized theme with a bit of a grungy feel making it perfect for band websites.

Features

• Featured Post Section
• Drop Down CSS Menus
• Integrated Related Posts
• Social Bookmarking Buttons

Download Versatility Lite | Demo

Rewire

Rewire is an SEO optimized theme with a simple style and straight forward presentation. The PSD files are also available for download to allow for easier customization.

Features

• 3 Columns
• Thumbnails on Posts
• Gravatar on Comments

Download Rewire | Demo

Subtly Made

Subtly Made is just that. This subtle theme is a free, 2-column, widget-ready layout.

Features

• Wigetized Sidebar
• Social Media Icons
• Integration with Flicker

Download/Demo Subtly Made

Portfolios and Galleries

Linquist

Linquist is a simple, portfolio oriented theme, without all the usual blogging clutter. While technically based on the Sharpfolio theme featured below, I felt it was distinguishable enough from the original to feature on its own.

Features

• 2 color styles - light & dark
• style switcher
• built-in simple lightbox
• gravatar support
• an options page to set up all these things

Download Linquist | Demo

Sharpfolio

Sharpfolio is a WordPress theme designed to enable Web Designers, Graphic Designers, Photographers, Motion Designers, Artists or any creative professional to showcase their work in a simple, clean, beautiful portfolio. Sharpfolio aims to focus primarily on your work, because after all, this is what’’s most important.

Download Sharpfolio | Demo

Snapshot

Snapshot provides two different layouts allowing you to choose between a personal portfolio/photoblog for your own work or a design gallery for showcasing best-of collections.

Features

• Three Unique Color Schemes
• An Integrated Theme Options Page

Download Snapshot | Demo

Fotofolio

Fotofolio is a wordpress portfolio style theme designed specifically for photographers. The name pretty much says it all.

Features

• Easy and simple to use
• Automatically resize image for Thumbnail and preview
• Jquery Integrated for Featured Photos and Previews
• Theme Options for easy configure
• Editable homepage slideshow category and numbers

Download Fotofolio | Demo

Portfolio Press

Portfolio Press is a dark-colored theme suitable for anyone who wants to create a quick portfolio or wants to showcase his work through WordPress.

Features

• CSS/XHTML Validated
• Easy to Modify Code
• Gravatar Functionality
• SEO Optimized
• Tested in Firefox, IE7, IE6 and Opera

Download Portfolio Press | Demo

CSS Gallery

CSS Gallery is a theme for webmasters who want to build a CSS showcase or simply a web gallery. Once again, the title tells it all in this clean and minimalist theme.

Features

• Built in Tagging
• Google and Sidebar ad ready
• valid CSS/XHTML

Download CSS Gallery | Demo

Gallery

Gallery is a beautiful, free, gallery-style Thematic child theme for WordPress that is extremely flexible and can be used as a starting point for design galleries and portfolios.

Features

• WordPress 2.7 compatible
• jQuery hover effects
• 'Save to Delicious' and 'Tweet This' links
• Flexible footer widget area
• Integration with WP-PostRatings, Contact Form 7, and BuySellAds plugins

Download Gallery | Demo

CSS Gallery Theme 2.0

CSS Gallery Theme 2.0 is a re-tooled version of the CSS Gallery theme, for webmasters whose focus is on building a CSS showcase or web gallery. With an uncomplicated elegance of design, this crisp layout is a wonderful jumping off point.

Features

• Integrated Plugins
• Valid XHTML and CSS
• Search Engine Optimized Sidebar Titles
• Custom Layout / Design to Display Gallery Images
• Logo .psd integrated

Download CSS Gallery Theme 2.0 | Demo

Monochrome Gallery

Monochrome Gallery is a free widgetized theme for Wordpress built with the Blueprint CSS framework.

Features

• Author Archives page
• AJAX Slideshow
• Categorized posts with thumbnails

Download Monochrome Gallery | Demo

WPESP

WPESP is a “minimalist” Theme based on the idea of portfolio created by DAILYWP. The Theme is a starting point in the creation of portfolios, using Wordpress as CMS. This design is fully customizable depending on what the user needs.

Download WPESP | Demo

Magazine

Premium News

Premium News - This theme may be a bit rough around the edges (in terms of its looks), but they have used the same solid base for all their subsequent themes, so it seems to be a functional favorite. Enjoy this themes’ minimalistic beauty and make it your own today!

Features

• Integrated Theme Options (for WordPress) to tweak the layout, colour scheme etc. for the theme
• Built-in video panel, which you can use to publish any web-based Flash videos
• Automatic Image Resizer, which is used to dynamically create the thumbnails and featured images
• Custom Page Templates for Archives, Sitemap & Image Gallery
• Built-in Gravatar Support for Authors & Comments
• Integrated Banner Management script to display randomized banner ads of your choice site-wide
• Widgetized Sidebars
• Featured Posts panel on the homepage using jQuery technology to display / hide the posts
• Animated horizontal drop-down menu’s for category navigation

Download Premium News | Demo

Magazeen

Magazeen is a bold magazine 2 column theme designed to place the main focus on typography, grids and the magazine-look. A fantastic base to allow the content to shine through.

Features

• jQuery image showcase
• related posts drop down effect
• featured and recent posts

Download Magazeen | Demo

Digital Statement

Digital Statement is a simple theme with a massive amount of room for the user to customize the layout to suit whatever needs they have to meet.

Download Digital Statement | Demo

The Morning After

The Morning After was created based on a brief survey on the WordPress forums which asked people what they would want to see in a unique magazine-style theme…and the people have spoken.

Features

• Clean grid-based design
• Detailed documentation regarding installation, usage and customisation
• Support for WordPress widgets
• Three-column home page
• “Featured” post highlighting
• Associating images/thumbnails with recent posts (with automatic thumbnail generation)
• Customisable logo/header image
• Support for WordPress’s in-built image wrapping classes and galleries
• Threaded comments (WordPress 2.7+ only)
• Support for asides
• Support for Gravatars
• Option for readers to email posts to friends
• Option to switch to a print-friendly view to print posts

Download The Morning After | Preview

Grid Focus

Grid Focus is a three column widget enabled WordPress 2.6 or 2.7+ compatible WordPress theme, featuring a prominent navigation bar with room to share important pages. The latest update is completely optimized and stripped of any unnecessary code allowing for complete customizability.

Features

• supports three independent widgetized sidebars + more
• Primary – Index: Middle column rendered for index, archive, and page templates
• Primary – Post: Middle column rendered for single post template
• Secondary – Shared: Third column persistent on all templates
• Threaded comment replies (WordPress 2.7 only)

Download Grid Focus | Demo

Linoluna

Linoluna is a simple and neat theme for a magazine-styled blog. The theme uses the Wordpress’ template tags quite extensively but still, it is very easy to work with. Linoluna best suits a multi-author Wordpress blog.

Features

• Tabbed Navigation with 4 tabs (Viewed, Commented, Top Rated & Emailed)
• Slideshow Animation for Featured Articles
• Statistics Inside Each Post
• Integration with the Plugins WP-PostView, WP-PostRating, WP-Print, and WP-Email

Download Linoluna | Preview

Mimbo

Mimbo is a clean, customizable magazine-style theme for WordPress. It i’s also a simple framework which can be easily modified with child themes.

Features

• Featured Categories
• 125×125 Ad Support
• Multi-Level Dropdown Menus
• Custom Sidebar Conditionals
• Gallery, Inline Image & Caption Styling

Download Mimbo | Demo

Jello Wala Mello

Jello Wala Mello is a news / magazine-styled WordPress theme created specifically for multi-media sites, while still maintaining its customization.

Features

• A sub-page design for single post view
• Integrated Domtab
• Separated Comments and Trackbacks through Domtab
• Flexible sidebars that change location and styles depending whether you’re viewing the front page
• Widget-ready sidebars

Download Jello Wala Mello

Branford Magazine

Branford Magazine is a fashionably designed theme with a subtly stylish layout. With a lead article header that breaks down into a two column cascading post setup, containing both a featured article column and a column of user defined categories with a featured post under each category listing, this theme is a wonderful base to start with.

Features

• Tabbed Navigation with 4 options
• Multi-level Drop-Down Navigation

Download Branford Magazine | Demo

Scarlette

Scarlette is an elegant magazine theme designed around light and bright colors. This theme is suitable for any niche. The theme layout is stylish and dynamic content elements are built into it.

Features

• Multi-level dropdown javascript navigation menu
• Custom sliding elements with images
• Site wide customizable 125 x 125 custom banner ads
• Tabbed content area
• Three widgetized sidebars
• Breadcrumb navigation
• Custom theme option page in the admin panel

Download Scarlette | Demo

Specialty

Crafty Cart

Crafty Cart is a free theme that integrates with the WP e-Commerce plugin turning your wordpress site into an e-Commerce store. The default layout and theme are perfect for selling hand crafted items but it could also be customized to fit whatever style you need.

Features

• clearly organized code for easy styling and customization
• Full Widget Support
• Separate Pingbacks

Download Crafty Cart | Demo

Gamezine

Gamezine is the latest free magazine wordpress theme for gamers, from jinsona designs. The theme has a dark grunge design with a fixed width 3 column layout. The theme is perfectly suitable for gamers and with some modification it will fit into any niche.

Features

• Custom theme option page in the admin panel
• Widgetized, dual sidebar
• customizable top games section on the sidebar
• Javascript thumbnail slider which links to posts of specified category
• Site wide customizable 125x125 banner ads

Download Gamezine | Demo

LaunchPad

LaunchPad is a theme designed for announcing the launch of an upcomming site. Instead of putting up a tacky "Under Construction" page (does anyone still even use those?) or allowing your host to use the domain for advertising, use the space to advertise your own site that is to come. It integrates with Feedburner so visitors can sign up for updates and is fully customizable.

Features

• Theme Options Page
• Integration with FeedBurner
• Professional design and typesetting
• GPL Licensed—it’s free and you’re free to mess with it

Download Launchpad | Demo

Notepad

The Notepad theme allows you to turn WordPress into a small business or personal professional website. It also comes with a simple blog to go along with the site but its main focus is giving you a full, search engine friendly site.

Features

• Clean and crisp simple website look
• Use WordPress to manage everything, including a Theme Options tab for address and contact information
• Highly customizable
• Integrated blog component
• 13 pre-built color styles

Download Notepad | Demo

WP Coda

WP Coda is a very professional looking coda style slide theme for WordPress. It was created by Greg Johnson by modifying several already-existing code snippets and implementing them into his own design which mimics the page sliding functionality of the very popular Coda website. I highly recommend previewing the demo for the full effect.

Download/Demo WP Coda

Ocular Professor

Ocular Professor is a photoblogging theme for WordPress that features large images, gallery support, and threaded comments for WordPress 2.7+. It has been tested in OS X (with Firefox, Safari, Camino, and Opera) and in XP (with IE 7, Firefox, Safari, and Chrome).

Features

• A widget-enabled footer with special styling for all default widgets
• A “Featured Post” section that, when enabled, allows posts to sit outside the normal flow of blog posts
• Special formatting, such as drop-caps and image captions
• Author comment highlighting

Download Ocular Professor | Demo

WP-CRM

WP-CRM is a WordPress system for creating a basic Contact Manager using a combination of plugins and a theme written with BluePrint CSS.

Features

• Add contacts from the front end of WordPress – no need to go to the admin screen.
• Associate an image, note history and company with each contact.
• Google map contacts address.
• Fully hcard / vcard compatible.

Download WP-CRM | Demo

Androida

Androida is a business template based on Android phone niche. The theme comes with an optional blog layout giving users the option to choose between a business template layout and a regular blog template layout.

Features

• Featured Content Glider
• Featured Posts
• Featured Video
• Banner Ads
• Widgetized Sidebars

Download Androida | Demo

Prologue

Prologue allows you to create your own Twitter like microblogging platform.

Features

• Threaded comment display on the front page
• In-line editing for posts and comments
• Live tag suggestion based on previously used tags
• A show/hide feature for comments, to keep things tidy
• Real-time notifications when a new comment or update is posted

Download Prologue | Demo

Agregado

Agregado is made unique by its built-in lifestream module and contact form with custom control panel options.

Features

• Lifestream module with carousel
• Custom archives page
• Animated js dropdown menus
• Built-in contact form module with AJAX sent/fail message
• Built-in drop caps for lead paragraphs
• Numerical pagination on archive and search pages
• Author-highlighting for comments
• User profile module
• Widgetized bottom bar on homepage
• Widgetized sidebar on single post pages
• Print stylesheet
• 'More in this Category' sidebar module
• Control panel options for lifestream and contact form

Download Agregado | Demo

Delta

Delta is a Wordpress theme designed with churches in mind. Including a few additional header images with the download, this theme is designed to allow for maximum user customization.

Download Delta | Demo

There has been a lot of debate in the last few days about licensing and WordPress. The license WordPress is under controls what can be done with it, so it has a massive impact on the community and creating add-ons for WordPress.

In this post, I want to sum up all the debate so far for you, talk about the strengths and weaknesses of the current license, and then a thought on the end about premium themes and the absence of premium plugins.

A Quick Overview

WordPress is licensed under the GPL. In short, that means that you can copy any of the WordPress code, modify it, and distribute it yourself. But in return, you have to distribute it under the GPL license as well.

The recent debate all sparked off when Daniel Jalkut wrote Getting Pretty Lonely, where he made a convincing argument for using a more open license than the GPL.

The difference between the GPL and the licenses he recommends is that when you modify the code, you can distribute it under any license you like (Even a commercial one).

Strengths of the GPL

The GPL license works well because it ensures that when a developer contributes code to WordPress, they have the peace of mind that their code will always remain under a license they believe in.

It also protects the long-term lifespan of WordPress. What would have happened if Matt had gotten bored of the project 5 years ago? Would WordPress have gone down as a 1-year experiment and we’d all be on Movable Type?

No, the GPL means that any other developer can pick up the reins and carry it on. That’s how WordPress came to be in the first place; Matt and a few others picked up the reins of another GPL project that had died when its original developer disappeared.

Why Use Another License?

The GPL isn’t flawless either. Under the GPL, all works based on the project must also be licensed under the GPL. But just as this is the strength of the GPL for some, it is also a big hindrance for others.

Consider the premium themes market; themes are a part of WordPress, so do they fall under the GPL?

To answer that question, Matt has asked the Software Freedom Law Center to investigate. Their findings were that the PHP code in the themes does, but the artwork and CSS doesn’t.

Now, there is a big difference between a law firm saying this and a judge saying it, but if a judge were to rule this way, then the PHP code of every theme available would legally have to be licensed under the GPL. And that applies to all themes, whether paid or free.

And that’s just one example. The bigger issue is WordPress itself. With a more free license, then a developer could take WordPress itself and do anything he liked with it, e.g. What if a web developer could take it, re-brand it, and sell it (or just give it) on as a custom CMS to his clients?

Or what if Matt and the other community leaders made a few decisions that the community wasn’t happy with? What can we do then? With a more free license, the answer is simple; anything we want.

So Which Should We Use?

So, was the GPL the best license for WordPress, or is free-er better?

In my opinion, WordPress and the GPL have done great together. The community that has built up around WordPress is second to none, and a large part of that is thanks to the peace of mind that the GPL gives to developers.

Their contributions are safe, no-one is going to make sneaky money off their work, and if they disagree with the leadership, they’re always welcome to branch off into their own project.

WordPress is GPL. Matt could not believe any more strongly in the GPL, and after 6 years, WordPress has grown to become by far the biggest blogging (CMS?) platform out there. It’s hard to say that the GPL has been holding us back when you look at the success WordPress has had.

But could that be put to the test?

WordPress has a huge advantage over any new competitors because of the community behind it. But when WordPress began, Movable Type had all the community.

MaisonBisson.com wrote a great article titled Why Freedom Matters, which explains how “Movable Type was ‘free enough.’,” to build a community around and it prospered for a few years. But then WordPress came along.

So if the GPL really is holding WordPress back, maybe in a few years time we’ll be reading an article on how “WordPress was free enough”, until something better came.

But for now, WordPress is free, has a fantastic community, and the development is going strong so I’m sticking with it. What about you?

Premium Themes vs. Premium Plugins

One thing that came out of this all is that WordPress.org now features premium themes which are 100% GPL (PHP, CSS and all).

I then read a post on Webmaster Source which asks the questions; what about plugins? Matt points out that premium theme authors are able to charge a fortune for their themes, but plugin developers are left to virtually non-existent donations.

There are a lot of great plugins out there. Some do charge money, but the vast majority don't. Perhaps it is just the culture of charging for work hasn’t penetrated the plugin community yet (In the same way it hadn’t in the theme community until a year or two ago), or is it something else?

If some of the plugins I use introduced a fee tomorrow, I don't think I'd have any choice but to pay up (At least until I found an alternative). My site is completely dependent on some of those plugins, as are most WordPress blogs.

But swapping from a free plugin to a paid one is a big change and at the very best, is going to annoy your users. At the worst, they won’t be users for much longer. Why should they have to pay for something they’ve gotten for free all along?

A better solution for making the transition might be to keep the current version free (That way, no-one is losing out on what they currently have), but put your new features into a premium version. If a user loves your plugin and wants to get more from it, then they can pay for it.

Of course, that all depends on the GPL license permitting it.

What are your thoughts on this all? Is the GPL restrictive, or is it an advantage to WordPress? And what should the plugin developers do to start getting a better deal? I’d love to hear some good discussion on this.

Important: Thanks to Pavel Ciorci for letting me know that this theme has been cloned from a Joomla theme. Large parts of it have been copied, against their Terms of Use. I would not have recommended the theme if I had known this before. Thanks Pavel!

Real Estate is a premium theme from DaThemes. It’s a plain design allowing the images to take focus and it packs in a fair amount of functionality.

In this post we are going to look at the theme and see what we can learn from it and what we could change. To start with, load up the demo in a new tab then carry on!

NB – This is a sponsored post, however there are no affiliate links used so it’s of no benefit to me to try to sell you on the theme. Only honest thoughts here!

What Has Been Done Well?

The top navigation bar is the highlight of the site. On first glance, the design is very sleek. The fun starts when you roll over it though. Each link has its own vibrant color and a lovely smooth fade-in effect for that color.

Past that, the drop-down demo on the second link is equally well designed, and equally well animated. Overall the nav bar couldn’t be done any better.

The sidebar features an accordion menu. We talked recently about ways to add accordion menus to WordPress, and Real Estate is a great example of accordions being done well.

Try using it yourself. The design is clean and simple, and it has given the right amount of space to each inactive link for you to rollover. It just works.

The final JavaScript feature worth noting is the slider on the homepage. By itself, it’s just like any other slider. But as part of the overall design, it’s one more effect that has been done well and works for the site and it’s high focus on product images.

The footer has 3 images which can all be used as links. They remind me of the footer image links on Apple.com and they are a great way of highlighting your most important content (An ebook or product would be ideal, but even just your 3 best posts would work).

What Could be Done Better?

The post pages are the one thing that could do with some more work. The post titles are very small and drab. They could be much more decorated and designed to give them some appeal.

Also, the posts all end with the big paragraph of text from the WordPress default theme. That paragraph is just too much information in too small a font for anyone to read. There are better ways to list the date and categories.

The sidebars are the other area that needs some work. There is nothing in particular wrong with them, it’s just that they’re boring. Compared with the elegance of the navigation bar, the sidebars are just too plain and simple.

As iProduct showed us last week, it doesn’t take much to pull off a great look for a sidebar.

Conclusion

In conclusion, Real Estate is a good theme with a lot of great functionality. There are more extravagantly designed themes, and slicker looking ones out there, but that’s not what Real Estate is trying to be.

Real Estate does what it says, it is for selling real estate. That means it is going to pumped full of housing images, and the slider on the home page and the accordion menu in the sidebar are great for getting this done. The neutral, unassuming design allows the images to stand out.

If you’re looking to take your real estate business to the web, this could well be the theme for you. You can buy it here (Link removed because the theme is breaching Yootheme copyright), currently for $49.99.

But if you’re looking for something flashy and “designed”, you might be better off trying elsewhere.

So, what do you think of Real Estate? Like it or hate it? All comments welcome!

PS - On a side note, DaThemes also have a great free theme out there called Galleria. It’s for displaying your own photo galleries and it looks fantastic! Download it here.

WordPress can be very simple to work with, but it can also be very complicated. The system can be used to do just about anything you like.

In this post we have collected together a range of tutorials that span from the very first things you need to know, like working with the loop, to much more complicated tricks, like setting up post thumbnails on your home page.

The 30 Tutorials

WordPress Tutorial: Customizing Widgets Using CSS

 Get Posts Published Between 2 Particular Dates 

 Multiple Wordpress Page Layouts in One Single Template

 The WordPress Help Sheet

 Wordpress Hack/Tutorial: creating a “dynamic sticky”

 Build a Basic Newspaper style layout with Wordpress and jQuery

 So you want to create WordPress themes huh?

 Client Friendly WordPress Themes: Header.php

 How to edit Wordpress themes using Dreamweaver

 Dissection of a WordPress theme

 Personalise your WordPress Weblog

 Wordpress tutorial: Blog posts in different columns

 How to : Make a control panel for your wordpress theme

 How to Protect CSS Mods for ANY WordPress Theme

 Web Design Wordpress Template Tag Reference Guide

 Things you should know when displaying pages in Wordpress

 Widgetizing Themes

 The Ultimate Guide to the WordPress Loop

 Don’t Ignore Your WordPress Footer

 Mastering Your WordPress Theme Hacks and Techniques

 How-To: Create a WordPress Theme in 5 minutes

 WordPress Category Page Hacks

 Developing a Wordpress Theme

 The WordPress Developer Toolkit

 Giving each WordPress post a thumbnail, and display the thumbnail on the home page

 Turning a web template into a WordPress theme: a video tutorial

 Adding Thumbnails to your posts in Wordpress

 Most Desired WordPress Hacks: 11 Common Requests and Fixes

 How to Make a Featured Post Carousel for WordPress

 Styling Individual Posts Using the_ID

Did you find any of these tutorials helpful? Let us know if you have any links to other great WordPress guides that you’d like to share!

iProduct is a premium WordPress theme from PremiumThemes.Net. It is aimed at site’s selling a digital product, though it does include a full blog design as well.

In this post we are going to take a look at the ups and downs of the theme to see what we can learn from it. To start, open up the demo page in a new tab to have a look at it for yourself.

NB – Full disclosure: This is a sponsored review, however there are no affiliate links, so it’s of no benefit to me to try talking you into purchasing the theme.

What Has Been Done Well?

The homepage layout devotes the majority of the space to highlighting just one product, the focus of your site. The large viewing area gives more than enough room for the product to be shown off.

This works great for instantly grabbing the user and sending them to your best-selling (or only!) product.

Page titles are a core part of the design. The page titles (shown above) are set on a dark black background, making them extremely noticeable. But the background doesn’t feel like it is there to highlight the title, it feels like it is simply a part of the design.

The large, easy-to-read font is helpful for a user in quickly gauging what page they are on, but the integration of the black stripe and the overall design stops the header from becoming overwhelming. It has been done perfectly.

Sidebar design. The sidebars are the real highlight of iProduct. The whole design of the site is very minimal and unobtrusive.

A simple grey gradient with some nice typography is all that was needed here for a great effect. They look as clean as the rest of the site, but sleek and modern for the user.

On top of that, the page that the user is currently on is highlighted in the sidebar (And in the header navigation too), which helps prevent users from getting lost.

On the blog page, the dates for recent posts are shown in relative terms. Instead of listing the date the post was written, it will instead show how long it has been since then.

For older posts, the format reverts back to listing the date.

What Could be Changed?

The sidebar navigation features sub-pages and it shows them nested under their parents (As can be seen in the sidebar screenshot above). This work perfectly and displays the entire navigation for a user.

However, with the head navigation, the sub-pages are left out. The top navigation bar looks great, but a rollover/dropdown menu to show subpages would be a great addition.

The image above shown the complete color scheme of iProduct, taken from the stylesheet. The various tones of grey (Not sure where the orange was used) have been used effectively to create a very minimal, sleek design.

However, with the grey page background in particular, the site can look quite dull. There is no doubt that the current color scheme does look good and will work well for many products, but it won’t be ideal for everyone.

It would be great to see some other varieties being offered, with brighter, livelier color schemes.

The final thing I would like to see changed is that there is no clear “Buy It Now” button anywhere on the site. There are links to all sorts of information about the product, but you have to go to the Pricing page and then click a “Buy It Now” button which blends too well into the design.

Something like Woot’s big, yellow “I want one!” button is the perfect call-to-action to convert readers into customers.

Conclusion

iProduct is a beautifully minimal theme that uses simple, tidy effects to shift all attention from the sleek design to your product. That is the only thing you need your design to do on a product site, and iProduct accomplishes that perfectly.

The dark color scheme won’t suit everyone, but it wouldn’t cost much to hire a developer to adjust the color scheme to something more suiting to your product.

If iProduct looks like the theme for you, you can purchase it here for $70. We have only looked at the aesthetics of the theme here, iProduct also comes with a very comprehensive control panel for managing every aspect of your theme. Check out the site to see more.

Well, that’s my thoughts. Now it’s your turn, how does iProduct look to you?

Web design is complicated. There’s a heck of a lot to learn. Typography, usability, color theory, the list goes on…

When you’re starting out, it can all seem overwhelming and even when you’ve been round the block a time or two, there’s still lots to learn.

We have collected together 26 full tutorials from the web that take you through the process of designing a blog, from scratch.

If it’s time for you to learn a new style of design, working through a complete project in one of the guides below is the best way to start. These posts take you step by step so even if your Photoshop skills aren’t the best yet, you won’t be left behind!

Making the ‘Clean Grunge’ Blog Design

Create Dark WordPress Theme

Tutorial RocknRolla Blog Design

Create a Nature Inspired Painted Background in Photoshop

Dark WordPress Theme Design

How I Learned To Build WordPress Themes

GreenPress WordPress Theme Design

Designing for WordPress: Complete Series & Downloads

 
WordPress Theme Web Design

Watercolored Design Studio Blog Layout

The Ultimate Grunge Design Tutorial

How to Create a Sleek and Textured Web Layout in Photoshop

Premium WordPress Theme Design Part 1 - The Photoshop Mock Up

MyBlues WordPress Style Layout

Building Custom WordPress Theme

Premium WordPress Design

Create a Magic Night Themed Web Design from Scratch in Photoshop

Create a WordPress Theme

Winter WordPress theme
 

Creating a WordPress Theme

Design a WordPress Mockup Theme

How To Create WordPress Themes From Scratch

Chocolate Pro WordPress Style Layout

WordPress Theme Design in Photoshop

How to Create a Grunge Web Design in Photoshop

How to Create a WordPress Theme from Scratch

Do you know of any other tutorials for creating a complete blog design? Let us know if you have any luck with any of these!

A “Theme Options” page is designed to give control over how a theme looks and functions, solely by setting options in the WordPress dashboard. The user then has no need to edit the core theme files.

Theme Options have become a standard feature in premium WordPress themes (And some free ones too!), and aren’t that complicated to set up.

This post is a roundup of how Theme Options have progressed so far showing you what the advantages are, some resources for creating your own, and a collection of premium themes offering options pages so you can see what’s out there.

And at the end of the post, there’s a competition to win a free PSD to WordPress coding, with a theme options page included! Courtesy of Design to WP, thanks guys!

Advantages of Theme Options

The advantages are quite simple:

• No technical knowledge required – Users can swap between 2 and 3 columns without understanding a single line of HTML or CSS.
• Theme upgrades possible – The theme files are not edited by the user, so the theme can then be upgraded with new features later without losing any of the customizations made by the user (As they are stored in the database).
• User-friendly – Even for users who know their way around a theme, the ease-of-use of just flicking a switch in an options page is far more appealing than editing source code.
• For theme sellers only: Competitive advantage – In terms of premium themes, an options page is now required. Users expect them and your competitors have them, so you can’t not.

Creating Your Own Theme Options Page

Alex Denning from Nometech has put together a series of very detailed posts walking you through creating an options page for a theme. Check them out here:

• Create an Awesome WordPress Theme Options Page (Part 1)
• Part 2 – Implementation

In Part 3, he shares some screenshots of options pages in free WordPress themes.

Over on WeFunction, there is a great guide to adding options to the Write Post page.

Theme Forest have also put together a tutorial for creating an options page.

Lastly, if you’re stuck for ideas on what to put into your page, Blogsessive have looked around and listed what they found were the most popular features in a theme’s options.

Options Pages from Premium Themes

A lot of themes don’t have screenshots of their Options pages, but this is a collection of the ones I could find. It should help give you some ideas for what you could do with your next theme, or even what options are out there as a customer!

NB – No affiliate links here, it’s just for inspiration. And no company has been listed more than once.

Groovy by NattyWP

Suit and Tie by WooThemes

Arthemia by Color Labs Project

Studio Blue by Elegant Themes

WP Unlimited also seems to have a great set of options, but I couldn’t find any decent screenshots for it. Still worth a look though!

Videos of Theme Options in Use

Press75 have a video of the options page on their “Massive News” theme here.

Thesis have videos of their options page, design options and in-post options.

Win a Free PSD to WordPress Coding, with Theme Options!

Design to WordPress are offering one reader here a free PSD to WordPress conversion, with their control panel included.

To be in with a chance to win, just reply to this post with a comment answering the following question:

What feature would you like most in a theme options page?

I’ll pick a random winner from everyone who enters in 10 days time!

Good luck to everyone who enters!

Today you will learn 10 ways to install accordion menus in your Worpress theme!

This will help to organize your blog, make your site look more professional, and possibly save you some precious real estate in your layout. Real estate on a blog is as important as it is in the real world (especially in congested areas), you need to make the most out of your space as you can.

Accordion menus get their name from the instrument of the same name. Much like the bellows going in and out as someone plays music on an accordion, an accordion menu expands and contracts from user interaction, one section at a time.

This way top level names are listed at all times, but sub-categories and child items are only exposed as each section is expanded. Your visitors only see what they need to at any given time.

Accordion menus are used in blog navigation, and of course everyone's blog is different, so your navigation might be in the header, sidebar(s), footer, or any combination thereof. I will show you many different examples because you could use them for pages, posts, categories, images, and more.

You will also see different ways to implement them, from plugins, to theme hacks, or by using special libraries. Hopefully you'll have a 'lightbulb' moment and one will catch your eye!

1. Super Slider Wordpress Plugin

SuperSlider is a Wordpress plugin "suite" that does many things, including slideshows, image reflections, and image zooming capability. It's accordion capabilities are what we're interested in, so we'll look at that section of the plugin suite (which runs on Mootools).

SuperSlider Accordion Navigation Menu: SuperSlider also allows you to create an accordion menu for navigation in your sidebar, like the one on their own web site. You have the ability to organize both your categories and your posts in a single navigation element with this plugin - which I believe is much more intuitive than the Wordpress default of a list of categories and a list of recent posts. You can even add counts and RSS links to the menu. The are very customizable through the admin interface, theme based, and the animations are CSS.

Here's the very detailed example from the superslider web site:

Visit the SuperSlider home page

2. BySlideMenu Accordion Menu

Accordion menus don't have to be vertical, they can be horizontal as well. This is a great image based slider (based on Mootools) that can easily be integrated into the header of your wordpress theme by merely pasting a few lines of code and uploading a few files.

You will have to create your own cool images for the slider, and these navigation elements will be hardcoded and not dynamic...meaning as you add or remove major sections of your site over time you'll have to manually modify your slider and links.

It does require more work than a plugin to configure, but I use this on one of my sites and everyone just loves it!

Here's an image example of the BySlideMenu in action:

Visit the BySlideMenu home page

3. Accordion Image Menu Plugin

This plugin takes the last example and puts it on it's side - literally! It's a wordpress plugin that allows you to create an vertical image based menu. Here's an example:

The picture doesn't do it justice, you'll have to check out the demo on the plugin homepage. Basically your elements have an image for background, and on mouseover each one expands to reveal the fuller picture for an awesome effect.

It's got some great features for different applications too, like the ability to combine pages and categories in any order, recent post listing, and whether or not to include the textual title.

Visit the Accordion Image Menu home page

4. Post History Manager Plugin

Post History Manager is an oddly named plugin, but it does work great. It's named post history manager because it's a sidebar widget that manages 4 different kinds of "post history"; posts, comments, categories, and archives.

It's simple, but it does work great. At first just the 4 headings are shown, but just click on any one for more and it will automatically expand "accordion" style vertically. Click on another, and the first one will contract and the next selection expand as in this example image:

Visit the Post History Manager home page

5. Sliding Notes Plugins

Another interesting accordion use is the "sliding notes" plugin. Basically it allows you to add a hidden element to your post, a footnote, translation, code, an aside, bio info, etc. -and then it slides out to be revealed (or slides back if you click it again).

By using shortcodes, you can add these sliding notes anywhere in the post content at all, I believe even multiple instances. It's also very, very easy to customize the style of these with CSS.

Here's an example of sliding notes in use to hide a simple translation after a post:

Visit the Sliding Notes home page

6. Accordion View Widget

Maybe you've seen all these examples and none so far tickled your fancy. That's ok, because there's code of course to do just about anything you want. Yahoo has long since had an entire library of effects that anyone can use in their web site code for free, and the Accordion View Widget is no exception.

This widget is the end-all-be-all of configuration options because it can be any size, and contain any content, and styled nearly any way. It won't, of course, hook into any Wordpress functions unless you do a little hacking and set it up that way - but the possibilities are endless.

Here's an example image:

Visit the Accordion View Widget home page

7. Flexible Sliding Menus

Flexible Sliding Menus allows you to place your links, posts, and categories, in an accordion style menu - but this one has a twist because instead of being built on libraries like MooTools or jQuery, it's built on Flash!

Add a simple call in your sidebar, upload the plugin and swf file, enable it, configure your options and you're done!

Here's an example image:

Visit the Flexible Sliding Menus home page

8. Tabbed Widgets

Tabbed widgets is another ill-named plugin because it doesn't completely describe what it does. It's a widget that's capable of producing either a tabbed or accordion style widget.

You could actually configure multiple instances of the widget, and have several accordion style, one accordion, one tabbed, etc.

Here's an example of the accordion style widget:

I wanted to also show you how easy the configuration on this one was as well:

Visit the Tabbed Widgets home page

9. Advanced Spoiler

Much like the Sliding Notes earlier, Advanced Spoiler allows you to hide some content and and click to "expand" it into view.

The name of the plugin indicates that you can use it to hide a spoiler for a story, but it could also be used to hide just about anything, such as footnotes, bio, additional info, etc. You can add content, images, or both. This example shows the 'spoiler' already expanded.

Visit the Advanced Spoiler home page

10. Slidoox Horizontal Accordion Slider

Slidoox is a very interesting slider based on Mootools that has some very cool effects. You can change the size, color, and background with the stylesheet.

It's very difficult to describe how this one works, basically in setup you define a rectangle box, such as the size of your content area or header. At the top of the box are the names of content that you define. Unlike other menus when you click on an item at the top of the box, the items "slide" in from left or right - and that content can be text, images, or a combination.

This could definitely be used for featured content, and more! I won't even attempt to give you an image for this one - I strongly suggest you view the live demo: click to view the Slidoox accordion slider demo

Visit the Slidoox plugin home page

Conclusion

I hope you learned more ways to add accordion menus today than you can shake a stick at. The ways to customize your theme are just about limitless, but accordion menus are a great place to start!

Let us know if you've used on accordion menus on your blog, and what script you used to get them!

Ever wanted to browse through the older post archives only to be staring at the screen for ages in frustration while the content slowly loads up? A quick fix would be to make use of AJAX to load the post archives. In this tutorial, I will show you how to do that using the ever popular JavaScript framework; MooTools on a typical 2 column WordPress theme.

The code is quite easily digestible and with a little CSS tweaking, you could get it to work for your theme.

Step 1: Readying the Files

Download the file mootools_core.js and upload it into a folder within the directory of your active WordPress theme and name it as js.

I only included components needed for AJAX post pagination in this MooTools build. You are however welcome to create a new one with components you would like to use.

Create a blank JavaScript file called ajax.js and upload into the js folder. At this point of time, you should have these 2 files in your js folder.

yoursite.com/wp-content/themes/yourtheme/js/mootools_core.js
yoursite.com/wp-content/themes/yourtheme/js/ajax.js

Step 2: Edit header.php

You have to tell the browser that we have a JavaScript file to use. Add the following lines into your header.php just before the closing </head> tag.

<?php wp_enqueue_script('mootools', '/wp-content/themes/yourtheme/js/mootools_core.js')); ?>
<?php wp_enqueue_script('mootools_ajax', '/wp-content/themes/yourtheme/js/ajax.js')); ?>

Where yourtheme is the folder name of your active theme.

Step 3: Edit index.php

When it comes to AJAX pagination, we only want to refresh the post listings and not other portions of your site. The following code snippets will tell the browser to skip loading the entire page.

The top of your index.php file should have the following line:

1

<?php get_header(); ?>

Replace that line with this:

1
2
3

<?php if (!isset($_GET['ajax'])) { ?>
<?php get_header(); ?>
<?php } ?>

Similarly, at the very end of the file you should see:

1
2

<?php get_sidebar(); ?>	
<?php get_footer(); ?>

Now replace it with this:

1
2
3
4

<?php if (!isset($_GET['ajax'])) { ?>
<?php get_sidebar(); ?>	
<?php get_footer(); ?>    	
<?php } ?>

To avoid any possible causes for the code not to work, do ensure that your HTML structure is identical to the ones listed below. We will need to have a div with an id of 'post' nesting the loop.

Go back into index.php and add the div before the start of the loop, i.e. the end result should look like this:

1
2

<div id="post">	
<?php if (have_posts()) { ?>

Be sure to also close the <div> after the loop ends.

1
2

<?php } ?>
</div>

We also need a div with a CSS class of 'page-navi' to nest the post pagination links.

1
2
3
4

<div class="page-navi">
	<?php next_posts_link('- Older Posts -') ?>
	<?php previous_posts_link('- Newer Posts -') ?>
</div>

Step 4: Writing your ajax.js

This is basically what goes on in your JavaScript file. I have left some pretty detailed comments so that you know what the code is all about.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

//function used to handle AJAX post pagination
function ajaxLinks(id, container) {
 
	//looks for all instances of id
	$$(id).each(function(ele) {		
 
		//what happens when the particular instance is clicked on
		ele.addEvent('click', function(e) {
			e = new Event(e).stop();
			var alink = ele.getProperty('href'); 
			var url = alink;
 
			//construct the new URL with a parameter indicating how it should load the page (fully or a portion of it)
			if (alink.indexOf('?') != -1) {
				url += "&ajax=y";
			} else {
				url += "?ajax=y";
			}				
 
			//this is where the magic happens
			var ajaxLink = new Request.HTML({				
				onRequest: function() {}, //what happens during an ajax request is made													
				onSuccess: function() { //what happens when an ajax request is completed successfully															
					new Fx.Scroll(document.body, {'duration': 'long'}).start(0, 0); //scrolls to the top of the page once your content is loaded
					ajaxLinks('.page-navi a', 'post'); //calls the function again so that it will add ajax post pagination to your newly loaded page
				}, 
 
				onFailure: function() {}, //what happens when an ajax request fails
				update: $(container) //#post which is your container gets updated
			}).get(url);											
		});		    
 
	});
 
}
 
//needed for the MooTools build to be executed
window.addEvent('domready', function(dom){						 
	ajaxLinks('.page-navi a', 'post'); //Of course all of this will not be completed until you call the function to action
});

Step 5: Customization

As you would have probably guessed, this is a very basic implementation of how AJAX post pagination works in WordPress themes.

I would love to let your imagination run wild and see what you come up. Of course you need to have a little knowledge in CSS to get it done. Customizations can be made in the 3 different events (onRequest, onSuccess and onFailure).

If you have any doubts or feedback about this how-to. I would love to hear of it.

Back in December I swapped from using the regular WordPress search to using Google Custom Search. The change was very easy to make and Diogo Iglésias wrote up an easy tutorial for it here.

The reason for the change was simple; Google is a great search engine. I realized that every time I wanted to search my own site, I was going to Google and typing in “site:problogdesign.com” and then searching there. If I don’t want to use my own site search, who does?

The Test – Number of Searches

If one type of search encourages more people to search, then it’s doing a better job.

Google automatically tracks stats on your search engines (Go to google.com/cse > Manage Existing Search Engines > Statistics). To track WordPress’ search, I used the excelled Search Meter plugin from Bennett McElwee.

One thing to note first is that the search box on this design is very unobtrusive and hard to spot (Purposefully, I have other content that’s more important), so the number of searches is very low. It makes the results less reliable statistically, but as you’ll see, there’s a clear trend regardless.

WordPress Search:

• August – 102
• September – 92
• October – 82
• November – 109

Google Custom Search:

• January – 131
• February – 140
• March – 136
• April – 142
• May – 131

The average number of searches for WordPress was 96, and for Google 136. That is 40 extra searches per month just because people saw the Google logo. It doesn’t sound like much there, but on these small numbers, that’s a 42% increase over the WordPress average.

Reasons To Stick With WordPress

You would need to do a lot more testing with more sites and more users, but even so, the numbers above are quite damning for WordPress. For that reason I’m going to list a few of the reasons to stick with WordPress search:

• No adverts - Google plaster your results page in adverts. Have a look at it on my site, it’s over the top.

• Control over the layout – By creating a search.php file in your theme, you can lay out your results in any way you like. You can create a bullet list of results, show thumbnails, give excerpts, or anything else you like.
• Special Effects – Things like highlighting the search terms, pagination, dynamic search text and any other trick you can think of are possible on WordPress because you really do have complete control.

Conclusion

In conclusion, I would love to take advantage of the design of my search page with all the power of WordPress. However, the quality of the results comes first and foremost and for the minute at least, WordPress search just doesn’t cut it.

Someday that will change though, and when it does, I’ll swap right back.

What about you? Have you considered leaving WordPress search for a different system?