WordPress.org

Ready to get started?Download WordPress

Forums

How do YOU start a theme from scratch? Do you "slice"? What programs u use? (10 posts)

  1. Dgold
    Member
    Posted 5 years ago #

    Hello! I'm asking for advice and ideas. It's a conversation, to help mid-level WP users who want to improve their skill set. I think different designers would have different answers, so it's not 1 right answer.

    The best advice for starting a new theme is usually "find a theme that looks kind of like you want, and start changing it."

    Now I want to do something different. I want to start building a theme from the ground-up. I will look at other themes' CSS, but I want to start with NOTHING and make it myself. I've got a simple layout in mind, for my first theme. It's actually more simple than most blog layouts. I just want to create it myself, and see how this would be done.

    My question is really, what would be your STEP ONE if you're designing a website layout from scratch?

    How would you BEGIN a website design (whether for WordPress or not)?

    Do you use Photoshop and ImageReady, and then "slice" it? I've never done that, but I have heard designers talk about that. Do you use Dreamweaver, or Dreamweaver with the ThemeDreamer plugin that helps it work with WP themes? Or do you start writing CSS from scratch, writing up new divs and define them with absolute and relative positioning? Some other method? Do tell!

  2. whooami
    Member
    Posted 5 years ago #

    i use notepad. seriously. and thats where I start.

  3. Technokinetics
    Member
    Posted 5 years ago #

    Graphic design in FireWorks, then code as static XHTML / CSS in NotePad++, then add the PHP to make it into a WP theme. Three distinct stages.

    - Tim

  4. JonMeek
    Member
    Posted 5 years ago #

    I usually start with a basic layout in Illustrator and/or Photoshop, and then slice it up manually. By this I mean I don't use the Slice Tool, I just create some guides and then crop the parts and "Save for Web" as separate files.

    Then I go to Dreamweaver and do the XHTML/CSS layout to get the basic design nailed down.

    Recently I have been creating child themes, that are based on other themes such as Sandbox or Thematic. In that case all that's needed is to create a custom CSS file that manages the layout.

    In the past to start from scratch, one simple way that I have done things is to still start with a theme that was close to what I wanted, at least in terms of functionality such as widgets, columns, etc. That way you can grab the various template tags that you need and insert them into your homemade temple files. Then if you need more template tags, it's off to the Developer Docs.

    To create the template files, just take the original HTML and break it up into the required parts, header, footer, etc. Then add the template tags extracted from a theme or just from the Docs.

    That is a very quick description. BTW, I really love creating WP themes, and I guess that makes me a geek! Woohoo!

    Jon

  5. Steveorevo
    Member
    Posted 5 years ago #

    DW + ThemeDreamer + WP Themer Kit for a jump start. Its virtually from scratch at that point but gets you there pretty darn fast instead of parsing files for hours. Lets you jump into design mode right away, before you even upload it to a real web server. Here's the goods:

    http://www.wpthemerkit.com/

    http://www.themedreamer.com

  6. miniimage
    Member
    Posted 5 years ago #

    Use Notepad++ and gets some codes from the comments.php and index.php from the Kubrick theme. It's actually really easy.

  7. csleh
    Member
    Posted 5 years ago #

    Design in Illustrator, then print out with notes on widths, colors. Layout in dreamweaver. Then I use MAMP on my mac to make the theme offline. Once it's ready, upload and tweak for category names, etc.

  8. hooknose
    Member
    Posted 5 years ago #

    There's a difference between a regular or static website layout and a WP theme where you have to integrate WP PHP functions into the design. As Technokinetics said, there are different stages - there's the visual layout and there's the functional PHP.

    For the visual design or non-WP websites (I only did one WP theme so far) I usually start from the HTML + CSS using an HTML editor (there are many good free ones I used over the years - NotePad++, Arachnophilia, HTMLKit and now I'm going to give Nvu a try). If the graphics are more complex or need more experimenting I start with Photoshop. It depends on the type of website - if the emphasis is on usability, like an informational website, I start with the code, if the emphasis is on look I may start with the graphics.

    If I start from the code my first step is to decide what basic layout or structure best fits the specific requirements of the website - the header, footer, vertical or horizontal bars, if I need boxes and tables, going to use fixed width or make it flexible (if you use fixed width better make it suitable also for 800x600 resolution since some people still use it), what colors best suit my purpose. I create the basic layout and then work on the details.

    If I start from the graphics it's usually because I have some graphical elements in mind that I'm not sure what I'm going to do with or because it's a complex graphical design. So I open Photoshop, create a 1024x800 blank image (800 or more because I want to see what it looks like when I scroll) and start moving my graphical elements around till I get a layout I'm happy with, save the parts that need to be saved as images and recreate the rest with HTML.

    For the one WP theme I did so far, first I created the visual layout and then moved the CSS plus some HTML into a WP sandbox theme (Ultimate Diva Sandbox, but the sandbox theme you can find here in the Themes section might be a better choice if you're designing for WP 2.7, except you have to place a visible link to the authors in the footer). With a sandbox you mostly have to edit just the CSS, at worst just make some minimal edits in the PHP.

    Now I'm trying to work on a website that will use WP more as a CMS and I need a theme with custom functionality, so I can't use a sandbox. As I'm hoping to use it for more than one website I decided to create a sandbox for myself, that is a theme that will have all the functionality I need with the most minimal design possible, so later on I can integrate the same PHP with different designs. I think it's a good thing to do also for regular WP themes, but then you have to dive into the documentation here and look into functioning 2.7 themes to see how everything works, which I don't recommend for your first theme.

    If you're going to design a WP theme from scratch some HTML tags might be more usable than others. For the sidebar it's better to use unordered list (ul and li's) than div's because that's WP default.

    The software Steveorevo mentioned look interesting, maybe I'll try them. Thanks :-)

  9. mores
    Member
    Posted 5 years ago #

    I found it to be a lot easier to design a theme from scratch than change an existing theme.
    Most of the time you try to decipher the code, figure out where some thing is styled etc.

    So the easiest is photoshop -> html+css -> php

    Once you get the hang of it, it's real simple and you can concentrate on the hard bits like custom functions, custom plugins etc.

    I'm glad to see that WordPress is moving a way from blog-only and more and more sites look "normal", as in magazine-style, or just page-based, without the "blog" or "news".

  10. hooknose
    Member
    Posted 5 years ago #

    I'm glad to see that WordPress is moving a way from blog-only and more and more sites look "normal", as in magazine-style, or just page-based, without the "blog" or "news".

    I think that when you need just a simple website with "static" pages and some kind of news/blog/articles section for just a few authors then you don't need all the complexity of systems like Joomla, then WordPress provides an excellent solution that is simpler to set up and learn how to use.

Topic Closed

This topic has been closed to new replies.

About this Topic