Release
Notes

Woohoo! v4.0.0 of X has finally arrived and it is without a doubt our biggest and most mind-bottling release to date (seriously...like, 1,000+ commits in a month)! We're incredibly excited to finally unveil what we've been feverishly working on and hope that you all get as much of a kick out of it as we do. That being said, the heart and soul of v4.0.0 actually doesn't have much to do with the theme itself. Instead, the biggest piece to this release comes in the form of a brand new plugin. Ladies and gentleman, meet Cornerstone.

Cornerstone is the result of many months of planning, numerous sleepless nights, copious amounts of caffeinated beverages, and one team meetup in Beantown, Massachusetts for a final hurrah. “Cool stuff,” you say. “Neat logo,” you exclaim. “But, what exactly is it?” you wonder. Without further ado, let's jump into some FAQs and get to the bottom of things!

What is new in v4.0.0?

With regards to the theme, not much actually. As far as plugin support is concerned, X is now updated to be compatible with the following versions of our integrated plugins:

• BuddyPress v2.2.3.1
• bbPress v2.5.7
• WooCommerce v2.3.9
• Visual Composer v4.5.2
• Revolution Slider v4.6.93

The most significant update we've worked into the theme for this release is how we handle the output of Font Awesome icons. Instead of using CSS classes for each icon (e.g. .x-icon-home), we're now using inline data attributes to determine the output of each icon. Ultimately, this resulted in a stunning 20% reduction in stylesheet size, making things much cleaner. If you're simply using the [icon] shortcode throughout your content, all of these changes will be implemented automatically behind the scenes.

There may be some instances where you have handwritten icons in your HTML to be used in special circumstances where shortcodes are not allowed (e.g. navigation links). If that is the case and you are updating from a previous version of X, an option will be turned on in Cornerstone's settings that enqueues a separate stylesheet with the old Font Awesome class names to ensure that nothing changes on your site. That being said, we strongly recommend that you update the markup of these handwritten icons to their new versions so that you can turn off this stylesheet and remove the extra HTTP request and extra CSS from your page.

Updating the markup of these icons is fairly simply. For example, let's say that you have an icon in your navigation that is outputting the home graphic. This might look something like the following based on previous versions of the shortcode's output:

Moving forward, the first thing you would need to do is find the unicode representation of this icon. To do that, you can simply go to Font Awesome's icon list and find the icon you want and click on it. For this example, we're looking for the home icon, which will ultimately take you to this page. Below the icon examples we see the unicode value for this icon is f015. We can now take this value and update the markup like so:

We keep the x-icon-home class because the CSS now looks for any class attribute that contains a class with a string of x-icon- anywhere in the attribute. If it sees this string of characters, it will know you want to output an icon and will look to the data-x-icon attribute for the content of this icon. This also allows us to quickly see that we intend for this to be a home icon, but the important part to remember here is that the label doesn't do anything here, just the x-icon- substring.

Regarding the data-x-icon attribute, we can see that our unicode value of f015 is prefixed by &#x and suffixed by a ;. This is important so that the CSS knows how to work with this value properly. If these values are not present, the unicode string will be output instead of the intended icon and will appear broken.

Once you do this a few times, you will see that the update process is very simple and doesn't take long. When everything is in place, it's not something you will need to update often unless you want to change out the icon. Also, remember that this is only needed if you are handwriting icons in very specific situations, but as long as you are using the [icon] shortcode in your output, this is all taken care of for you.

Speaking of shortcodes, all shortcode names are now prefixed in our new builder with x_ before them so that they are better namespaced. If you are using our provided shortcodes within X, the old shortcode names have been aliased over for backwards compatibility, but moving forward it would be a good idea to utilize the newer naming conventions and update any old markup accordingly. Using our previous example of the [icon] shortcode, this would now be called [x_icon]. This actually has more to do with the shortcode plugin, but we're mentioning it here since there are some updates regarding that with this release as well, which we will go into more detail on in a bit.

We've also made some small updates to various features throughout the theme, such as removing any predefined date formatting for page and post meta information. There were also a few bugs we've addressed such as dropdowns occasionally disappearing too quickly when hovered over as well as the megamenus not being contained properly within the navbar. Other than that and a few additional administrative changes on the backend, nothing too drastic has been altered in the way the theme functions.

What is Cornerstone?

The answer to all your hopes and dreams. In all seriousness, Cornerstone is a standalone plugin with a custom tailored, 100% frontend interface for building pages and posts with our personal and custom integrated shortcodes. It is meant to take the place of X – Shortcodes in our continuing efforts to streamline the creation process within X, making it as simple and efficient as possible. Similar to X – Shortcodes, it is required when using X.

If you have a moment, we've put together a little introductory walkthrough of the plugin below that is a great first look at Cornerstone! We plan on releasing more detailed videos on various aspects of Cornerstone in the coming weeks, but we cover a wide array of topics here that should be really helpful in getting a sense of what Cornerstone is and how it operates. Enjoy!

How is it installed and validated in X?

If you've used X before, you'll find the onboarding process to be the same as our other Extensions. Additionally, when utilizing Cornerstone alongside X, your validation of the theme will double as your Cornerstone validation (huzzah). If you're migrating to Cornerstone from X – Shortcodes in a preexisting WordPress installation, you can read about that process in greater detail here.

What happened to X – Shortcodes?

X – Shortcodes was thrown a lavish party, given a beautiful gold Rolex, and was never heard from again. In other words, it has retired (sad trombone).

Going forward, Cornerstone is the new kid on the block! The original purpose of X – Shortcodes was to store all plugin related functionality needed for X within a true WordPress plugin. Now that Cornerstone is being used, it will provide X with that same functionality and so much more. This preserves data portability and is consistent with WordPress standards. Once Cornerstone is installed and you are using X v4.0.0 or later, you can safely deactivate and delete X – Shortcodes.

What is happening to Visual Composer?

Nothing. Old pages built with Visual Composer will continue to work, and you can continue to use VC if you wish. That being said, Cornerstone is an incredibly versatile and cutting edge tool that is 100% managed in-house here at Themeco, so we encourage customers to begin using Cornerstone on new sites and to transfer the old ones over if they wish and as they have time (again, VC will continue to work and be supported so you do not have to update anything if you don't want to). We will continue to patch Visual Composer and provide plugin updates when necessary; however, we will not be mapping in any new shortcodes or functionality.

We've included a new option on the X Integration tab of the Visual Composer settings page to completely turn off all custom integration when using X and let the plugin behave natively. Please note, doing this means that any existing pages you've currently built with Visual Composer in X might be affected greatly due to the fact that we overwrite Visual Composer's rows and columns.

What about my sites currently built with Visual Composer?

They will continue to work just fine! We completely understand that this is a new option for our customers, which is precisely why so many options are given (yay)! That being said, we cannot stress enough that we encourage all users to take the time to migrate their pages from Visual Composer into Cornerstone if desired. This process can be done slowly over time (one page every now and then), all at once (in a mad dash to get in all that Cornerstone goodness), or not at all (womp womp). Ultimately, the choice is yours.

As you build new pages for your website, we strongly recommend that you begin using Cornerstone if you chose to use a builder as that will ultimately be the cleanest way to do anything in X, although you can certainly still insert shortcodes manually if desired. Alternately, if you feel you would like to continue using Visual Composer, that is still an option.

Can I port over my old Visual Composer pages?

Regretfully, no. Due to the different styles of the two builders, they are not cross-compatible in any way. You can safely use them side by side (i.e. some pages built in Visual Composer while others are built in Cornerstone) but you can't edit a page built in Visual Composer with Cornerstone.

What happened to the X – Shortcodes generator?

Ah, that little guy! He's still there, don't worry. The previous generator button labeled “X – Shortcodes” that appeared above the WordPress editor now features a solitary cornerstone that looks like

and has no other label.

Where can I learn more about v4.0.0 and Cornerstone?

Great question! The best place as always is the Knowledge Base in the member center. We've added quite a few new articles covering different aspects of Cornerstone in detail:

• Introduction
• Setup
• How to Get to the Editor
• Interface – Introduction
• Interface – Layout
• Interface – Elements
• Interface – Inspector
• Interface – Settings
• Migration

What's Next?

We have a thread going in our forums to discuss Cornerstone. No support will be provided in that thread, just general feedback and discussion with our developers. It is expected when a new tool like this is released that there will be a lot of questions and potential issues. Be prepared for several updates these first couple weeks after release. We will also be launching a contest in a few weeks with regards to Cornerstone that has some fun rewards (cash and prizes), so be on the lookout for that once the dust settles from the launch.

We are so incredibly excited about v4.0.0 of X and Cornerstone. This is the beginning of an exciting new chapter in the Themeco world that will enable our users to more effectively take advantage of the tools available to them.

Update: June 2, 2015

Things have been very exciting around Themeco HQ after the release of our new page builder, Cornerstone! We are hearing some truly fantastic feedback from our users and we are thrilled about continuing to build out new and exciting features so that we can ultimately make your page building experience in WordPress and X as fun and hassle-free as possible.

Speaking of hassle-free, we've included a Raw Content element into this release of Cornerstone to making writing custom content a little bit easier. While the Text element can work for certain pieces of content, there are situations in life when you just don't want WordPress auto-populating your content with empty <p> tags. If that is the case, then the Raw Content element is for you! It's a pretty simple little element (and purposefully so). Any markup you output in this element will be wrapped in a <div> with a class of x-raw-content, which you can add additional classes or styles to if needed. One thing to note is that there is no spacing or styling applied to this element in an attempt to make it as “invisible” as possible. The Raw Content element accepts shortcodes and is the best way to output custom shortcodes in Cornerstone.

For this particular update, we are also shoring up a few things here and there throughout the plugin that were meant to be rolled into the initial release but got left out in the hustle and bustle of launching. Firstly, we had to make a minor change to the Font Awesome icon integration mentioned in the previous X release notes to avoid a few collisions we found with third-party plugins utilizing CSS selectors that weren't very modular. To get around this, we've namespaced the icon data attribute so that it is now data-x-icon, which should prevent any of these intersections from happening. The original notes (which go into great detail on this update) have been updated to reflect this change.

In the process of moving from X – Shortcodes to Cornerstone, a few of our previous shortcode names did not get mapped over correctly due to some minor typographical bugs on our part. These have been addressed and will function as they should moving forward. We've also included some minor fixes to make certain elements clickable in the preview area (e.g. map embeds) and ensure that output is mirrored on the frontend as it is in the preview area (e.g. responsive text).

We've also addressed a some minor issues relating to utilizing Cornerstone in various situations. For example, we fixed an SSL mixed content warning inside the editing interface, updated the WordPress editor control to receive images and shortcodes properly, and altered the load process for Cornerstone to help avoid potential conflicts with third-party plugins. The new load process will disable script minification and page caching when editing so content can display properly; however, this will not change anything for your frontend performance.

Again, we cannot stress enough how excited we are for the future of Cornerstone! It's may only be a couple days old, but we're looking forward to seeing it grow up and how it will make the editing experience in X much more streamlined.