Question

What I want to do:

I have a div with an id. Whenever “>” occurs I want to replace it with “>>”. I also want to prefix the div with “You are here: “.

Example:

<div id="bbp-breadcrumb">Home &gt; About &gt; Contact</div>

Context:

My div contains breadcrumb links for bbPress but I’m trying to match its format to a site-wode bread crumb plugin that I’m using for WordPress. The div is called as function in PHP and outputted as HTML.

My question:

Do I use PHP of Javascript to replace the symbols and how do I go about calling the contents of the div in the first place?

Answer 1

You could use CSS to add the you are here text:

#bbp-breadcrumb:before {
    content: "You are here: ";
}

Browser support:
http://www.quirksmode.org/css/beforeafter_content.html

You could change the > to >> with javascript:

var htmlElement = document.getElementById('bbp-breadcrumb');
htmlElement.innerHTML = htmlElement.innerHTML.split('>').join('>>').split('>').join('>>')

I don’t recommend altering content like this, this is really hacky. You’d better change the ouput rendering of the breadcrumb plugin if possible. Within WordPress this should be doable.