Size, in this instance is the size area of your blog layout and not size in terms of traffic, contents or whatever that you deemed as the bigger the better. Some says, ‘size does not matter’, what matters is the quality. In this case, size does matter because sometimes, you may want to accommodate more or maybe some things cannot be shrunk to please our will so we have to adjust.
To understand in layman’s term on how the layout of our theme’s size is determined, we have to know what are the parts that are encompassed within.
If we are building a simple static html site, we do it with tables. It is simple and easy if you do it in html editors like FrontPage. We just decide on the size of our page, insert a table for the header, a table for the contents, a table for the sidebar and another table for the footer. We can then decide on what goes into the tables like the background colors, the fonts, the images so on and so forth.
However building sites this way os quite tedious if you have many pages, as you will have to do the same for each page. Thus some genius invented something called Cascading StyleSheet or CSS. With CSS, you can now do all your design work in a single file and call up whatever design you want with a single line of code in all the different pages that you are building.
Thus if we want to do any modifications to our WordPress we will need to know how to recognize the particular line of codes that decides the looks of which is which. However, this can be a little confusing for for newbies as different programmers have different ideas with words. There are no fixed industry standards so initially, it will be more of a guessing game.
One aspect is universal though. To widen any one part, the other parts will have to be adjusted accordingly to accomadate the extra width. Let’s look at a simple example of a typical layout.
We have a page width of 800 pixels. This will leave us with only 780 pixels to work with as there is a 10 pixel margin on both sides so as not to have the contents sticking immediately to the side of the page.
Within this 780 px area, we have our content body area which is set at 450 pixels. It is also advisable to have a padding of 10 pixels on both sides so that leaves our main contents at 430 pixels. What we have now is 330 pixels left for our sidebars. Again, 10 pixels paddings on both sides leaves us a true are of 310 pixles for our sidebars. Of course padding width are individual preferences. This is just to give you an example.
Now, if you want to widen your main content area which is now at 430 pixels, you will have to sacrifice the width of your sidebar because everything is wrapped within the size of the actual page which is 780 pixels. So if you make the main content 450 pixels, you have to cut down your sidebar width to 310 pixels so that both of them can still fit into the 780 pixel frame. If not, the sidebar will be squeezed down to the bottom of the page.
On the other hand, if for some reason or another, you cannot live with a sidebar that is less than what you have now, but is still adamant that you want a wider content area, logically then, you will have to widen the whole page width. So if you widened the content to 450 pixels while keeping the 330 pixels sidebar, you will too have to widen the page width to 820 pixels. Then you have of course have to widen to width of your header and footer accordingly.
That is the most basic idea of how to play with the size of your WordPress Theme. It varies with each theme’s dimensions. The problem now is guessing the names that your Theme’s coder have used for each area. WordPress default theme simply calls it ‘page’. The content area the call it ‘narrowcolumn’ and ‘widecoumn’. Others may call it ‘container’ or whatever. For you own theme, you go screw your brains and figure it out yourself, but in the end, you will see that it is all common sense.
Some of the links in this post are "affiliate links." This means if you click on the link and purchase the item, I will receive an affiliate commission.