1.21 gigawatts
1.21 gigawatts

Reputation: 17726

Setting base path breaks anchor links

I have created a WordPress theme and the images in it were all broken so I added a base path tag to the page.

<base href="https://www.example.com/wp/wp-content/themes/my-theme/"/>

But now all of the anchor / links don't work.

<a href="#an_id_on_the_page">click here</a>

The above link points to "https://www.example.com/wp/wp-content/themes/my-theme/index.php#an_id_on_the_page" instead of the same page but further down.

WordPress recommends adding "" to the path of every image. But that means breaking a workflow and editing the HTML code on every change.

Are there any ideas to fix this?

UPDATE
It looks like if I put a "/" in front of the anchor it looks like it is working. I'll test it some more to confirm.

Upvotes: 0

Views: 692

Answers (2)

1.21 gigawatts
1.21 gigawatts

Reputation: 17726

Adding a slash, "/" before hand fixed many of the issues.

Upvotes: 0

Dasun Manathunga
Dasun Manathunga

Reputation: 318

No links or named anchors or blank hrefs will point to the original subdirectory, unless that is made explicit: The base tag makes everything link differently, including same-page anchor links to the base tag's url instead, e.g:

<a href='#top-of-page' title='Some title'>A link to the top of the page via a named anchor</a>
becomes
<a href='http://www.example.com/other-subdirectory/#top-of-page' title='Some title'>A link to an #named-anchor on the completely different base page</a>

<a href='?update=1' title='Some title'>A link to this page</a>
becomes
<a href='http://www.example.com/other-subdirectory/?update=1' title='Some title'>A link to the base tag's page instead</a>

With some work, you can fix these problems on links that you have control over, by explicitly specifying that these links link to the page that they are on, but when you add third-party libraries to the mix that rely on the standard behavior, it can easily cause a big mess.

Resource,

Upvotes: 1

Related Questions