Author Archives: prasad k

All visible things in webpage will be disappear, when we scroll down. Sticky bar in a webpage will stick to the webpage and fixed in a constant position. Here is the tutorial for how to Make Sticky Bar in WordPress Thesis Theme. In this sticky bar, it will have blog name, facebook like, google + button, search bar and go to top button. This bar will stick to the top of the webpage. This sticky bar will make user interface much better and user can easily navigate to home page.

Sticky Bar in WordPress Thesis Theme

Step 1: Wordpress Admin -> Thesis(Left Menu bar) -> Skin Edior -> HTML Editor

Step 2: Add Textbox and give name as “sticky”

Step 3: WordPress Admin -> Thesis(Left Menu bar) -> Skin Content

Step 4: Put the following code in “sticky” textbox

[code type=html]
<div id=”sticky_outer”>
<div id=”sticky_inner”>
<ul id=”stickyleft”>
<li class=”logo”><a href=”/blog/#top”>Freeze Coders</a></li>

<li class=”fb”>
<div><iframe src=”http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Ffreezecoders&amp;send=false&amp;layout=button_count&amp;width=85&amp;show_faces=false&amp;action=like&amp;colorscheme=dark&amp;font&amp;height=21″ style=”border:none; overflow:hidden; width:85px; height:21px; margin-left:38px” allowtransparency=”true” frameborder=”0″ scrolling=”no”></iframe></div>
</li>

<li class=”gplus1″>
<script type=”text/javascript” src=”https://apis.google.com/js/plusone.js”></script>
<div class=”gplus”>
<g:plusone size=”medium” annotation=”none” href=”http://www.freezecoders.com/”></g:plusone>
</div>
</li>
</ul>

<ul id=”stickyRight”>
<li class=”searchbox”>
<form method=”get” action=”http://www.XXXX.com/?s=”><p>
<input class=”sticky_input” type=”text” value=”Text to Search” name=”s” id=”s” onfocus=”if (this.value == ‘Text to Search’) {this.value = ”;}” onblur=”if (this.value == ”) {this.value = ‘Text to Search’;}” />
</p>
</form>
</li>

<li class=”btt”><a href=”#top” title=”Back to top”>↑</a></li>
</ul>
</div>
</div>

[/code]

Step 5: WordPress Admin -> Thesis -> Custom CSS and Put the following code

[code type=html]

#sticky_outer {
position: fixed;
z-index: 2;
top: -110px;
width: 100%;
height: 45px;
line-height: 45px;
color: rgb(255, 255, 255);
border-top: 1px solid rgb(72, 72, 72);
border-bottom: 2px solid rgb(0, 0, 0);
background: #000;
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.6);
}
#sticky_inner {
width: 970px;
margin: 0px auto;
}
#stickyleft {
float: left;
width: 68%;
}
.sticky_input
{
padding: 5px 10px;
border-radius: 19px;
border: 1px solid #000;
color: #C5C5C5;
outline: 0px;
box-shadow: inset 1px 1px 4px #6D6D6D;
-moz-box-shadow: inset 1px 1px 4px #6D6D6D;
-webkit-box-shadow: inset 1px 1px 4px #6D6D6D;
-o-box-shadow: inset 1px 1px 4px #6D6D6D;
-ms-box-shadow: inset 1px 1px 4px #6D6D6D;
}
#stickyRight {
float: left;
width: 25%;
}
#stickyleft li {
margin-right: 1%;
}
#sticky_inner li {
list-style: none outside none;
float: left;
}

#stickyleft .logo a {
width: 225px;
color: rgb(255, 255, 255);
font-family: “Droid Sans”,Helvetica,Arial,sans-serif;
font-weight: bold;
text-transform: uppercase;
display: block;
height: 35px;
}
.fb
{
margin: 11px 0 0 0;
}
.gplus1
{
margin: 2px 0 0 0;
}
.btt a
{
display: block;
color: rgb(204, 204, 204);
margin: 9px 0px 0px 20px;
background: none repeat scroll 0% 0% rgb(255, 255, 255);
padding: 0px 11px;
border-radius: 55px;
height: 29px;
line-height: 25px;
}

[/code]

Step 6: WordPress Admin -> Thesis -> Manage Boxes -> HTML Head Editor -> Head Scripts

Place the following code

[code type=html]

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”>
</script>
<script type=”text/javascript”>
$(function(){
var listval = $(‘#sticky_outer’)[0].offsetTop;
$(document).scroll(function() {
var topval = $(document).scrollTop();
if(topval >= 130){
$(‘#sticky_outer’).css(‘top’,’0px’);
} else {
$(‘#sticky_outer’).css(‘top’,’-110px’);
}
});
});
</script>

[/code]

Floating social media share icons on floating style will bring more attraction on it. Here is the tutorial for how to add Floating Facebook Like, Tweet and Google+ in WordPress Thesis without Plugin.

This floating bar won’t display on home, category and archive page. Floating Social share bar will be displayed only on post page, that is single page.

Floating Bar

Step 1: WordPress Admin -> Thesis (Left side) -> Skin Editor -> HTML Editor

Step 2: Click on Container, which is having columns and sidebar. Then give Hook Name as “floating”

Step 3: Directory -> wp-content ->thesis -> skins -> YOUR SKIN -> custom.php

I am using default “classic-r” skin, so directory path for me is Directory -> wp-content ->thesis -> skins -> classic-r -> custom.php

Step 4: Place the code in custom.php file

• if(is_single()) – this condition will check is this page single page or category page.
• get_permalink($post->ID) – this function will return the current post/article URL
• get_the_title($post->ID) – this function will return current post/article title

[code type=php]

function float() {
if(is_single())
{
?>

<div id=”floating-box”>

<div class=”twitter”><a href=”https://twitter.com/share” class=”twitter-share-button” data-url=”<?php echo get_permalink($post->ID); ?>” data-text=”<?php echo get_the_title($post->ID); ?>” data-count=”vertical”>Tweet</a></div>

<div class=”google”>
<g:plusone href=”<?php echo urlencode(get_permalink($post->ID)); ?>” size=”tall”></g:plusone>
</div>

<div class=”facebook”>
<iframe src=”http://www.facebook.com/plugins/like.php?href=<?php echo get_permalink($post->ID); ?>&amp;width=300&amp;height=258&amp;colorscheme=light&amp;layout=box_count&show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false” scrolling=”no” frameborder=”0″ style=”border: none; overflow: hidden; width: 300px; height: 61px; display: inline; margin: 0 0 0 -2px;” allowtransparency=”true”></iframe>
</div>

<div class=”pin”>
<a href=”http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>” class=”pin-it-button” count-layout=”vertical”>Pin It</a>
</div>
</div>
<?php
}
}

add_action(‘hook_after_floating’,’float’);

[/code]

Step 5:  WordPress Admin -> Thesis (Left side) -> Custom CSS

[code type=css]

#floating-box{
border: 1px solid #DDD;
background: #FFF;
float: left;
margin: 0 0 0 -95px;
padding: 2px;
position: fixed;
top: 255px;
z-index: 1;
width: 65px;
}

[/code]

Default thesis skin will comes with a fixed header and menu/navigation bar. Here is the way how to make full width menu in thesis framework. Full width navigation bar can also be done with custom php code, here we are going to have a full width header with thesis editor in simple way.

This is the default navigation bar style

Navigation menu Thesis

Step 1:   Go to WordPress Admin Panel -> Thesis -> Skin Editor

Step 2:  Choose “HTML Container” box

add html container

Step 3:  Add “Container” box just below the HTML BODY

Step 4:  Click Box options of newly added container, give name as “Head Container” and class as “container”

full width navigation menu bar thesis

Step 5: Move Header box from container to “Head Container”

Step 6:  Add new container box, just below the “Head Container”. Give name as “Full Width Menu” and class as “full-width-menu”

Full width navigation menu bar thesis

Step 7:  Add new container box inside the “Full Width Menu”. Give class as “container”

Full width navigation menu bar thesis

Step 8:  Move “Nav Menu” from container to “Full width Menu” box

Nav Menu from container to Full width Menu

Step 9:   Go to WordPress Admin Panel -> Thesis -> Custom CSS

then add the following css code

[code type=css]
.full-width-header
{
background: #D83434;
}
[/code]

Step 10:   Go to WordPress Admin Panel -> Thesis -> Skin Editor

Add the following css code to .menu a

[code type=css]
.menu a
{
background: #D83434;
color: #FFF;
}
[/code]

Final Result

Final look Full width navigation menu bar thesis