Highlighting an id anchor result?

Hey Ian,

I haven’t seen the site in a while, looking great!

Anchors link directly to an element ID (notice the similarity to the css selector for ID “#”).

You’ll want to locate the section of your loop that iterates the list. I’ll assume you’re loop contains the “li” list element (or perhaps just a post div).

It looks like you’ve given the loop element an ID using $post->post_name. This appears to be generating an HTML-safe character for the dash, messing with your anchor selector. You’re also right that your second approach can lead to syntax errors in trackbacks and permalinking.

There is an alternative approach of stripping down the permalink to the final directory using the php function basename():

$slug = basename(get_permalink());

This would solve your the_title(); issue by allowing you multiple posts with the same title but with unique (and pretty) permalink slugs.

Once you’ve got the anchors working in the URL, you can change the appearance of the targeted element using the pseudo-class “:target” on the selector.

In the loop (template file):

<div class="post" id="<?php $slug = basename(get_permalink()); echo $slug; ?>">
<!-- Loop Content -->
</div>

In the css:

.post:target {
/* overrides for the targeted element */
background-color:#ff0000;
color:#ff;
}

Voila. Note: Your loop might not be a div; it could be just list elements. IDs can be given to a wide variety of elements.

Support for this pseudo-class is consistent with trends: Support on current versions of all major browsers except IE. There are workarounds out there, but they are not pretty and your code won’t validate (without browser conditionals – ugh). Of course validation vs usability is project specific – so use your best judgment on whether to extend an arm out to “Mammon.”

Also, there are some great articles out there on pseudo-classes and the powers they hold. One of the biggest uses is changing element appearances changes without javascript.