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.

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.

share|improve this question
    
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 '10 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 '10 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 '10 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 '10 at 19:21

2 Answers 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 ...)

share|improve this answer
    
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 '10 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 '10 at 13:13
up vote 0 down vote accepted

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

share|improve this answer
    
I am having this same problem with Wordpress. So where do you put this code? In the functions.php file? And when would you call it? –  Luana Mercy Jan 21 '11 at 3:39
    
@Luana Mercy - You've asked your question in a place reserved for people to answer the question post by the original asker. If you want to ask @kevtrout a question do it in the comments after his question, and sibce you don't have enough points yet to comment (you need 50, see wordpress.stackexchange.com/faq) then participate until you can comment. I'm leaving this up for a day so you can see my replace it but please delete the question or one of the moderators will. –  MikeSchinkel Jan 21 '11 at 3:51
    
@MikeSchinkel: true, but in the meantime, @Luana Mercy: I've updated this answer to address your question. Thanks, I should have included that information the first time around. –  kevtrout Jan 21 '11 at 12:32

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.