Free Wordpress Help

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 | 5 Comments

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.

Related Posts:

Why Do Wordpress Themes Sometimes Not Display Properly?

Posted on August 7, 2008
Filed Under Themes, Wordpress Solutions | Leave a Comment

This is a strange one, but one i have come across quite a few times, particularly when using the Prosense theme.

Symptoms: The preview of the theme in WP-ADMIN>Design>Themes is blank and when you activate the theme it seems to work but when you visit the site itself there is only text, no graphics or layout or colors.

Solution: I have found this tends to happen when you upload the .zip file to the FTP server then unzip it on the server.  The way to work around this is to unzip the theme file on your pc first then upload the whole (unzipped) folder to your server under /wp-content/themes/

* If you don’t see a correct preview of the theme in the WP-ADMIN>Design>Themes section then it’s likely not going to work properly.

Related Posts:

How To Create A New Section Of ‘Pages’ And Have The Links Populate Automatically

Posted on August 7, 2008
Filed Under Wordpress Solutions | 1 Comment

Ok, so i thought i’d mention this one as i had someone request it before. Basically the example here is for a case where you may want to add a seperate section of Wordpress Pages that does not show up under the ‘Pages’ section in the sidebar (About, Contact us, etc.), but rather a seperate section of pages.

Let’s take a site about Soccer, for example. I have my standard Wordpress Pages such as ‘About’, ‘Contact Me’, ‘Privacy Policy’ etc but i also want another section of Pages under these in the sidebar about my favorite soccer teams. I want to be able to create a Wordpress Page (as opposed to a ‘Post’) about each of my favorite soccer teams and have them appear under a heading of ‘My Favorite Teams’. Here’s what you need to do:

Edit your sidebar.php file and find the part where it references the pages i.e. This line will be contained within a section like this:

<?php wp_list_pages(’title_li=Pages’ ); ?>

Make sure all your pages have already been created, then find out what each page ID is - make a seperate note of these. You can find the page IDs by going into WP-ADMIN>MANAGE>PAGES and hovering over each page - note the ‘post=X’ number at the end of the page’s url at bottom of your browser’s status bar - that ‘X’ number is the page id of the page. So you would make the code look something like this:

<?php wp_list_pages(’include=a,b,c&title_li=Pages’ ); ?>

<?php wp_list_pages(’include=x,y,z&title_li=My Favorite Teams’ ); ?>

What you are essentially doing here is splitting the pages into 2 sections - ‘Pages’ and ‘My Favorite Teams’, telling it explicitly which pages are to be included in each of those sections. So for example if i wanted to include pages 1, 2 and 3 in the ‘Pages’ section my code would be:

<?php wp_list_pages(’include=1,2,3&title_li=Pages’ ); ?>

and then in the ‘My Favorite Teams’ section i can include all the team pages i want, referring to the list of Page IDs i made previously - lets say for example pages with ID’s of 6,9,11,12,15. Here is the code for that.

<?php wp_list_pages(’include=6,9,11,12,15&title_li=My Favorite Teams’ ); ?>

Save the sidebar.php file and upload it to your host server, overwriting the original - of course make sure you have backups just in case.

The only downside to doing this procedure is that you need to manually keep your pages updated.  If you add a new Team Page down the track in the example above then you need to find the page ID and then add it into the code.  So a bit of ongoing housekeeping, but that’s the price to pay for a cool customization

Related Posts:

Wordpress Ninja Forum Goes Live At Last!

Posted on August 5, 2008
Filed Under General | 1 Comment

Good news is the forum is live!

Bad news is i have decided to make it a single register system, which is via the forum logon only. What this means is if you were registered previously on the blog you will need to register again on the forum for once and for all.

Any new users who were not previously registered on the blog can ignore this and just register on the forum.

I have now removed the register/login link from the blog so you must log in via the forums. There really was no need to register with the blog in any case as you are all free to add comments to posts without being registered. Registering on the blog did not even sign people up for RSS feeds, that still needs to be done by the RSS icon at the top right of the page.

You must be registered on the forums to be able to post and reply etc.

The forum will be the new place to post your questions, issues and problems, though of course you can still email me if you prefer some privacy.

You can access the forum here or by clicking at the link at the top of the page. I have also taken the chance to spruce up the site a bit, so it should appear much neater and more user-friendly.

Any questions, feel free to shoot ‘em over

cheers and enjoy!

Paul aka WPninja

Related Posts:

How To Fix That Nasty Error About Headers Not Sent (yuck)

Posted on August 4, 2008
Filed Under Wordpress Solutions | Leave a Comment

You know the one - maybe you have seen it, maybe you haven’t.  If you haven’t yet, then i hope you never do….It looks something similar to this:

Warning: Cannot modify header information - headers already sent by (output started at http://………….)

Nasty huh?  That’s all you get on an otherwise blank page.  Well, luckily it’s a really simple fix.  PHP sometimes has a hissy fit at whitespace.  What does that mean, you ask?  Well, chances are you were editing some code and accidentally (whether you knew it or not) left a ’space’ or ‘carriage return’ where it shouldn’t be - namely after the final PHP tag i.e. ?> at the very end of the file.  I have had this several times after editing the wp-config.php file in Dreamweaver.

Make sure that there are no spaces or carriage returns after that final tag - re-upload the file in question and it’s back to normal - no more ugly errors.

Related Posts:

Wordpress Ninja Forum Coming Soon

Posted on August 4, 2008
Filed Under General | 1 Comment

Hi everyone,

just wanted to say that i am working on a forum for this site where everyone can post questions and issues.  I feel it’s a better way to do Q&A rather than emails back and forwards everywhere, plus other people can benefit from solutions posted.  I’m hoping to have it ready by the end of the week - just need to finish sorting out some issues with the account integration.

cheers,

Paul.

Related Posts:

Duplicate Sections In The Sidebar - How Did They Get There?

Posted on August 2, 2008
Filed Under Wordpress Solutions | Leave a Comment

Had a great question from someone who had multiple ‘Categories’, ‘Recent Posts’, ‘Recent Comments’ etc. showing up in her sidebars. Upon examining her sidebar.php file (this was using a Prosense theme), there were no duplicate sections of code. This only left one explanation…Widgets!

Widgets can be great for adding things really easily, but you do lose a fair amount of control by using them. In this case she had widgets set up to display those sections in her sidebars, as well as the hard-coded sections in the sidebar.php file. This caused the duplicates.

Here’s how you fix it.

To remove those widgets, go to your WP-admin (assuming Wordpress 2.5.1 or later) area and go to Design>Widgets then make sure the left sidebar is selected (top right of screen - drop down box for sidebar - probably called ’sidebar1′). Then expand the unwanted widgets and choose ‘Remove’ for each. That’s it.

Some people love widgets, but I normally don’t use them as i can get much more control over where i put things by doing it manually - but that’s just me

Related Posts:

Adding Google Adsense To A New Wordpress Theme

Posted on August 1, 2008
Filed Under Guides | 7 Comments

Ok, so you downloaded a new theme that totally rocks in every single way, except one thing - there’s no pre-setup Google Adsense code

That’s where the Wordpress Ninja comes in - cue…me

Before we do anything, you need a Privacy Policy to conform to Google’s TOS. This ‘Privacy Policy Plugin‘ is great - it automatically creates it for you after just a couple of options being set for it. Wordpress Ninja highly recommends this plugin.

There are a lot of decent Google Adsense plugins available, but i thought i would show you the hard way how to insert Adsense manually so you have full control over what you are doing. Once you know the long and hard way the plugins will look like they are for Newbies!

If you do want to use a plugin for managing Google Adsense code in your blog then i can recommend this one, though there are many you can choose from. Have a search and find one that best suits your needs.

Ok, back to the manual creation…

First step - which i’ll assume you have done already - is to setup your Google Adsense account. I’m not going to go into the account setup and Ad setup as there are many great tutorials and help files on the web for this - the Google help itself is pretty decent. Some important points to remember when setting up new ads are this:

• Make sure you color-code the ads to blend in with your site. Just do a Google search for ‘optimizing adsense’ and you’ll be able to find a lot of great articles on how to go about this
• Create channels so you can track your different ad blocks’ performance
• When you create a new ad block, copy and paste the code they give you into a text editor and keep it all handy. Neatly organize them all so you know which code belongs to which type of ad block e.g. 160×600 Skyscraper - then the code underneath.
• Think about how you want to organize your ads on your blog theme e.g. do you want a large leaderboard banner across your blog page? Will it even fit? Do you want ads in the sidebar? Do you want a square ad block in each of your posts (like the classic Prosense theme)? Create the ads you will need based on your theme design. Due to the size constraints of your theme you may have to do a bit of trial and error to get the right ad units for your site.

Ok, once all the ads are created and you have saved out your code blocks, open your favorite code editing app (i listed several good ones in this post) and start editing your Wordpress files. Now, depending on your desired ad placement, you need to modify the appropriate .php files within your wp-content/themes/mytheme/ folder. For example, if you want any ads in your sidebar then you need to edit sidebar.php. Remember my previous post about the way Wordpress themes are layed out in your site, broken into parts - Header, Content Body, Sidebar(s) and Footer. This is important because it helps you to work out which file you need to edit. Here’s a quick breakdown of the key files you will need to edit that sit under your theme folder:

• Sidebar.php is for the sidebar (well, duh?) - if the sidebar is divided into left and right sections then this file will usually hold both left and right sidebar sections. They will usually be setup as CSS divisions rather than seperate files. This is where you would usually add a skyscraper style Google ad unit
• Index.php is the main content - imagine it like a framework that loads the posts and everything in the main body. This is where you might add Link Ad Units at the top - depending on where your NavMenu (if any) is located. Basically anything added here will show up on all pages.
• Single.php is very important - this file is essentially each individual post, so you would add any ad units here such as ads inside each post, or directly above or below each post. The key point is that ads in here apply to EVERY post.

So you now know which file to edit. I’m going to use an example of a sidebar ad unit (a long skyscraper), so i start editing sidebar.php in my code editor. I want to place the ads in the left section of my sidebar under my pages list, so i find the code section that contains something like <div id=”left_sidebar”> or something like that. Then i find the code that contains “WP_list_pages” which is our page list - this is probably enclosed in <div> tags or <ul> or something similar. We want the Google Ad code to appear under the page list so we copy our Google Ad skyscraper code from the text editor we saved it to earlier and paste it into our sidebar.php file at this section. You dont have to enclose the Google Ad code in any tags, but i generally chuck inside a <div></div> tag just to keep it all looking nice.

That’s basically it. Save your changes and upload to the your server, overwriting the original (you did take a backup of your server file first, right? Always take a backup just in case you need to revert back).

Also remember that when you create a new Google ad unit it can take 15mins or so to become active - until this time it will be blank - dont freak out though - they should turn up shortly. Allow some time also once it is active before the ads become relevant. If they are still irrelevant after a day or so then check out my post on forcing relevant Google Adsense ads in your Wordpress Blog.

So i know this article has been rather generalized, but hopefully you got something out of it. As always feel free to ask me any questions.

Related Posts:

• Save a Ninja

  Please help me keep this website running by donating via Paypal - any proceeds go towards hosting fees :-)




• Recently Written

  • Need Professional Help To Create Your Sites? Read This.
  • How To Add A Menu Navigation Bar To A Theme That Doesn’t Have One
  • The ‘Favicon’ - Making Your Blog More Professional
  • My Thoughts On Wordpress 2.7
  • Wordpress Theme Customizations - Header Images With Hyperlinks
  • Image And Paragraph Spacing In Wordpress Posts
  • Wordpress - A Beginners Guide Part 4 - “Admin Settings”
  • Wordpress Theme Customizations - Removing The Sidebar Altogether
  • Wordpress Theme Customizations For Beginners Pt 1 - The Layout
  • Why Do Wordpress Themes Sometimes Not Display Properly?

• Categories

  Wordpress Ninja Forum
  • General
  • Guides
  • Plugin Help
  • RSS
  • Themes
  • Wordpress Solutions

 

Wordpress Ninja recommends:

 

• Archives

  • June 2009
  • March 2009
  • February 2009
  • August 2008
  • July 2008
  • June 2008

• Blogroll

  • Documentation
  • Plugins
  • Setup Web Hosting
  • Support Forum
  • WordPress Planet

• Search

About WPNinja

Hi, i am the Wordpress Ninja. My name is Paul and my goal is to be able to answer everyone's Wordpress questions (for free) and post the best solutions on this blog. So for all questions and issues please post in the Wordpress Ninja Forum

and i will respond within 24 hours with a solution.

Most Recent Comments

• Matt:

  Fantastic article - easy to

• wp-popular.com » Blog Archive » Wordpress – A Beginners Guide Part 3 – “Choosing Themes And Plugins” | Wordpress Ninja:

  [...] See the rest here:

• wp-popular.com » Blog Archive » Wordpress – A Beginners Guide Part 1 | Wordpress Ninja:

  [...] this link: Wordpress –

• BUJESSICA:

  A lot of different people

• Masdin:

  Thank you very much for