Wild Apricot Language Toggler »

Step 2. Adding a 2nd Home Page

Let's assume for the sake of these walk-throughs your organization's default language is English and you've already created your Wild Apricot website with pages and pages of content written in this "default" language.

Now that we have a default version of the website we'll be adding the second language for our visitors and I'm going to assume your organization's second language is Spanish (although it could be any language you desire).

Before we begin adding all the Spanish pages and content we'll first want to start with just the Spanish Home Page. This will be the page a visitor will be taken to whenever they click on the "Spanish" language toggler button.

While adding the new home page we'll be adding a custom URL slug and language variable to the page's web address to ensure the JavaScript we will be adding in the next step will know which language you are currently viewing and to also make sure the correct main menu navigation items are displayed (we don't want to show Spanish pages in the menu when we are viewing the English version of the website and vice-versa).

 Creating the Page: 

To do add the new Spanish Home page and the custom URL slug and language variable to the page's web address you'll need to visit the [Web Pages] > [Page Management] section of your Wild Apricot admin...

Accessing the Page Management Area

Once there, simple click on the "Add new page" button and give your new Spanish home page a title. I will give it the title of Inicio (a widely used name of a website's home page in Spanish). If your organization's second language is something other than Spanish you can use whatever word(s) that language may use for the English version of "Home," "Home Page," or even "Welcome."

After I've added the name I will add a custom URL and language variable to the slug of the page that would read exactly like the title of the page but have any special characters and spaces removed so that it remains a valid web address.
Wild Apricot will alert you if you try to use any special characters that aren't allowed or spaces and will force you to fix the mistake before saving the new page. A helpful Wild Apricot Support Doc is available online with more info on which names or characters will cause an error and can be viewed here: http://help.wildapricot.com/display/DOC/Custom+URLS
For our new page, Inicio, I will use inicio as the custom slug (I prefer all lowercase web addresses although it could be Inicio if you prefer the capitalization). I will also add the custom language variable of ~spanish placed after the custom slug separated with a forward slash (/) like this:
The ~spanish variable is mandatory for the entire process to work correctly. This tells the JavaScript you are currently viewing a Spanish page when this variable exists in the custom URL.
If your organization's second language is something other than Spanish simply use your own language variable here, such as ~french or ~chinese.
Please remember to copy or jot down the custom URL and language variable you set for the new home page as we will need it in Step 3.

So to recap in simpler terms:
  1. Add a new page.
  2. Give it a custom title.
  3. Give it a custom URL slug and language variable.
  4. Set it to be visible to anyone...
Adding the 2nd Home Page
Be sure to set the access level to "Anybody" as seen above so it appears in the main navigation. This way we can later see the toggler working it's magic on the menu items.

 Moving and Saving the Page: 

Once this is done, we also recommend moving the new Spanish Home Page below all the other English pages. After the entire process is in place and working correctly you will most likely want to add more Spanish pages for the rest of the content so having all the pages grouped together in one area will be easier to manage and see at a glance rather than having them each placed next to their English versions. To reposition the new Home Page simply hover over the new page and click + drag the page item down below all the other pages.

Once you've done this click on the "Save all changes" button to complete Step 2...

Moving and Saving the 2nd Home Page

If you were following along while editing your own site you should now have a new Spanish Home Page (or other language you chose) ready to be toggled and are now ready to proceed to

If you got hung up on something you may want to consider enlisting the services of a professional, so give us a shout.
 The Process » 

Step 0: Backup Your Site's Code

Step 1: Adding the CSS

» Step 2: Adding a 2nd Home Page

Step 3: Adding the JavaScript

Step 4: Finalizing Your Site

© 2012 Nicasio Design & Development
Powered by Wild Apricot Membership Software