Question about PSD / WP

9 replies
  • WEB DESIGN
  • |
Hey guys,
I have some experience with modifying WP themes. I usually take a theme and remove / add some basic things. So I can personally do WP websites with custom header, footer, changing where content is etc. Problem is I usually dislike their look since they still look like blogs (duh, I know).

I hear about custom themes all the time and I don't get it 100% so if someone could explain real quick, it would be much appreciated. I looked for some guides on Google but they more technical and don't really explain the process.

I know it involves using photoshop to do some graphics and then coding it in html in Wordpress, but do you do that from a fresh WP installation? Do you modify a theme?

IE: I would like to build a website that looks somewhat like http://www.housetopmedia.com . I know they used WP but it doesn't look like a blog. It also doesn't look like a regular theme that would have been slightly modified.

Any info really appreciated.
#psd #question
  • Profile picture of the author joomlawala
    Let me help you. Can you email me. So that we can discuss there. Thanks
    Signature

    Masud
    Email me at: masud@softsubstation.com
    [to start PSD-to-XHTML/CSS $70; PSD-to-Joomla/WP $150 only]

    {{ DiscussionBoard.errors[2834304].message }}
  • Profile picture of the author swtsubmit
    This can be done using page template, special template - within theme! Lets say, any normal theme, it looks like it looks like, it has - header, content, sidebar, footer. When you create page template, it doesnt have to have any of this! It can have only content area, only sidebar, which can be styled totally different, in even different widths, colors, totally different...

    Like this example you gave above, thats classic landing page, and its done in that way and style. How is this working - you write a page, not post. And for that page, you just select that page template from dropdown on pages on the right side (if exists in theme), and thats it.
    {{ DiscussionBoard.errors[2834464].message }}
    • Profile picture of the author StandUpAndSpeak
      Essentially, you've got the right idea. WordPress themes are composed of a set of specific files that the WordPress core looks for when it goes to render a page. The basic one is index.php. You can break index.php up a little bit into header.php, index.php, and footer.php (because the header and footer are going to stay constant no matter what page we're on). Let's also add something for looking at single posts (single.php) and something for looking at pages (page.php)

      So now we have 5 files that define our basic template. We can now do a little PHP coding in each one to tell it what we want to render:

      header.php: Will render the html headers, include stuff from the wp core, and set up the header of the page.

      footer.php: Will render the footer, close out the main html tags, and add javascripts/analytics/etc. that wp core wants to include in the bottom of the page.

      index.php/single.php/page.php will all display the content of our blog in the way that we see fit. They will start by including the header, add whatever code we want to display things on that type of page, and then include the footer.

      Put them all together and include a basic CSS file (called style.css) and a screen shot (screenshot.png) and you have a basic WP theme.

      WordPress is hugely extendable though. You can further break-up templates and have different sidebars or modules that you include in a similar fashion to the header and footer. You can add different php files to deal with Archives, Search Results, 404 errors, Custom page types, Custom Taxonomies, Categories and Tags, Author information, and you can even create your own special functions in a file called functions.php.

      So, the goal as a theme developer, then, is to take a design (PSD, JPG, Sketch on the back of a napkin, whatever) and translate that into a comprehensive theme file.

      Lots of people create child themes and skin template frameworks like Thesis or Genesis or Thematic. Most of the coding work, and a substantial amount of the more difficult styling and layout is already done, and it's just a matter of adding the relevant CSS/Images to make it look exactly the way you want it.

      I often use a theme called Starkers from Elliot Jay Stocks (I can't add a link, but you can google it) which is stripped down to barest essentials, and then I build off of that. It has the basic components in place, and there's no need to re-invent the wheel. I can add on custom page styles, and new modules that I write, and I have full control over the style of the whole thing.

      So, basically, that handful of files grows into a collection of anywhere from 15 to 50 (excluding image files), depending on the modularity and functionality that is included in the theme. You can do a significant amount of stuff with WP themes. That's why I am particularly fond of it as a designer/developer.

      If you're curious about how to become a theme developer, drop me a PM, and I'll point you in the direction of some good resources for learning that very process. It takes some time, and some effort. You have to get comfortable with the idea of writing code, and so forth. And if you just want to get a new theme, it's probably better just to hire somebody professional to build you one the way you want it. But if you're interested in learning how to do it, it can be a fun challenge.
      {{ DiscussionBoard.errors[2834997].message }}
      • Profile picture of the author ululz
        If you're curious about how to become a theme developer, drop me a PM, and I'll point you in the direction of some good resources for learning that very process. It takes some time, and some effort. You have to get comfortable with the idea of writing code, and so forth. And if you just want to get a new theme, it's probably better just to hire somebody professional to build you one the way you want it. But if you're interested in learning how to do it, it can be a fun challenge.[/QUOTE]
        {{ DiscussionBoard.errors[2835422].message }}
  • Profile picture of the author Robert Domino
    Thanks for the info.

    What you describe "StandUpAndSpeak" is pretty much what I've been doing. Editing existing themes/templates, adding/removing/changing stuff in the theme's files etc.

    I guess, then, my question comes down to: what's the role of the PSD? How is it any different from what I'm already doing which is take random images and editing the themes?
    {{ DiscussionBoard.errors[2835775].message }}
    • Profile picture of the author StandUpAndSpeak
      A PSD file just provides a conceptual guideline to work from as you go about building a site. Typical workflow is that the designer puts together a conceptual PSD, and passes that off to the developer, who chops it up into whatever images they need to grab, and uses it as a guideline for building out a theme-be it from scratch, or by fiddling around with another template.
      {{ DiscussionBoard.errors[2836292].message }}
  • Profile picture of the author swtsubmit
    I would like to add something to what StandUpAndSpeak said.

    In my case, I often have some minor troubles with designer, cause he doesnt know how to code. If you tend to make a good theme, it needs to be a flexible, with repeating background images to reduce theme size, increase speed of loading and etc....
    But, this approach often can kill or reduce a creativity, so thats the tricky part - design it nice and flexibly. So, future designers, you should know all to be really good!
    {{ DiscussionBoard.errors[2837757].message }}
    • Profile picture of the author SteveJohnson
      Originally Posted by swtsubmit View Post

      I would like to add something to what StandUpAndSpeak said.

      In my case, I often have some minor troubles with designer, cause he doesnt know how to code. If you tend to make a good theme, it needs to be a flexible, with repeating background images to reduce theme size, increase speed of loading and etc....
      But, this approach often can kill or reduce a creativity, so thats the tricky part - design it nice and flexibly. So, future designers, you should know all to be really good!
      You're not the only one who's had troubles with designers. That's why, when you're involved in a project that has hired a designer, you need to be higher on the pecking order, preferably even having input when the brief for the designer is created. Most designers know and are used to working within limitations and according to guidelines - they just don't like having those handed to them at the last minute or after they've completed part of their work. No one likes doing things twice.
      Signature

      The 2nd Amendment, 1789 - The Original Homeland Security.

      Gun control means never having to say, "I missed you."

      {{ DiscussionBoard.errors[2837877].message }}
  • Profile picture of the author swtsubmit
    Yeah, I know that too, but it keeps happening
    {{ DiscussionBoard.errors[2838266].message }}

Trending Topics