A lot of people are martyrs and want to get their hands in the dirt and design their own WordPress Theme from scratch. That’s okay. I did that, and then got smarter. Let’s start with the smarter choice.
- First, find a WordPress Theme architecture that you like, be it one or two sidebars, or no header, or whatever you want. Forget about the colors, graphics, and fonts. Just concentrate on the layout. If nothing pleases you, then I recommend you try the new Sandbox Theme, another great way to start your WordPress Theme from scratch.
- Download a couple of Themes you like and put them through their paces on your test site. Do you like the way the single post looks different from the front page, category, and archive pages? If not, try another. If yes, then it’s time to start to work.
- Copy your chosen Theme to a new folder with a different folder name under your
wp-content/themesfolder. Open thestyle.cssstyle sheet file in a Text Editor and rename the header section at the top to something different, like “My Test Theme” or “Ripping and Tearing”. Just give it a different name. Depending upon how much you will end up modifying the Theme, you can either leave the author credit inside or not, it’s up to you and the copyright terms of the WordPress Theme.
Upload the new Theme Folder to your website. From within the Administration Panels, under Presentation, find the new Theme and activate it. You now have a test Theme to work with.
If you aren’t worried about bandwidth on your website or your Internet connection, you can style your site right on the Internet. If you are worried, then use the “Sandbox” method.
Get familiar with your site’s layout and structure by checking the source code and the style sheet, and begin your modifications one at a time.
I recommend that you backup your test Theme folder frequently as you go, in case you make a big mess and you need to go back, but not to start over.
Determined to Start from Total Scratch
If you are determined to redesign your WordPress Theme from scratch, you probably already know how to do this. Still, I’m here to help WordPress users and so here are some things you need to know if you are going to design your WordPress Theme from scratch.
One of the best tools recently developed for web page designers is found in the Firefox Internet Browser. Called the Firefox Web Developer Extension, it allows amazing WYSIWYG on the screen live editing of the style sheets of any web page. And a whole lot more. You can learn more about how to use this to style your WordPress Themes and find your problem CSS troublemakers in the article here on The Secret of Successful Editing of WordPress Themes.
You will also need a good text editor to edit the WordPress Templates. For a list of those recommended by WordPress users, see Text Editors in the WordPress Codex.
Also, seriously consider using the “Sandbox” method for designing your style sheet and Theme.
Here is a very simple step-by-step process to start to design your own WordPress Theme from scratch.
- Using either the Default or Classic WordPress Themes, generate a test post in your browser.
Copy the ID and class selectors and HTML tags from the top to the bottom of the site into a Text Editor page. This is the list of the architectural features you can change, also known as your style sheet. You can also find a fairly complete listing of all the styles in most WordPress Themes on the WordPress Codex in Site Architecture 1.5.
- If necessary, add selectors to the sections lacking them, like each of the template tags that generate different lists within the sidebar and/or footer. These need to be added to the various modular template files within the test Theme folder.
- Different tags may appear on different views of your test Theme. Be sure and check the pages generated by the front page, category, archives, search, single, and Page views to find more selectors and tags.
- When you have your list finished, then save it and call it
style.css, replacing the style sheet that came with the Theme.
- Start applying styles to the various structural HTML tags, ID and class selectors within the
style.css.
WordPress Theme Design Help
Here is a list of articles and resources you may find helpful when designing your WordPress Theme, from scratch or just for tweaking.
- WordPress Lessons
- Finding Your CSS Styles
- WordPress Blog Design and Layout
- Using WordPress Themes
- WordPress CSS Information and Techniques
- Creating individual Pages
- Stepping Into Template
- Template Files
- Stepping Into Template Tags
- Template Tags
- Using WordPress Themes
- Developing WordPress Themes
- Template Tag Layout in simple to read form
- The Loop in Action
- Anatomy of a WordPress Theme
- WordPress Templates and the is functions
- Secrets of WordPress Themeing
- Secrets of WordPress Themeing Part 2
- 10 Steps to Valid HTML
- Validating the Code Behind the Page
- Meet Them - Benefits of Compliance with Web Standards
- My WordPress Theme is Broken
- Secrets of Successful Editing of WordPress Themes
- Designing a WordPress Theme - Building a Sandbox
- WordPress Tips and Tricks for Style Sheets
- WordPress Tips and Tricks for Template Files
- Attention WordPress Theme Designers: Designing Themes for WordPressMU
- Designing a WordPress Theme - Building a Sandbox
- Choosing a WordPress Theme
- Starting With a Purpose and a Plan
- What’s the Difference Between a Genealogy Blog and a Normal Blog?
- Who, What, Where, and How Questions for the Plan
- Determining What Features I Want in My Blog
- The Blog Budget - How Much Does a Blog Cost?
- Building a Genealogy Blog: The Fast Method
- Choosing a Blog Title and Domain Name and URL
- Blog Contributors - Wanted Dead or Alive

Digg |
Del.icio.us |
BlinkList |
Furl
Spurl |
Reddit |
Simpy |
RawSugar
Site Search Tags: blog building, developing a blog, blog development, wordpress theme, wordpress theme from scratch, designing a wordpress theme, wordpress theme design, wordpress theme development, wordpress css, wordpress styles, wordpress design, wordpress themes, wordpress help, wordpress tips, web design
Copyright Lorelle VanFossen, member of the 9Rules Network
Subscribe











32 Comments
Wow! Amazing post!
There’s something wrong with a link above:
Meet Them - Benefits of Compliance with Web Standards
There’s a title, but no href.
This post helps a lot… Thanks!
I’m currently setting up a new site using wordpress software. This is exactly what I’m looking for in helping me start from scratch (or working with the tweaking, but even starting from scratch is more useful to understand functions).
Great post, it’ll be very helpful!
It was an amazing read.
Thanks!
Its not that hard to do, I matched my site design with a custom made template in about an hour.
I really dont know why the default themes are so complicated! From what people have said to me it puts them off wordpress :S It certainly used to confuse the hell out of me!
I am already in the process of developing my own custom WordPress theme so your resource list sure is going to come in handy. Bookmarked straight away for future reference.
An excellent resource, thanks Lorelle!
If those new to theming are looking for great color schemes and swatches, might want to check out Adobe Kuler. It’s free, easy, and you can make it generate some incredible complementary color combinations. I found a detailed video tutorial on how to use Kuler you might want to read.
Thanks, I was looking for something like this. I’ll post again if I manage to get around to it.
i love what you’ve done. thanks for taking the time to put this together =)
I was over at WP site and couldn’t find any themes, is there any WP themes viewer any where?!
Thanks
WordPress Themes are found on the WordPress Theme Viewer.
Thanks thanks thanks thanks SO SO MUCH
I love it - and hopefully gonna make a nice theme soon
Hey I did a search for this very subject and found you. Great site BTW. I’m looking for a nice foundation for a three column layout. Is there any I could find that do not have tons of code I need to sift through. I’m really looking for the foundation bare nakid code with no other styling other than whats needed for wordpress to work so I could make a clean design.
Any assistance would be appreciated.
Sean
All right then … can anyone tell me please, how can I get content from themes.wordpress.net ? I’m working at this moment on my theme but how can I be sure that I did all styles.
Cheers - Matt.
I’m not sure I understand your question. To download a Theme from the Themes Viewer, simply download it. To check to see if you styled everything you want styled, and not everything needs to be styled, look. Check out the design yourself to see if each of the various page views “look” like you want them to look.
Thank you so much - I’ve been looking for this info for days (just goes to show how great Google search really is), and I’ve made a complete mess of editing my theme. I’d almost given up on the idea of being able to have a decent wordpress theme ever. Now, I’m going to print out your instructions. Thank you.
Very nice detail tutorial
Creating individual Pages is the most interesting from all this … Thanks.
Useful information. Good website!
can i do it for blogger also?
@ Rules:
It’s HTML. It will work with anything web design.
This was a very helpful tutorial. Really appreciate you taking the time to share this information with new wp designers.
I want to thank you for being such a valuable resource for WordPress tips, especially with the many tips and links on how to create a theme for your blog. I just created my first WordPress theme, and what I’ve read here (and linked to from here) was very helpful. My theme is not great, I’m no graphic artist or professional designer, but I am feeling very satisfied for having done it myself.
Thanks again!
@ Takuan Daikon:
You are welcome. Remember, a blog is always in a state of evolution and fixing. It’s never done.
Good luck!
Does anybody know if there is a way to integrate JEDIT into firefox CSS Editor. That way you would get the visual beauty of JEDIT combined with “on the fly” CSS editing add-on of firefox.
hiiii
thanks for sharing
i need it ………… !!
as usual, great article man.
Now i have so much reference for wordpress. I’m newbie with wordpress. Please see my blog and give your comment about my blog.
Thanks
Deden from indonesia
Wow! This is the stuff I need for my new blog!
I have bookmarked your blog already.
Thank you so much again!
Can I add my shameless plug? I designed a plugin for Dreamweaver that ‘enlightens Dw’ about how to render WordPress theme template tags. The result is a WYSIWYG Design View for WordPress themes. You can navigate code visually just by clicking in Design View.
Its a lightweight extension, works offline, no server needed. It also provides code hints in Dw’s Code View. Its great for making minute changes without having to go rounds with a server. Reflects CSS changes and most template tag parameters instantly in Design View. Since Design View is just a layout approximation it doesn’t beat a server+browser but it sure is faster to get stuff done. ’specially for those that are visual like me!
[...] Designing WordPress themes [...]
86 Trackbacks/Pingbacks
[...] If you are into tweaking your WordPress Theme or designing one from scratch, here are some HTML/XHTML and CSS Cheat Sheets you might want to add to your resources. [...]
[...] Designing a WordPress Theme From Scratch [...]
[...] Designing A WordPress Theme From Scratch [...]
[...] In my articles on Designing a WordPress Theme from Scratch and Designing a WordPress Theme - Building a Sandbox, as well as Choosing a WordPress Theme, I show you how you can choose a structure for your WordPress Theme and then change the look to create a totally new style for your blog or website. [...]
[...] If you are thinking of designing a WordPress Theme from scratch, or just tweaking your website design and layout, take time to go through this article very carefully as you will learn a lot about the struggles involved in website layouts and browser bugs. [...]
[...] Как создавать темы от А до Я. [...]
[...] I am starting to design a new theme (despite the fact that I really should wait until the semester is over) and I came across a good list of cheat sheets so I thought I would link to them. Also on Lorelle on WordPress is sound advice for designing a theme from scratch. [...]
[...] http://lorelle.wordpress.com/2005/09/28/designing-a-wordpress-theme-from-scratch/ [...]
[...] Ce tutoriel (en EN) explique les bases pour créer ou modifier un theme WordPress. Il y est notament indiqué qu’une extension Firefox permet l’édition “à la volée” du fichier css, d’après ce que j’ai compris. Elle s’appelle “Firefox Web Developper Extension“. [...]
[...] Designing a WordPress Theme From Scratch [...]
[...] Designing a WordPress Theme From Scratch [...]
[...] Ready? Click to start! Design, theme, wordpress [...]
[...] Designing a WordPress Theme From Scratch « Lorelle on WordPress [...]
Designing a WordPress Theme From Scratch
step by step how to build your own wordpress theme
[...] Determined to start your own WordPress theme? This is a guide to designing an entire WordPress theme from scratch. All the resources and tools that you need are outlined and linked.read more | digg story [...]
[...] Determined to start your own WordPress theme? This is a guide to designing an entire WordPress theme from scratch. All the resources and tools that you need are outlined and linked.read more | digg story [...]
[...] Designing a WordPress Theme From Scratch « Lorelle on WordPress How to design your own WordPress theme. (tags: wordpress design tutorial css blog web) [...]
[...] Designing a WordPress Theme From Scratch At forstaa WP themes, part 2 (tags: howto tutorial wordpress theme) [...]
[...] Designing WordPress themes [...]
[...] Designing a WordPress Theme From Scratch Lorelle on WordPress (tags: blog blogs design howto wordpress webdev webdesign web tutorials tutorial html css) [...]
[...] [...]
[...] Designing a WordPress Theme From Scratch « Lorelle on WordPress (tags: wordpress tutorial theme) [...]
[...] Designing a WordPress Theme From Scratch « Lorelle on WordPress (tags: wordpress tutorial theme) [...]
[...] Designing a WordPress Theme From Scratch « Lorelle on WordPress Looks like time consuming fun and creativity! (tags: art articles blog design wordpress tutorial css create web tutorials howto development) [...]
[...] Designing a WordPress Theme From Scratch « Lorelle on WordPress A lot of people are martyrs and want to get their hands in the dirt and design their own WordPress Theme from scratch. That’s okay. I did that, and then got smarter. Let’s start with the smarter choice. (tags: Blog) [...]
[...] Designing a WordPress Theme From Scratch « Lorelle on WordPress how to “adjust” someone else’s theme thus saving you time (tags: wordpress tutorial) [...]
[...] Designing a WordPress Theme From Scratch (tags: wordpress design CSS tutorial) Tags:General Posted November 24th, 2006 by José Marques, filed under del.icio.us. Loading… [...]
[...] Designing a WordPress Theme From Scratch – navrhovanie Wordpres témy úplne od začiatku [...]
[...] Determined to start your own WordPress theme? This is a guide to designing an entire WordPress theme from scratch. All the resources and tools that you need are outlined and linked.read more | digg story [...]
[...] Designing a WordPress Theme From Scratch « Lorelle on WordPress A lot of people are martyrs and want to get their hands in the dirt and design their own WordPress Theme from scratch. That’s okay. I did that, and then got smarter. Let’s start with the smarter choice. (tags: WordPress design tutorial css blog) [...]
[...] Diseñando un tema para WordPress desde el principio (inglés) [...]
[...] Designing a WordPress Theme From Scratch « Lorelle on WordPress (tags: wordpress howto webdesign) [...]
[...] Useful more for the list of resources at the end of the post but still a good, basic overview for WordPress n00bs - Link [...]
[...] If you’re interested in creating a custom wordpress template for your personal or business blog you should check out this reference. It’s not an easy road, but this tutorial will put you on the right path better than any I’ve seen. blogs design internet wordpress [...]
Designing a WordPress Theme From Scratch
[...] Designing a WordPress Theme From Scratch « Lorelle on WordPress (tags: Blog WordPress Theme) Share and Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages. [...]
[...] les conseils glanés ça et là j’ai commencé par trouver un thème de base (pour wordpress en l’occurrence) [...]
[...] Designing a WordPress Theme From Scratch « Lorelle on WordPress (tags: wordpress design templates) [...]
[...] Designing a WordPress Theme From Scratch Basic Tips and a massive list of theme design help. [...]
[...] Designing a WordPress Theme From Scratch A lot of people are martyrs and want to get their hands in the dirt and design their own WordPress Theme from scratch. That’s okay. I did that, and then got smarter. Let’s start with the smarter choice. [...]
[...] Designing a WordPress Theme From Scratch « Lorelle on WordPress How to and list of links on designing wordpress theme (tags: blogging) [...]
[...] WordPress Theme Design Help Nützliche Tools, Tutorials und Werkzeuge zur Erstellung von WordPress Themes. Popularity: 21% [...]
[...] Designing a WordPress Theme From Scratch [...]
[...] Designing a WordPress Theme From Scratch « Lorelle on WordPress (tags: wordpress design tutorial blog webdesign tutorials template howto tool tips) [...]
[...] Designing a WordPress Theme From Scratch Posted by Smashing Magazine Filed in Lists Tags: free, Templates, themes, Tutorials, web 2.0, WordPress 264 Responses to “83 Beautiful WordPress Themes You (Probably) Haven’t Seen” [...]
[...] Lorelle on WordPress cre8d design and of course: WordPress’ Tutorials [...]
[...] Designing a WordPress Theme From Scratch [...]
[...] Designing a WordPress Theme From Scratch « Lorelle on WordPress (tags: blog css design webdesign) [...]
[...] Designing a WordPress Theme From Scratch [...]
[...] Designing a WordPress Theme from Scratch [...]
[...] Alternatively, if you’re really keen and know a bit of php (the language that gets used to communicate with the WordPress database) then why not try writing one from scratch yourself. [...]
[...] Designing a WordPress Theme From Scratch [...]
[...] Designing a WordPress Theme From Scratch « Lorelle on WordPress (tags: blog cms wordpress howto tutorial) This entry was written by thund3rbox and posted on June 13, 2007 at 12:23 am and filed under . Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL. « Site launch: Dead.net - Official Site of the Grateful Dead [...]
[...] NIC nie znalazłeś. Nic co zaspokoiłoby głód graficznego wyróżnienia się. Co z tym robić? lorelle proponuje konstrukcję własnego laya na podstawie już istniejących, lub dla bardziej [...]
[...] Designing a WordPress Theme From Scratch « Lorelle on WordPress [...]
[...] Designing a WordPress Theme From Scratch [...]
[...] Lorelle on WordPress [...]
مسابقه وردپرس - 2
همانطور كه قبلا اعلام شد، قرار بر اين است تا يك مسابقه برای ترجمه قالبهای وردپرس به زبان فارسي برگزار گردد.شرايط مسابقه را ميتوانيد در اي…
[...] نوشتن يك قالب برای وردپرس را از پايه ياد بگيرند حتما اين لينك را مطالعه كنند. Designed By N.Design Studio - Customized by [...]
[...] Lorell on WordPress. (Has tons of links there as well). If you’re still vascillating between designing your own or remain [...]
[...] Just in case you’re wondering, this new design isn’t a homebrew. Moving content and other stuff from the old (movable type powered) site to this new platform was hard enough without me having to challenge myself to come up with a design and learn how to create a wordpress theme from scratch. [...]
[...] Designing a WordPress Theme From Scratch A lot of people are martyrs and want to get their hands in the dirt and design their own WordPress Theme from scratch. That’s okay. I did that, and then got smarter. Let’s start with the smarter choice. [...]
[...] Designing a WordPress Theme From Scratch - The authority on WordPress, Lorelle, gives you her own list of theme creating resources. [...]
[...] Designing a WordPress Theme From Scratch « Lorelle on WordPress [...]
[...] Designing a WordPress Theme From Scratch [...]
[...] proper book on the subject and failed to find anything that seemed sensible. But then I discovered Lorelle on WordPress - a great blog post that answered my [...]
[...] Designing A WordPress Theme From Scratch How to create a theme from scratch. [...]
[...] Read the rest of this great post here [...]
[...] you want to read more on designing WordPress theme, I suggest you read Lorelle’s article Desiging a WordPress Theme [...]
[...] Designing a WordPress Theme From Scratch [...]
[...] fun it is all at the same time.If you don’t know what CSS or maybe you’re interested in designing your own wordpress them from scratch then I suggest you pop over to Lorelle’s blog. and having a peek see at the [...]
[...] code, I think my web design skills are coming back. I’m also getting a little help from Lorelle and DevGuru. Bear with me though. If it looks screwy at some point, I broke something and will have [...]
[...] Designing a WordPress Theme From Scratch [...]
[...] Link: Lorelle [...]
[...] I found this article and I want to read it. I am seeing more and more sites that use WordPress as not only their blog, but the main site.http://lorelle.wordpress.com/2005/09/28/designing-a-wordpress-theme-from-scratch/ [...]
[...] How To Design A Theme From Scratch [...]
[...] article worth looking at is at Lorelle on WordPresswhere she gives a brief summary of designing a WordPress theme from scratch. She mentions the [...]
[...] Designing a WordPress Theme From Scratch at Lorelle on WordPress [...]
[...] Designing a WordPress theme from scratch [...]
[...] Designing A WordPress Theme From Scratch by Lorelle On WordPress [...]
[...] January 2007, Smashing Magazine wrote a best of January 2007 list featuring my article Designing a WordPress Theme From Scratch, the 67th post published on this blog. What a fantastic way to start off my new year with a gift [...]
[...] Here is “How to design a WordPress Theme from scratch” [...]
[...] http://lorelle.wordpress.com/2005/09/28/designing-a-wordpress-theme-from-scratch/ [...]
[...] Designing a WordPress Theme From Scratch [...]
[...] Slowly I was getting more and more experience, and yet again I was unsatisfied with my site. The culprit this time was the theme, which turned out to be really messy as far as coding is concerned. My knowledge of coding html and css had grown, but wasn’t up there to really understand it. Yet I got the idea in my mind to design a theme from scratch (even after I found Lorelle advising against it). [...]
[...] (en) Designing a WordPress Theme From Scratch - Lorelle VanFossen - Lorelle on WordPress, [...]
Post a Comment