Categories
Wordpress

Adding Sidebar to WordPress theme. (WP 3)

  1. functions.php.txt
  2. sidebar-six.php.txt
  3. header.php.txt
  4. style.css

 

We have added a sidebar area just at the top of screen naming it SLIDER.

We are working in Twenty Eleven

While adding codes to all files we recommend you to download the attached files to have a better view of what we are doing.

Step 1 – Open functions.php in twenty eleven and add the following code, the same way we have added in downloaded file

 

// SLIDER sidebar code starts 

	register_sidebar( array(
		'name' => __( 'SLIDER', 'twentyeleven' ),
		'id' => 'slider',
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget' => "</aside>",
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );

// SLIDER sidebar code ends

Step 2 –  Create a sidebar-six.php file , and add the following code.

 

<div id="tnc_slider">

    <ul>          

            <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('slider') ) : ?> 

            <?php endif; ?></ul>

    </div>
Step 3 – Open header.php and add the following code in desired location. You can check where we added in headers.php that we have added.
<?php get_sidebar('six');?>
Step 4 – Open style.css and define css for #tnc_slider.
#tnc_slider {

width:1000px;

margin-left:auto;

margin-right:auto;

text-align:center;

}
Well this will create a new working sidebar .
Happy learning.

By Anirudh Babbar

A website developer, loves #wordpress #drupal #php. Love posting about wordpress, php, bootstrap and SEO. Also provide online/offline training on wordpress, drupal, php and SEO. I am available on Twitter @ anibabbar , Skype @anibabbar , gmail @anibabbar !! facebook @thinkncode.com