WordPress Blog

This is the seventh post in series about creating Wordpress themes with your Photoshop designs. You may want to review before we continue….

Part 1 - “Tools For The Task” and “Preparation”
Part 2 - “Layout And Structure” and “Designing Wordpress Themes in Photoshop”
Part 3 - “Photoshop to XHTML in 24 Hours”
Part 4 - “Cleaning Up Your XHTML”
Part 5 - “Preloading Images with Javascript and CSS”
Part 6 - “Marking Up is Hard to Do” and “The Anatomy of a Wordpress Theme”

• First we’ll duplicate index.html and rename the copy index.php. We’re only keeping the original .html file for reference to make sure that the finished PHP operates and looks the same.
• Let’s open index.php in our text editor. Right now it’s just a .html renamed .php. Our job is to make make it true PHP.

(more…)

Del.icio.us
Digg This
Stumble
5 Comments;

This is the sixth post in series about creating Wordpress themes with your Photoshop designs. You may want to review before we continue….

Part 1 - “Tools For The Task” and “Preparation”
Part 2 - “Layout And Structure” and “Designing Wordpress Themes in Photoshop”
Part 3 - “Photoshop to XHTML in 24 Hours”
Part 4 - “Cleaning Up Your XHTML”
Part 5 - “Preloading Images with Javascript and CSS”

Wikipedia defines the term markup as a set of annotations to text that describe how it is to be structured, laid out, or formatted. When we say we’re going to ‘mark something up’ it means we’re formatting the document so that it can be read correctly by machines. Hypertext Markup Language (HTML) is the most common form. That can be marked up to Extensible Hyper-text Markup Language (XHTML) and beyond that to PHP to become dynamic.

Now that we’ve got our basic html layout design we can begin the hard work the transition from HTML to PHP.

(more…)

Image heavy websites have one problem: load time. So if you’re designing a Wordpress theme that relies heavily on images like one made in Photoshop, you want to do everything you can to increase speed. a) You want the images to display as shortly after the text does as possible and b) you want to do everything to help users on slower connections.

One way to do this is with javascript, the other way is with CSS.

(more…)

You’ve gone from Photoshop PSD to slices to XHTML using Parts 1, 2, and 3 but if the end result is a Wordpress theme the majority of the work still has to be done. First of all it’s important to understand one bit of the operational mechanics of Wordpress. Wordpress looks for certain information the header of a file called style.css, this is how it can tell themes apart. Here’s a better explanation from Codex:

In addition to CSS style information for your theme, the stylesheet, style.css must provide details about the Theme in the form of comments. No two Themes are allowed to have the same details listed in their comment headers, as this will lead to problems in the Theme selection dialog. If you make your own Theme by copying an existing one, make sure you change this information first.

Thus, we need to separate our inline CSS and put it in a separate file called style.css

(more…)

We’ve just started our first Wordpress theme! In Part 1 and Part 2 we reviewed some techniques that will allow our design to be marked up to XHTML. In this lesson you’ll learn exactly how to do this and why it isn’t exactly as easy as it seems.

Photoshop to XHTML in 24 Hours

So we’ve all seen those ads for websites that say they can “Photoshop to XHTML/CSS in X Ammount of time” right? No? well here’s 39 of them. What exactly are these service doing that you can’t as the theme designer? Nothing. If you feel so inclined, save yourself the fee (usually around $100 or so dollars) and do it yourself!

(more…)

Designing your first Wordpress theme may seem incredibly ambitious at first but it’s really not that hard. It may help your understanding of Wordpress if you find a theme you like and disect or remix it. This is how I learned to code and one of my first attempt was a variation of Derek Punsalan’s theme The Unstandard.In Part 1 I talked a bit about the tools you’ll need and how to get prepared. Now that you’ve done that we’re going to get started.

Layout and Structure

This post by 37 Signals is an incredibly detailed account of how to organize information and using sketches to design for the web. I highly recommend taking a break to read it. As mentioned in the post sketching out the general layout of your site will help you. For my design I started with this sketch:

(more…)

In this multi-part series I’ll detail how to create and design a Wordpress theme from nothing more than your imagination using Photoshop, CSS, XHTML and PHP. Before you continue you should look over other tutorials “Working with Wordpress Offline Like A Pro and “Color Proofing Photoshop” as some of the topics discussed there will come up in this tutorial like working offline to develop themes, and proofing your colors so that they translate accurately for the web. At the end of the entire series I’ll allow you to download the fully developed theme with the PSD, and theme-files including stylesheets, and javascript.

(more…)

Like many of you I’ve noticed a lot more of my clients want dynamic websites instead of traditional static pages. This is great because dynamic pages tend to lead to more work, continued maintenance and they tend to offer larger budgets. I used to work off of my web server but the problem I’ve had lately is that when I’m not connected to the internet I haven’t been able to code for Wordpress in a way that allows me to view my changes. Since I started using the techniques used in this tutorial my productivity has increased significantly.

The solution for me was to start using MAMP which allows me to run a virtual web server on my Mac. With this tutorial I’ll tell you how to install MAMP, install Wordpress on your Mac, install extensions to Dreamweaver and soon you’ll be able to design wordpress whenever you want wherever you want! Although I mention Wordpress instructions specifically, MAMP allows you to use many other CMS’ offline as well. Unfortunately, this tutorial is for Mac users but if you’re a PC user try this tutorial on using XAMPP.

The abbreviation MAMP stands for: Macintosh, Apache, Mysql and PHP. It allows the user to host a virtual server bundled with all of the other things you need to run dynamic web pages like MySql, PHP, and Apache. Unlike previous solutions all these resources are available at the click of a button. You don’t have to figure out how to install or update them individually which saves everyone a lot of time and stress.

(more…)