Archive for December, 2011


I cannot find any guide regarding the title and luckily I stumble upon a website the uses Google translate and I noticed every time I click on to another language it redirects to translate.google.com and removes the top frame. I am a programmer (but a dumb one) and with that little background I became curious and analyze the source code of the page. I found a short code written in JavaScript which I suspect is the one responsible in removing the top frame whenever the page loads or redirects to google’s translation site.

I copied the code and tested on my draft blog which is hosted on my computer locally, To my surprise it worked and I want to share this with everyone who’s curious and want to get rid of the top frame whenever they want to translate a certain page or website this is helpful for webmasters and blogger’s as well.

Before I tell you how to do it let me warn you that it only works per one language. If you attempted to translate it to another while on the certain translated page an error will show up. As a temporary fix you need to go back to the home page as in the original URL of the site e.g. http://www.farneville.com then select another.

Without further ado here’s the small piece of code:


<script type='text/javascript'>
if (window.top !== window.self) {window.top.location = window.self.location;}
</script>

Simply paste it below the <body> tag of your site or blog and make sure you already have the translation widget or links before applying.

Changing The Site URL

Posted: December 30, 2011 in Php, Wordpress

Uploading site on server:
Follow the following instruction:
1.Upload the zip file of projectwork/website
2.Create new dabtabase,user&password.
3.Configure wp-config.php
4.Check wp-admin if it redirects to localhost then update wp-config.php with the following 2 lines.
update_option('siteurl','http://example.com/blog');
update_option('home','http://example.com/blog');
For more details check this link: http://codex.wordpress.org/Changing_The_Site_URL

In this Tutorial, you’ll learn how to build a Custom homepage for your WordPress Theme using Page Templates: Complete with a featured content slider, and customizable Widgets.

Materials Needed:

A lot of people I have seen asking about how to make a custom landing page for their WordPress website. In most standard themes, the homepage is a listing of recent posts.

What if instead you want to display a separate landing page? Maybe your site isn’t a typical run of the mill blog.

The Structure

To have a custom template page for WordPress to recognize, simply create a new PHP file, I named mine custom_home.php, and at the very top when you call the header as you normally do, include this little snippet with the name of your custom page, so it should look like this,

  1. <?php
  2.     /* Template Name: Custom Home Page */
  3.     get_header();
  4. ?>

Upload this file to your Theme Folder.

Now, when you’re adding or editing a page in WordPress, you should see a new Template in the Template Dropdown (inside the Attributes box).

You can use it now, but it wont do much for you just yet, since this is a blank file.

How you develop your template is completely up to you. In this tutorial, we’re going to craft something based off the illustration below:

Image Description

So go ahead and code this in HTML as you would any other page, keeping in mind that your header and footer should still be called with WordPress,

  1. <div id=”main_wrapper”>
  2.     <div id=”featured_area”>
  3.     </div>
  4.     <div id=”column_wrapper”>
  5.         <div class=”column”>
  6.         </div>
  7.         <div class=”column”>
  8.         </div>
  9.         <div class=”column”>
  10.         </div>
  11.     </div>
  12. </div>

Adding a Featured Content Slider

At the top of this page, we’re going to add a featured Content Slider using the awesomejQuery plugin Easy Slider 1.7 by Alen Grakalic. I love his plugin because it is very easy to implement and built really well. Go ahead and download and unzip the file. Move the “easySlider1.7.js” file into your theme folder (if you’d like to stay organized, placing it in a /js/ folder makes sense)

Jump back into the featured_area div we created earlier, and build yourself a little list of links like so,

  1. <div id=”feature_slider”>
  2.     <ul>
  3.     <li><a href=”#”><img src=”<?php bloginfo(‘template_directory’); ?>/images/image1.jpg” alt=”First Slide” /></a></li>
  4.     <li><a href=”#”><img src=”<?php bloginfo(‘template_directory’); ?>/images/image2.jpg” alt=”Second Slide” /></a></li>
  5.     <li><a href=”#”><img src=”<?php bloginfo(‘template_directory’); ?>/images/image3.jpg” alt=”Third Slide” /></a></li>
  6.     <li><a href=”#”><img src=”<?php bloginfo(‘template_directory’); ?>/images/image4.jpg” alt=”Fourth Slide” /></a></li>
  7.     </ul>
  8. </div>

Notice that the links point to nowhere for now, you can put any address you like there. Also, the image path points first to the theme directory, where you will be uploading this very file you are making, so simply upload your images into an images folder in your themes root.

Now we need to add a bit of CSS to handle the slider and columns. So open up your style.css located in your theme’s root and find a cozy place to add some styling.

Careful

If your theme already uses some of the ID’s and classes we’re trying to use, you may need to rename them. Otherwise, some styles may not work properly.

  1. #main_wrapper{
  2. width:940px;
  3. }
  4. #featured_area{
  5. width:720px;
  6. margin:10px auto;
  7. border:1px solid #333;
  8. -moz-border-radius: 10px;
  9. -webkit-border-radius: 10px;
  10. }
  11. #feature_slider{
  12. margin:0 auto;
  13. position:relative;
  14. width:700px;
  15. }
  16. #feature_slider ul, #feature_slider li{
  17. margin:0;
  18. padding:0;
  19. list-style:none;
  20. }
  21. #feature_slider li{
  22. width:700px;
  23. height:250px;
  24. overflow:hidden;
  25. }
  26. #column_wrapper {
  27. width: 940px;
  28. height: 200px;
  29. margin: 10px auto;
  30. }
  31. #column_wrapper .column {
  32. width: 290px;
  33. margin-left: 15px;
  34. float: left;
  35. border: 1px solid #333;
  36. -moz-border-radius: 10px;
  37. -webkit-border-radius: 10px;
  38. }

This is assuming that you are using slides that are 700 pixels wide by 250 pixels tall, naturally you can adjust at your leisure. Also note, we are installing only basic functionality of what this slider is capable of, feel free to add to it by examining the downloaded plugin files. We also set a wrapper for the columns and gave them each a width of 290px and spaced evenly.

The JavaScript

So we have a list of pictures and some styling to surround them, but they still wont do much without a final step. Open up header.php and inside the

area, we need to both include the slider script, and call the function. So somewhere below

  1. <?php wp_head();?>

add the following;

  1. <script src=”<?php bloginfo(‘template_directory’); ?>/js/easySlider1.7.js” type=”text/javascript” charset=”utf-8″></script>
  2. <script type=”text/javascript”>
  3.     jQuery(document).ready(function(){
  4.         jQuery(“#feature_slider”).easySlider({
  5.             auto: true,
  6.             continuous: true,
  7.             controlsShow: false
  8.         });
  9.     });
  10. </script>

What happens here is we call the plugin function and send in the arguments to override the default behavior, setting the slider to start automatically, and keep on going. We now have a sweet working content slider!

Add Custom Widget Areas

Now you can guess what comes next, we have three nice columns just begging to be widget friendly, so I think we shall comply. Inside each column, we will include the code to let WordPress know they are ready to accept widgets. To do this, we will need something like this:

  1. <?php if (function_exists(‘dynamic_sidebar’) && dynamic_sidebar(‘WIDGET_TITLE’)) : else : ?>

This first checks to see if widgets are activated, and if so will call the appropriate widget based on the argument passed in, currently it calls a dummy widget named WIDGET_TITLE, we will change that. But for now go ahead and add one of these inside each of the column classes:

  1. <?php if (function_exists(‘dynamic_sidebar’) && dynamic_sidebar(‘left_column’)) : else : ?>
  2.         <p><strong>Widget Ready</strong></p>
  3.         <p>This left_column is widget ready! Add one in the admin panel.</p>
  4.     <?php endif; ?>
  5. <?php if (function_exists(‘dynamic_sidebar’) && dynamic_sidebar(‘center_column’)) : else : ?>
  6.         <p><strong>Widget Ready</strong></p>
  7.         <p>This center_column is widget ready! Add one in the admin panel.</p>
  8.     <?php endif; ?>
  9. <?php if (function_exists(‘dynamic_sidebar’) && dynamic_sidebar(‘right_column’)) : else : ?>
  10.         <p><strong>Widget Ready</strong></p>
  11.         <p>This right_column is widget ready! Add one in the admin panel.</p>
  12.     <?php endif; ?>

Take note that all three must have unique names in order to function properly. Additionally, don’t go try and play with this yet because it won’t work! We still need to tell WordPress we are making up our own widget areas.

So go now and open up the scary functions.php file, found once again in the root folder of your theme files. Once open, we are going to add this ugly chunk of code, don’t worry though we will step through it.

  1. if (function_exists(‘register_sidebar’)) {
  2.     register_sidebar(array(
  3.         ‘name’ => ‘Left Column’,
  4.         ‘id’   => ‘left_column’,
  5.         ‘description’   => ‘Widget area for home page left column’,
  6.         ‘before_widget’ => ‘<div id=”%1$s” class=”widget %2$s”>’,
  7.         ‘after_widget’  => ‘</div>’,
  8.         ‘before_title’  => ‘<h4>’,
  9.         ‘after_title’   => ‘</h4>’
  10.     ));
  11.     register_sidebar(array(
  12.         ‘name’ => ‘Center Column’,
  13.         ‘id’   => ‘center_column’,
  14.         ‘description’   => ‘Widget area for home page center column’,
  15.         ‘before_widget’ => ‘<div id=”%1$s” class=”widget %2$s”>’,
  16.         ‘after_widget’  => ‘</div>’,
  17.         ‘before_title’  => ‘<h4>’,
  18.         ‘after_title’   => ‘</h4>’
  19.     ));
  20.     register_sidebar(array(
  21.         ‘name’ => ‘Right Column’,
  22.         ‘id’   => ‘right_column’,
  23.         ‘description’   => ‘Widget area for home page right column’,
  24.         ‘before_widget’ => ‘<div id=”%1$s” class=”widget %2$s”>’,
  25.         ‘after_widget’  => ‘</div>’,
  26.         ‘before_title’  => ‘<h4>’,
  27.         ‘after_title’   => ‘</h4>’
  28.     ));
  29. }

Alright, so it looks nasty, but all that happens here is WordPress sees that we are creating our own areas capable of being widgetized. First it checks if we are allowed to register new areas and then creates a couple of sidebar arrays. Don’t worry, they will not become sidebars, that is just the name. Inside the array we identify a few values such as the name of the widget area and a unique ID to assign it for CSS purposes and the like. The description is, well, a description and then the weird stuff. The before and after widget attributes open and close a div element, and use a WordPress magic to make sure the class and id are unique to each. The title before and after set, optionally, what surrounds the user entered title of the widget. This places it inside a set of h4 tags.

Not too bad right? And we are almost done! Go ahead and call the footer in at the very bottom of your new custom home page, and this will close up this page for now, yay!

  1. <?php get_footer(); ?>

The Endgame

Ok now grab your completed file, custom_home.php (if you named it same as mine) and if you have not already drop it into your theme root folder and lets make this happen. Log into your WordPress Admin area and be sure the theme you want is activated. Create a new page and name it ‘Home’ then be sure to set its template to the one we just made, like this,

Image Description

Now head into the settings area and click on the ‘reading’ option. Up at the top where it asks you what the front page should display, click on static page, then choose your freshly made ‘Home’ page from the drop down menu.

Image Description

Only one more stop! Hit up the widgets panel now, and notice you have three of your own widget ready areas sitting on the side begging for some content.

Image Description

So comply! Fill them up and save it then visit you site and you should see an awesome custom home page now, enjoy it!

Courtesy: Tutorial9


Free Picasa Flash and HTML photo gallery plugins for Picasa to showcase your photos.

Sharing Option

Posted: December 20, 2011 in Uncategorized

To include the button beneath each post,

  1. Select Layout > Edit HTML
  2. Check the Expand Widget Templates checkbox
  3. Copy and paste the code snippet below into the template, right after the <div class='post-footer'> tag
  4. Click Save Template

<!– AddThis Button BEGIN –>
<br/>
<div>
<script type=”text/javascript”>var addthis_pub=”49eecb9c76fa2be1″;</script><br/>
<a expr:name=’data:post.title’ expr:id=’data:post.url’ onmouseover=’return addthis_open(this, “”, this.id, this.name);’ onmouseout=’addthis_close()’ onclick=’return addthis_sendto()’><img src=”http://s7.addthis.com/static/btn/lg-share-en.gif&#8221; width=”125″ height=”16″ alt=”Bookmark and Share” style=”border:0″ /></a>
<script type=”text/javascript” src=”http://s7.addthis.com/js/200/addthis_widget.js”&gt;
</script>
</div>
<br/>
<!– AddThis Button END –>