SitePoint Sponsor

User Tag List

Results 1 to 25 of 25
  1. #1
    is not my name biggdesign's Avatar
    Join Date
    Apr 2005
    Location
    Station 43
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    making your own wp theme.

    I have always wanted to make my own theme. Unfortunately, i am really bad at programming/codes and the wordpress codex.

    Im wondering if there are any wordpress gurus out there, who knows their stuffs and are willing to share and impart any relevant skills to those who are new to skinning wp themes.

    i tried making my own themes, but it was a mess. i must have missed some includes and maybe missed some closed divs. "</div>"

    I think its rather hard to code a wp theme, but what do you think?
    stay hungry, stay foolish.

  2. #2
    _ silver trophy ses5909's Avatar
    Join Date
    Jul 2003
    Location
    NoVa
    Posts
    5,466
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    when i do a new theme, i take my design and code it into a normal webpage first... from there I integrate it into wordpress, otherwise i get lost in the details. It really makes things easier for me.
    Sara

  3. #3
    is not my name biggdesign's Avatar
    Join Date
    Apr 2005
    Location
    Station 43
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey sara, is there any tips/tutorials available?
    stay hungry, stay foolish.

  4. #4
    SitePoint Addict BlazeMiskulin's Avatar
    Join Date
    May 2007
    Location
    Wisconsin
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've built quite a few custom themes--both for business and for fun. (You can see several of them at www.geekniche.org).

    What I've found is the easiest way to approach the situation is to take an existing theme and then replace elements one at a time.

    You're basically going to be dealing with 6 pages:
    style.css
    header.php
    footer.php
    sidebar.php (or menu.php)
    index.php
    page.php (single.php)

    Unless you're adding or removing items (adding static text at the top of the front page, removing sidebar items, etc.) you may not even need to touch anything except the CSS.

    The way I tackle the design is to start big and work down to the details. First I set page width, background color, text color, and page width (if it's a static width, and I'm changing it). Then I work on the header, then the side bar, then the footer, and finally the main section. This way, I'm not building an entire theme at once, I'm only working on one small section at a time. Breaking it into bite-sized pieces helps to make it more manageable. Once I have all the major elements roughed into place, I go back and start tweaking the details.

    The only real problems I run into are in the sidebar. There aren't classes or ids for most of those items. Instead, the CSS controls the List attributes by their "depth" (e.g., ul ul li ul li ul ul li li ). It can get quite confusing.

    If you use Firefox, I *highly* recommend the Aardvark extension. It outlines all the CSS blocks as you hover over them, and lists their names in a little label. This makes it really easy to figure out what CSS control "That box over there" or help you to figure out which of the 7 divs in "that area over there" is off by 2 pixels.
    M Blaze Miskulin
    President
    Geek Niche Web Hosting

  5. #5
    SitePoint Zealot
    Join Date
    Mar 2006
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tinker around with theming quite a bit, and what I discovered works best for me is starting with a stripped out theme, and only a bare minimum of styling. When you start with really clean code, and really simple css, the development process is much easier because you get to know your own code as you develop it. I ended up creating some "base" themes for whenever I wanted to design a new theme. Having a consistent starting point is really helpful. I made them available for download, so you're welcome to take a look if you think it might help!

  6. #6
    SitePoint Addict BlazeMiskulin's Avatar
    Join Date
    May 2007
    Location
    Wisconsin
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Base themes are a great idea--if you have the time to build them. I've been telling myself I'd get around to stripping down 3 or 4 basic templates (and filling the stylesheet with tons of comments as to what does what) for a while now. Somehow, I never seem to have the time to get around to it.
    M Blaze Miskulin
    President
    Geek Niche Web Hosting

  7. #7
    _ silver trophy ses5909's Avatar
    Join Date
    Jul 2003
    Location
    NoVa
    Posts
    5,466
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Ill agree with Feistyred and Blaze. The way i learned was by modifying existing themes.. changing images, colors, alignments, etc. Its a great way to learn and there are so many free themes out there that there is no harm in doing that!
    Sara

  8. #8
    Non-Member
    Join Date
    Jan 2007
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The first things your learn is to know the basic HTML , CSS and using Adobe Photoshop specially creating layout and header

  9. #9
    Non-Member
    Join Date
    May 2007
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It sounds like your main problem is with the basic HTML/CSS. If this is the case then I suggest learning more about this, then go back to the Wordpress skinning and you'll likely find it much easier.

    Wordpress is very easy to skin if you know your HTML/CSS well. And you don't need to know anything about PHP or MySQL either, I don't and I seem to be able to skin Wordpress themes no problem.

    Good luck with the skinning

  10. #10
    The I's for intelligent silver trophy iTechno's Avatar
    Join Date
    Jan 2006
    Location
    Yorkshire, UK
    Posts
    1,796
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I totally agree, don't go near Wordpress unless you know xHTML/CSS well. Your comment about:

    i must have missed some includes and maybe missed some closed divs. "</div>
    Really makes me believe you have little xHTML/CSS knowledge.

  11. #11
    is not my name biggdesign's Avatar
    Join Date
    Apr 2005
    Location
    Station 43
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    stay hungry, stay foolish.

  12. #12
    SitePoint Zealot
    Join Date
    Mar 2006
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BlazeMiskulin View Post
    Base themes are a great idea--if you have the time to build them. I've been telling myself I'd get around to stripping down 3 or 4 basic templates (and filling the stylesheet with tons of comments as to what does what) for a while now. Somehow, I never seem to have the time to get around to it.
    I know what you mean! I just finally did mine a few weeks ago after having done my first theme over two years ago! Amazing how time is so fleeting.

  13. #13
    SitePoint Evangelist
    Join Date
    May 2005
    Posts
    532
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wordpress Theme Generator
    http://www.yvoschaap.com/wpthemegen/

  14. #14
    is not my name biggdesign's Avatar
    Join Date
    Apr 2005
    Location
    Station 43
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok im done, tell me what you think.
    www.mrmalique.com
    stay hungry, stay foolish.

  15. #15
    SitePoint Evangelist
    Join Date
    Apr 2007
    Posts
    429
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by biggdesign View Post
    ok im done, tell me what you think.
    www.mrmalique.com
    Great ! Colorful ...

  16. #16
    is not my name biggdesign's Avatar
    Join Date
    Apr 2005
    Location
    Station 43
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!! its too loud isnt it.
    stay hungry, stay foolish.

  17. #17
    SitePoint Evangelist
    Join Date
    Apr 2007
    Posts
    429
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A little bit ! lol

    But you already know and you like that !


  18. #18
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I actually don't know how eather and I really want to learn I may start paying people to teach me.

  19. #19
    SitePoint Addict BlazeMiskulin's Avatar
    Join Date
    May 2007
    Location
    Wisconsin
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by h8eded View Post
    I actually don't know how eather and I really want to learn I may start paying people to teach me.
    Theming WP isn't that hard. It may be long and tedious and insanely-frustrating some times, but to create a simple, custom theme isn't too difficult. The key is knowing CSS (I find htmlhelp.com to be extremely helpful) and understanding enough about PHP to deconstruct it. You don't have to actually know PHP, you just have to be able to recognize "that's the part that says how many comments there are" and "that's the part that makes the blogroll appear".

    Find a theme that has a similar layout to what you want (width, number of columns, that kind of stuff), then open up the file stylesheet.css and start playing around with the code.

    There are lots of times that I still rely on the "sledgehammer approach": If I don't know what a class or id controls, I change one of the attributes to something blatant.

    If it says border: 1px; I change it to border: 50px;
    If it says color: #ef45ac; I change it to color: #ff0000;

    When something suddenly gets 50 times bigger and/or turns bright red, you can figure out what to do with it (and get yer minds outta the gutter, guys!).

    Install a dev site (a copy of WP that's only purpose is for you to play around with). Mess around with things. If you break it? Delete the theme and start over. Honestly? The worst that can happen is that you end up with a site that looks like a MySpace reject.

    Grab lots of themes that you like and pull them apart at the seams. Compare the code against others you like and see what's different. If you need some high-quality, guilt-free images, I highly recommend bittbox.com and morguefile.com

    The crew at WordPress have taken care of doing all the really hard work, and there's really no way for you to break anything seriously by messing with the theme. So roll up your sleeves and dive in. It's really the only way to learn.
    M Blaze Miskulin
    President
    Geek Niche Web Hosting

  20. #20
    SitePoint Member
    Join Date
    Mar 2007
    Location
    Rockland County New York (in the 'burbs of NYC)
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's a great tutorial series here:

    http://www.wpdesigner.com/2007/02/19...ss-themes-huh/

    Good luck!
    Fallen Sky Studios -Website Design in Rockland County NY

  21. #21
    Non-Member
    Join Date
    Dec 2006
    Posts
    269
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BlazeMiskulin View Post
    I've built quite a few custom themes--both for business and for fun. (You can see several of them at www.geekniche.org).
    Hi,

    Just wanted to let you know that I took a look at your work, and thought that they were all very well done and quite creative.

    Rich

  22. #22
    Non-Member
    Join Date
    Dec 2006
    Posts
    269
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by biggdesign View Post
    ok im done, tell me what you think.
    www.mrmalique.com
    Hi,

    I think the design is very creative and unique. If I was to make any critique of the design, I would say, for me, all of the colors seem to clash a bit and distract from understanding the content.

    Good luck!

    Rich

  23. #23
    SitePoint Guru ckita's Avatar
    Join Date
    Nov 2004
    Location
    Truly Asia
    Posts
    733
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Wpdesigner.com has written a cool tutorial (series) on creating WP themes from scratch.

    I would say starting with a base theme is a good thing to do, to get yourself aquainted with php/html/css and how the whole thing works.I started out that way with my Flickr site and i've learned a lot along the way.

  24. #24
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I usually just make the design first, then take the WordPress default theme (Kubrick) and use that as the "base" for the theme. I then replace what I need to replace in Kubrick with the things from my design, and then change the details for it in style.css. Really, you're only using the file structure for it, and leaving the functions in it for including the header, sidebar and footer. It makes it a lot easier... It's not really copying (it's under GNU GPL, anyways :P ), you're just using the file structure, and you don't need to search for all the functions to include everything.
    MattsBlog.Ca
    LiveMP -- Coming soon!

  25. #25
    SitePoint Evangelist
    Join Date
    Apr 2007
    Posts
    429
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •