Changin unwanted HTML from plugin generated code

1 Views

I’m using the WP plugin Really Simple Breadcrumbs and it generates these links for me: 

<div class="breadcrumb">
   <a href="http://example.com"> Example 1 </a>
   " >> "
   <a href="http://example2.com"> Example 2 </a>
   " >> Blog Page Title Lorem"
</div>

I need to change two things in this html. One, I need to rewrite the first link to say <a href="/blog"> Blog </a>. Second, I need the trailer “Blog Page Title Lorem” to be deleted. Third, I’d like to change the >> to >. I think all of these would use the same technique so Im listing them all in the same question. I’m open to JS, jQuery, CSS display/hide tricks, whatever works. How do I do this?

Post Views: 1

Related posts

3 comments

  1. If you go into the plugin folder you will find breadcrumb.php
    In that file there will be a variable called $seperator that has its value set to >> and you should be able to alter it there.

    If you want to change any the CSS for for the <a> just use .breadcrumb a in your style.css file.

    As for changing the content titles, those are generated by the plugin via the information in your database ( titles, slugs, permalinks etc etc ). The first link SHOULD take your blog title as its paramater. If it’s not, before the loop starts in breadcrumb.php you could also write that in before so that it’s always generated.

    Blog page lorem being the last in the crumbs should be assigned to whatever page you have. If you can find the spot in breadcrumb.php that generates that, you could delete it and put this in there:

    the_title();

    Best of Luck.

  2. To get the next text-node after element, Use nextSibling.nodeValue. The Node.nextSibling read-only property returns the node immediately following the specified one in its parent’s childNodes list, or null if the specified node is the last node in that list.

    The Node.nodeValue property returns or sets the value of the current node.

    To set the href of the first element, index which is first argument in each could be used.

    Try this:

    $('a').each(function(index, item) {
  if (index === 0) {
    item.href = '/blog';
  }
  item.nextSibling.nodeValue = ' > '
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="breadcrumb">
  <a href="http://example.com"> Example 1 </a> " >> "
  <a href="http://example2.com"> Example 2 </a> " >> Blog Page Title Lorem"
</div>

    Fiddle here

  3. //
//find first child and change href
document.getElementsByClassName('breadcrumb')[0].children[0].href='"/blog"';
//find first child and change innercontent
document.getElementsByClassName('breadcrumb')[0].children[0].innerHTML='Blog';
//find all nodes in breadcrumb
var all_nodes=document.getElementsByClassName('breadcrumb')[0].childNodes;
//loop through to find pattern
for(var i=0;i<all_nodes.length;++i){
//replace any pattern with Blog.....and replace it with nothing
all_nodes[i].textContent=all_nodes[i].textContent.replace(/ *Blog Page Title Lorem */,'');
//replace all >> with >
all_nodes[i].textContent=all_nodes[i].textContent.replace(/ *>> */,'>');


}
    <div class="breadcrumb">
   <a href="http://example.com"> Example 1 </a>
   " >> "
   <a href="http://example2.com"> Example 2 </a>
   " >> Blog Page Title Lorem"
</div>

Comments are closed.