Links in a single page wordpress theme

1
votes

I am building a single page WordPress theme (index.php including header.php and footer.php)

the navigation inside the site is done by jquery div hiding and showing...

as a result,the url of the page do not change, but i want to make it possible so people can share links of specific sections (or states) and bookmark, and have back-button functionality working. how that can be done?

2
jquerywordpresshyperlinkwordpress-theming
i heard that i can achieve this by using Hashbangs, or html5 push state... but i have no idea how to do it! – Firezilla12

2 Answers

1
votes

You are looking for deep linking.

jQuery Address* its a plugin for deep linking, with crossbrowser support.

*Github itself has the functionality you are looking for, check the slide transitions while browsing the source of a project. Although github's deep linking only works with the History API.

0
votes

You can use hashtags with your links :

HTML : 

<a href='#sectionOne'>SectionOne</a>
<a href='#sectionTwo'>SectionTwo</a>

<section id='sectionOne'>Hey there, I'm section One</section>
<section id='sectionTwo'>Hey there, I'm section Two</section>

CSS :

section {
  display: none;
}

section:target {
  display: block;
}

Clicking on your link will create a url in your browser that ends with #sectionOne which is convinient for bookmarking. Also when you put :target selector in CSS that specific #sectionOne will be visible, according to your CSS :

Demo : http://jsbin.com/ogodeg/1