Help me turn these templates into a WordPress theme!

September 6, 2011 7:31 PM

How do I convert HTML/CSS templates into a WordPress theme?

I am working as the web content manager for a non-profit organization in the area. For the past two months, I have been working with developers in India to create customized templates for the organization. They are in the process of creating the HTML/CSS templates based on their Photoshop mock-ups. The website will use five different templates (home page, content landing page, contact/form page, etc.) and will initially be about 15 pages total.

The original plan was to have the developers send us the HTML/CSS templates and have an organization member convert the templates into a WordPress theme. After dealing with this member for the past few months, both the Project Manager and I have realized that this guy is an idiot and not trustworthy, so now we are in a bind. The developers' contract does not include conversion (in fact, I'm not sure if they do that for any project), and finding someone else to take over this part is both out of budget and difficult due to the general attitude of this organization's members (they're not easy to work with).

I have done a little reading on WordPress Codex and found this site to help me figure out how to get the conversion done. I'm not sure whether the process will become more clear once I have bought the hosting account and gotten the templates, but from looking at that one page, I am completely lost past step 5 or so.

Are there more comprehensive/simpler resources on converting HTML/CSS templates into WordPress themes, particularly with screenshots of where to upload/copy files? I have a good working knowledge of WordPress and am certainly willing to use trial and error to make everything work! I just need a clear and visual example to walk me through the process.

In case it matters, I will be doing this work on a Mac and will be installing the WordPress script on a Bluehost hosting account.

Thanks!

posted by msk1985 to technology (14 answers total)

Wordpress themes are written in php. Do you know php? I would start by finding an open source theme that is in the ballpark, and then edit it as needed.
posted by COD at 7:36 PM on September 6, 2011 [1 favorite]

Do you actually know enough PHP, CSS and HTML to do this? Because even with the templates provided by your team in India, you need enough hands-on code knowledge to execute this.

You can pay a contractor to do this for you. I work with two. They can typically do this in like 4 hours. One is a MeFi member. MeMail me if you want a referral.

Otherwise, COD's suggestion would be a good place to start. Upload the theme to bluehost, activate it, and edit the CSS as needed.
posted by DarlingBri at 7:40 PM on September 6, 2011 [1 favorite]

It seems someone has led you to believe, incorrectly, that there is such a conversion, which isn't really the case. It's not a simple plug and go operation.
posted by odinsdream at 7:46 PM on September 6, 2011

I'd second DarlingBri's suggestion about hiring this out. I work with someone who does a great job, and saves me time and headaches. If this isn't your background, it may be a sanity saving move, and usually not terribly expensive.
posted by korej at 8:03 PM on September 6, 2011

I use a program called Artisteer but it's pretty limited. I agree, hiring it out will best.
posted by dawkins_7 at 8:07 PM on September 6, 2011

COD or DarlingBri, do you have any suggestions on sources to help me edit code/files on existing themes to match the templates as close as possible? This is not at all my background. (I'm in international development). But getting the people who have control over the organization's account to fork over money for an external hire will be a major headache in itself.
posted by msk1985 at 8:17 PM on September 6, 2011

A wordpress theme must have 2 files. style.css and index.php. That's all you need. If you can put all your html into index.php and all your css into style.css you're, I swear, 50% there in developing your theme. Once there, implement the loop, and you're on your way. As you go on, and have to implement other things, you will encounter other portions of theme development. The details on what different other files in a theme can do are well documented here: Theme Development.

Don't hack on an existing theme if you are getting clean html. Hacking an existing theme is a road to extreme frustration. For years that's how I worked on sites, and when I finally started doing it from scratch I had much better luck.

This is excellent: Theme Development Checklist. While you only really need 3 files to make a valid theme, this will force you to do all the extras that make sure things work and function flexibly and correctly.

I've done this several times successfully. I lurk here for WP programming questions. For a larger and more robust Q&A site for WordPress the WordPress Stack Exchange is excellent.
posted by artlung at 8:31 PM on September 6, 2011 [10 favorites]

Urgh. Typo: While you only really need 2 files
posted by artlung at 8:32 PM on September 6, 2011

Yeah, this isn't the end of the world to do, follow artlung and you'll be well on your way.

(Wordpress used to come with a really simple default theme that made an excellent basis for doing your own. It didn't have fancy functions or javascript gee-gaws, or a million page templates, but it did contain the basic stuff to spit out posts or pages. I'd try to find that, or look for a very, very basic theme with few options. You don't care what it looks like, you're only interested in the PHP stuff buried within it to use as a model.)
posted by maxwelton at 3:56 AM on September 7, 2011

I've successfully built a couple of themes on top of the Toolbox theme. It's a very stripped back, unstyled theme, specifically designed to be the basis for other themes.

I would suggest installing MAMP on your mac, and running the Wordpress site locally while you develop your theme.

Be warned that this is a multiple-day undertaking for someone who doesn't know what they're doing. DarlingBri's suggestion that it would take 4 hours is for someone who really knows their stuff.
posted by Magnakai at 4:14 AM on September 7, 2011

I used So You Wanna Create a Wordpress Theme for my first theme. At this point it's 4 years old and some of it is out of date/deprecated, but it's a good 101 primer that'll walk you through the steps.

Basically, you need to implement The Loop, and from there you can use the Codex to figure out what you don't know
posted by GilloD at 8:32 AM on September 7, 2011

GilloD's link is definitely useful but a little dated now (I'd still read it though!). Chris Spooner recently posted How to create a simple WordPress blog theme that might help too.

Remembmer that if you're looking to create more of a "website with blog" (where the home page is more of a static page with branding, navigation, etc. then you'll want to be reading up on Pages too.

Chris Coyier of CSS Tricks has an excellent video series on Lynda.com, "WordPress 3: Creating and Editing Custom Themes" (for $25 you can sign up for one month).

If you're using Firefox or Chrome, go immediately and install Chris Pederick's Web Developer extension - it'll give you all sorts of information on the pages you're building and viewing in tutorials.

Lastly, Digging into Wordpress is an excellent book for beginners wanting to create themes from scratch.
posted by humph at 11:27 AM on September 7, 2011 [1 favorite]

Thanks everyone! I feel much better about this now!
posted by msk1985 at 11:57 AM on September 7, 2011

I'm amazed that nobody posted Elliot Jay Stocks' Starkers Theme for Wordpress - a free, blank, standards-compliant Wordpress theme template.

It includes all of the functionality that you would need to include in a Wordpress theme, will save you time, and will teach you pretty much everything you need to know to modify and build off of it.
posted by Maxistentialist at 9:35 AM on November 5, 2011 [1 favorite]