Tag: code

Use PHP To Display Elements

Here is something which I wanted to do with WordPress for a while now. In the sidebar, I wanted to remove the ecommerce seals for the SSL certificate and PayPal from the main blog entries and only have them display for the WordPress Pages. This is where The WordPress Codex comes in handy and explains how WordPress Conditional Tags can be used to display content based on what page the reader is currently viewing. There is even a code sample for the sidebar.

In my case, though it was really simple, I just added the html code for the gifs into a php section, similar to this:

<?php if (is_page()) {
    echo "<img src="http://www.site.com/logos/paypal.gif" />";
    }
?>

However note, that this code will not work! If you notice, that the echo statement uses double-quotation marks and that the html code does as well, you will realize that in order for this code to work, you have to escape the quotation marks in the html by using the backslash.

Therefore the correct code would look like this.

<?php if (is_page()) {
    echo "<img src=\"http://www.site.com/logos/paypal.gif\" />";
    }
?>

The is_page tag is used in this case to mean that if I am on a WordPress Page, then include the html in the echo command. To add more html code, I would just add another echo command, making sure I enclosed it in quotes, and that I escaped any quotes in the html with a backslash, and finally in PHP, you have to end each command with a semicolon.

For further information on conditional tags see the WordPress Codex.

Filed under: WordPressTagged with: , , , , , , ,

HTML Lists Tags

One easy way to start coding semantically is to use lists tags. For me personally, lists tend to organize my HTML code and make content more readable in general. Lets look at three basic tags that everyone can use, starting with the most common.

The Unordered List

This is probably the tag that we rely most often on. Many designers use it to create link menus as well as the occasional content list. In our example we are going to organize some audio tracks that I got from Apple’s iTunes Store.

<h4>My iTunes Music</h4>
<ul>
  <li>Man In the Box - Alice In Chains</li>
  <li>Cool - Gwen Stefani</li>
  <li>Killing Me Softly with His Song - Fugees</li>
  <li>Not Gonna Get Us - t.A.T.u.</li>
  <li>Born Under a Bad Sign - Jimmy Hendrix</li>
</ul>

The above code will render with a bullet for each item, and automatically indent. It should look something like this:

My iTunes Music

  • Man In the Box – Alice In Chains
  • Cool – Gwen Stefani
  • Killing Me Softly with His Song – Fugees
  • Not Gonna Get Us – t.A.T.u.
  • Born Under a Bad Sign – Jimmy Hendrix

But how about if I wanted to organize each of my iTunes tracks? Perhaps I had many of them and I wanted to have them all numbered. In this case, the standard unordered list tag is not what I really need.

The Ordered List

Enter the ordered list tag which can automatically number all my items for me.

<h4>My iTunes Music</h4>
<ol>
  <li>Man In the Box - Alice In Chains</li>
  <li>Cool - Gwen Stefani</li>
  <li>Killing Me Softly with His Song - Fugees</li>
  <li>Not Gonna Get Us - t.A.T.u.</li>
  <li>Born Under a Bad Sign - Jimmy Hendrix</li>
</ol>

Using CSS, I can also style the ordered list using the list-style-type property so that the default list style can be:

  • decimal: 1, 2, 3,…
  • upper-alpha: A, B, C,…
  • lower-alpha: a, b, c,…
  • upper-roman: I, II, III,…
  • lower-roman: i, ii, iii,…
  • none:

The standard decimal default, of the ordered list for my iTunes tracks automatically numbers each of the items for me, so that I do not have to worry about actually adding numbers between the li tags.

My iTunes Music

  1. Man In the Box – Alice In Chains
  2. Cool – Gwen Stefani
  3. Killing Me Softly with His Song – Fugees
  4. Not Gonna Get Us – t.A.T.u.
  5. Born Under a Bad Sign – Jimmy Hendrix

However, after ordering my iTunes tracks, I decide that I would rather organize my tunes according to artist, since my collection has grown and now includes multiple tracks from the same artist.

The Definition List

In this case, I am going to change my list and make things even more structured.

<h4>My iTunes Music by Artist</h4>
<dl>
  <dt>Alice In Chains</dt>
    <dd>Main In the Box</dd>
    <dd>Would? (Unplugged)</dd>
  <dt>Gwen Stefani</dt>
    <dd>Cool</dd>
  <dt>Fugees</dt>
    <dd>Killing Me Softly with His Song</dd>
  <dt>t.A.T.u.</dt>
    <dd>Not Gonna Get Us</dd>
  <dt>Jimmy Hendrix</dt>
    <dd>Born Under a Bad Sign</dd>
</dl>

By using the multiple dd tags, for the same dt tag, I have an easy way of organizing my songs by artist.

My iTunes Music by Artist

Alice In Chains
Main In the Box
Would? (Unplugged)
Gwen Stefani
Cool
Fugees
Killing Me Softly with His Song
t.A.T.u.
Not Gonna Get Us
Jimmy Hendrix
Born Under a Bad Sign

By using common list tags like the Unordered List, Ordered List, and Definition List you can quickly add structure to your HTML and at the same time use CSS more effectively to quickly add design elements to your page.

Filed under: XHTMLTagged with: , , , , , , , , , ,

Google Analytics

Google just announced that they are going to providing another service, called Google Analytics. The new service allows webmasters to have free web stats based on Google’s prior Urchin Stats service. All you have to do is signup with Google on their Google Analytics site, and signin using your Gmail, Adsense, or Adwords account.

Once you go through the signup process, you get a simple javascript to add to your html pages.

For WordPress users dt’s Blog.thedt.net site has a Google analytics plugin that gives you a simple text box for you to paste the script code into. I had to correct the plugin code, because for some reason it stripped out the php lines, so if you cannot correct the code from dt’s site, feel free to copy the Google Analytics plugin code from our WordPress forum.

Another WordPress plugin that is easier to use is Cavemonkey50’s Google Analyticator plugin. Unlike dt’s plugin, Analyticator just asks you for the user account code, and not the entire script.

However how does Google Analytics compete against the other web stats packages out there, well Eric Peterson gives us some of his thoughts on Google giving away web stats.

Filed under: Google BitsTagged with: , , , , , , , ,