0

I want to remove /groups/ from any url in my when a user clicks it

The backstory is that i have a wordpress widget which displays links to pages (BP groups) and i want users to be sent to pages i've made for each group instead when they click (because i wasnt able to make homepages in buddypress).

I've set the page url's to be the same as the group pages but without /groups/ so if it were removed the widget would send users to my pages instead.

For example a visitor is sent to: http://focallocal.org/up-cycling-workshop-with-londons-homeless/ instead of http://focallocal.org/groups/up-cycling-workshop-with-londons-homeless/

I've been researching it for ages and this is the best I've been able come up with (I don't speak js):

'onclick="location.replace(/groups/,"")'

edit requested html:

Close Events, Groups and Projects Newest | Active | Popular

        <ul id="groups-list" class="item-list">
                                <li class="odd public is-admin is-member">
                    <div class="item-avatar">
                        <a href="h t t p://focallocal. org/groups/up-cycling-workshop-with-londons-homeless/" title="Up-cycling Workshop with the Homeless"><img src="h t t p://focallocal. org/wp-content/uploads/group-avatars/4/a4ce0d8153497b96869a9b46e7ff391f-bpthumb.jpg" class="avatar group-4-avatar avatar- photo" width="50" height="50" alt="Group logo of Up-cycling Workshop with the Homeless" title="Up-cycling Workshop with the Homeless"></a>
                    </div>

                    <div class="item">
                        <div class="item-title"><a href="h t t p://focallocal. org/groups/up-cycling-workshop-with-londons-homeless/" title="Up-cycling Workshop with the Homeless">Up-cycling Workshop with the Homeless</a></div>
                        <div class="item-meta">
                            <span class="activity">
                            active 1 week, 1 day ago                                </span>
                        </div>
                    </div>
                </li>

                                <li class="even public is-admin is-member">
                    <div class="item-avatar">
                        <a href=" h t t p://focallocal. org/groups/public-relations-marketing-and-advertising-team/" title="Public Relations, Marketing and Advertising Team"><img src="http://focallocal.org/wp-content/uploads/group-avatars/2/05196f60439a3fe01b9855f267805180-bpthumb.jpg" class="avatar group-2-avatar avatar- photo" width="50" height="50" alt="Group logo of Public Relations, Marketing and Advertising Team" title="Public Relations, Marketing and Advertising Team"></a>
                    </div>

                    <div class="item">
                        <div class="item-title"><a href="h t t p://focallocal. org/groups/public-relations-marketing-and-advertising-team/" title="Public Relations, Marketing and Advertising Team">Public Relations, Marketing and Advertising Team</a></div>
                        <div class="item-meta">
                            <span class="activity">
                            active 1 month, 3 weeks ago                             </span>
                        </div>
                    </div>
                </li>

                                <li class="odd 
                        </ul>
        <input type="hidden" id="_wpnonce-groups" name="_wpnonce-groups" value="e2870f6aee"><input type="hidden" name="_wp_http_referer" value="/">         <input type="hidden" name="groups_widget_max" id="groups_widget_max" value="300">


    </div>  </div></div><div id="tab_slide_background" class="tab_slide_corners_right"></div></div></div>
4
  • Please provide sample HTML code. Do you want to redirect the page on click event or just change the value of the URL in an href of a link, iframe SRC attribute etc..?
    – CodeToad
    Commented Jan 20, 2014 at 21:40
  • i want to redirect the page on click event, so it would normally load the link in the div but with the code it would load the same link without /groups/ in the URL. i'll grab some html now, but i thought the problem were more of a general one so it would apply to any link in a <div> that you want to load a different but related url. the links/url's in the widget change dynamically, so i cant just set an ordinary redirect for each. Commented Jan 20, 2014 at 21:47
  • if it's useful the site is focallocal.org and the links i want to change are in the sliding bar on the left Commented Jan 20, 2014 at 21:49
  • sorry, the html is coming. i have to strip out the url's as i dont have enough reputation yet to post more than 2 Commented Jan 20, 2014 at 21:56

1 Answer 1

1

I see you are using jQuery so you can do this:

$('#groups-list a').each(function(){
   var $this = $(this); 
   var href = $this.attr('href');

    href = href.replace('groups/', '');
    $this.attr('href', href);

});

you can also do this:

 $('#groups-list a[href*="groups"]').each(function(){ this.href = this.href.replace('/groups', '');  });

plain JavaScript:

 var anchors = document.querySelectorAll( "#groups-list a[href*='group']");

for (var i = 0; i < anchors.length; i++) {
var anchor = anchors[i];
anchor.href = anchor.href.replace('/groups', '');

}
2
  • that looks perfect to me, but i actually have no idea how to add jQuery to a widget in Wordpress/Buddypress so it'lll take me a while to test it out. thanks very much! Commented Jan 20, 2014 at 22:33
  • Your welcome. I edited the code in my answer to target id not class name for 'groups-list.' You already have jquery on the page. to check, click f12 in chrome. enter 'jQuery' in console. If you want a non-jquery solution,that's easy to implement as well. coming up soon...
    – CodeToad
    Commented Jan 21, 2014 at 10:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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