What are your tips for starting a theme from scratch?

I’ve posted this last night (when I finished it) – it may be of some help in understanding how themes work.
https://www.ads-software.com/support/topic.php?id=29295

Here is just a thought. If you havent done it sketch out the boxes or containers.
Now look at them top to bottom. Now look left to right. Where you see 2 or 3 side by side you need to understand what is necessary to implement them. If they are of fixed height use CSS 2 position absolute. If they need to expand independently use CSS 1 float with a clearer. Work from the top downwards. Good luck.

When I created my theme Wuhan, I started with Kubrick even though both themes are quite different. Kubrick is a good start because it’s been thoroughly tested and everything’s well-documented.

From personal experience, the most time-consuming parts are:

1. Choose the color scheme and deciding the basic layout;
2 Creating graphics;
3. Modifying style.css, which takes forever;
4. Modifying index.php and comments.php

My advice if you are a bit shakey on CSS positioning is to start with Classic or Gemini ??

As some one who has done nearly all of my themes from scratch, it’s not that difficult, of you take it one step at a time.

Here’s how I’ve done mine.
1) Select something that closely resembles the layout you want.
2) Using pencil & paper (alternatively you can use crayons, paint, pens, cardboard, construction paper, post it notes, what ever it takes, Doritos chips….) sketch a basic layout with each section having it’s own box.
3) I then usualy fire up notepad or some editor and begin plopping down the html…. creating div tags where I need them.
4) I then start putting together the CSS, making sure all of the div classes/ids have borders ( and/or backgrounds)of different colors so I can tell them apart.
5) Put in sample text for the layout
6) start messing with the padding, margins, positioning and sizes of the div tags until it 90% resembles the right layout I want.
7) Start adding colors and other markup info, bullets, indenting, the “Real” colors & backgrounds
8) Tweak, tweak, tweak
9) Integrate into WP.
10) Repeat step 8 twice more
11) Pull it apart in to the different files for the new templating system.
12) Repeat step 8, 9, 10
13) Minor adjsutments and it’s done.

But that’s just me. As some one who can barely spell GIMP, let alone use it effectively, I limit my use of images.

Tg

EDIT: Also, at various point, specificaly when ever I need to, I raid other templates & CSS files for little bits I need to get things working right sometimes. Like if I like the way a particular sidebar looks in a theme, I might borrow that file and tweak it a little bit to fit my needs. Or, case in point, I was having problems with my menu flowing over my credits at the bottom. I found a tempalate that had it right, and I *cough* researched how they got their credits to clear both cols. Then I made the necessary adjsutments to my tempalte, and BAM! It worked.

im also new to WP and would like to make my own theme, what do you suggest i use as far as software? i dont really understand the linkage b/w PHP and CSS as far as how it all comes together in the page so im not quite sure as how to go about it. i have dreamweaver, and topstyle right now. I’m use to using DW for making the HTML and then just setting the color values for links and such in CSS, thats about all i use CSS for is links. any help would be appreciated. thanks! oh i just set myself up at https://staticdynamic.net (if it doesnt work try https://au-tism.com)

These are great suggestions all around. Wonderful thread! Much needed, too.

I’d like to add a little bit. Part of my design layout was to have certain “things” in certain places. For instance, I wanted to have a list of the main categories on the left sidebar and in the footer. I went prowling through the WordPress Template Tags until I found the wp_list_cats() tag and then I had my category list. I wanted to use this tag in the sidebar, for a horizontal list, and in the footer as a vertical list. I also didn’t want all of the categories and children showing, so I tweaked the tag to get the results I wanted.

I also knew that I wanted inside of the sidebar a list of related posts, most recent, and random highlighted posts. So off to the template tags and when I didn’t find what I wanted there, I hit the plugins and found Coffee2Code’s customizable post listings and bingo! I had the elements I wanted. So then it was a matter of placing them in the right places and applying CSS to make them look good.

The footer was easy, but I found that the list of categories in the left sidebar seemed to blend in with the rest of the post listings, so I played around with different ideas, giving up on an 8 year award winning design layout featuring such information in the sidebar, and finally changed the CSS to make the category list go from vertical to horizontal and put them across the top of the page, leaving only Page and post information in the left sidebar.

This also involved playing with CSS as the some post listing tags include UL in their lists while others only generate LI and can be put into UL lists. Because the tags I used did both, I ended up choosing not to have bullets on the lists, which actually cleaned up the look, keeping it simple with nice spacing. Understanding how the different tags work helps with the layout a lot.

I was also determined to have a nice breadcrumb and “in category” next and previous post link to maintain continuity of articles within a category, especially because I tend to write series oriented articles and not just random information. Unfortunately, I was not happy with any of the available choices for breadcrumbs and the ability to have a next/previous post link stay within the category is very slim, only left to one plugin I could find and that required a lot of tweaking and not the result I had in mind. So I had to give up on those design elements until something better comes along, as I lack the knowledge and expertise to create better plugins right now.

My contribution to this thread is the point that what you want to do, what information you want to present, and how you want to present it, also has a lot to do with your design layout. While WordPress is very powerful and does a lot, and plugins continue to contribute to its capabilities, it does have limits. I’ve had to make a LOT of compromises in my design layout in order to work around those limitations.

When the limitation is removed, then your design options can expand. Until then….COMPROMISE is my middle name.

caleb,

As far as software goes – Notepad is high on my list of programs – wait….right now, it’s the ONLY thing I use other than WordPress. Not true before. I spent hundreds of dollars on HTML editing software. My big splurge lately was to actually move from Windows NotePad to something called PSPad, a free text editor, which is fabulous, but I have to admit that the free version has some very annoying bugs and I’m going to check to see if they are gone in the paid shareware version or go to something else.

All you need, honestly, is a basic text editor. Stay away from word processors unless you REALLY know what you are doing, and any WYSIWYG do-it-yourself HTML editing programs that will convert what you do into something that they think resembled XHTML. It’s a mess to clean up and we have had no end of problems to solve on this forum because of such usage.

I do recommend that you get the Internet Browser FireFox (link at bottom of this page) and download and install the Web Developer add-on (extension) and LEARN HOW TO USE IT. There are dozens of great instructions on the web about using this program. Considered an expert and having taught web page design for many years, I have to seriously admit that everything I knew about how to do this process went out the window with Firefox. Incredible power and capabilities and I have no idea how I survived without it. Of course, it wasn’t around when I started…hee hee.

Between a text editor and Firefox, you are ready to go. See, not only is WordPress free, but the tools you need to use it to the best of your ability are also free. This is some kind of a great package deal!

haha thanks, im a bit of an artist so when i want to create a theme i want it to look fancy pants like the other layouts ive done in html, ive got to learn php + css at some point and i guess the time is now… the only reason i used dreamweaver is because it allowed me to see what i was creating and how it would look but ill get the firefox plugin and tinker around with it, ive also got some reading to do. once again thanks for your help

Hey,

I would like to recommend Notepad2 as a good (free – open source!) text editor. It does syntax highlighting for PHP, HTML and CSS which is perfect for creating your own templates :).

When I first started out in CSS, the majority of my problems was getting a nice columular (is that a word?) layout that worked in both Firefox and internet explorer. Getting it to work in one (either) was easy enough but I had loads of problems with bits of CSS I didn’t know and didn’t want to know to get it to display OK in both. So I nuked that design and started over.

There are quite a few sites out there with completely free templates out there that you can base your site off of. A website called fu2k has some really good layouts – I based my old design off of their 3 col layout. After a bit of messing about, i’d removed the left column, done some other jiggery poker and set up fonts, backgrounds, images etc and had my design.

I found it a hell of a lot easier to base off a template than to start over, especially with the 10s of niggles that CSS seems to bring.

I just used fake entries (typed by hand..ish – I used the Lorem Ipsum generator to make me some nice long posts) and then once I had the site how I liked it, I WP-arised the templates and then tweaked it to look how I wanted and that was it!

I think trying to create your site and wordpressarise it at the same time is a bit tricky, as you never know if you’ve gone wrong because of dodgy use of the template tags or because your css/html was slightly off.

Rob

Excellent advice, from everyone, but how about some info on how you solved the problems that came up while creating your site?

And what were some of those problems? We all have them. I struggled with getting various tags to do what I wanted, and then compromised when they wouldn’t. Same with plugins.

What about you?

Hmm well I didn’t start a theme from scratch but have steadily modified Gespaa to what I’ve wanted it to do. I’ve made a lot of compromises, and if I found a problem I couldn’t solve or get help on solving, well I followed the rule of thumb:

If you go over it, go around it

Cheesy but true, the design as it’s shaping up is through lack of knowledge rather than want. I have a more ambitious design up my sleeve so this is very much a test bed. And when it comes to faux columns, although I found it was easy to do once you eventually try it, I avoided it by limiting the use of variation in colours, as well as other ways to get around the problem of having two columns that don’t match.

Get the web developer plugin for firefox as well – a real handy tool when checking out the source and css code of various sites for ideas

One of the biggest problems I’m still suffering with is the lack of ability to have PHP inside of an article, such as listing a category of posts inside an article/post, and things like that. Yes, there are plugins that help, but this is a feature that ran easily throughout my static html pages, and one I’ve suffered the loss of within my new design.

The lack of a really good “next/previous post in the same category” template tag or plugin makes structuring the page also difficult, since I write series of articles that flow in a line rather than stand alone. I struggled with my layout and structure a lot over that issue, making drastic compromises that still keep me awake at night fretting.

Greating a strong navigational area to lead people through your site is critical, whether it is within a category, from post to post, or from category to category, and it needs to be considered strongly as you layout your theme. Where will the eye go and how can you lead them there to get the information you want them to have.

I’m working on a new website and this thread got me thinking….The first thing that I do when designing a website/web page/theme from scratch is to create a test page with only the information I want with no design. Then I think about the information and how it should be laid out. Which elements are most critical to the success of the business via the website? After all, as informational as websites are, they are also big blinking billboards in a way. You got 10 seconds or less to grab someone’s attention. And if they are looking for information, they want information, not pretty pictures.

So the content is critical to begin the design. With a theme…you are designing it to meet your own personal needs, but also thinking of the needs of others….so how does that change your perspective on what tags you put where to generate what information – and then how do you “frame” that information to highlight and attract attention to it?

So what goes through your mind as you design a theme and think about the end user’s needs?