When I talk about “Websites that Work”, one of the things I mean is making sure that the little things are taken care of.

Consider this little snippet of code posted to an online help forum:

<div id="staff-facebook">
<?php
    $facebook = the_field('staff_facebook');
    if (!empty($facebook)) {
    ?>
    <span class="field-label">Facebook:  </span><a href="<?php the_field('staff_facebook'); ?>" target="_blank"><?php the_field('staff_facebook'); ?></a>
    <?php
    } else{} ?>
    </div>

What this code is supposed to do is “If the system has information about someone’s Facebook page, output a link to someone’s Facebook page, otherwise don’t output anything.” But as is, it doesn’t work.

The reason it doesn’t work is that on the third line,
$facebook = the_field('staff_facebook');
should be
$facebook = get_field('staff_facebook');

Change that one bit, and it will work. But beyond that there are several other little things that could be greatly improved. Let’s take them one at a time.

1. The “If” is in the wrong order.

Notice that the first line, <div id="staff-facebook"> falls outside the <?php ... ?> bracketed sections. This means that even when there isn’t any information about the Facebook page in the system, the code will still send and empty block of html to the browser: <div id="staff-facebook"></div>. It’s a little thing. And there may be some cases where you’d want to have that extra <div> sitting there empty. But probably, it’s just extra stuff the browser has to sort through and (in this case) not render on your screen.

So why not put the <div> inside the if statement as well?

<?php
    $facebook = get_field('staff_facebook');
    if (!empty($facebook)) {
    ?>
    <div id="staff-facebook">
    ...
        } else{}
    </div>
?>

2. “Else” what?

Notice that hanging on the end there is this else{} thing. The empty brackets, {}, are the otherwise, the if not, part of the code. It’s clear the person who coded this wants to say that “if there’s no Facebook information, do nothing.”

But again, the way code works, if whatever condition you’ve set in the first part isn’t met, nothing happens. You don’t have to say, otherwise do nothing. You might use else if you wanted to actually do something else. But, like the empty <div> you’ve sent the browser, this is another empty thing that the processor has to process — only to discover that there is nothing to do. It works, but it’s not clean.

3. There’s an extra variable.

The first line here defines a variable: $facebook. That variable is set to hold the contents of a data field stored in the database, presumably the URL of a staff person’s Facebook page.

The $facebook variable is then used to check whether the URL should be sent out as a link for the browser. if ( ! empty( $facebook ) ) { means “if the data is not missing (empty) … do something”.

There are a couple things about this. First, this is way more confusing than it has to be. You get turned around by putting it as “if not empty”. In English, “Do something if there’s not something that’s not there…” Wouldn’t “Do something when there is something” be much clearer?

Second, you can get rid of the $facebook variable altoghether by simply checking get_field( 'staff_facebook' ) directly. If get_field() comes back empty, PHP will consider it a “no”. So instead of

<?php
    $facebook = get_field('staff_facebook');
    if (!empty($facebook)) {
    ?>

why not just

 <?php if ( get_field( 'staff_facebook' ) ) { ?>

Much cleaner! Easier to understand for another programmer who may have to work with it down the road, a smidge faster for the processor to deal with, and one less thing to take up memory in the server.

Granted, these are all little things. But even little things add up.

Moving on!

4. What if someone puts bad information in the system?

Of all the little things, this one is probably actually not such a little thing. Take another look at this part of the code:

<span class="field-label">Facebook:  </span><a href="<?php the_field('staff_facebook'); ?>" target="_blank"><?php the_field('staff_facebook'); ?></a>

To unpack this for non-coders, this bit sends a link (called a URL) to the visitor’s browser that the user can click on to jump to a staff-member’s Facebook page.

Most of the time you can probably assume that whatever the system has for the staff’s Facebook URL is correct. But, not always.

It’s possible, for example, that someone simply mis-typed the URL when they were entering it in the database. Probably harmless enough, but enough to bork the system if what they ended up typing doesn’t conform to any kind of URL. A type-O of this sort might just make the webpage look weird.

But it’s also possible, if the database ever gets hacked, that someone could replace that URL with some nasty bit of code. In that case, you just sent nasty code — a virus, a netbot, who knows!? — to someone’s browser. Yikes!

Whenever you’re outputting something to someone’s browser, you have a responsibility to make sure what you’re sending is safe. In this case, you want to send a valid URL — and nothing ever but a valid URL — to their browser.

It’s not hard to do. PHP and WordPress have a built-in URL cleaner-upper. So even though it is a big deal to leave your URL output exposed, it’s only a little thing to put a safety on it:

<?php echo esc_url( get_field( 'staff-facebook' ) ); ?>

Now, if for whatever reason there’s ever bad stuff, it won’t end up on your customer’s computer!

5. Whose ID is Legit?

I want to come back around one more time to this bit of code:

<div id="staff-facebook">

There’s nothing wrong with this, per se, as long as it’s the only staff Facebook URL on the web page. But what if there is more than one staff member on this web page? And what if each of them has her own Facebook page? Then you end up with 2 “divs” in the browser who when they come in the door present an ID that says “Hi, Mr. Browser, I’m div staff-facebook”. Depending on the situation, Mr. Browser might let it slide with just a warning. But then again, it could lead to trouble down the road when another bit of code goes looking for “staff-facebook” and can’t tell which one to choose.

So, it’s better to use a class instead of an id in this situation. An ID indicates that something is unique, like only you have a certain drivers license. When you have more than one thing with the same ID, it’s like a little case of identity theft in your browser.

A class (like a school classroom), on the other hand, can have more than one person in it. So, if you assign the div to a class instead of giving it an id, they can all live together on the web page in harmony:

<div class="staff-facebook">

After all these little changes, we end up with the following code:

<?php if ( get_field( 'staff_facebook' ) ) { ?>
<div class="staff-facebook">
    <span class="field-label">Facebook: </span>
    <a href="<?php echo esc_url( get_field( 'staff-facebook' ) ); ?>" target="_blank">
        <?php echo esc_url( get_field( 'staff-facebook' ) ); ?>
    </a>
</div>
<?php } // endif

Little Things You Should Never See

If you’re not a coder, these little things are not going to be on your radar. And, really, you shouldn’t have to be sweating these kinds of details. You shouldn’t ever see them or care about them. That’s not your job.

As someone who’s hiring someone else to build you a website, your job is to make sure you’ve got someone who does know and who does care, and who is writing code for you that’s clean, efficient and safe.

Sometimes people ask me, “Why does your work cost more?” And my answer is, “Sure you can get a website a lot cheaper from lots of other places.” Just like you can probably get a car that runs for $300. Sure, it will run. But we’ll all be able to hear you driving it from several miles away, and you may not be able to stop reliably, and it may overheat every hundred miles.

It’s the little things you don’t see. And it’s having someone who cares enough to take care of them that makes all the difference.