Add /#/ to WordPress permalinks

Question

I want to customize the structure of my wordpress permalinks slightly beyond what's offered by default. I want to add #/ before the /%postname%/, so that instead of current permalinks:

http://www.mybusinesssite.com/about/thecompany

I get this:

http://www.mybusinesssite.com/#/about/thecompany

EDIT: Here's what's not working: The actual permalink for the page is http://www. mybusinesssite.com/about/thecompany – but when I load that page into the main index page, the url display changes to http://www. mybusinesssite.com/#/about/thecompany. The page displays just fine, but it can't be properly bookmarked, because accessing http://www. mybusinesssite.com/#/about/thecompany via bookmark leads the user to the initial state of the page, rather than the page with the content loaded from /about/thecompany. What I want to do is have the actual page permalink as #/about/thecompany. Then I will split that url in segments with JavaScript, remove the initial #/ segment, and add everything else after the JavaScript hash. As a result, I will have #/about/thecompany in he url, which will be the actual url of that page.

How can this be done?

I would think their might be a simpler solution by using htaccess rewrite? — bob, Jun 02 '13 at 14:02
This makes zero sense without JavaScript. The hash part of the URL is used to dynamically load contents without refreshing the page. It's not something that can be simulated using PHP — Pekka, Jun 02 '13 at 14:10
Yes, @Pekka, I agree with you. Now follow my reasoning please, and maybe you'll help me with the answer. I have a WordPress site with a bunch of pages, each page has its own permalink. I load every page into the index page with AJAX, and change the URL display with JavaScript hash. Now if the user bookmarks the page, trying to come back will result in loading the main page, not the page the user was trying to bookmark. However, if I add # to the permalink, the actual bookmarked page will load for the user. Could you please offer a better solution? — Dimitri Vorontzov, Jun 02 '13 at 14:18
Ah, I see, but what about the current situation isn't working well and needs improvement? The part after the hash is never transmitted to the server, so you'll likely be unable to create a RewriteRule based on it. Any redirection to the "real" URL you'd have to do in JavaScript. But then I'm not yet 100% clear about what you want to achieve — Pekka, Jun 02 '13 at 14:43
Please take a look at the Edit in the body of he question, @Pekka. — Dimitri Vorontzov, Jun 02 '13 at 14:57
Because accessing `http://www. mybusinesssite.com/#/about/thecompany`via bookmark leads the user to the initial state of the page, rather than the page with the content loaded from /about/thecompany — Dimitri Vorontzov, Jun 02 '13 at 15:03
Mm, that might be a bug in the system then? Usually, your JavaScript should load the correct page if it encounters a URL after the `#`. — Pekka, Jun 02 '13 at 15:44
No, because the actual permalink is ?id=123456789 and it gets rewritten on the server — Dimitri Vorontzov, Jun 02 '13 at 15:46
http://www.webmonkey.com/2011/02/gawker-learns-the-hard-way-why-hash-bang-urls-are-evil/ — Denis de Bernardy, Jun 03 '13 at 09:52

score 5 · Answer 1 · edited May 23 '17 at 10:24

5

As properly explained here, you can not read anything past the hash via PHP because it is not transmitted to the server at all.

You could have a script on your first page that gets the subpage via ajax but that would be a mess for search engines and general usability.

jQuery(document).ready(function($) {
    if(window.location.hash) {
        // Fragment exists, redirect to url without #
        window.location = window.location.replace("#","");
    }
});

edited May 23 '17 at 10:24

Community

1
1

answered Jun 02 '13 at 15:22

MarZab

2,543
21
28

Understood about adding it with PHP. ANy other way to add it? Could you please explain why would hash constitute a mess for search engines and general usability? – Dimitri Vorontzov Jun 02 '13 at 15:27
Nothing you can do about it server-side. You have to use JavaScript. I am guessing you are using AJAX to get the subpage? then just do a onload check of the hashtag. This is bad because search engines do not parse javascript, because the pages cannot be properly cached and every request is delayed and the first ones are duplicated. – MarZab Jun 02 '13 at 15:31
Could you please elaborate on this part, @MarZab: "do a onload check of the hashtag" - how is this done, and what does it achieve? – Dimitri Vorontzov Jun 02 '13 at 15:37
see edit. when a user lands on the first page with the url mybusinesssite.com/#/about/thecompany, this code will catch anything past the # that you can use – MarZab Jun 02 '13 at 15:39
I see, but what should go inside the `{ }`? – Dimitri Vorontzov Jun 02 '13 at 15:43
something like this edit? I really cant imagine why one would want to use hashtags like this. – MarZab Jun 02 '13 at 15:48
That would reload the page though, wouldn't it? If I wanted to load the href into a `#container`, should it be `var my_url = window.location.href.replace("#",""); $('#container').load(my_url, function() { window.location.hash = somenewhash}` ? – Dimitri Vorontzov Jun 02 '13 at 15:53

score 3 · Accepted Answer · answered Jun 02 '13 at 15:27

As stated in the comments above: the URL part after # is not passed to the server - as in, only the user browser knows about it. If the user bookmarks: a link with the hash char - when acessing that, the only parth that will leave the users' device is http://www.example.com/ - so, even if you acomplish customizing your wordpress URL's as you want, it would no work (it could work for any other character, but for #)

To resolve your problem there you will need a solution in javascript on your portal root - it can even turn to be a simple one. (reading the original URL, which javascript being on the client side, include the chars past the #, and loading it from the server, removing the #)

Add /#/ to WordPress permalinks

2 Answers2