Title: WordPress sidebar
Last modified: August 20, 2016

---

# WordPress sidebar

 *  [dalv8](https://wordpress.org/support/users/dalv8/)
 * (@dalv8)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/wordpress-sidebar-2/)
 * How could I add a sidebar to my theme ? What do I have to edit in CSS ?

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [potentweb](https://wordpress.org/support/users/potentweb/)
 * (@potentweb)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/wordpress-sidebar-2/#post-2994650)
 * You don’t just edit CSS for this. You have to edit your theme and add an area
   for a sidebar and style it.
 *  [Michael](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/wordpress-sidebar-2/#post-2994655)
 * some part of the needed coding is described here:
    [http://codex.wordpress.org/Widgetizing_Themes](http://codex.wordpress.org/Widgetizing_Themes)
 * if you want to have a separate sidebar template, you’ll also need: [http://codex.wordpress.org/Function_Reference/get_sidebar](http://codex.wordpress.org/Function_Reference/get_sidebar)
 * the more complex part is to create the html structure and css to integrate the
   sidbar into your theme’s structure (as already rightly mentioned by [@potentweb](https://wordpress.org/support/users/potentweb/))
 * in general, review [http://codex.wordpress.org/Theme_Development](http://codex.wordpress.org/Theme_Development)
 *  Thread Starter [dalv8](https://wordpress.org/support/users/dalv8/)
 * (@dalv8)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/wordpress-sidebar-2/#post-2994696)
 * Yes. Ok. In mainindex.php I have
 *     ```
       <div id="sidebar-nou">
       <?php if ( ! dynamic_sidebar( 'sidebar-nou' ) ) : ?>
       <?php endif; ?>
       </div>
       ```
   
 * In sidebar.php I have:
 *     ```
       <?php if ( ! dynamic_sidebar( 'sidebar-nou' ) ) : ?>
   
       <?php endif; ?>
       ```
   
 * And in CSS:
 *     ```
       #sidebar-nou {float: left;
           margin-left: 7.6%;
           margin-right: 0;
           margin-top: 20px;
           width: 22.8%; /* increased sidebar width 4% from 18.8% to 22.8% */
       }
       ```
   
 * But, it is shown in footer, and I don’t know why. The site: [http://www.androidmaniac.net](http://www.androidmaniac.net)
 *  [Michael](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/wordpress-sidebar-2/#post-2994699)
 * the location is caused by where you added the sidebar – within the `#content`
   div just like the other divs (`#reclama` and `#androboxline`);
    you possibly 
   need to move the `#sidedar-nou` div to before or after the `#content` div; add‘
   float:left;’ to the style of `#content`, restrict the width of the `#content`
   etc… maybe try and make a pure html/css mockup of your site’s structure to figure
   out the formatting and positioning.
 * unfortunately, this WordPress forum is not the place to explain and teach those
   fundamental formatting issues; try to improve your html/css knowledge by working
   with tutorials such as [http://www.w3schools.com/](http://www.w3schools.com/),
   or possibly ask for support at a different forum such as [http://www.css-discuss.org/](http://www.css-discuss.org/)

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘WordPress sidebar’ is closed to new replies.

 * 4 replies
 * 3 participants
 * Last reply from: [Michael](https://wordpress.org/support/users/alchymyth/)
 * Last activity: [13 years, 9 months ago](https://wordpress.org/support/topic/wordpress-sidebar-2/#post-2994699)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics