WordPress.org

1. okubow
   Member
   Posted 2 years ago #

   I have a little experience with html, css and javascript, but absolutely none with php. I'm also pretty new to wordpress.

   I'm looking to add two columns to a specific template on my site (this will make it a 3 column page template).

   Here's an example:
   http://fretmd.com/sanding-down-an-acoustic-guitar-saddle/

   As you can see, the page is just one big column full of text and graphics. I want to add a narrow column to the left of the main text (column A) and a narrow column to the right of the main text (column C). I want to be able to add things like, google ads, amazon associates links, special menus and mailing list etc. to Columns A and C.

   How can I add the columns?

2. Christian Schenk
   Member
   Posted 2 years ago #

   Basically, you'd go to "Appearance - Editor", open the file index.php or single.php, search for the div with its id set to "content" and add a new div for each column above and below this. Once you've done that you should assign either an id or a class to the new divs so you can style them with CSS. After that open the file style.css, go to line 330 and adjust the width for the "content div", i.e. subtract the width for the two columns from this value. If you know some CSS you should be able to style the columns to sit on the right and left side of the page.

   I want to be able to add things [...]

   Either you insert these things directly into the code or use WordPress' widget mechanism. I recommend the latter. It's as easy as adding these two lines to your theme's functions.php:

   register_sidebar( array('name'=>'column_a') );
   register_sidebar( array('name'=>'column_c') );

   Then add the following code just inside the div elements you added above:

   <div id="column_a">
   <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('column_a') ) : ?>
   <?php endif; ?>
   </div>
   ...
   <div id="column_c">
   <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('column_c') ) : ?>
   <?php endif; ?>
   </div>

   Now you should be able to assign widgets to your newly created sidebars under "Appearance - Widgets".

3. okubow
   Member
   Posted 2 years ago #

   Hmm . . . I managed to add a column but it showed up on the wrong side of the content? I was trying to add Column A to the left, of the content, but it's sitting on the right. Here is the code I used:

   Defined div in single.php:

   <?php get_header(); ?>
   
   <div id="column_a">
   
   <div id="content">
   
     <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
   
     <div class="post" id="post-<?php the_ID(); ?>">

   Entered div into css:

   #column_a {/* First Column */
          width: 120px;
          float: left
          border-right:1px solid #000000;
          }        
   
   #content {/* main content (left of sidebar) */
   	width:820px;
   	float:left
   	}

   Good news - I got a column! Bad news - it's on the wrong side. What did I do wrong?

   Here is that same post after the column:

   http://fretmd.com/sanding-down-an-acoustic-guitar-saddle/

   (Thanks again for the detailed instructions.)

4. Christian Schenk
   Member
   Posted 2 years ago #

   You forgot to close the div for column a. It should read

   <div id="column_a">Content for column a...</div>

   instead of just "<div id="column_a">" without the "</div>".

5. okubow
   Member
   Posted 2 years ago #

   Looks like I'm in over my head. It turns out I didn't add a column at all. All I did was to narrow the content column by 120px.

   I did what you said and Added a </div> and then I added a second column, "column_c." The problem is, when I finished the css for that column, both columns ended up squished together to the right of the main content.

   Here's what my single.php file code looks like now:

   <?php get_header(); ?>
   
   <div id="column_a">
     </div>
   
   <div id="content">
   
     <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
   
     <div class="post" id="post-<?php the_ID(); ?>">
   
   <div id="column_c">
     </div>
   
       <h2>
   
         <?php the_title(); ?>
   
       </h2>

   And here's what my css looks like now:

   /******************************************
   *   Content styles
   ******************************************/
   
   /* some structural styles for the content area */
   
   #column_a {/* First Column */
          width: 0px;
          float:left;
          border-right:1px solid #000000;
          }        
   
   #content {/* main content (left of sidebar) */
   	float:left;
   	width:940px;
   	}
   
   #column_c {/* First Column */
          width: 0px;
          float:left;
          border-right:1px solid #000000;
          }   
   
   #pagecontent { /* content area in static pages (without sidebar) */
   	width:600px;
   	float:left;
   	}

   I'm not sure what I'm doing wrong?

6. Vogelpesto
   Member
   Posted 2 years ago #

   Heya okubow,

   You might find this tutorial useful:
   http://www.blogohblog.com/adding-extra-sidebar-to-your-wordpress-theme/

Topic Closed

This topic has been closed to new replies.