The new year is almost upon us and as a little gift to you all we present our latest release of X, v1.6.0. This release sees the addition of one big feature requested by our users a lot over the past week or so, which effectively doubles the functionality of X. “What is it?” you may find yourself asking. Without further ado, here we go!
The biggest update to X is the addition of one page site navigation. Now, you can easily create a one page site with X using native WordPress features. To do this, you'll find a new setting under the Header section of the Customizer. This option will only become visible if you select Fixed Top as your Navbar Position. Upon doing so, you will see a new sub heading appear directly below labeled One Page Functionality. Beneath this sub heading is one option, and that is to Enable One Page Home Menu. Selecting this checkbox will add a new menu under Appearance → Menus → Manage Locations. The name of this new menu area is called Primary Menu (Home).
The menu that you place here can still accept normal links, but it can also accept ID links that correspond to elements on your page. Clicking these links will create a smooth page transition to that section of the page, allowing you to take advantage of this one page functionality.
Linking to these sections is incredibly easy. The IDs that you will use for your links can either be added manually to elements on your page (if you are writing your own custom HTML markup, e.g.
<div id="about">), added via shortcodes (most of our shortcodes accept an
id attribute), or if you are using the
[content_band] shortcode (the “Rows” in Visual Composer), each of these will automatically output a unique ID for you.
For example, say that you have three “Rows” on your homepage, if you were to look at the markup of these elements in your browser, it would look something like this:
<div id="x-content-band-1"> ...content here... </div> <div id="x-content-band-2"> ...content here... </div> <div id="x-content-band-3"> ...content here... </div>
These rows will auto increment, so if you were to add a new “Row” between your first and second row, the IDs would automatically update for you, like so:
<div id="x-content-band-1"> ...content here... </div> <div id="x-content-band-2"> ...content here... </div> <div id="x-content-band-3"> ...content here... </div> <div id="x-content-band-4"> ...content here... </div>
This is an important piece of information to keep in mind as you setup your links.
To setup the links to these sections on your page, simply go to Appearance → Menus and select the Links tab. This will allow you to place custom links into your navigation other than your pages or posts. In keeping with the example above, if I wanted to link to my second row, I would place the following value in the URL field:
Then give it a label (Link Text), select Add to Menu and you're good to go! The “active” state of these links will not become visible until you scroll down to the corresponding band. If you want one of these links to be active upon page load (usually the first one), simply select Screen Options in the upper right corner of the Menus screen, then select CSS Classes. This will add a new input field to your links when you expand them labeled CSS Classes (optional). In this field, enter current-menu-item if you want your link to be active on page load.
Keep in mind you can still add perfectly functional links to other pages on your site, and dropdowns too. Remember that this type of functionality works great for specific applications, but may not be fore everybody. It's also important to keep in mind that your homepage will have a different navigation than the rest of your site, so make sure that you plan out your site's information well.
We've also made some minor performance improvements with script and style enqueueing, as well as updating our Modernizr script to v2.7.1 with a custom build, which cut the file size nearly in half, so you'll get some extra gains there as well.
There was also one new option added to the Integrity stack under Portfolio Options that allows you to update the button text of the Sort Portfolio button that you see on the portfolio index page.
Finally, we have updated all language files included in the theme to reflect our new changes throughout.
This version of the X Shortcodes plugin saw a very minor update to the name used to call the thumbnail for the
[recent_posts] shortcode. Other than that, everything is exactly the same.
Please don't hesitate to let us know if you have any questions on how to use this one page feature. We're very excited to bring it to you all as we know it's something that you've been requesting for some time now.
From all of us here at Themeco,
Happy New Year!
- X 1.6.0 - December 31, 2013
- Feature: One page functionality.
- Feature: Customizer option to change the "Sort Portfolio" button text for Integrity.
- Updated: Updated Google Fonts .json file.
- Updated: Improvements in script and style enqueueing.
- Updated: Modernizr v2.7.1 custom build included.
- Shortcodes 2.0.3 - December 31, 2013
- Updated: Thumbnail reference for [recent_posts] shortcode.