Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

how to add widget area WordPress

  • SOLVED

What's the easiest way to add a widget area in the upper right corner of this site?
I want to be able to go go Appearances>Widget and see the area there and add a Custom Text/HTML widget like a tel:phone number there.

I drew a yellow box around the area in question on the attached image.

The development URL is:
http://174.121.38.59/~american/

thanks

Answers (5)

2012-08-31

Basilis Kanonidis answers:

Hi,

First you need to add into your functions.php


register_sidebar(array('name'=>'WidgetArea',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));



End then, up to the position you need to add the widget, put the following:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('WidgetArea') ) : ?> <?php endif; ?>

2012-08-31

Michael Caputo answers:

After the h1 in the hgroup tag, add this:


<div id="widgetBox"><?php dynamic_sidebar('Header Widget'); ?></div>


in your CSS add:


#widgetBox{float:right;}


in your functions.php add:


if ( function_exists('register_sidebar') ) {

register_sidebar(array(
'name' => 'Header Widget',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));
}

2012-08-31

designchemical answers:

see following tutorial

http://www.designchemical.com/blog/index.php/wordpress-tips/wordpress-tutorial-adding-a-widget-area-to-your-theme-files/

2012-08-31

Daniel answers:

Use this tutorial to give you the exact answer. [[LINK href="http://reflectingthedesigner.com/wordpress/2011/03/09/adding-a-widgetized-sidebar-to-your-header/"]]http://reflectingthedesigner.com/wordpress/2011/03/09/adding-a-widgetized-sidebar-to-your-header/[[/LINK]]


2012-08-31

Arnav Joy answers:

Hello First of all you have to wrap <h1> and <h2> at <hgroup> under a div and then you can add widget

so here is the code for all

open header.php

find

<hgroup>
<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>


now change it as

<hgroup>
<div class="hgroup_left">
<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
</div>
<?php dynamic_sidebar('upper_right_widget'); ?>
</hgroup>


and then add the sidebar in functions.php

if ( function_exists('register_sidebar') ) {

register_sidebar(array(

'name' => 'Upper Right Widget',

'id' => 'upper_right_widget'

'before_widget' => '<div class="upper_right_widget">',

'after_widget' => '</div>',

'before_title' => '',

'after_title' => ''

));

}


then add following to style.css

.hgroup_left{float: left; width: 450px;}
.hgroup_left h1{width: 450px; float: left;}
.hgroup_left h2{width: 450px;}
.upper_right_widget{float: right; height: 75px; margin-top: 17px; width: 321px;}



c a comments:

tried to insert as-is and when I reloaded the site I got:
<blockquote>Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING, expecting ')' in /home/american/public_html/wp-content/themes/NomNom/functions.php on line 135</blockquote>


c a comments:

i added a comma after the 'id' line in your functions.php code and the site loaded fine.

But the test text I entered in the widget is left-justified under the Site Title vs. over on the right side where I want it.


Arnav Joy comments:

please add following lines in your style.css file

.hgroup_left{float: left; width: 450px;}

.hgroup_left h1{width: 450px; float: left;}

.hgroup_left h2{width: 450px;}

.upper_right_widget{float: right; height: 75px; margin-top: 17px; width: 321px;}


c a comments:

Before you sent the additional code I got the phone number to appear where I wanted by entering HTML/CSS right into the widget area itself. It's probably not the "right" way to do it but I needed a quick solution.
Here's the code:
<br><strong><p style="text-align: right;color:#6699cc; font-size:25px">Phone: <a href="tel:321-363-1731">&nbsp;321 - 363 - 1731</a></p></strong>
The result is attached (circled in yellow).

Now I will add in the code you suggested and see if I will be able to create the same result.
thanks


c a comments:

Before you sent the additional code I got the phone number to appear where I wanted by entering HTML/CSS right into the widget area itself. It's probably not the "right" way to do it but I needed a quick solution.
Here's the code:
<br><strong><p style="text-align: right;color:#6699cc; font-size:25px">Phone: <a href="tel:321-363-1731">&nbsp;321 - 363 - 1731</a></p></strong>
The result is attached (circled in yellow).

It may just be me, but it looks like the additional code you just suggested is the same as the code you originally suggested. I just checked and my style.css already has that code - per your prior response.

thanks


c a comments:

test


c a comments:

sorry for the dual replies and "test" msg. Every time I hit submit it would give me a server 500 error and then redirect me back to this page (showing no resulting post). So I tried it a couple of times and finally tried a "test" post. Then it finally worked (and I found out that my prior posts had made it to this page - without the attached screenshot).


c a comments:

am trying to add the referenced screenshot in this msg.