Free Wordpress Help | Wordpress Theme Customizations For Beginners Pt 1 - The Layout

Ask me a question at the Wordpress Ninja Forum

 

Wordpress Theme Customizations For Beginners Pt 1 - The Layout

Posted on August 11, 2008
Filed Under Guides |

So while i wait for more questions to come in (c’mon everyone, don’t be shy to ask!), i thought i would embark on a new 3-part guide series on Wordpress Theme Customizations for beginners. I’m going to start with the most important part first - layout. Then i’m going to take an in-depth look at the most important file when it comes to customizations - style.css

So let’s start with the layout of our theme. I’m going to assume you have already selected your preferred Wordpress theme but you want to change some part of the layout, such as changing it from a right-sidebar theme to a left-sidebar theme. This has happened to me before where i have had a right sidebar theme that was perfect in every way except i wanted the sidebar on the left. So we need to get that pesky sidebar to the left, how do we do that?

First, i need to give you a very quick lesson on web page layout in general and the float commands in CSS. It is very important to understand containers and the DIV tag, as something as seemingly simple as swapping the sidebar can really stuff everything up with your site layout. As i have mentioned in a previous post, Wordpress theme layouts are mostly all the same fundamentally, with minor changes in the back end making some big changes in the front end. All Wordpress themes will contain the following - A header, a footer, the content column and at least one sidebar. I have whipped up a little diagram to help illustrate this point about these layout ’sections’ which hopefully makes it easier to understand. I also included the standard Wordpress PHP files that typically correspond to these sections. Everything will always be like this no matter which theme you use, but the thing that will vary is the sidebar. This image shows a standard 2-column, right-sidebar theme. The sidebar is ‘floated’ to the right and is not split into two sections (otherwise that would be a 3-column, right-sidebar theme :) ).

You can see the sections layed out in a virtual, symbolic way, which i think is easier to understand when visualized like this. So the header is always on top and the footer always on the bottom and the sidebar is on the left, right or both (2-column or 3-column). Some themes elect to have no sidebar at all, which i will cover later - this is referred to as a single-column or no-column theme.

Now that you understand this layout model, the site customizations will be much easier. You will begin by editing the syle.css file - you will find it in /wp-content/themes/<your theme name>/. The first example i will look at is a theme with a right sidebar and how we can swap it to the left side.

Without getting too deep into CSS (Cascading Style Sheets) as you can find info anywhere on the web, i thought i better explain what it is in a nutshell. The PHP files that Wordpress uses contain mostly HTML code with some PHP code, but everything to do with layout, colors, fonts and anything effecting the ’style’ of your site is controlled by references to the style.css file. If you look through your index.php file, for example, you will find ‘tags’ that reference the same sections in the style.css file such as ‘<div id=”content”>’ - this links the style from the style.css file to that particular section enclosed in the tags in the .php file. Still with me? :)

Ok, so now we know basically how CSS works, we understand that by making changes in the style.css file we can dramatically effect the look and feel of the site sections. So lets come back to our switching sidebar example from right sided to left sided.

Have a browse through your theme’s style.css and try to find the section that relates to the sidebar. Usually it is called ‘#sidebar’ but sometimes you might see ‘#l_sidebar’ and ‘#r_sidebar’ for the left and right halves of a split sidebar respectively. The same principles apply for both though because we need to imagine the sidebar as one whole entity (even if it is logically split into 2 sections). Remember also that CSS is hierarchical, so you might find your ’sidebar’ section contains the sub-sections of ‘l_sidebar’ and ‘r_sidebar’ for example. The headings would appear like this, signifying they are in fact sub-sections of the parent ‘#sidebar’

#sidebar

#sidebar .l_sidebar

#sidebar .r_sidebar

Hint: Make sure you use a good code editor that highlights keywords because it makes life so much easier - everything is nice and easy to read and understand. Dreamweaver is one of the best, but there are some good free ones out there. Check out my beginners tutorial for more info.

When you find the sidebar section in your style.css file, you’ll see that it is ‘floated’ somehow, in this example my sidebar is on the right and under the ‘#sidebar’ heading in my CSS file i see the code

float: right;

This code tells the CSS to put the sidebar on the right side of the page as it builds the layout. Putting it on the left is as simple as changing the code to

float: left;

To complete the floating process we need to do the reverse for the #content section, so i change it from ‘float: left;’ to ‘float: right;’. So now our sidebar is ‘floated’ to the left and our ‘content section is ‘floated’ to the right. All floated means really is that the section ‘gravitates’ that direction. That’s how i like to imagine it :)

Now, there are some other things we need to be careful of in order to keep the integrity of our layout. Changing the float is the first step but now we need to check the container widths and the padding. Find the section in your style.css called ‘container’, or sometimes ‘page’ - it will typically have a set size for it’s width - if you can’t find anything like ‘container’ or ‘page’ then search for the ‘width’ string - you’re looking for something like this below (the actual number of pixels will differ though) e.g.

width: 960px;

This width setting sets a fixed width for the size of the page in pixels (you can use other measurement units but let’s keep it simple for now), in the example above 960 pixels, which on a standard 17″ monitor at 1280×1024 would leave quite a bit of room on either side of the screen outside the main ‘page’ of the site. The Wordpress Ninja site is a good example of this ;) The reason i am talking about the width is because it’s really important to understand how important it is. The container width is a virtual boundary for the maximum width of your page. If your content section and sidebar together are wider than this total width then you will get really nasty results. If you want your overall width to be wider you can feel free to change this width value, but you must make sure the total of your ‘content’ and ’sidebar’ sections plus any side margins or padding all add up nicely to exactly your total width, not 1 pixel less and not 1 pixel more.

So find the section in style.css called ‘content’ and check out the width setting. Add this width to the width of the ’sidebar’ parent section and you should get the total container width. But wait, hang on, that doesn’t add up? That’s because we need to check padding and margins, which can add to the total size of the width. If you see any ‘padding’ or ‘margin’ code under any of those headings then you need to take them into account. Margins are just that, margins. It can look like

margin: 20px;

which will apply the 20 pixel margin to top, right, bottom, left sides of the parent container. It can also be notated like this

margin: 0px 10px 0px 20px;

this is a shorthand way of writing the margin for the top, right, bottom and left sides (in that specific order), giving a specific size for each. This is when you don’t want uniform sizes all round. You may also see it like this as well

margin-left: 0px

margin-top: 10px

this code assumes 0px margins for the sides not specified. All of this notation also applies to padding. Padding is used to put white space between an edge and an object to push it left, right, up or down. What is the difference between padding and margins? Good question, it can get a bit confusing. The best way i can explain is by saying padding refers to the space inside the imaginary border of a container, where margins are the space outside an imaginary border of a container. I’d recommend investigating this further if you are not sure.

So, back to our example - our container size was 960 pixels, our right sidebar (now on the left) previously had a size of 400 pixels, but had left padding of 10 pixels, taking it’s total size to 410 pixels (add on the padding). Now it is on the left side though, i want to invert that left padding to the right side, so i change the ‘padding-left:10px;’ to be ‘padding-right:10px’.

Next, i find my ‘#content’ width is 550px with no padding or margins set. So my total size adds up nicely to 960 pixels which is my max container size. When i check my site i find everything looks good and the sidebar is inverted nicely.

That’s it for part 1 - phew that was a long post!

Stay tuned for part 2 of this series where i will cover more aspects of the style.css file and how to ‘beautify’ your theme with little graphical additions, borders, spacing around images and header logos and graphics.

Comments

6 Responses to “Wordpress Theme Customizations For Beginners Pt 1 - The Layout”

  1. Wordpress Theme Customizations - Removing The Sidebar Altogether | Wordpress Ninja on August 12th, 2008 6:42 am

    [...] to be 960px and check padding and margins don’t blow the size out more than this - see my previous post on layouts for more info on [...]

  2. Dan on December 18th, 2008 2:12 pm

    Great post. Simple and easy to follow instructions. Thanks.

  3. syaifudinzuhri on December 19th, 2008 3:10 pm

    simple guide and I like it, but could you give the final screen shoot, it would be helpful

  4. ADRIAN THOMAS on January 29th, 2010 10:26 pm

    This site was well done. I have been looking for just this sort of blog.Thank you for this information

  5. georg on February 6th, 2010 1:25 am

    thanks a lot. that was a great help for removing the annoying sidebar.

  6. gillian morrison on July 13th, 2010 12:56 am

    you are like an angel…from cyber heaven…maybe with your help i can go from wordstressed to word pressed…thanks for blogging

    Gill

Leave a Reply




Ninja This!
Diggdel.icio.usFurlStumbleUponTechnorati

 

Related Posts:

    How To Add A Menu Navigation Bar To A Theme That Doesn't Have One

    Wordpress Theme Customizations - Header Images With Hyperlinks

    Wordpress Theme Customizations - Removing The Sidebar Altogether

    Setting Up RSS Feeds With Wordpress