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.

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!

Let's start off by saying that the word(s) 'web safe/websafe' will hopefully one day become extinct. That being said, there are many issues surrounding web fonts such as font licensing issues, browser compatibility and so on. As well, it can be tricky to navigate the various solutions out there and to decide on the one that's right for you. The aim of this article is to help you decide which solution is right and for you to be confident in that decision. Let's dive right in to examine what the Internet has to offer web designers seeking an alternative to the normal CSS font-families.

Google Font API / Google Font Directory

We begin with Google's Font API since it's the newest and freshest web font solution out there. This latest freebie from Google is like a free version of TypeKit without the huge font selection. I heard that they worked together on the project... who would turn down working with Google on a project? Not TypeKit.

Implementing Google Fonts

To begin using the Google Font Directory all you have to do to use click here to go to Google Font Directory, click on font you like from the list and copy-and-paste the appropriate code like this:

For Lobster Font Family: Put this code in the this head of your website to get the font from Googleapis

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

It's a snap to use the Google Font API...

The Google Font API will do everything for you. All you have to do is put the font family on a CSS selector like so:

.foo { font-family: 'Lobster', arial, serif; }

As you can see this is catching the attention of many web designers out there, including me. I've already started to use this on my website and I imagine that we'll be seeing this on a lot more WordPress blogs to begin with and eventually higher page-ranked sites.

Similar to Google Font Directory

TypeKit and FontDeck are similar font Libraries, but without the Google Font API. The CSS3 rule @font-face is very close to the same principle.

Why You Should Use Google's Font API

1. Save the bandwidth on your site. Visitors won't be downloading the font from your server.
2. If the same font is used across multiple sites it will
3. Google is fast, very fast

Why You Shouldn't Use Google's Font API

1. There's only around 20 fonts to choose from

Cufon

Cufon is a font replacement solution that aims to be the alternative to sIFR. Their is no Flash or plug-in involved here, only natively supported features.

Implementing Cufon

To use this solution select a font file that you'd like to use (.TTF, .OTF etc.) and head over to the Cufon Font Generator.

Once you get to the font generator page complete all the mumbo jumbo on there, the form itself is a bit confusing to understand at first I must admit. Assuming you filled out the font generator form properly it'll spit out a javascript file with the name of your font and some numbers (I believe this is your font weight). Save these files and upload them to your web server. If you have trouble with the form there's a Google Cufon group you can check out for help.

Now it's time to replace the text you want using cufon. Copy-and-paste the following into the head of your document but replace the script source to point to the location you uploaded the files the font generator generated.

Cufon does have it's use on the Internet, but it's more of a niche than poised to overtake any of the upcoming font library solutions. It does allow you to use any font you wish as long as it's in the common formats, but this also opens the door for lawsuits for businesses and organizations. Cufon is cool though, impress your friends and use it on one of your next projects.

Here's a good video that demonstrates implement cufon:

Example of markup rendered using Cufon:

<span style="width: 68px; height: 18px;" class="cufon cufon-canvas"><canvas style="width: 83px; height: 19px; top: 0px; left: -1px;" height="19" width="83"></canvas><span class="cufon-alt">Browse </span></span><span style="width: 28px; height: 18px;" class="cufon cufon-canvas"><canvas style="width: 43px; height: 19px; top: 0px; left: -1px;" height="19" width="43"></canvas><span class="cufon-alt">by </span></span><span style="width: 84px; height: 18px;" class="cufon cufon-canvas"><canvas style="width: 93px; height: 19px; top: 0px; left: -1px;" height="19" width="93"></canvas><span class="cufon-alt">Category</span></span>

Why You Should Use Cufon

1. Use and font you want (not sure how legal this is...)
2. Supported by all major browsers
3. Support an open source solution

Why You Shouldn't Use Cufon

1. The text is not selectable
2. The font variations show up differently cross-browser
3. It makes your markup looks all crazy with a bunch of spans and inline styles
4. Not as simple to implement
5. Cannot use for body text

@font-face

@font-face is a CSS3 rule that allows you to host fonts on your server and have them rendered via your website if the site visitor does not already have that font installed on their computer. Currently, browser that support the rule are Safari, Firefox, and Google Chrome. IE kinda supports it. So what's the problem? Font licenses... basically money. Many font artists don't want to see their fonts used without bring them in some money, which is completely understandable.

Implementing font-face

Using @font-face is nearly as easy as using the Google Font Library except you have to host the font file on your web server. To use the web font you wish you will need to declare each font family using the @font-face CSS3 rule. For example, you would put the following in your stylesheet:

@font-face {
	font-family: Delicious;
	src: url('Delicious-Roman.otf');
}

@font-face {
	font-family: Delicious;
	font-weight: bold;
	src: url('Delicious-Bold.otf');
}

Then use the font-family via CSS on your chosen elements:

h3 { font-family: Delicious, sans-serif; }

Why You Should Use @font-face

1. Cutting-edge CSS
2. Use any font you wish
3. Easy to implement
4. Selectable Text

Why You Shouldn't Use @font-face

1. Not fully cross-browser compliant
2. Font licensing issues

sIFR

sIFR is a is a web font solution that replaces your text elements with Flash equivalents. I've never implemented or had a need to use sIFR personally, but I have done work on a few websites that had this solution already in the works. I believe this solution will be used less frequently in the future since there seems to be a movement away from Flash. Despite this, the solution is still widely used; here's brief overview of how to implement sIFR:

Implementing sIFR

To begin, make sure you have Adobe Flash. You will need to modify the sifr.fla file and there's no way to do this other than Flash. You can download a trial from Adobe if you don't have it that is good for 30-days. Also, you should have the font files you wish to use as web fonts. Ok, have this all? Let's look at a brief overview of what you will be doing:

1. Download the latest sIFR files
2. Set up the Flash file for the desired typeface
3. Upload the necessary files
4. replace the desired text with the 'sIFR' text
5. styling the new text

Obviously this is a very brief overview. Here's a good tutorial that will walk you through implementing sIFR that is more in depth than my brief rundown.

Why You Should Use sIFR

1. Selectable Text
2. Use any font you want

Why You Shouldn't Use sIFR

1. Flash elements throughout your site
2. Font licensing issues
3. Not as light-weight
4. Not as easy to implement
5. Need Flash to implement

FLIR

FLIR (Facelift Image Replacement) is a font solution billed as the alternative to sIFR, but I would compare it more to Cufon. This means no flash at all. FLIR works with JavaScript, PHP and CSS to create a unique web font solution.

Implementing FLIR

To get FLIR up-and-running on your website you will have to do a bit of file configuration and the uploading files to your web server. Not too bad, but still not as snip snap as some of the previous solutions. Let's look at the overview:

1. Download the FLIR files
2. Configure the config-flir.php file to define the fonts
3. Add to the website by uploading the files and calling the path in you website header
4. Style the tags via the special FLIR.replace(); CSS attribute

For more FLIR implementation information check out: Introduction to FLIR and How to Use Any Font You Wish With FLIR.

Why You Should Use FLIR

1. Easier than sIFR to implement
2. Use any font you wish

Why You Shouldn't Use FLIR

1. Non-selectable text
2. 'Unclean' markup similar to Cufon
3. Right-click reveals the text is an image

Final Thoughts

After exploring a few of the popular web font solutions in use today I feel confident that the web will eventually move the way of web fonts for mostly headings and other similar elements. For actual content text it should be best practice to use a readable font-family that is native to all browser. This limits your problems and allows your users to view your site's content much more easily.

If you are having trouble implementing any of the above solution please feel free to leave a comment below or shoot me an email. Also, don't forget to become a fan of DLOCC on Facebook or liking this article! Thanks for all the support and have a good time making the web more typographically beautiful!

wp_list_pages Separators

$args = array(
  'sort_column' => 'menu_order',
  'title_li' => '',
  'depth' => '1',
  'echo' => 0
);
$separator = ' | ';
$pattern = '/(<\\/a>).*?(<\\/li>).*?(<li)/is';
$replace = '</a>' . $separator . '</li><li';
$subnav = preg_replace($pattern,$replace,wp_list_pages($args));
echo $subnav;

Please note: I got this code from Rares Comes (very nice lavalamp menu there)

Page: Fruit
subpage: Banana
subpage: Apply
subpage: Orange

On Parent Page

If you were wanting to show a navigation menu of all subpages in the Fruit category you could use the following bit of code:

<?php
  $children = wp_list_pages('title_li=&child_of='.$post->ID.'&echo=0');
  if ($children) { ?>
  <ul id="mainNav">
	<div id="locationsNavHead">choose a product</div>
  <?php echo $children; ?>
  </ul>
<?php } ?>

On Subpages

For child, or subpages, we could use the following bit of code:

<div id="sidebar">
<?php
//list subpages even if on a subpage
  if($post->post_parent)
  $children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0");
  else
  $children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
  if ($children) { ?>
  <ul id="mainNav">
  <div id="locationsNavHead">choose a product</div>
  <?php echo $children; ?>
  </ul>
<?php } ?>
</div>

If you are confused at what this all means please comment below and check out wp_list_pages() over at the WordPress Codex

The good things about this web font solution is that it is very easy to implement and the text is completely selectable (for copy-and-paste purposes). The downsides (both will eventually become irrelevant) are that not every browser will support it... mostly the old school ones that no one should care about anymore, and that it in it's current state the Google Font Directory is limited to a about 20+ fonts (of which you'd probably use about 10). As the web continues to evolve both of these 'downsides' will no longer be relevant.

Google Web Fonts
Using the Google Font API and Directory

Google's Font API

Google's font API is a part of Google Labs and is an easy to use application programmable interface (API) that allows you to select a font from Google's font directory and use it on any website of your choosing... for free!  Applying a font from Google's Font Directory is a breeze, simply add a stylesheet link to your site's head and then use the font you selected from the directory in a CSS style.  Bingo, bango, bongo.

Usage and Implementation

Here's a Google Font usage example:

First add our stylesheet to the head of your website.

  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> 
  </head>

Next, let's apply the font we chose from the Google Font Directory it to a class on our site! We can do this in our master CSS stylesheet or in your head also (I'd recommend keeping your styles in the mastersheet).

  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> 
    <style>
      .foo {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
  </style>
</head>

Now with this implemented properly using the quick example shown above you will see some sweet Google font below this paragraph that's selectable and easy to implement.

Check me out! This text is selectable and super easy to implement. Thanks Google!

Still Confused? One More Time

Often times, things explained the first time don't make sense. If you're still confused here's the jist

Step 1: Add a stylesheet link requesting the fonts from Google to your website (preferably in the head).

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">

Step 2: Style an element with the font you just requested in step 1. By element I mean any CSS class or ID.

CSS selector {
  font-family: 'Font Name', serif;
}

Step 3: There is no step 3! Just repeat step 2 by styling elements you have already on your website.

Google's Font Directory

Google's font directory, though still in beta and limited to about 20+ fonts, is going to be widely adopted by web designers in the near future.  Why?  Because Google has made a very intuitive, free, and simple to implement solution.  The fonts are free to use on any commercial and non-commercial web projects.

Comparable Web Font Solutions

Google Font Solution Final Thoughts

Answer: Here's a quick snippet of code that will give you an option to do something if these WordPress basic conditional tags are not working in whatever theme you are coding. Before we go any further I want to make sure that you have already tried to use the much simpler WordPress Conditional tags rather than using the method below.

I found this bit of code to be useful in the past when the handy WordPress conditional tags didn't work as intended and I needed another way to perform the same function. Hope you enjoy and please comment if you have any trouble with the code.

<?php
   // DLOCC If URL is Homepage then do this...
        $homepage = "/";
        $currentpage = $_SERVER['REQUEST_URI'];
        if($homepage==$currentpage):
    ?>
<div><p>My Info on Homepage</p></div>
<?php else: ?>
<?php endif; ?>

What this Conditional Statement Does

1. sets the homepage variable as the url root
2. checks the current url in the browser and sets that as the current page variable
3. sets the conditional if the two variables are the same value then do something
]]> http://www.dlocc.com/articles/wordpress-if-url-is-homepage-then-do-this/feed/ 9 http://www.dlocc.com/articles/wordpress-loop-if-parent-or-child-of-category-or-page/ http://www.dlocc.com/articles/wordpress-loop-if-parent-or-child-of-category-or-page/#comments Wed, 19 May 2010 04:41:42 +0000 Devin Walker http://www.dlocc.com/articles/?p=1936 The WordPress loop is extremely useful when developing customized WordPress solutions. One bit of code I've had to use often is one that will display a set of code if the page or post is a parent of child of a certain category. This is an easy way to display, output, or show data on all of your WordPress pages that are a parent or child of a specific category.

What the Code Looks Like

If you are familiar with PHP and the WordPress Codex then you'll know that typically you could use conditional tags to detect the page in a conditional statement. This code is separate from the WordPress codex and is just pure server side PHP goodness.

Display Info on Parent and Child Pages

Here's an example of a WordPress Conditional Statement that displays any relevant information if the particular page is named "Foo" and the category is 420.

<?php if(is_page('Foo') || $post->post_parent == '420' ) : ?>
<?php endif; ?>

Used inside the WordPress Loop

<?php if(is_page('Foo') || $post->post_parent == '420' ) : ?> 
//here we start the conditional statement
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
//here we start the wordpress loop 
<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a>	
//this grabs all post titles and links                        	 
<?php endwhile; else: ?>       
<?php endif; ?>
 //end wordpress loop
<?php else: ?>
//do something else (not necessay but useful)
<?php endif; ?>
 //end if 

[/inline]

The above example is a bit more complex but makes great use for showing the information you want, where you want on your WordPress site.

Display Info on Parent and Child a WordPress Category

The first examples written above dealt with WordPress pages. Now let's show how do display some data using the WordPress conditional tag in_category()

If Post is in Category

This time around we make use of the in_category() conditional tag. In this example some data will show if the category is Foo.

<?php if(in_category('Foo')): ?>
// my data
<?php endif; ?>

If Post is in Category do WordPress Loop

Here we want to display data through the wordpress loop if in a category

<?php if(in_category('Foo')): ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>// my data
<?php endwhile; else: ?>
<?php endif; ?>
<?php endif; ?>

Summary

Using the examples above you can create cool customized sidebars and display information across your website in a more dynamic way. Please let me know if you have any problems by using the contact form below!

]]> http://www.dlocc.com/articles/wordpress-loop-if-parent-or-child-of-category-or-page/feed/ 0