You’ve gotten a theme. Now what?
Ok, so you’ve gone and gotten a new theme for Wordpress. You love the theme, and can’t get enough of it. But there’s one problem.
The theme has two columns. You only want one. If it weren’t for that extra column, this theme would be perfect in your eyes!
Well, don’t pull your hair out just yet. There is a very, very, very simple process you can go through to change all of that.
Before doing anything, you should always make a backup of your files in case you screw something up beyond repair.
Step 1.
Made a backup? Good. Let’s get started.
Log in to your Wordpress Admin (www.yourdomain.com/wordpress/wp-admin) and go to Presentation.
First, we’re going to remove the sidebar itself. So go to Theme Editor and in the right hand listing of all the pages that are used to make up your blog, find the one that resembles “Main Index Template” the most. (I haven’t run into a theme yet that doesn’t call it anything other than this.)
<?php get_sidebar(); ?>
Remove it. Save the file.
Step 2.
Find the div id for the main content of the page. Mine looks like this:
<?php
get_header();
?>
<hr />
<div id="content">
Now, what we want to do is go to the stylesheet that controls our blog and find that same div layer and
change the attributes of this to match the attributes of the containing div for that. An easy way to tell
is by finding the main div that controls all of the contents of the page (this will be a bigger number than
the number of your content div). Change the number of your content div to something either a tiny bit
smaller (if you don’t want it to take up 100% of the space) or the same
(if you do want it to take up 100% of the space).
Step 3.
Ok, so we’ve managed to get the sidebar out of there, and the main content is now taking up 100%
(or less) of the overall blogging space. Now what? By adding a simple table and then centering it,
you can maximize your aesthetics. Here’s what I did (the Wordpress code is there for referential purposes -
table code in bold.) :
<table width="75%" align="center"><tr><td>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php // Post dates off by default the_date(”,’,'<br />’,'<h2>’,'</h2>’); ?>
<h2 id=”post-<?php the_ID(); ?>”><a href=”<?php the_permalink() ?>” rel=”bookmark”><?php the_title(); ?></a></h2>
<div class=”meta”><?php _e(”Posted in”); ?> <?php the_category(’,') ?> by <?php the_author() ?> on the <?php the_time(’F jS, Y’) ?> <?php edit_post_link(__(’Edit This’)); ?></div><br />
<div class=”main”>
</td></tr><tr><td>
<?php the_content(__(’(more…)’)); ?>
</td></tr><tr><td>
<div align=”center”><?php if(function_exists(’the_ratings’)) { the_ratings(); } ?>
<div align=”right”><div class=”comments”>
<?php wp_link_pages(); ?>
<p><?php comments_number(’No assholes have’,'One asshole has’,'% assholes have’); ?> responded. <a href=”<?php comments_link(); ?>”>You?</a></p>
</div></div>
</div>
</div>
<!–
<?php trackback_rdf(); ?>
–>
<?php comments_template(); ?>
<?php endwhile; else: ?>
<div class=”warning”>
<p><?php _e(’Sorry, no posts matched your criteria, please try and search again.’); ?></p>
</div>
<?php endif; ?>
<?php posts_nav_link(’ — ‘, __(’« Previous Page’), __(’Next Page »’)); ?>
</div>
<!– End float clearing –>
</div>
<!– End content –>
<div align=”center”>
<a name=search>
<form id=”searchform” method=”get” action=”<?php echo $_SERVER['PHP_SELF']; ?>”><input class=”searchfield” type=”text” name=”s” id=”s” value=”" title=”Enter keyword to search” /> <input class=”submit” type=”submit” name=”submit” value=”" title=”Click to search archives” /></form>
</div>
</td></tr></table>
What I’ve done is make the table centered in the main div of the blog, and also specified that it be only 75% of the total space used by the main div of the blog.
(Note on using %: Precentages are not absolute lengths and heights, but rather a
percentage of the space on the screen as determined by the user’s resolution settings.)
Step 4.
So now we’ve not only taken the sidebar away, but have also centered the content (the posts) into
their own table in the center of the content div. What’s next?
Since we’ve taken away the sidebar, there is no longer navigation (if it was in the sidebar, that is).
The following step should only be used if the navigation through your page was in the sidebar.
Since we have taken away the navigation, we are going to add one to the top of the page.
Here is my code - change it however you like. (the Wordpress code is there for referential purposes - navigation code in bold.)
<?php
get_header();
?>
<hr />
<div id="content">
<table width=”100%” border=”0″>
<tr>
<td>
<div class=”extras”>
<ul>
<li><a href=”http://scarform.com/blog/”>Home</a></li>
<li><a href=”http://scarform.com/blog/information/”>Information</a></li>
<li><a href=”http://scarform.com/blog/media/”>Media</a></li>
<li><a href=”http://scarform.com/blog/feed/”>RSS</a></li>
<li><?php wp_loginout(); ?></li>
<li><a href=”http://scarform.com/blog/blog-archives-2/”>Blog Archives</a></li>
<li><a href=”#search”>Search this website</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div align=”center”><?php the_title(’…currently viewing <em>’ , ‘</em>’); ?>.</div>
</td></tr>
</table>
And, the div class setting you need to place into your stylesheet:
.extras {
float: right;
padding: 33px 18px 0 0;
}
.extras a {
text-decoration: none;
font-weight: bold;
}
.extras a:link, .extras a:visited {
background: #ccc;
color: #fff;
padding: 5px;
border: 2px solid #fff;
}
.extras a:hover, .extras a:active {
background: #565d4a;
color: #7AB90C;
padding: 5px;
border: 2px solid #C9E979;
}
.extras li {
display: inline;
}
.extras ul {
padding: 0 0 10px 0;
margin: 0;
}
And that’s it. Tweak the settings of the the css and change the links to whatever you want.
Hopefully this has been helpful to you.