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/themes folder. Open thestyle.css style 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 Editorsin 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 yourstyle 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.
If you more quires contact us