What’s this Comic About?

Basically all the ‘modern’ browsers are playing in the treehouse and poor IE6 is disgruntled that he cannot. He is sporting a 5 o’clock shadow and looks a little mean. Meanwhile, Firefox is pointing out that IE7 is indeed related to the banned browser. My question is this: why is IE7 still allowed in the treehouse? Or any IE for that matter. Internet Explorer 8 doesn’t even allow us to do anything cool with CSS3 or HTML5. Bottom line, die IE die!

First off, why would you want this? Let's say you have a blog and in the footer (or header... or sidebar) you'd like to have the facebook like button. Well, it really isn't very practical to have to insert this in the footer of your post everytime you create a new entry. Solution: let's leverage the power of PHP to make the Facebook like button dynamic!

Facebook Like Button PHP Code

 <iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo rawurlencode('http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']); ?>&amp;layout=standard&amp;show_faces=false&amp;width=275&amp;action=like&amp;colorscheme=dark&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:275px; height:35px;" allowTransparency="true"></iframe>

Code Explanation

What the code above will do is allow you to insert a dynamic like button in a common place on your website and have that button's url change according to the page the visitor is on (hence why I say dynamic). For instance, on a WordPress site you could put the code in your sidebar.php file and the url to be 'liked' would be whatever page the visitor is on.

Extra Tips

If you don't want the url to change and only want the user to 'like' one url on your site (let's say the homepage for instance) then you could change the address to that static text. This is in fact how the Facebook like button creation tool works on their website.

Also: Don't forget the power of PHP and, if you're on the WordPress CMS then you can also leverage the built in functions like bloginfo('url'); and more! Simply replace

Hope you enjoy this snippet. Also, FYI... Facebook has changed 'become a fan' to just like... Questions? Leave a comment below or Contact DLOCC

Why do this? It makes it very easy to move over the WordPress database when it's time to go live. Developing locally is always in your best interest. This method is preferred over 'going commando' because you can keep better control over your code and it's faster to develop. Plus a whole slew of other reasons that you can Google if you feel like it. Let's get started on setting up your WordPress install to use XAMPP's virtual hosting capabilities.

1. Open your Windows Hosts file by clicking on My Computer and navigating to "\Windows\system32\drivers\etc\"

2. Add the following to the bottom of the hosts file by using your text editor of choice. Notepad will work just fine.

127.0.0.1 somesite.com
127.0.0.1 www.somesite.com

Note: Be sure to replace "somesite" with your actual WordPress website domain name

3. Now navigate to your XAMPP httpd-vhosts.conf by navigating to: C:/XAMPP/apache/conf/extras

4. Uncomment the following line:

5.Add the following at the bottom of the file and save the file before you close it:

<VirtualHost *:80>
DocumentRoot “E:/xampp/htdocs/”
ServerName localhost
ServerAlias localhost
</VirtualHost>

<VirtualHost *:80>
DocumentRoot “E:/xampp/htdocs/somesite”
ServerName www.somesite.com
ServerAlias www.somesite.com
</VirtualHost>

<VirtualHost *:80>
DocumentRoot “E:/xampp/htdocs/somesite”
ServerName somesite.com
ServerAlias somesite.com
</VirtualHost>

Wait! One last thing... Now restart Apache and MySQL (using XAMMP) and you should be good to go when you navigate your browser to the url you specified for your WordPress installation using the tutorial above (once you restart the services). If you have any comments or questions be sure to use the comment box below or the Contact DLOCC.

This method is useful if you are looking for a way to have either a print button for a specific image on a page. Please refer to the demo to see exactly how this can be accomplished. Remember to specify the image's width and height in the JavaScript onClick event.

<img src="http://www.dlocc.com/articles/wp-content/uploads/2010/07/fluffy-kitten.jpg" alt="Print this Fluffy Kitten by Clicking Below" />
<a href="#" onclick='javascript:window.open("http://www.dlocc.com/articles/wp-content/uploads/2010/07/fluffy-kitten.jpg","mywindow","width=322,height=323,left=650,top=-1"); location.href="javascript:window.print()"'>Click to Print the Image Above</a>  

If you want to see the demo please click through and we'll show you how to use JavaScript to print images by clicking a link.

Demo JavaScript Print Image Button:

For my example here I will show you how to create alternating classes for use with the WordPress loop. This way, when the loop pulls your posts from the db every post container will have a separate class name up to as many as we define in our array. This method of alternating classes in WordPress will work for wherever you have a loop. Therefore, your comments, categories, tags, etc. can all be styled up using this method. Pretty cool huh? Let's see how this is done.

First Define the Class Array

The bit of code below should NOT be inside your WordPress loop, rather right before it.

<?php 
    // let's setup some classes first for us to style
    $style_classes = array('dloccBox1','dloccBox2','dloccBox3');
    $style_index = 0;
?>

Next Echo the Classes

Now that we have our array setup it's time to output the class names into the loop

<?php query_posts('category_name=portfolio&order=asc&nopaging=true'); ?>
	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
              <div class="<?php $k = $style_index%3; echo "$style_classes[$k]"; $style_index++ ?>">
                   <?php the_content(); ?>
              </div>
       <?php endwhile; else: ?>
<?php endif; ?>

On the third line notice how we are using this bit of code to output a class name and then cycle to the next item in the array? Now you are free to style as you wish! Of course, make sure you test with Firebug that the classes are outputting as you want. Let me know if you have any question by commenting below!