Part I:Getting Started as a WordPress Theme Designer:
Welcome to WordPress theme design tutorial! This title is intended to take you through the ins and outs of creating sophisticated professional themes for the WordPress personal publishing platform.
WordPress was originally, and is foremost, a blog system. Throughout the majority of this tutorial”s parts—for simplicity’s sake—I’ll be referring to it as a blog or blog system.
But don”t be fooled; since its inception, WordPress has evolved way beyond mere blogging capabilities and has many standard features that are expandable with plug-ins and widgets, which make it comparable to a full CMS (Content Management System).
In these upcoming parts, I’ll walk through all the necessary steps required to aid, enhance, and speed your WordPress theme design process.
From design tips and suggestions to packaging up the final theme, I’ll review the best practices for a range of topics: designing a great theme, rapid theme development, coding mark-up, testing, debugging, and taking it live.
The last three part are dedicated to additional tips, tricks, and various cookbook recipes for adding popular site enhancements to your WordPress theme designs using third-party plug-ins, as well as creating your own custom plug-ins.
WordPress Perks
As you’re interested in generating custom themes for WordPress, you’ll be very happy to know (especially all you web standards evangelists), that WordPress really does separate content from design.
You may already know from painful experience that many CMS and blog systems end up publishing their content pre-wrapped in (sometimes large) chunks of layout mark-up (sometimes using table mark-up), peppered with all sorts of pre-determined selector id and class names.
You usually have to do a fair amount of ”sleuthing” to figure out what these id and classes are, so that you can create custom CSS rules for them. This is very time consuming. The good news is, WordPress only publishes two things:
The site’s textual content—the text you enter into the post and the page Administration Panels.
Supplemental site content wrapped in list tags—<li> and </li>—which usually links to the posts and pages you’ve entered and the meta information for those items.
That’s it! The list tags don’t even have an ordered or unordered defining tag around them. WordPress leaves that up to you. You decide how everything published via WordPress is styled and displayed.
The culmination of all those styling and display decisions along with special WordPress template tags, which pull your site’s content into design, are what your WordPress theme consists of.
Does a WordPress Site Have to Be a Blog ?
In a nutshell, even before the release of themes in WordPress 2, WordPress has been capable of managing static pages and sub-pages since version 1.5.
Static pages are different from blog posts in that they aren’t constrained by the chronology of posts. This means you can manage a wide variety of content with pages and their sub-pages.
WordPress also has a great community of developers supporting it with an ever-growing library of plug-ins. Using plug-ins, you can expand the capabilities of your server-installed WordPress site to include infinite possibilities like event calendars, image galleries, side bar widgets, and even shopping carts.
For just about anything you can think of, you can probably find a WordPress plug-in to help you out. By considering how you want to manage content via WordPress, what kind of additional plug-ins you might employ, and how your theme displays all that content, you can easily create a site that is completely unique and original in concept as well as design.
Again, WordPress was built to be a blog system, and it has some great blog post and category tools. But, if you want to use it to manage a brochure-style site, or have a particular third-party plug-in to be the main feature of your site, and downplay or even remove the blog, that’s fine too! You’ll just tweak your theme’s template files to display your content the way you prefer (which is something you’ll be very good at after completing 9 parts of this tutorial).
Pick a Theme or Design Your Own ?
I approach theme design from two angles. The first is Simplicity; sometimes it suits the client and/or the site to go as bare-bones as possible.
In that case, it’s quick and easy to take a very basic, pre-made theme and modify it. The second is Unique and Beautiful. Occasionally, the site”s theme needs to be created from scratch so that everything displayed caters to the specific kind of content the site offers.
This ensures that the site is something eye-catching, which no-one else will have. This is often the best route when custom branding is a priority or you just want to show off your ”Hey, I’m hot-stuff” kind of design skills.
There are many benefits to using or tweaking pre-made themes.
You save a lot of time getting your site up with a nice theme design.
You don’t need to know as much about CSS, XHTML, or PHP.
This means that with a little web surfing, you can have your WordPress site up-and-running with a stylish look in no time at all.
Drawbacks to Using a Pre-Made Theme
The drawback to using a pre-made theme is that it may not save you as much time as you would hope for. You may realize, even with the new header text and graphic, several other sites may have downloaded and/or purchased it for themselves and you don’t stand apart enough.
Perhaps, your site needs a special third-party plug-in for a specific type of content; it might not look quite right without a lot of tweaking. And while we’re discussing tweaking, I find that every CSS designer is different and sets up its theme’s template files and style sheets accordingly; while it makes perfect sense to them, it can be confusing and time-consuming to work through.
Your approach may have started out as Simplicity, but then for one reason or another, you find yourself having to dig deeper and deeper through the theme, and pretty soon it doesn’t feel like quick tweaking anymore. Sometimes you realize—for simplicity’s sake (no pun intended)—it would have been a whole lot quicker to start from scratch.
Before trying to cut corners with a pre-existing theme, make sure your project really is as simple as it claims to be. Once you find a theme, check that you are allowed to tweak and customize it (such as an open-source or creative commons license or royalty free purchase from a template site), and that you have a look at the style sheet and template files.
Make sure the theme’s assets seem logical and make sense to you.
WordPress : You should know how to add content to the WordPress blog system and how its posts, categories, static pages, and sub-pages work.
Regardless of your web development skill-set or level, ill walk you through the clear, step-by-step instructions, but there are many web development skills and WordPress know-how that you’ll need to be familiar with to gain maximum benefit from this tutorial.
Tools of the Trade
In order to get started for the next part, you’ll need the following tools to help you out :
Create WordPress Theme From Scratch Part I
Part I: Getting Started as a WordPress Theme Designer:
Welcome to WordPress theme design tutorial! This title is intended to take you through the ins and outs of creating sophisticated professional themes for the WordPress personal publishing platform.
WordPress was originally, and is foremost, a blog system. Throughout the majority of this tutorial”s parts—for simplicity’s sake—I’ll be referring to it as a blog or blog system.
But don”t be fooled; since its inception, WordPress has evolved way beyond mere blogging capabilities and has many standard features that are expandable with plug-ins and widgets, which make it comparable to a full CMS (Content Management System).
In these upcoming parts, I’ll walk through all the necessary steps required to aid, enhance, and speed your WordPress theme design process.
From design tips and suggestions to packaging up the final theme, I’ll review the best practices for a range of topics: designing a great theme, rapid theme development, coding mark-up, testing, debugging, and taking it live.
The last three part are dedicated to additional tips, tricks, and various cookbook recipes for adding popular site enhancements to your WordPress theme designs using third-party plug-ins, as well as creating your own custom plug-ins.
WordPress Perks
As you’re interested in generating custom themes for WordPress, you’ll be very happy to know (especially all you web standards evangelists), that WordPress really does separate content from design.
You may already know from painful experience that many CMS and blog systems end up publishing their content pre-wrapped in (sometimes large) chunks of layout mark-up (sometimes using table mark-up), peppered with all sorts of pre-determined selector id and class names.
You usually have to do a fair amount of ”sleuthing” to figure out what these id and classes are, so that you can create custom CSS rules for them. This is very time consuming. The good news is, WordPress only publishes two things:
The site’s textual content—the text you enter into the post and the page Administration Panels.
That’s it! The list tags don’t even have an ordered or unordered defining tag around them. WordPress leaves that up to you. You decide how everything published via WordPress is styled and displayed.
The culmination of all those styling and display decisions along with special WordPress template tags, which pull your site’s content into design, are what your WordPress theme consists of.
Does a WordPress Site Have to Be a Blog ?
In a nutshell, even before the release of themes in WordPress 2, WordPress has been capable of managing static pages and sub-pages since version 1.5.
Static pages are different from blog posts in that they aren’t constrained by the chronology of posts. This means you can manage a wide variety of content with pages and their sub-pages.
WordPress also has a great community of developers supporting it with an ever-growing library of plug-ins. Using plug-ins, you can expand the capabilities of your server-installed WordPress site to include infinite possibilities like event calendars, image galleries, side bar widgets, and even shopping carts.
For just about anything you can think of, you can probably find a WordPress plug-in to help you out. By considering how you want to manage content via WordPress, what kind of additional plug-ins you might employ, and how your theme displays all that content, you can easily create a site that is completely unique and original in concept as well as design.
Again, WordPress was built to be a blog system, and it has some great blog post and category tools. But, if you want to use it to manage a brochure-style site, or have a particular third-party plug-in to be the main feature of your site, and downplay or even remove the blog, that’s fine too! You’ll just tweak your theme’s template files to display your content the way you prefer (which is something you’ll be very good at after completing 9 parts of this tutorial).
Pick a Theme or Design Your Own ?
I approach theme design from two angles. The first is Simplicity; sometimes it suits the client and/or the site to go as bare-bones as possible.
In that case, it’s quick and easy to take a very basic, pre-made theme and modify it. The second is Unique and Beautiful. Occasionally, the site”s theme needs to be created from scratch so that everything displayed caters to the specific kind of content the site offers.
This ensures that the site is something eye-catching, which no-one else will have. This is often the best route when custom branding is a priority or you just want to show off your ”Hey, I’m hot-stuff” kind of design skills.
There are many benefits to using or tweaking pre-made themes.
This means that with a little web surfing, you can have your WordPress site up-and-running with a stylish look in no time at all.
Drawbacks to Using a Pre-Made Theme
The drawback to using a pre-made theme is that it may not save you as much time as you would hope for. You may realize, even with the new header text and graphic, several other sites may have downloaded and/or purchased it for themselves and you don’t stand apart enough.
Perhaps, your site needs a special third-party plug-in for a specific type of content; it might not look quite right without a lot of tweaking. And while we’re discussing tweaking, I find that every CSS designer is different and sets up its theme’s template files and style sheets accordingly; while it makes perfect sense to them, it can be confusing and time-consuming to work through.
Your approach may have started out as Simplicity, but then for one reason or another, you find yourself having to dig deeper and deeper through the theme, and pretty soon it doesn’t feel like quick tweaking anymore. Sometimes you realize—for simplicity’s sake (no pun intended)—it would have been a whole lot quicker to start from scratch.
Before trying to cut corners with a pre-existing theme, make sure your project really is as simple as it claims to be. Once you find a theme, check that you are allowed to tweak and customize it (such as an open-source or creative commons license or royalty free purchase from a template site), and that you have a look at the style sheet and template files.
Make sure the theme’s assets seem logical and make sense to you.
Things You”ll Need to Know
Regardless of your web development skill-set or level, ill walk you through the clear, step-by-step instructions, but there are many web development skills and WordPress know-how that you’ll need to be familiar with to gain maximum benefit from this tutorial.
Tools of the Trade
In order to get started for the next part, you’ll need the following tools to help you out :
So, That’s it for the day.
Go to Create WordPress Theme From Scratch Part II A