How to move sidebars after main content in source code?

April 23, 2012 4:58 AM

Help me fix my Wordpress theme so that my left and right sidebar appears in the source code after the main content as I've changed themes and lost 90% monthly visitors because of the duplicate content coming up first now (there's like 80 links in my sidebar).

I have no idea how to approach this as I've tried moving the "Include templates sidebars"s after the main content in the index.php file and what comes up is the right sidebar after all the main content and the left sidebar isn't even visible...

posted by Bacillus to Computers & Internet (5 answers total)

Can you post a non-hyperlinked version of the address so we can take a look at it?
posted by modernserf at 5:30 AM on April 23, 2012

Response by poster: http://www.beforeandafterz.com/hair-extensions/
posted by Bacillus at 5:33 AM on April 23, 2012

I'm not sure what the problem is? you've got a fixed sidebar on the left with an ad and a right sidebar that looks completely appropriate. Do you want these things to go in the footer instead of on the side?
posted by modernserf at 5:43 AM on April 23, 2012

Its not as simple as just moving the code around, you need to alter the css. Can you not just switch back to the old theme? The one you have now is very simple, it maybe easier to revert to the old theme for structure and then modify the css to change the appearance. (or search for a theme that you like the look of that also has the sidebars below the main content in the html)
posted by missmagenta at 6:26 AM on April 23, 2012

If you're dead set on that theme and aren't afraid of the css, this is what I would try.

Move both the sidebars below the "main" div. Create a new div that wraps around main and the 2 sidebars eg.

<div id ="wrap">
    <div id ="main"></div>
    <div id ="navboxwrapleft"></div>
    <div id ="navboxwrapright"></div>
</div>
    <div id ="footer"></div>

Then give them the following styles:

#wrap{ position:relative;overflow:auto;}
#navboxwrapleft{position:absolute; top:0;left:0;}
#navboxwrapright{position:absolute; top:0; right:0}

I'm not guaranteeing it will work - just something I whipped up on a break, don't have time to analyse all your css properly ;)
posted by missmagenta at 6:36 AM on April 23, 2012 [3 favorites]