Aug.13.2007
Part 3 - How to Code a WordPress Theme
- Filed under: Tutorials
I recently finished the third part of my free e-book on how to create a Wordpress theme from scratch. The third part is How to Code a WordPress Theme and I’m releasing it to beta-testers and subscribers. Yes, if you are subscribed to this blog’s RSS feed and are reading this from a feed reader then you will find a download link at the bottom of this post.
Subscribe to this blog’s feed.
Part 3 is similar to my WordPress theme tutorial series, but it covers a lot more of the CSS side of creating a WordPress theme and you end up with a better looking theme than the one in the tutorial series.
Please download it and give it a test run. Any feedback would be helpful. Additionally, check out Part 1 and Part 2.
Woot, 55 pages of how to code Wordpress. This gotta be the longest part so far.
For the dummy I use Sandbox’s dummy posts. Pretty good to test a theme. It got most (if not all) tags that can be used in Wordpress
I admit I just skimmed this and I’m only partway through my morning caffiene, but it looks good. Your workflow here is very similar to mine. One thing though - on our windows box Notepad is funky, so I snagged jEdit, which color-codes a few different things and I can have multiple files open in it at once.
I am going to use your dummy content tips, becasue I know for sure I always forget that on my local install. Usually when I’m almost done, I’ll test it out live somewhere, depending on what I made it for. (I have a couple WPMU installs as well as a few regular WP blogs.)
I also find your writing style flows well, is personable and easy to follow. Yes, I laughed. Well done, I give it A+.
Dang man. I was just skimming through the 3rd part and it already looks amazing. You’ve gotta be one of the best tutorial writers on the net.
I think it’s pretty cool that you do this kind of stuff, cause it helps people. Honestly, you’ve gotta put a donate button on your site!
I just downloaded safari today, it’a amazing…
and your theme is more beautiful than what I see in ff and ie !
Looks like I need to re-subscribe to WP’s feed!
Just browsed through it, SP. I’m positive this e-book will put you on track to accomplishing some of your long-term goals with this site and I’ll definitely have this on hand when I get to redesigning my blog.
I was confused when I couldn’t find a link to download this section, so I looked for it and made the educated guess to get the file - only now do I realize that there was no link on purpose - ah well
anyway, it looks really good, and I look forward to getting some time to sit down with it and go through my code page by page to really get an inventory of what all is doing what and tighten things up / make my design more my own
keep up the good work
Wai - This is the longest of all three parts.
Andrea - Thanks for the A+
Michael - I’ll put a donate button up soon hehe.
yinshang - Designs tend to look better in Safari because of how it displays the texts.
Freebies - Good thing I hid the download link in the feed lol.
Ian - Thanks Ian. I wanted to do more with this book, but due time constraints, I’ll just have to settle with what I have.
Brian - You might want to print some of it out first.
[…] Part 3 - How to Code a WordPress Theme | WPDesigner Deel 3. (tags: wordpress theme tutorial) Tags: none […]
Man you are awesome! Can’t wait for a complete version of your e-book!
I can`t find the download link
Can someone help me please?
Sonic - You need to subscribe to this blog’s feed and view this post through a feed reader like Google Reader to get the download link.
eww. I have to subscribe to download? hmm. No thanks.
I’ll check it out when there is a available link. I’m sure its well done. Congrats on your progress so far.
As far as Windows coding tools. I’d recommend:
intype: http://intype.info
and
e-texteditor: http://www.e-texteditor.com/
Both offer some great themes and syntax highlighting for pretty much any code type you are editing. I’d recommend e-texteditor first. Its a great implementation. Both are very similar to textmate for all you Mac people out there. Thus if you’ve used textmate I’m sure you know of snippets and both support snippets. Great time savers.
What a great tutorial. I’ve read the other two chapter and went straight into this one - you’ve done a great job. One small snag the index-oo1.txt file appears to be empty. Thanks again.
Apologies, it was empty in TextEdit but fine when I opened it in Dreamweaver.
Man you are dedicated to your craft. That’s excellent though, something for the readers to look forward to when you post!
poop i’m not subscribed.
But I shall do that!
[…] King, Tara @ GDB, Paul B, Aaron, Vivienne Quek, Calvin Warr, Marc Rapp, Charity, Brad, LaurenMarie, Small Potato, Matt Foster, Asgeir, Lene, Scot Smith and Sunny @ […]
Nice work SmallPotato. I used your online tutorial to get me going on Wordpress and now I’ve got a fully working theme that I’m happy with - except for the feeds.
I’m sure it will be a huge hit in ebook form - I read a comment from a user saying you should charge a very minimal fee, like £1, or $1. I’m sure you’d get a few hundred hits on it - the amount of people out there looking for this sort of thing.
Heck - why don’t you write a book!
mike
I’m sorry, I did not find the downloading url.
For now, you have to subscribe to this blog’s feed to get the link.
why you choose this way to share your link? I donot often use rss.
but I got it.
I’m trying now.
@yinshang
Subscribe to the feed you will not be regretful.
The ebook is totally worth subscribing for. (especially part 3) Thanks for all of this SP!
I’m glad you liked it. Thanks for recommending the feed subscription.
[…] 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 libro es el inglés; pero es muy sencillo de entender, asique con […]
[…] de citit bloguri, am fost “ocupat” cu cartea lui Small Potato de la WPdesigner - “How to code a WordPress Theme” si cu o nunta […]
nice work
Great work
Many are interested in creating their own theme and you’ve just help them with half the battle. Thanks so much! I hope you keep up with your designs 
Thanks Susan
[…] SP’s writing style has an informal tone which readers can relate to. I’ve been reading Part 3 of his free ebook and there were a couple things I thought that made reading his ebook an enjoyable […]
Cool! Great tutorial SP. I like your new sidebar.
With the tutorial once we end up with the theme that looks a lot similar to the one you use because one uses the adjustments you asked and the color combination etc, is one allowed to release that theme under his own name??? I mean its a totally self made(although aided) work.
Care to reply?
Sure. There’s no reason why you can’t release your own creation based on an existing theme licensed under GPL. I used the design of my Wrath theme for the tutorial and the Wrath theme was released under the GPL license.
GPL? am not really quite sure about it but since the design will be too much similar to your Wrath, won’t you have any problem? Can a little or slight adjustment have you in no problem?
That’s what i need to know, since i’ve come up with one similar design that you taught in photoshop and i did some extra adjustments to the other design as a copy and want to release with no Footer links to your site… let me know!
Go ahead.
LOL~~ Seems more like you didn’t like the idea;)
Thanks for the tutorial though!
Some of my work is released for public use and modification. I’m okay with that, but it sounds like you’re making a few changes simply to stamp your name on it.
I’m okay with that, but not very happy about it.
Very nice series of tutorials. I find the 3rd and last one most useful since I am quite used to Photoshop already, and slicing is quite easy. Thanks for putting this kind of tutorial online!
One suggestion for text editors, for the Mac there is an app called Text Wrangler which is quite good and it’s free (I think they accept donations). Whoever is interested can give it a try.
I also recently installed Wordpress recently on my Mac with MAMP (following some simple instructions from another blog). Will try out the tutorial with Wordpress.
[…] Part 1: How to Design a WordPress Theme Part 2: How to Slice a Wordpress Theme Part 3: How to Code a WordPress Theme […]
Hey SP,
Since your so generous, can I distribute your tutorials on my website?
You can put it up for download, but you can’t change anything about it. Why not just link to it? As for reposting the tutorials as blog posts, no.
[…] series detailing the entire process of coding a theme on my blog. Also, I recently released an ebook version that teaches you how to create a WordPress theme from scratch. But, remember that learning the […]
I’ve subscribed to a RSS feed but I don’t know how to get or read a part 3.
Somebody can help me????
tks
When you log into you RSS reader to read the Wpdesigner feed, the download link is the at the bottom of each post.
I tried what you said, SP, but for some reason can’t make it work. I’m reading the feed through myYahoo. A click on the headlines brings me back to your page, but no link that I can see. I can’t access this post directly through the feedreader as it only displays the last 30 posts, and I can’t see the link on the bottom of any other post.
Sorry if I’m asking something dumb, this is the first time I’m using an RSS feed.
That’s alright. The link is at the bottom of every post. If you’re able to read a post through a feed reader, you should be able to grab the link.
If Yahoo is not working for you, try Google. Google Reader definitely works.
Thanks so much, that worked! The problem was that yahoo sent me back to your page, while google actually reads off your page.
Eager to dive in, since I already enjoyed your first tutorial and can’t wait to refresh and expand what I learned!
[…] - 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 this book is the English ; But it is very easy to understand, so […]
Thanks for your tutorial. I really appreciate it!
Glad you liked it Leo!
Thanks for all of this SP
Hi,
I just scubscribed to the feed ,but it onl;y goes back to Nov 5, so I can’t see this post and get part 3 - help!
MarkF
okay - I got it!
Thanks SP!
MarkF
I need this ebook! this post doesnt show up in my RSS because it only goes up to five.
Shireen - This book is only an updated version. If you went through the original tutorials series already, don’t stress about this one.
oh ok, so I basically just have to arrange my stylesheet so that everything fits onto the psd templates, aye.
Just thought I would say if you had time it would be nice if you made a GIMP version of the series.
where si the third part? the link for the download doesn’t lead anywhere…
help me
The third part can be downloaded if you are subscribed to Wpdesigner’s rss feed through a RSS reader like Google Reader. The download link is at the bottom of every rss feed post.
I am subscribed but when i click that download link it redirects to your home page…
btw, GREAT job!
Sorry about that Iani. You can paste the download link in your browser to download it. I recently turned on hot link protection because too many sites were eating up my bandwidth.
OK, it worked now
Thanks again for your work!
Greetings from Romania
Hi! I subscribed to your RSS but I can’t find this post in the RSS feed. Maybe it’s to old? How could I resolve this problem? I am really interested in this! It would take a lot of time for me to get the coding right by myself.
Thanks.
If you’re using a feed reader like Google Reader, you’ll be able to see the link. Otherwise, follow my old tutorial series here
I did it! I used google reader and now I downloaded your last part of the ebook. I’ll get to reading it right away
I have one question though, maybe offtopic but I’m curious. Is there any way to make Live Demos of my templates if I don’t have a paid web hosting?
Thanks for all your work
Live demos that only you can see because they’re offline. Look for a plugin. There are several preview plugins on WordPress.org.
hey, where’s the download link? I tried viewing your site from the Google feed reader but unfortunately, I can’t find this post….
Hi there Small Potato!
I want to say two things:
1. Thanks for posting this great tutorials, they really are top notch. I have learnes o much from these.
2. I have a problem that worries me, everything works great when I code, but if y define for example an image in STYLE.CSS it does not appear in the final blog (I’m testing locally under Windows Vista)
The code I’ve typed is like this:
#header{
float: left;
width: 900 px;
background-image: url(/images/bg_gradient.gif);
background-repeat: repeat-x;
}
Is there something I’ve done wrong or?…
thank you!
make sure you’re linking to the right image?
hmm I made it work by uploading the images into my website via FTP so it was a direct link like: http://www.lfocstudios.net/bg_gradient.gif
I’ll see how it goes.. Thanks
it wont let me get anything older than nov 27 on posts… and thats with 3 different readers
iflo - it’s under every post. try google reader.
This may be a daft question but wheres part 2? I can’t seem to locate it anywhere ….
you don’t need part 2. part 2 is bogus
OMG! Are you for real? The tutorial is fabulous. Congrats!
Just wanted to warn you that in the code you mention and I think it should be . At least that’s how I did it and it went fine. I must warn you though that this is the first time I’ve touched PHP.
Also, I see you tend to use shorthand CSS, but you don’t do it in the font properties. It would be nice if you would “teach” the readers that they can also do font:bold 12px Verdana; instead of font-size:12px; font-weight:bold; font-family:Verdana.
Nevertheless, thank you for the work you’ve put in this tutorial. It’s much appreciated.
Thanks Yaili - Glad you liked it. I didn’t cover all the shorthand CSS because I wanted to keep the tutorial simple. Too many techniques and methods at one time can become overwhelming.
I guess the code I typed before didn’t show up, so the sentence I wrote makes no sense at all
I meant to tell you that on page 23, when you say to insert the code with “wp_link_page” in it, and then in page 24, when you show the actual code (and throughout the whole tutorial) I think it’s missing the php with the question mark before it (inside the entry-content div), so you should correct that, in case someone just copies the pdf text.
Thanks Yaili. I fixed it.
Is this still available for download? If so where can I get my greasy little paws on it?
Thanks!
By the way your tuts are great!
If you’re using a feed reader like Google Reader, you’ll be able to find the link under every post.
Oi! Thanks - I was using a different reader. I got it now though.
Read all 3 parts and I think they are great. It is really nice you decided to publish them for free
I’ve subscribed, but I don’t see the post in the RSS, am I too late?
Sorry, apparently I just can’t read… I just found it..
Thanks so very much for these wonderful resources!
im currently looking into working with wordpress for a project i have been working on, so this will be added help, thanks
I think I found the link. My question is am suppose to have a comment code file, with index and images? is that the “how to code file?
Thank you so much! your site is an inspiration!!!
Where is the link?
I subscribed, but all I got was a couple of months of back articles. Is the e-book no longer available, and if so, why is it still being used to promote feed subscription?
If you add the RSS feed for the site to a feed reader, like Google Reader, it’ll display a line of text not shown above which includes the link to download the coding ebook.
Hey… I am subscribed to the blog, but somehow missed this post. I want to download this part of the ebook, but do not see any download links. Can you send it to me, or direct me to a link to download?
… I’ll try to help by saying this.. ^^;; if you use Opera browser, just subscribe, a tab will pop up, there will be an introduction with the link to dl the file XD Just.. read [?] >_<
Well, I didn’t really read the intructions.. [got lazy so just saved the psd when i went to step 15] but i did do step 2 :3 and working on step 3… Hope I can do this O_O
[…] Download: http://www.wpdesigner.com/ […]