How to add a widgetized area in header file WordPress

Abdelhadi Touil answers:

I didn't understand the problem, can you explain more please? Because I see the slider is working wery well in the website, so what's the problem you want to resolve?

---

---

---

---

---

---

wpgyan answers:

You can add a widgetized area by using the following code in your header file. Put it exactly at the place where you want to have the widgetized area. you may want to style it later using some CSS.


<div class="header_ad">

<ul class="headerbanner">

<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Header Banner') ){ ?>

<li class="header_widget">

<div class="widget_box">

<!-- Header Banner Widget -->

</div>

</li>

<?php } ?>

</ul>

</div>
<?php }

register_sidebar(array('name'=>'Header Banner', 'before_title'=>'<h3>', 'after_title'=>'</h3>'));


---

Basilis Kanonidis answers:



<div class="header_ad">



<ul class="headerbanner">



<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Header Banner') ) { ?>



<li class="header_widget">



<div class="widget_box">



<!-- Header Banner Widget -->



</div>



</li>



<?php } ?>



</ul>



</div>

<?php
register_sidebar(array('name'=>'Header Banner', 'before_title'=>'<h3>', 'after_title'=>'</h3>')); ?>

---

Jatin Soni answers:

First you need to register sidebar into your function.php

add below code to your function.php

register_sidebar(array(
'name'=> 'Header Sidebar',
'id' => 'header_sidebar',
'before_widget' => '<li id="%1$s" class="header-widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h4>',
'after_title' => '</h4>',
));


Than create one file call header-sidebar.php and add below code in that

<!-- sidebar -->
<div class="header-sidebar">

<ul>
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Header Sidebar')) : ?>
<li><h4>Hey! You!</h4></li>
<li>You should like, so test out this dynamic sidebar. Check it out in Appearance > Widgets!</li>
<?php endif; ?>
</ul>

</div>
<!-- sidebar -->

Now in header.php wherever you want to add widget place below code

<?php get_sidebar('header'); //where header is your file slug like header-sidebar.php ?>

Now write few css code with

.header-sidebar{
}

and for widget
.header-widget{
}

You also can use widget class of your theme but that may not work on header.


Now you should find Header widget in dashboard > Appearance > Widgets area and add whatever you want

---

---

---

---

Arnav Joy answers:

in functions.php write following code
this code will give you a new widget named as "Any Thing Slider"

class AnyThingSlider extends WP_Widget
{
function AnyThingSlider()
{
$widget_ops = array('classname' => 'AnyThingSlider', 'description' => 'Displays a slider' );
$this->WP_Widget('any_thing_slider', 'Any Thing Slider', $widget_ops);
}

function form($instance)
{
$instance = wp_parse_args( (array) $instance, array( 'title' => '' ) );
$title = $instance['title'];
?>
<p><label for="<?php echo $this->get_field_id('title'); ?>">Title: <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo attribute_escape($title); ?>" /></label></p>
<?php
}

function update($new_instance, $old_instance)
{
$instance = $old_instance;
$instance['title'] = $new_instance['title'];
return $instance;
}

function widget($args, $instance)
{
extract($args, EXTR_SKIP);

echo $before_widget;
$title = empty($instance['title']) ? ' ' : apply_filters('widget_title', $instance['title']);

if (!empty($title))
echo $before_title . $title . $after_title;;

// WIDGET CODE GOES HERE
echo '<div id="promo-esterno">

<ul id="slider">

<li>

<div class="slideshow-img"> <a href="http://www.progettobenesserecompleto.it/corsi/geobiologia-per-tutelare-salute-famiglia-corso-base.php#outer"><img src="http://www.progettobenesserecompleto.it/immagini/geobiologia250w.jpg" width="250" height="179" alt=""></a>

<div class="dettagli">

<p class="nome-iniziativa"><a href="http://www.progettobenesserecompleto.it/corsi/geobiologia-per-tutelare-salute-famiglia-corso-base.php#outer">Geobiologia: riconoscere i luoghi e le zone dannose per proteggere la salute e la vitalità di tutta la famiglia - Corso base<br>

Sabato 15 e domenica 16 settembre2012</a></p>

<p class="more"><a href="http://www.progettobenesserecompleto.it/corsi/geobiologia-per-tutelare-salute-famiglia-corso-base.php#outer">Maggiori dettagli</a></p>

</div>

</div>

<div class="blockquote">


<p>"...sentire le congestioni e molto altro, mi sono veramente appassionato...non vedo l\'ora di fare il 2* livello!"</p>
<p class="fonte">Michele, geometra</p>

</div></li>

<li class="slideshow">

<div class="slideshow-img"> <a href="http://www.progettobenesserecompleto.it/corsi/meditazione-trascendentale-calma-mentale-e-vitalita-corso.php#outer"><img src="http://www.progettobenesserecompleto.it/immagini/meditazione250w.jpg" width="250" height="179" alt=""></a>

<div class="dettagli">

<p class="nome-iniziativa"><a href="http://www.progettobenesserecompleto.it/corsi/meditazione-trascendentale-calma-mentale-e-vitalita-corso.php#outer">Meditazione trascendentale: la via facile alla calma mentale e alla vitalità<br>

Sabato 22 e domenica 23 settembre 2012</a></p>

<p class="more"><a href="http://www.progettobenesserecompleto.it/corsi/meditazione-trascendentale-calma-mentale-e-vitalita-corso.php#outer">Maggiori dettagli</a></p>

</div>

</div>

<div class="blockquote">


<p>"Sorprendente, mi ha cambiato la vita, tolto l\'ansia, migliorato le relazioni, l\'energia, la memoria e le intuizioni."</p>
<p class="fonte">Riccardo, grafico</p>

</div></li>

<li class="slideshow">

<div class="slideshow-img"><a href="http://www.progettobenesserecompleto.it/corsi/psichk-usare-inconscio-per-cambiare-corso-base.php#outer"><img src="http://www.progettobenesserecompleto.it/immagini/psych-k-corso-base250w.jpg" width="250" height="179" alt=""></a>

<div class="dettagli">

<p class="nome-iniziativa"><a href="http://www.progettobenesserecompleto.it/corsi/psichk-usare-inconscio-per-cambiare-corso-base.php#outer">Psich-K<sup>®</sup>: usare l\'inconscio per cambiare, il metodo consigliato

da Bruce Lipton - Corso base<br>

Sabato 6 e domenica 7 ottobre 2012</a></p>

<p class="more"><a href="http://www.progettobenesserecompleto.it/corsi/psichk-usare-inconscio-per-cambiare-corso-base.php#outer">Maggiori dettagli</a></p>

</div>

</div>

<div class="blockquote">


<p>"Fantastico, direi incredibile... la cosa sorprendente è che 10 giorni dopo il corso ho smesso di fumare. Grazie"</p>
<p class="fonte">Maurizio, commercialista</p>

</div></li>

<li class="slideshow">

<div class="slideshow-img"> <a href="http://www.progettobenesserecompleto.it/corsi/nutripuntura-corso-base.php#outer"><img src="http://www.progettobenesserecompleto.it/immagini/nutripuntura250w.jpg" width="250" height="179" alt=""></a>

<div class="dettagli">

<p class="nome-iniziativa"><a href="http://www.progettobenesserecompleto.it/corsi/nutripuntura-corso-base.php#outer">Nutripuntura: l\'agopuntura senza aghi - Corso base per operatori della salute<br>

Sabato 13 e domenica 14 ottobre 2012</a></p>

<p class="more"><a href="http://www.progettobenesserecompleto.it/corsi/nutripuntura-corso-base.php#outer">Maggiori dettagli</a></p>

</div>

</div>

<div class="blockquote">


<p>"Chiarissimo, coinvolgente... apre prospettive nuove ed entusiasmanti per la salute e il benessere e... anche professionali."</p>
<p class="fonte">Stefano, osteopata</p>

</div></li>

<li class="slideshow">

<div class="slideshow-img"> <a href="http://www.progettobenesserecompleto.it/corsi/feng-shui-pratico-per-armonizzare-ambienti-corso-base.php#outer"><img src="http://www.progettobenesserecompleto.it/immagini/feng-shui-base250w.jpg" width="250" height="179" alt=""></a>

<div class="dettagli">

<p class="nome-iniziativa"><a href="http://www.progettobenesserecompleto.it/corsi/feng-shui-pratico-per-armonizzare-ambienti-corso-base.php#outer">Feng Shui in pratica per armonizzare il tuo ambiente - Corso base<br>

Sabato 20 ottobre 2012</a></p>

<p class="more"><a href="http://www.progettobenesserecompleto.it/corsi/feng-shui-pratico-per-armonizzare-ambienti-corso-base.php#outer">Maggiori dettagli</a></p>

</div>

</div>

<div class="blockquote">


<p>&quot;Finalmente un corso da cui esci con una mappa personalizzata e interventi da fare subito."</p>
<p class="fonte">Gabriele, architetto</p>

</div></li>

<li class="slideshow">

<div class="slideshow-img"><a href="http://www.progettobenesserecompleto.it/corsi/allplan-2012-corso-base.php#outer"><img src="http://www.progettobenesserecompleto.it/immagini/allplan2012-250w.gif" width="250" height="179" alt=""></a>

<div class="dettagli">

<p class="nome-iniziativa"><a href="http://www.progettobenesserecompleto.it/corsi/allplan-2012-corso-base.php#outer">Allplan 2012 - Corso base per progetti architettonici<br>

In programmazione</a></p>

<p class="more"><a href="http://www.progettobenesserecompleto.it/corsi/allplan-2012-corso-base.php#outer">Maggiori dettagli</a></p>

</div>

</div>

<div class="blockquote">


<p>"Terminato il corso ero già in grado di progettare grandi strutture senza problemi. &Egrave; una vera forza della natura."</p>
<p class="fonte">Renato Bonaldo, studente geometra</p>

</div></li>

<li class="slideshow">

<div class="slideshow-img"><a href="http://www.progettobenesserecompleto.it/corsi/cinema-4D-corso-base.php#outer"><img src="http://www.progettobenesserecompleto.it/immagini/cinema-4d-250w.jpg" width="250" height="179" alt=""></a>

<div class="dettagli">

<p class="nome-iniziativa"><a href="http://www.progettobenesserecompleto.it/corsi/cinema-4D-corso-base.php#outer">Cinema 4D - Corso base per progettististi, disegnatori e operatori della comunicazione video<br>

In programmazione</a></p>

<p class="more"><a href="http://www.progettobenesserecompleto.it/corsi/cinema-4D-corso-base.php#outer">Maggiori dettagli</a></p>

</div>

</div>

<div class="blockquote">


<p>"Sono finalmente riuscita a rappresentare i miei progetti con grande impatto, soddisfare i clienti e soprattutto rendermi autonoma. Grazie."</p>
<p class="fonte">Patty Salvemini, architetto</p>

</div></li>

<li class="slideshow">

<div class="slideshow-img"><a href="http://www.progettobenesserecompleto.it/corsi/agricoltura-quantistica-seminario-introduttivo.php#outer"><img src="http://www.progettobenesserecompleto.it/immagini/agricoltura-quantistica250w.jpg" width="250" height="179" alt=""></a>

<div class="dettagli">

<p class="nome-iniziativa"><a href="http://www.progettobenesserecompleto.it/corsi/agricoltura-quantistica-seminario-introduttivo.php#outer">Agricoltura quantistica - Seminario introduttivo<br>

In programmazione</a></p>

<p class="more"><a href="http://www.progettobenesserecompleto.it/corsi/agricoltura-quantistica-seminario-introduttivo.php#outer">Maggiori dettagli</a></p>

</div>

</div>

<div class="blockquote">


<p>"La quantistica sembrava una cosa così astratta... e invece è come veramente le cose funzionano."</p>
<p class="fonte">Sandro, agronomo</p>

</div></li>

</ul>

</div>';


echo $after_widget;
}

}
add_action( 'widgets_init', create_function('', 'return register_widget("AnyThingSlider");') );

now create a widget area by writing following code to functions.php

register_sidebar( array(
'name' => __( 'Anything Slider Widget Area', 'twentyeleven' ),
'id' => 'anything-slider',
'description' => __( 'The sidebar for the slider', 'twentyeleven' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => "</aside>",
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );

now call this widget in header as follows

<?php dynamic_sidebar( 'anything-slider' ) ; ?>