Title: When adding widgets, the CSS coding is lost.
Last modified: August 19, 2016

---

# When adding widgets, the CSS coding is lost.

 *  Resolved [RedeemedLife](https://wordpress.org/support/users/redeemedlife/)
 * (@redeemedlife)
 * [15 years, 7 months ago](https://wordpress.org/support/topic/when-adding-widgets-the-css-coding-is-lost/)
 * Hey everyone.
 * I’ve got a blog that I host, and in the sidebar it has the following code:
 *     ```
       <div class="Left">
   
       <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>
   
           <br />
           <div class="BlockContent">
           <h2><?php _e('Calendar'); ?></h2>
               <?php get_calendar(); ?>
           </div>
           <br />
           <div class="BlockContent">
           <?php wp_list_pages('depth=3&title_li=<h2>Pages</h2>'); ?>
           </div>
           <br />
           <div class="BlockContent">
           <h2><?php _e('Categories'); ?></h2>
   
           <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
           </div>
           <br />
           <div class="BlockContent">
           <h2><?php _e('Archives'); ?></h2>
   
                   <?php wp_get_archives('type=monthly'); ?>
           </div>
           <br />
           <div class="BlockContent">
           <?php get_links_list(); ?>
           </div>
           <br />
           <div class="BlockContent">
           <h2><?php _e('Meta'); ?></h2>
   
                  <?php wp_register(); ?>
               <?php wp_loginout(); ?>
               <?php wp_meta(); ?>
           </div>
   
       <?php endif; ?>
   
       </div>
       ```
   
 * Now, in that code you’ll notice the Calendar, Pages, Categories, Archives, Links
   and Meta are all in the BlockContent div style.
 * This is the style for that class:
 *     ```
       .Left .BlockContent {
           background: #fff;
           border: 1px solid #dedac3;
           padding: 10px;
       }
       ```
   
 * Here’s the issue, whenever I go into the admin section of the blog and add a 
   widget on the sidebar (even adding just the ones that are there already) the 
   formatting disappears and looking at the code, the “BlockContent” divs are replaced
   with calendar-3 pages-3, categories-3, archives-3, and linkcat-2.
 * How do make it so when I add a widget, it retains the formatting of the “BlockContent”

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

 *  [Michael](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [15 years, 7 months ago](https://wordpress.org/support/topic/when-adding-widgets-the-css-coding-is-lost/#post-1719315)
 * read ‘register sidebar’
    [http://codex.wordpress.org/Function_Reference/register_sidebar](http://codex.wordpress.org/Function_Reference/register_sidebar)
 *  Thread Starter [RedeemedLife](https://wordpress.org/support/users/redeemedlife/)
 * (@redeemedlife)
 * [15 years, 7 months ago](https://wordpress.org/support/topic/when-adding-widgets-the-css-coding-is-lost/#post-1719320)
 * Thanks so much for replying.
 * Looking over the page I’m seeing two things.
 * One, this line of code:
 * `<?php register_sidebar( $args ); ?>`
 * Am I putting that in my sidebar.php?
 * Also, next on my to-do list is to add a second sidebar to the right side of my
   blog (current theme has a sidebar only on the left), do I need to change the 
   code to account for that?
 * Second it the default values:
 *     ```
       <?php $args = array(
           'name'          => sprintf(__('Sidebar %d'), $i ),
           'id'            => 'sidebar-$i',
           'description'   => '',
           'before_widget' => '<li id="%1$s" class="widget %2$s">',
           'after_widget'  => '</li>',
           'before_title'  => '<h2 class="widgettitle">',
           'after_title'   => '</h2>' ); ?>
       ```
   
 * I’m guessing this is where I’m distinctive about the setting, etc.
 * Where do I put this code, and how would I integrate the CSS from my first post
   into it?
 * Thanks so much!
 * Sorry I’m not really clear on how to do it.
 *  Thread Starter [RedeemedLife](https://wordpress.org/support/users/redeemedlife/)
 * (@redeemedlife)
 * [15 years, 7 months ago](https://wordpress.org/support/topic/when-adding-widgets-the-css-coding-is-lost/#post-1719553)
 * Doing some more reading online, do I put that code in the functions.php?
 *  Thread Starter [RedeemedLife](https://wordpress.org/support/users/redeemedlife/)
 * (@redeemedlife)
 * [15 years, 7 months ago](https://wordpress.org/support/topic/when-adding-widgets-the-css-coding-is-lost/#post-1719572)
 * I’m noticing the code is in PHP.
 * How do I use this to make sure any added widgets use a certain CSS class?
 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [15 years, 7 months ago](https://wordpress.org/support/topic/when-adding-widgets-the-css-coding-is-lost/#post-1719577)
 * > do I put that code in the functions.php
 * Yes
 * > How do I use this to make sure any added widgets use a certain CSS class?
 * Add your class to the list in this line:
    `'before_widget' => '<li id="%1$s" 
   class="widget %2$s">',`
 *  Thread Starter [RedeemedLife](https://wordpress.org/support/users/redeemedlife/)
 * (@redeemedlife)
 * [15 years, 7 months ago](https://wordpress.org/support/topic/when-adding-widgets-the-css-coding-is-lost/#post-1719596)
 * So I would copy and paste this into my functions.php?
 *     ```
       <?php $args = array(
           'name'          => sprintf(__('Sidebar %d'), $i ),
           'id'            => 'sidebar-$i',
           'description'   => '',
           'before_widget' => '<li id="%1$s" class="BlockContent %2$s">',
           'after_widget'  => '</li>',
           'before_title'  => '<h2 class="widgettitle">',
           'after_title'   => '</h2>' ); ?>
       ```
   
 * Right now this is all my functions.php has in it, what do I replace and/or where
   should I paste the code?
 *     ```
       <?php
   
       if ( function_exists('register_sidebar') )
   
           register_sidebar();
   
       ?>
       ```
   
 * …and that’s it? That’s all I’d need to do?
 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [15 years, 7 months ago](https://wordpress.org/support/topic/when-adding-widgets-the-css-coding-is-lost/#post-1719604)
 * Try:
 *     ```
       <?php
       $args = array(
           'name'          => sprintf(__('Sidebar %d'), $i ),
           'id'            => 'sidebar-$i',
           'description'   => '',
           'before_widget' => '<li id="%1$s" class="BlockContent %2$s">',
           'after_widget'  => '</li>',
           'before_title'  => '<h2 class="widgettitle">',
           'after_title'   => '</h2>' );
       if ( function_exists('register_sidebar') ) register_sidebar($args);
       ?>
       ```
   
 *  Thread Starter [RedeemedLife](https://wordpress.org/support/users/redeemedlife/)
 * (@redeemedlife)
 * [15 years, 7 months ago](https://wordpress.org/support/topic/when-adding-widgets-the-css-coding-is-lost/#post-1719607)
 * Hmm, I did that, but now when I add a widget in the admin area, it doesn’t change
   on the page.
 * Did I need to put `<?php register_sidebar( $args ); ?>` somewhere?
 * The link to the page is dev.hesedbooksandgifts.com
 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [15 years, 7 months ago](https://wordpress.org/support/topic/when-adding-widgets-the-css-coding-is-lost/#post-1719608)
 * Have you created another sidebar template file?
 *  Thread Starter [RedeemedLife](https://wordpress.org/support/users/redeemedlife/)
 * (@redeemedlife)
 * [15 years, 7 months ago](https://wordpress.org/support/topic/when-adding-widgets-the-css-coding-is-lost/#post-1719612)
 * Yea, I’m going to be adding a second sidebar to the site once I figure out the
   widgets issue.
 * The filename is sidebar-right.php. Here’s it’s code (I think it’s just a copy
   of sidebar.php):
 *     ```
       <div class="Left">
   
       <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar2() ) : else : ?>
   
           <br />
           <div class="BlockContent">
           <h2><?php _e('Calendar'); ?></h2>
               <?php get_calendar(); ?>
           </div>
           <br />
           <div class="BlockContent">
           <?php wp_list_pages('depth=3&title_li=<h2>Pages</h2>'); ?>
           </div>
           <br />
           <div class="BlockContent">
           <h2><?php _e('Categories'); ?></h2>
   
           <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
           </div>
           <br />
           <div class="BlockContent">
           <h2><?php _e('Archives'); ?></h2>
   
                   <?php wp_get_archives('type=monthly'); ?>
           </div>
           <br />
           <div class="BlockContent">
           <?php get_links_list(); ?>
           </div>
           <br />
           <div class="BlockContent">
           <h2><?php _e('Meta'); ?></h2>
   
                  <?php wp_register(); ?>
               <?php wp_loginout(); ?>
               <?php wp_meta(); ?>
           </div>
   
       <?php endif; ?>
   
       </div>
       ```
   
 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [15 years, 7 months ago](https://wordpress.org/support/topic/when-adding-widgets-the-css-coding-is-lost/#post-1719653)
 * Try using:
 *     ```
       <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('2') ) : else : ?>
       ```
   

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

The topic ‘When adding widgets, the CSS coding is lost.’ is closed to new replies.

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [divs](https://wordpress.org/support/topic-tag/divs/)
 * [widget](https://wordpress.org/support/topic-tag/widget/)

 * 11 replies
 * 3 participants
 * Last reply from: [esmi](https://wordpress.org/support/users/esmi/)
 * Last activity: [15 years, 7 months ago](https://wordpress.org/support/topic/when-adding-widgets-the-css-coding-is-lost/#post-1719653)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics