How to add a third column to my theme/template?

I’d rather add a column to this theme than start all over again with a new theme that has three columns

It is NOT simpler to add a third column.
It means re-designing the theme: there is no easy way. Sorry.

You might be best downloading a three column but if you want to do your own then you basically copy the sidebar php and rename it, then subtract some pixels from the main content and the other sidebar to make up another.

You will also need to add the call up for that extra sidebar into the index php and the other pages that you wish to see it on – basically all of the pages unless you wish to leave it out for some reason.

There are WordPress guides on this forum, I followed the search button on this forum and am on the way to releasing a basic three column just by reading what others done.

The only way to do this is to test things live online, and use a practice blog to mess about with and to be able to link to so that people here can help you along.

If you want to get blogging then just download a three column and work on making your own so that your readers can have it when it is ready.

I’ve done a couple of theme re-designs with css for adding Google Ad content to an additional column, i’ve also added divs directly so some of the page body areas for horizontal display of ad content, like between posts, etc.

if you email the css you’re using to me address is chradil at comcast dot net, i’ll paste in some of my “mods” which will add a third column without too much trouble, i’ll also include in my reply some changes you’ll need to make to some template files, with examples similar to what I’m using, and put it all in a zip file. I may not get to this til later this evening, so don’t expect it till tommarow AM.

later…chris

I did what you want to do to another theme which was 2-column. I looked at the FallingLeaves theme files. They seem to be similar to what I modified. From my recollection, I created a php file called leftbar.php and put in it what I wanted. I just copied the sidebar.php file and edited it.

Then at the top of the sidebar.php file, I think I added an include statement to include the new leftbar file or I might have done this in the index.php file (I forget at this point).

I will know better what I did, when I get home. If you can wait that long and if you don’t get any other ways of doing this, please email me at jwurster at comcast dot net.

chradil:
OK, per your suggestion, I have emailed you the CSS file. Don’t spend more than a couple minutes altering it and sending it back to me — I feel guilty putting you to trouble. Thanks!

jimatwork: “I created a php file called leftbar.php and put in it what I wanted. I just copied the sidebar.php file and edited it.“
That’s how easy I hoped it would be. I think the hard part will be figuring out which of the other files to alter so that they all “recognize” the new column. I’ll see what chradil recommends, too. But…

LiverpoolLad: “…basically copy the sidebar php and rename it, then subtract some pixels from the main content and the other sidebar to make up another.“
Is it really necessary to subtract pixels from the other columns, or can I simply have a wider blog overall — keep the same pixels in the existing columns, and have additional pixels for the new column. Isn’t that possible?

moshu: “It is NOT simpler to add a third column. It means re-designing the theme: there is no easy way. Sorry.”
So far, from what’s I’ve seen here, it does seem simpler to add a third column than starting all over with a new theme and customizing it; I went to a lot of trouble to change the masthead and dividers to my liking, and re-doing all that seems harder than adding a new column to “FallingLeaves.” I guess I’ll have to wait and see!

Thanks everyone.

Dibs, in answer to the subtracting the pixel size (if it is sized in pixels), you have to bear in mind that anyone on a 1024 screen, never mind an 800, will have to scroll sideways to see your website.

You can always adjust your screen resolution to 800 pixels wide or 1024, and see for yourself.

I’ll only stay on a sidescrolling website if the content is of particular interest to me. I think that a fluid design that fits from 800 to the bigger 1200 resolution is best, there is a theme released by some designer from Canada that does this.

Good luck.

@dibs,
It is not that difficult if you have some html/css experience, knowledge. And I don’t doubt you could learn it, too – nobody was born with css skills ??

But if you need to ask here – at the level of skills is difficult.
Just a very simple example.
Most layouts use a main container div to keep together the elements. Let’s say you have a 600px wide main container and you place in it a 450px content and a 150px right sidebar. (Forget now the details about borders, margins, padding and their different interpretation by browsers.)
Then you take and copy the existing sidebar to the left and now you have
150+450+150=750. How do you fit it in the 600 wide container? The in-experienced designer will come back and asking for help because of sinking sidebar. Plus, complaining that the original header is not wide enough for the new layout… etc. I hope you get my point.

Everything can be done – if you know what are you doing. My post was meant to be a friendly warning: don’t hope for a quick fix, like getting a one-line-code served up here ??

LiverpoolLad + moshu:
I just looked at my “syle.css” file, and the “container” is 700 px wide, broken down to 450px for the main content column, 200px for the sidebar, and I guess 50px for margins and spacing, etc. It seems easy enough to maybe decrease the existing sidebar to 150px wide, then duplicate it on the other side, which would give me 450+150+150+50 = 800 pixels total, plus maybe another 50 for more margins — so at most, 850 pixels. Isn’t that narrow enough for 99% of screens these days? I’m just using an average/small laptop and it’s 1280 pixels wide. It seems that only little tiny subnotebooks or maybe antique desktops would have anything smaller than 800 pixels. Is there a way to find out the percentages of users have what-sized screens?

look at your logs to see your visitors’ resolutions.

charle97:
I don’t really have any visitors yet: I just started the blog and have been trying it out for a few days, and I haven’t even told anyone about it or advertised it at all. So I don’t have a track record of visitors yet.

I’m viewing on my laptop (which i prefer to work on, it’s an older dell latitiude with 15 inch screen set to 1600×1200 and with large fonts (my eyes aren’t that good). Anyway, You’re theme when all is said and done is under 800px wide (at least the one I just hacked up and sent to you anyway) total (not including the “bacground” which doesn’t really matter. So if I were you I wouldn’t worry too much about the size, etc. I checked it on my desktop which my wife uses more than I do and I have a screen res closer to 800×600 and it still looks just fine.

Just a side note on the screen resolution, I’m responsible for 7 running sites at the moment, and examine the logs/stats on a regular basis, the user base for the sites is quite diverse. They include one site used for a friend’s eBay buisness. Combined, the sites recieve roughly 200,000 Visits (not accesses) weekly. In my develpment/site design efforts, I use the following averages which have been consistent for some time as refelected by all of the log files from each site —

Operating Systems —
97% Some Windows Flavor, over 70% XP Pro/Home.
>1% Linnux/Unix
around 2% Mac

Internet Browsers —
83% IE 5.0-7.0b
15.3% Netscape/Firefox
0.02% Opera
0.03% IE 4.0/3.0
0.75% Netscape 4.0
0.04% Netscape 3.0

Color Depth/Screen Resolution –
97.3% 24 – 32 Bit Color Depth
93.8% 1024×768 OR HIGHER Resolution
4.3% 800×600 Resolution.

Now, I’m sure that something like slashdot or a linux specialty site, or something focused on firefox, etc might get slightly skewed results, but since several of these sites are non-IT related the user base is very diverse.

Personally, I try to keep all of my web development compatible with the most recent “stable” releases of Netscape/Firefox/IE, so that everything looks as I intend it to to “nearly” everyone. I don’t spend [waste] any time doing anything special for or going out of my way for Mac, Opera, Netscape, or even IE for that matter. I have long been a proponent of standards and try to follow as best I can most w3c reccomendations.

In my opinion your own development time can be better spent than by doing anything special to accomadate low res screens, special browser, operating systems etc. The numbers are the numbers, and we have over 12 years worth, so like it or not it’s just what we have to deal with. I actually prefer using Netscape myself and have for a long time, I don’t use it much anymore because so many sites just don’t render correctly.

I made a post a couple days ago where someone was asking about certain colors, websafe pallettes, etc. I don’t think things like that are much of an issue anymore, and the reason is that the stats just don’t support it.

chradil:
Thanks. I got your email with the edited CSS file.
I see your visitors stats, so I won’t worry too much about people with narrow screens. From your stats, only 1.9% of people have screens that are less than 800px, and those people are probably very used to having web pages wider than their screens anyway.

Now that I am at home, I see that I have the include of the lefbar.php in the index.php. I put it there because I wanted it to display before the content and right sidebar. I did modify my css to change the div where the right sidebar should be to be the rightbar class. Then I created a mirror image of this and called it leftbar. Then I made sure the div I created in my leftbar.php was named appropriately. An the one final thing I had to do was size the right and left sidebars according as was indciated before. Both of my sidebars are 130 px with my content 450px. You might have to tweak a little an dthen refresh (CTRL-F5) to eliminate the cache and see your changes.
Good luck.