|
Web designers and developers are getting an increasing number of requests from clients for custom theme development, and
a growing number of designers are also building their own themes to
distribute for free or to sell as premium themes. With all of the
WordPress development that is going on, there is a need for an
organized collection of resources to educate, inspire and equip
developers to improve the quality and efficiency of their work. This
post provides all kinds of WordPress-related resources to do just that.
1. Helpful Resources
While there are all kinds of resources available for Web designers and developers, these are especially nice to have on hand when working with WP themes.
The WordPress Help Sheet
This is a nice resource to refer back to when you are developing
themes. It’s a one-page collection of PHP snippets and code that will
come in handy when designing with WP.
The Advanced WordPress Help Sheet
A slightly more advanced version of the help sheet.
Huge Compilation of WordPress Code
A helpful post that provides code snippets for a variety of common functions.
WordPress Template Tag Reference Guide
This is a handy guide to have nearby when you’re building a theme. It lists the various template tags used by the WP system.
Unraveling the Secrets of WordPress’ comments.php File
A good starting point for getting more familiar with how comments work in WP and what you can do with them as a designer.
48 Unique Ways to Use WordPress
Want some ideas on how you can use WP in your next project?
Theme Switcher Reloaded
For displaying demos of multiple themes on your website or blog.
2. WordPress Tutorials
One of the advantages of using WP is the amount of information that is readily available from others who are willing to share their techniques.
For designers and developers, there are tutorials on just about any
aspect of working with WP. Here are some that deserve to be highlighted.
2.1. Basics of Creating a Theme
Designing for WordPress
A series written by Chris Coyier of CSS-Tricks that includes videos and articles.
Developing a WordPress Theme
Helps you with coding each of the necessary WP files.
How to Create a WordPress Theme from Scratch
If you want to get started with your first theme from scratch, this is a good resource.
How to Create WordPress Themes from Scratch - Part 1
Another useful article for setting up the basics of a theme from scratch.
How to Create WordPress Themes from Scratch - Part 2
The second part gets into slicing and coding.
Dissection of a WordPress Theme - Part 1, Part 2, Part 3, Part 4
A detailed look at what makes up a WP theme and how to create your own.
So You Want to Create WordPress Themes Huh?
An excellent series of tutorials on just about every aspect of theme development.
From XHTML/CSS to WordPress
If you already have a site or template built, here is how to convert it to WP.
2.2. Multiple Hints, Tips, and Tricks
WordPress Theme Hacks
A must-bookmark post at Web Designer Wall that quickly shows the code
needed for a variety of tricks when working with WP themes.
Mastering Your WordPress Theme Hacks and Techniques
Another exhaustive resource with tips on many different aspects of designing on WP.
The Most Desired WordPress Hacks: 11 Common Requests and Fixes
This post includes a variety of information, including tips on custom
fields, creating menus, working with categories and authors and more.
2.3. Working with Categories
Removing Several Categories from the Loop in WordPress
There will be times when you want to take posts in a certain category
out of the loop and show them someplace else. This tutorial shows you
how.
Displaying WordPress Categories in a Horizontal Dropdown Menu
Shows you how to create drop-down navigation using CSS and JavaScript.
3.4. Navigation Menus in WordPress
Creating Two-Tiered Conditional Navigation in WordPress
Get an advanced navigation menu with the right WP coding and CSS.
Using Sliding Doors with WordPress Navigation
Use this popular navigation style in your WP themes.
2.4. WordPress as a CMS
How to Use WordPress as a Membership Directory
This tutorial covers one non-traditional use of WP that may be of interest in some of your projects.
Using a WordPress Page as Your Homepage
In some projects, you may want a static page to be set as the home page, rather than to display recent blog posts.
Build a Dynamic Design Portfolio with WordPress
Some specifics for creating an effective portfolio website powered by WP.
2.5. Working with Comments:
Hack Together a User Contributed Feed with WordPress Comments
Learn how websites in the TUTS family have their community links section set up.
Adding Form Validation to WordPress Comments Using jQuery
Learn how to validate comment form submissions without reloading the page.
How to Highlight Author Comments in WordPress
Setting the author comments to stand out from reader comments can make
it easier for others to identify your responses to questions and
comments.
How to Separate WordPress Comments and Trackbacks
You may want to give your comment area a cleaner look by keeping pingbacks and trackbacks out of the main comment area.
How to Add Gravatars to WordPress Themes
You can make your comment section more appealing by displaying gravatars for each commenter.
2.6. Working with Headers, Footers, and Sidebars:
Client Friendly WordPress Themes: Header.php
If you’re designing themes for clients, here are some things to consider.
Simple Random Header Image for Your Blog
Provides the code for a randomly rotating header image.
Creating a Widget-Ready Footer in WordPress
You can give your theme’s users more options by allowing for widgets in the footer.
Mashing Up Feeds Using Yahoo Pipes
Covers the steps of adding a list of links to your sidebar that consist
of posts from various blogs; in this case, blogs from the same network.
How to Install DomTABs on WordPress
Improve your sidebar by giving visitors more to choose from, without taking up more space.
WordPress Sidebar Turned Apple-Flashy Using jQuery UI
Create a more attractive sidebar that will be noticed by visitors.
2.7. Web 2.0 Integration
Creating a Life-Stream and Social Media Hub
A look at the process of setting up a personal website that
incorporates your social media accounts, such as Twitter, Digg,
StumbleUpon and Flickr.
Create a YouTube Section with WordPress
Video is becoming a bigger part of blogs and websites, and this
tutorial will help you create an attractive section for YouTube videos.
2.8. Styling
Styling Individual Posts Using the_ID
If you want to get creative, individual posts can be styled differently by using the post ID assigned by WP.
Multiple WordPress Page Layouts in One Single Template
Create a more flexible theme that changes the layout based on various factors.
2.9. WordPress SEO
WordPress SEO
Although SEO involves much more than how a website is built, development can have a big influence on rankings down the road.
Blocking Your WordPress Categories and Archives from Google
A simple step that can improve your website’s SEO.
WordPress and SEO
A good primer on developing search-friendly websites.
SEO for WordPress Tips
Another article that looks at SEO from the perspective of a WP designer or user.
2.10. Working with Feeds
Creating Posts that Only Appear in RSS
Send special subscriber-only content that won’t appear on your front page or archives.
Publishing External RSS Headlines to Your WordPress Site
A simple tutorial that will show you how to add RSS headlines to your website.
2.11. Working with Featured Posts
How to Create a Featured Post Carousel for WordPress
Displaying featured content on the front page is pretty common right
now. This tutorial shows you how to set that up for yourself.
Create a Tabbed Featured Post Area in WordPress
Give your theme an attractive look and feature the appropriate content.
2.12. Working with Custom Fields
Using WordPress Custom Fields: Introduction
If you’re not familiar with using custom fields, this is a good place to start.
WordPress Custom Fields: Laying Text Over Your Lead Graphic
A great way to improve the look of your theme by taking advantage of custom fields.
2.13. Other Tutorials
13 Tags to Delete from Your Theme
Page load time can easily be an issue with more involved WP themes. You
can help the cause by getting rid of unnecessary calls to the database.
How to Make a Random Post Button
A different functionality that may be right for one of your upcoming themes.
Customize Your 404 Page
You can improve the usability of your blog by customizing the 404 page that visitors may find from time to time.
Adding an Author Page to Your WordPress Blog
You’ve probably seen blogs that have a specific page for each author. Here’s a tutorial on setting that up.
How to Install WordPress Manually
Most hosting companies offer an easy WP installation. If yours doesn’t, this post can help.
Adding Thumbnails to Your Posts in WordPress
Thumbnails are popular, especially for magazine themes. Here’s an explanation of how they can be added.
How to Easily Make WordPress Archives that Rock
Provides some code and strategy for setting up effective archives.
3. Articles from the Official WordPress Codex
The official WordPress Codex provides a wealth of information
for developers, as well as for WP users in general. This list is just a
sample of some of the articles that are most relevant to developers.
Theme Development
This article will cover the basics of designing themes for WP, and it links to a number of additional resources on the subject.
The Loop
Get the details on the loop, one of the most essential elements of the theme system.
Creating an Archive Index
There are a lot of different options when working with archives in theme development. This article is a good starting point.
Customizing Your Sidebar
Sidebars provide developers with plenty of options for experimentation and tweaking.
Conditional Tags
To create versatile WP themes, understanding conditional tags is essential.
Stepping into Templates
The basics of how templates work in WP.
Template Hierarchy
Explains how templates work together in a theme.
Template Tags
WP relies on a variety of template tags throughout a theme.
Using Custom Fields
Custom fields open up a whole new world of opportunities for developers.
Search Engine Optimization for WordPress
This article contains some general SEO information, as well as some that is specific to WP themes.
4. Blank Themes
It’s possible to save yourself a considerable amount of time in
development by starting with a blank theme. Blank themes are not
intended to be used as they are, but rather as a starting point or
framework to increase efficiency with the tasks that are common to the development of almost every WP theme.
Whiteboard
A free WP theme framework.
Starkers
A completely naked WP theme from Elliot Jay Stocks. (Note: some users
are having problems with Starkers on WP 2.6. Improvements are hopefully
soon to come.)
Naked
A starter theme with only very basic styling.
The Starter Theme Project
This is basically an empty template. It is not a theme that is intended to work out of the box.
5. WordPress Design Inspiration
Readers of Smashing Magazine are obviously familiar with excellent
sources of design inspiration. The resources listed here will help you
if you are specifically interested in seeing what others have been able
to do on the WordPress (WP) platform.
We Love WP
The best gallery dedicated strictly to websites powered by WP. It is updated rather frequently and has a decent-sized archive.
The Gallery at WPCandy
A bit of a smaller gallery than We Love WP, but still worth checking
out if you’re interested in seeing what others are able to do with WP.
Unmatched Style
This design gallery has a tag for WP-powered sites.
CSS Glance
A large (and continually updated) category for WP.
45 Beautiful and Creative WordPress Designs
A mini-gallery from design blog Six Revisions.
25 Outstanding WordPress Designs
Another mini-gallery from Six Revisions.
Creative Examples of WordPress Theme Modifications
An interesting blog post that shows sample theme designs compared to the themes that were their starting point.
60+ Unusual WP Blog Designs
Noupe put together a bunch of designs that stand out.
6. Icons for Your Themes:
Improve the look of your theme by using some icons that are available for free.
RSS: Best Design Practices and Icons
A collection of RSS-feed icons from Smashing Magazine.
110+ Free RSS Icons to Show Off Your RSS Feed
A nice collection that will give you some options when it comes to RSS.
Fresh, Free and Gorgeous RSS/Feed Icons
A previous collection from Smashing Magazine.
Cheers: A Free “Social” Icon Set
12 icons of glasses and social media from Smashing Magazine.
Feed Icons
If you’re looking for the standard RSS icon, get it here.
7. Places to Distribute Free Themes You Have Developed
Many theme developers choose to distribute their themes from their
own websites or blogs because it draws more visitors and gives them
control over the distribution. However, there are some other places
where you can try to get your theme listed. Some will
simply link back to your website, and others will offer visitors direct
downloads from their own websites. In general, make sure that you’re
familiar and comfortable with the directory or gallery before
submitting your theme. Some have been known to distribute themes with
sponsored or hidden links.
Official WordPress Theme Directory
There are around 300 themes included at the moment.
Weblog Tools Collection
This blog announces new themes and plug-ins to its 11,000+ subscribers.
8. Galleries of Free Themes that Accept Submissions from Designers:
9. Marketplaces to Sell Your Themes
Most developers of premium themes will sell them from their own
websites or blogs or, if they have several for sale, set up websites
specifically for marketing and selling them. However, there are also some marketplaces that will sell your theme for you, in exchange for a cut of the profit.
Theme Forest
A new and already popular marketplace for templates and themes, including those for WP.
Templamatic
A similar marketplace for themes and templates.
WPforSale
A marketplace for premium themes and plug-ins.
For more WP-related content at Smashing Magazine, see:
About the Author:
Steven Snell is a designer and freelance blogger. He actively maintains his own blog at Vandelay Design.
|
