How to Design a WordPress Theme
- Filed under: Tutorials
This is the unofficial 33% release of my upcoming ebook. This part is called How to Design a WordPress Theme.
The next two parts are How to Slice a Wordpress Theme and How to Code a WordPress Theme.
The .zip file is 8.51 MB. Inside, you’ll find a PDF file containing design instructions, a folder of images (step-by-step screenshots), and a PSD file for you to mess around with. To use the PSD file, you’ll need Photoshop. Here’s the PDF file for you to preview, but you should download the screenshots and PSD file for the instructions to make sense.
About the instructions, they assume you have no prior knowledge of Photoshop so it’s pretty detailed. I’d suggest printing all of the instructions (15 pages) before working on this tutorial.
Again, this is a partial release of the entire book on how to create a WordPress theme from scratch. The entire book is still scheduled to be released within this week, but it looks like I’m going to need more time, longer than I originally announced. I’m doing the best I can to release this book as soon as possible (right now is 4:35 am), but I need to make sure it’s something I can be proud of so please hang on for several more days.
Update: I’m using OpenOffice.org to export the tutorial as a PDF file, but I can’t find the PDF security options. If you can show me where to access it, please post your instruction as a comment. Thank you.
For those of us without Photoshop could you include a JPG version of the graphic we could modify as needed?
As for the book itself…
1. Better late than lousy. Take the time you need to get it finished and polished.
2. Look into POD with Lulu. You could offer things such as graphics as web extras.
I look forward to seeing the book.
Alan - This design doesn’t require any special graphics. I’m actually using the Wrath theme for this tutorial.
The instructions simply show you my design process within Photoshop, specifically, how I layout everything before I code.
…I will look into Lulu. Thanks Alan.
If you use OpenOffice v.2.2.1 you can find the PDF security options on the PDF Options dialog box. Please select the page Security and then click the Set open password button. After you set a password for permissions, the other choices on the Security page become available.
Thank you very much for this book and you are so expert on this that in fact I am a great fan of your designs. I am hoping that one day I could make my own wordpress theme and I would thanks you for that…
I was wondering…
Where do you get the time to do the things you do?
Is this blog (and the work around it) your full time job?
Hi Alan,
As well as Small Potato’s Answer on the graphic, if you have a high speed connection you can download The Gimp at http://www.gimp.org/
This will open PSD files without a problem.
C
C
wow. i can’t imagine doing layout in photoshop. i layout in browser, and use photoshop for, you know, graphic manipulation.
Very nice SP! I just printed a copy for reference later. I look forward to more of your tutorials!
AR - It is my full time job now, which would make sense why I’m trying to do so much with it :).
Adam - I can’t imagine doing layout in xhtml and css first. I have to measure on paper, lay it out with graphics, then code it.
Michael - I’m using 2.2.1, but when I click on Export Directly as PDF or File > Export as PDF, I don’t get the PDF dialog box. It goes straight to saving.
sorry, i should have said that. i walk around with the layout in my head for a few days first, then start making sketches.
once i’ve got one i like, i throw together the basic layout in XHTML/CSS. once it’s working in firefox, then i’ll lay out a photoshop file based on the browser layout.
i also don’t do the 3000px height. i like to work at 100 or 200%, so my PSD is always 700px or less. (i’ll add more height if i need to for the footer).
3000px is habit from trying to lay out multiple pages in one psd.
Well, I can’t believe you’re not laying stuff out in Illustrator first!
I do themes much like Adam - mostly in my head first. Then again, mine aren’t all that graphic-intesive. (and currently most are offline again due to a server move. Sigh.) But I do have one here. Looking forward to reading your stuff.
Andrea - I think we all think similarly in the beginning, wire-framing is where each us start to use our own processes to come up with the final design.
Ian - I don’t have Illustrator!
SP: The ebook is looking great. Will become very useful for my future themes.
In terms of securing your PDF file (that’s if your still having trouble with it) I always use Flash Paper 2. It’s running for $79 on adobe.com. It’s a great little program.
Many congratulations for your great job!
The eBook looks good. It is good to see that you are giving it away. Once some bloggers have enough traffic, they start to go for the cash and cover their blog in banners.
Looks great …. i’m looking forward to reed this, i like your posts you write a time ago about how to make a wordpress theme and it was really helpfully and so i think this will be a same good thing.
THX a lot!
@Mutiny Design - The book is definitely going to be free. But for my blog, I’m going to add more sponsors (more banners) because managing this site is my full time job now. I literally need the money to keep this blog going
cool! you are a very good professor… are you?
full time job? you dont have a job, do you? I assume you earn enough for a living from your blog then
You might be interested in Jing for tutorials, with this software you are able to make screenshots or videos and convert them to tutorials.
@ Small Potato
Sorry for the late reply. The PDF Options dialog box opens AFTER you saved your PDF document.
Hey SP! I was wondering how come you started the design with a width of 990 pixels? I always thought 800 pixels was the way to go to be safe on the resolution compatibility stuff.
Also, looking forward to this tutorial and your upcoming ones. Because of you I can now code and manage my own WordPress site. Thanks a ton bud.
Oh and is there a donate button on the site that I’m missing out on?
Mike
Scart - No, I try to be thorough. That’s all
Wai - Before blogging, I freelanced.
Milo - Thanks! Looks like an awesome tool. I’ll try to add a video to my tutorial.
Michael - For me, it doesn’t open at all. It simply saves. Thanks for following up on your original tip.
Michael Castilla - 800 doesn’t allow a lot of breathing room for a three column theme so I might as well break the 800 barrier. You could convert the 990 layout into a fixed-fluid width layout to fit in 800 for 800 users.
Well, I use Jing video for easy explanation for clients on the howto.
If you are using the writer of OpenOffice2.1, open your doc and go to file/export as pdf. A save dialog box will appear, name it, click save and your should get your pdf options dialog box then. Security is the last tab.
When Michael was trying to help me with this, it wasn’t working. I tried the pdf button and File > Export as PDF. Both didn’t work.
File > Export as PDF is giving me the options after saving now. Thanks Kellie.
I’m just glad you got it working
Looking forward to the next installment!
how to use two different sidebars like left siderbar and right sidebar?
which is loaded first when the page was loaded?
hmm it seems a piece of cake:) wait me with me own theme.
[…] Slice a WordPress Theme is part two of my e-book on how to create a WordPress theme from scratch. (Check out part one.) It shows you how to merge all layers and save the areas that you want to use as […]
I can’t wait for the ‘How to Code a Wordpress Theme’.
very good, is a useful ebook, I’m reading it. thanks
SP: Very true. It would be pretty hard getting in 3 columns with only 800 pixels to work with.
very nice.. thanks for the pdf!!!
[…] How to Design a WordPress Theme | WPDesigner Deel 1. (tags: wordpress theme tutorial) […]
I can’t find the link to download the tutorial.
Since you maintaining this blog as full time job and you’re expert on wordpress themes. Why not be a freelance on wordpress design ? at least, other source of income for you
thanks for the pdf.
it’s a great article, thank U!
[…] Alguns tutorias para wordpres, How to Design a WordPress Theme em http://www.wpdesigner.com/… […]
[…] nuevo ebook lanzado por Small Potato de Wp Designer, que consta de tres partes: How to Design a WordPress Theme, How to Slice a WordPress Theme, How to Code a WordPress […]
[…] leer el nuevo ebook lanzado por Small Potato -de Wp Designer- que consta de tres partes: How to Design a WordPress Theme, How to Slice a WordPress Theme y How to Code a WordPress Theme. Como verás, el idioma de este […]
Thanks for this feature. I look forward to the remaining 66% of the e-book
The rest of the book has been published.
[…] How to Design a WordPress Theme eBook […]
[…] tutorials may help: How to Design a WordPress Theme » WPDesigner How to Slice a WordPress Theme » WPDesigner Part 3 - How to Code a WordPress Theme » WPDesigner […]
[…] How to Design a WordPress Theme eBook […]
[…] How to Design a WordPress Theme - A PDF E-book that takes you through all of the steps. […]
[…] reading the new ebook launched by Small Potato - Wp Designer - which consists of three parts: How to Design a WordPress Theme How to Slice a WordPress Theme and How to Code a WordPress Theme. As you will see, the language of […]
Great, Thanks - I’m in the middle of redesigning my blog so this will come in very handy.
Recursos para diseñar un tema para Wordpress
Diseñar un tema para Wordpress no demanda conocer css y html solamente, sino tener una noción sobre el funcionamiento de los temas, la estructura de archivos, los scripts globales, script externos, etc. Pero para ayudarnos en esta tarea ya existen un…
When will the book be out? I have a PSD that matches my site perfectly. I could pay to have it coded but I like things better when I do them myself.
It’s already out. If you’re subscribed to Wpdesigner through google reader, you’ll find the link at the bottom of every post.
oh. I had subscribed with XML RSS feed and Yahoo when I first found this website. Google Reader doesn’t work on my computer, oh well.
Thanks, I’m trying to figure out how to customise Wordpress at the moment so I will refer to this.
Great, Thanks - I’m in the middle of redesigning my blog.
Thanks thanks and thanks again
It will be very useful as I am learning to create templates for WP. Many thanks.
[…] people back to your blog, not the design. Either chose one of many freely available themes, design your own or hire someone to design it for you. If you are low budget I would stick to a free theme, which […]
I want to convert my psd to into wordpress theme. Can u guide me ?
I would like to thank you for this awesome guide. I’ve downloaded all 3 of them. its very useful to me. thanks
[…] am currently reading Small Potatoe’s Tutorial on Designing a Word Press Theme. It’s a great piece of work so stop by and check it […]
I would like to thank you
When will the book be out? I have a PSD that matches my site perfectly.
It’s already out
[…] How to Design Wordpress Theme […]
[…] How to Design Wordpress Theme […]
[…] ein Tutorial in 3 Schritten als Ebook veröffentlicht wie man ein Wordpress Theme erstellen: - How to Design a WordPress Theme - How to Slice a WordPress Theme - Part 3 - How to Code a WordPress […]
Thanks alot this was of grest help to me, i’m on my way to being a better WP Designer already!
Great article and its free, can’t ask for anymore than that. There isn’t enough good wordpress theme articles around i find, but this is definitely a keeper..
Thanks
Looks good ….
It is good to see that you are giving it away. Once some bloggers have enough traffic, they start to go for the cash and cover their blog in banners.
[…] would recommend having a good read through this: WPDesigner ? How to Design a WordPress Theme It has everything you will need and more. This is how i educated myself. There is also a download […]
[…] What brings WordPress into the top ten is its cultivation of a community that surrounds it. A large part of the WordPress community is what I call the hybrid consumer. Some of the things that hybrid consumers do, especially when it comes to something like WordPress considering the fact its a free download, well they meet up with each other to talk about various topics related to WordPress and their blogs. The community provides the support for WordPress just do a google search on the phrase “WordPress” and you will find a capped number of 176,000,000 results of websites dedicated to discussing usage tips, and/or creating plug-ins and themes. […]
[…] http://www.wpdesigner.com/ Download: […]