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

Wordpress Esquire Theme 2 things WordPress

  • SOLVED

HI, hopefully you can help me.

I am currently using the esquire theme in wordpress: http://esquiretheme.tumblr.com/

It only has one widget area, which is located at the footer so...

1.How can I create/add a widget area to the Header & Right Sidebar???
( I would like to have a slider header with 2 menus, exactly like vogue's : http://www.vogue.com/ and then I would like a right sidebar for quotes and tag clouds.)

2. Also I can not put my social icon and follow icons on the left side bar, HOW can you put them as it is on my tumblr : http://pretaporte.tumblr.com/

(attached is how I would want it to look)

Answers (2)

2012-05-21

Jatin Soni answers:

//Add below code into your function.php

register_sidebar(array(
'name' => 'Header Sidebar', //this should be unique
'id' => 'header-sidebar', //this should be unique
'description' => 'These are widgets for the sidebar.',
'before_widget' => '<div id="%1$s" class="widget %2$s">',// you can change widget class to yours
'after_widget' => '</div>',
'before_title' => '<h5 class="heading">',// you can change heading class to yours
'after_title' => '</h5>'


//Now create one file called sidebar-header.php
<!--BEGIN: sidebar-->
<aside id="header-sidebar" role="complementary">

<?php if ( !function_exists('dynamic_sidebar') ||
!dynamic_sidebar('header-sidebar') ) : ?>
<section>
<h2>No widgets</h2>
<p>You should add some widgets</p>
</section>
<?php endif; ?>

<!--WP Hook for plugins-->
<?php wp_meta(); ?>

</aside>
<!--END: sidebar-->



// in your header file place below code when you want to use sidebar widgets
get_sidebar('header'); //this should be unique

// style
You have to style your sidebar as per your need

Addition: You can change class and id as per your need

Follow same steps to create more positions only marked <strong> //this should be unique </strong>things should be unique for each registered sidebar

For social icons placing into sidebar you need to add social icon code into the sidebar before code something like dynamic_sidebar

I can do it for you if you give me access or files. but if with style than will charge more.

2012-05-22

Francisco Javier Carazo Gil answers:

Respect to social buttons in sidebar, he has done the next:

<h3>Find me</h3>
<div id="social">
<a href="http://twitter.com/pret_a_porte" class="twitter" title="Twitter" rel="me">Twitter</a>



<a href="http://www.linkedin.com/in/pretaporte" class="linkedin" title="Linked In" rel="me">Linked In</a>


<a href="http://www.facebook.com/pret.a.porte" class="facebook" title="Facebook" rel="me">Facebook</a>


<a href="http://www.youtube.com/user/Mspretaporte" class="youtube" title="YouTube" rel="me">YouTube</a>
</div>


And this CSS:

#social{overflow:hidden;}
#social a{position:relative;width:40px;height:40px;background:url("http://static.tumblr.com/gpln05e/uwQkz627t/social.png") no-repeat 0 0;text-indent:-999em;}
#social .hit{position:absolute;width:40px;height:40px;top:0;left:0;background-color:#000;}
#social .flickr{background-position:-40px 0;}
#social .lastfm{background-position:-80px 0;}
#social .vimeo{background-position:-120px 0;}
#social .linkedin{background-position:-160px 0;}
#social .dopplr{background-position:-200px 0;}
#social .delicious{background-position:-240px 0;}
#social .facebook{background-position:-280px 0;}
#social .quicksnapper{background-position:-320px 0;}
#social .daytum{background-position:-360px 0;}
#social .youtube{background-position:-400px 0;}