1

Some links on my site take the user to a specific post in context on a category page.

On non-WP sites, this is easily accomplished by including #example-div-id in the url like this:

http://www.example.com#example-div-id

But in a WP environment, this url isn't working:

http://www.example.com/?cat=15#post-170

This (incorrectly) jumps the browser window to the end of the page.

But this does work...manually removing the trailing slash after page load and reloading the page. The browser window jumps to the appropriate div, or post.

http://www.example.com?cat=15#post-170.

Does anyone know why this is? Or how to get WP to eliminate the trailing slash? Is it safe to eliminate the trailing slash?

Update

I tried using EAMann's solution below, implementing pretty permalinks to facilitate the anchor jump. The results achieved completely break my post order and exclusion of child categories. My navigation is category based. I don't use pages, but use category names in the navigation. Each 'page' is really a category archive showing posts from the category. What I've read about permalinks starting with %category% leads me to avoiding permalinks all together. I certainly don't want to start the permalink with the year or post id either. It doesn't make sense on my site.

http://www.example.com/category/my-category looks more professional and "normal" than http://www.example.com/2009/my-category when the intended illusion is that the category names are really pages on this business site.

So I'd appreciate any other explanations why the anchor jumping isn't working.

Update #2

(in response to EAMann's comment directly on the OP) My site is a business website that for the most part displays static content. A few areas have featured portfolio work and there is blog section. The site uses a category based navigation. All the site content is written as posts. Each post is associated with a category that determines where the post is displayed. The site navigation menu is created with wp_list_categories(). Clicking on a category opens a category archive that presents all the posts from the category.

I'm currently using the default permalink structure.
http://www.example.com/?cat=15 shows a category page.

Update #3

After more investigation, it appears that the jQuery plugin "innerfade" that I'm using to display a slideshow at the top of the page is the culprit. It has nothing to do with the trailing slash. Sorry to go down the wrong path.

If I comment out the php that includes the plugin js file, and the anchor jump works just fine. I would guess that some javascript manipulation of the page content is screwing up the jump. I've worked around the problem using $(window).scrollTo();.

I appreciate everyone's time.

4
  • Which Browser are you using? I have problems to reproduce what you describe, so I assume there's some sort of side-effect. The example urls look both valid to me, with or without slash.
    – hakre
    Sep 14, 2010 at 22:07
  • Using firefox. The anchor jumping was working at one point and seems to have stopped. I guess that doesn't help me here, meaning I've probably done something stupid during dev to break it. I'm looking for ideas as to why the anchor jump wouldn't work with the above url. Thanks
    – kevtrout
    Sep 14, 2010 at 23:59
  • Can you explain a bit more how your permalink structure and navigation is built? Otherwise all the solutions you get that work on stock WP installations might not work on yours ...
    – EAMann
    Sep 15, 2010 at 14:14
  • I recommend posting your full solution as an "answer" and marking it with a check so that anyone else who stumbles upon this page will know what you did to fix the problem.
    – EAMann
    Sep 17, 2010 at 19:21

2 Answers 2

2

First, I'd recommend using "pretty permalinks" over the default query-string structure. This will eliminate most of your problems from the getgo. It will turn your http://www.example.com/?cat=15#post-170 urls into http://www.example.com/category/category-slug/#post-170 and the browser will move correctly to the post's position in the page.

That said ... Yes, you can remove the trailing slash. The trick is to add a rule to your .htaccess file:

#remove trailing slashes
RewriteCond %{HTTP_HOST} ^(www.)?yourdomain\.com$ [NC]
RewriteRule ^(.+)/$ http://%{HTTP_HOST}/$1 [R=301,L]

(This is taken from a Drupal tutorial that does the same thing ...)

2
  • thanks EAMann. I have had weirdness before with pretty permalinks, but I tried implementing them at your suggestion. Got them to work fine once I 777'd .htaccess. Before fully testing your solution, (not the rewrite part) I need to modify some category dependent conditional code so the correct posts get pulled. I'll let you know...
    – kevtrout
    Sep 15, 2010 at 0:01
  • Thanks for the .htaccess rules, but they didn't remove the slash. I followed the link to the drupal tutorial, and it seems the author states that the rule you suggested don't work, and to use a second set he posts. I tried those as well with no results. I don't know if it is me or WP.
    – kevtrout
    Sep 15, 2010 at 13:13
0

As I've stated in updates to my question...other javascript working on the page conflicts with the anchor jump. I implimented more js to work around the conflict. The url almost looks the same as before, but with a parameter name inserted before the pound symbol,

http://www.example.com/?cat=15&hi=#post-170

but I use jQuery-Howto's 'plugin' to get url parameters.

$.extend({
    getUrlVars: function(){
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');

    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }

    return vars;
},
getUrlVar: function(name){
            return $.getUrlVars()[name];
        }
});

I retrieve the post number assigned to the 'hi' url parameter and scroll to 20px above the post with the same id.

 //'hi' var used to jump to anchor          
    var hi = $.getUrlVar('hi');

    if  ( hi ) {
        //scroll to link or search results if url var 'hi' is present
        $(window).scrollTop($(hi).position().top-20); 

the jquery plugin code and my custom code above go in my javascript file which is included in header.php

0

Your Answer

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

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