Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I have this idea for linking to a paragraph within a post. It would work by every paragraph within the_content() on post pages having an anchor tag automatically placed before it, like this: <a href="#p1"></a> where '1' is the first paragraph and it would increment for every subsequent paragraph, eg p2, p3, p4...

Anyone fancy taking a shot at it would be great? Maybe something in functions.php?

Thanks.

share|improve this question
    
I've created a rudimentary plugin that does this job, here: robertsharp.co.uk/paragraph-level-ids Would love to know what everyone thinks, and welcome any improvements. –  Robert Oct 2 '13 at 23:31
add comment

2 Answers

up vote 2 down vote accepted

I think that should really be <a name="p1"> around the paragraphs with link to the paragraphs being <a href="#p1">.

If that is what you are trying to accomplish ( what used to be called a named anchors ), that technique is not valid in HTML 5. You can instead link to any id in the page, so with that in mind.

$count = 0;
function auto_id_p_cb($matches) {
  var_dump($matches);
  global $count;
  $count++;
  $ret = '<p id="p_'.$count.'"';
  if (!empty($matches[1])) $ret .= $matches[1];
  $ret .= '>';
  return $ret;
}
function auto_id_p($content){
  $content = preg_replace_callback('/<p([^>]*)>/','auto_id_p_cb',$content);
  return $content;
}
add_filter('the_content','auto_id_p',1000);

Minimally tested but it does preserve existing attributes in the <p> tags. I am sure it would produce a duplicate id if one already existed in the <p> so watch that. Think of it more as "proof of concept".

If you do still what to do it with actual <a> tags, you should be able to adapt that.

share|improve this answer
    
Thanks for this. The ID on the <p> is a better solution. I might adapt the anchor to be p_<postID>_<count> so there's a unique id for every <p> across the whole site. –  davebowker Dec 1 '12 at 17:21
add comment

Sounds like a job for Jquery.

Jquery would look like this:

var i = 0;
$('.entry p').each(function(){
   i++;
   $(this).attr('id', 'p'+i); //labels the paragraph tags with unique ids.
   $('.entry-anchors').append('<a href="#p'+i+'">'+i+'</a>');

});

Then either add a <div class="entry-anchors"></div> wherever you want those links to appear within your template. Or you could even add it dynamically via Jquery with something like:

$('.entry').before('<div class="entry-anchors"></div>');

You would want to make sure that you declare the "entry-anchors" div before assigning values to it in jquery of course.

share|improve this answer
    
Thanks. I had similar in jQuery myself, but @s_ha_dum's input below looks more like what I'm after. –  davebowker Dec 1 '12 at 17:20
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.