X Theme for WordPress is a Powerhouse

David Salahi Website Design 5 Comments

I was recently introduced to the versatile X theme for WordPress by another web designer and was immediately impressed by its power, attractiveness and flexibility. The theme makes it easy to create the sort of open, graphically rich websites that are so popular today. At the same time, it plays well on everything from small smartphone screens to large desktop screens. And it’s highly customizable so tweakers like me can get down and dirty with the settings and the code to get things looking just the way we like. I’ve been so impressed by all the functionality and flexibility that I decided to convert both this blog and my business website to X.

Website built with the X theme for WordPress

The X theme comes with a slew of plugins including a visual drag-and-drop page builder that allows anyone from the casual designer to the hard-core coder to quickly create attractive sites.
Although a knowledgeable web developer could theoretically reproduce most of X’s functionality with other plugins and hand-coding the reality is that that would be way too slow. On the flip side, for hard-core developers like myself it’s sometimes difficult when starting with a blank canvas to imagine all the possibilities for an attractive layout. That’s especially difficult when you consider the need to build a fully responsive design. But the wide range of layout and content elements provided with X make it much easier to come up with a nice design.

X theme Cornerstone editor for WordPress

Subthemes and Content & Layout Options Aplenty

X is quite full-featured and that does imply a degree of complexity. Indeed, the theme with its numerous extensions and options is quite complex. The fact that X includes a drag-and-drop visual page builder doesn’t mean that anyone who can log in to a computer will be able to use it effectively. You need more than a modicum of computer experience and, indeed, more than a bit of web design experience to really take advantage of X. However, once a site has been set up it would be possible for someone less experienced to use the page builder to make some basic updates to existing pages with the WYSIWIG approach. These could even include some basic page layout changes.

X theme stacks

One of the interesting things about X is that it comes with four “stacks” or sub-themes: Integrity, Renew, Icon & Ethos. Each of these sub-themes sets up a base design which you can then customize however much you like to create an appropriate design for your needs. And each of the first three stacks comes with ten sample websites built using that stack. The fourth, Ethos, currently has only three demo sites (which is still two more demo sites than many themes offer).

X theme stacks

Documentation Lacking but Demos Help

Lest this post begin to sound like a paid ad (it’s not—I purchased my copies) I should point out a couple of weaknesses. For starters, documentation is weak. The x-documentation.pdf is mainly just a list of the short codes included. And a lot of that copy is repetition of the common elements id, class & style. But while I’m on this point, it’s worth mentioning that the provision of HTML/CSS attributes for id, class & style provides a great deal of control and flexibility for the knowledgeable web designer. I recently looked at a set of three themes from another vendor which also provide a visual page builder but became frustrated at the inability to customize the code in any way. Those three themes are strictly drag and drop. That may be acceptable to some folks who prefer simplicity and ease of use. But it doesn’t work for me. Fortunately, we tinkerers have X as an option.

OK, somehow, I got back to cheerleading for X while I was supposed to be criticizing it. Or, maybe I should say critiquing it. In any case, the documentation, as such, is minimal. What you have instead is a searchable knowledge base and a support forum. Consulting those resources has answered some of my questions but those types of solutions are not as straightforward as having actual documentation.

In reality, what I most often end up doing is simply trying things. If you’re a fellow tinkerer and don’t mind experimenting most things will eventually become clear. But, it can take a fair amount of testing and searching. One problem with the lack of documentation is knowing where this or that option is to be found. There are many nooks and crannies within the many screens that comprise the theme and its extensions. So many, in fact, that even after I’ve seen a setting two or three times I still often have a hard time remembering just where a given setting is to be found. Having a searchable or indexed PDF could save a lot of time.

X-Themed Demo Sites (33 of them!)

The demo sites are a valuable learning resource with their illustrations of X’s many and varied features. And one of the nice features about X is the ability to directly import some of the settings used in the demo themes. Using the built-in Demo Content screen you can import to your own site the theme customizations used to create any one of the dozens of demo sites. However, this is not the same thing as importing the actual site. When you import the settings to your own site or to an empty site what you see will likely be nothing like the demo site. That’s because of all the content you don’t get. This includes content & layout generated by the X shortcodes as well as images, portfolio items and other media.

WordPress X theme Demo Content

The Demo Content screen does include options to import posts and portfolio items but, in my experience, it often fails to work. One problem which I discovered somewhere in a support article is that the importer is “smart” and won’t reimport items if it thinks they have previously been imported. But this means that if I first import Integrity 1 and then decide to import Integrity 2 I might not get some or all of the content of the second demo. (There’s a workaround but you have to be aware of it and do it each time.)

To help remedy this problem the X theme does provide five fully built-out sites with all the content and all the customizations. By importing these Expanded Demos and studying them you can learn a lot.

Separation of Concerns—Not!

It’s worth noting that, with a theme like X, the content and the layout are very much intertwined. This is actually in opposition to one of the best practices for website building: the separation of content from layout/design. I remember back in the early days of this millennium (I just love saying that!) there was a demonstration site that came with a bit of boilerplate text and HTML structure. The goal for creative web designers was to customize this barebones content by applying CSS and adding images. You couldn’t touch the text or the HTML. There were some beautiful and truly amazing designs submitted for inclusion. At first glance, you’d never guess that the same basic content was at the core of some of these sites. This came to be quite an effective and dramatic demonstration of how structure, design and content could be separated. (The site, CSS Zen Garden, still exists but in a new form!)

For better or for worse, we now seem to have returned to a place where content and layout are once again integrated, like the early websites built using tables. To see how tightly intertwined the content and layout of an X-themed site are, try switching to any other theme. The profusion of shortcodes that embody the design elements on each page will obscure the content that also exists there. To proceed to implement that same content with a different theme would require a good deal of manual rebuilding.

Blog home page is not so easily customizable

After implementing X on my Video Performance website I set about implementing it for this blog. What I found was, at first, disappointing. My main problem was that the home page of a blog is not nearly so easily customizable as a regular web page. This is because X uses the standard WordPress function for listing recent blog posts on what is known as a blog index page. As usual, you can also add a sidebar and populate it with widgets. But there’s not a lot more you can easily do.

With my previous theme I had a Featured Posts slider at the top of the page which, naturally, featured several hand-picked posts I wanted to display prominently. Below that, the theme offered various options for displaying some number of recent posts, some number of posts in selected categories, or other, non-post content. That’s just not doable with a standard blog index page in X.

No <!–more–>

Now, in WordPress and in X, you can always create a page which you can designate as your home page on a blog (same as on a regular website). The question then becomes: how to list recent posts. The X theme does provide a Recent Posts shortcode but it’s limited. One major shortcoming is the inability to display  the first couple of paragraphs of text from the post. Or, alternatively, a custom excerpt. All you get is the post title and the featured image. That doesn’t work for me.

So, I went back to the standard blog index page. With that approach you have some control over how your post summaries are displayed. You can choose to display the post text or not. If you choose to display text you get the full text of the post. Because I have numerous lengthy posts that was not acceptable. Fortunately, I found that I could limit the display of text by using the WordPress <More> tag. Progress.

But I also quickly discovered that that only works with posts built the traditional WordPress way; i.e., with either the standard WordPress Visual or Text editor. It does not work with posts built using Cornerstone, the X theme visual page builder. You can insert a <More> tag into a Cornerstone page but it’s simply ignored. You get all the text regardless.

X theme Recent Posts shortcode

Manually Inserting Shortcodes

Cornerstone Shortcodes

Before long I learned that the X/Cornerstone shortcodes function just as other WordPress shortcodes do. You can manually insert them into a page or a post and they work much the same as they do with the drag-and-drop approach. Of course, hand-coding shortcodes is much slower and less convenient than using a page builder.  But, curiously, this method does work with the <More> tag. So, I can have the nice X layout and content features and still have the ability to limit text on the home page. <More> progress.

X tech support reports that the developers are aware of the <More> tag problem and are considering options for fixing it.

Child Theme to the Rescue

Just one problem remained: no Featured Posts slider. But I found that I was able to fairly easily code up a Featured Posts slider using the provided X child theme. With five lines of PHP code and a dozen lines of CSS I could get the essentials of the page layout I was looking for.

I also needed to create a custom slider. This was added work compared to the built-in slider that came with my previous theme. On the other hand, the Revolution and Layer sliders that come with X provide the ability to create complex multi-layered sliders with sophisticated behaviors. These behaviors include the ability to specify how the sliders behave on various size devices.

Customizing the WordPress X theme with a Child Theme

The home page of this blog includes a Featured Posts section that I created using a child theme and a bit of PHP.

Cornerstone is Forever

I should mention that pages built with Cornerstone, the visual page builder, are an either-or proposition. If you use Cornerstone on a given page/post you cannot then switch back to the WordPress Text or Visual editor. Not even to hand-tweak the generated shortcodes. Well, technically, you can; just not if you want to later go back and use Cornerstone again. It’s one or the other.

Cornerstone and its shortcodes provide a wealth of layout and content options ranging from the Accordion and Block Grid to Columns; from Feature Lists, Promos and Calls to Action to Tabs and Widgets. The full list of short codes is long and the power and functionality they provide is impressive. They provide not just layout and space for content but interactivity and support for media.

Don’t Nag!

One shortcode I particularly like is an unobtrusive sign-up widget called the Content Dock. You’ve undoubtedly been pestered by websites popping up a full-screen signup form the moment you land on the site. I find these highly annoying. Half the time it’s my first time there and I don’t have any idea whether I want to sign up yet. I’d never employ one of these rude, in-your-face gadgets on a site of mine.

The Content Dock, on the other hand, is a different story. The Content Dock is a subtle window which hides until the user has scrolled a specified distance down the page before displaying. Presumably, if the visitor has been scrolling down more than a little bit she has at least some interest in the site. And the Content Dock is polite in that it doesn’t block you from continuing to do what you were doing. It slides out smoothly and sits there quietly (and only on larger screens). If the visitor does decide she wants more info she can then sign up. If not, she can ignore it. That’s the way it should be done.

X theme Content Dock extension

Extensions

I’ve covered all this ground and I’ve only mentioned 2 of the 21 extensions included with X (Cornerstone and Content Dock). There are multiple sophisticated sliders which are highly customizable & programmable. There’s a Disqus plugin for civilized commenting, MailChimp Email forms, Facebook comments, Typekit, e-commerce, lead generation and more.

Conclusion

The X theme is a sophisticated & mature product which is now at V4. I only recently discovered X so I don’t know the history but you can see a good bit of it by browsing the X theme support forum. It’s clear that there has been a lively discussion there for some time. And I should mention that I’ve received knowledgeable, well-written responses to my questions posted on the forum. Response time to my questions has been a business day or less.

X is rather like a Lego kit for building websites—or, more accurately, a toy store full of Lego kits. There are so many features it would take weeks, if not months, to truly get up to speed on all of them. X can be used to build a wide variety of websites with different needs and different designs. Cornerstone makes the process of building attractive sites quick and easy. And the resulting sites perform well on every sort of device.

X comes closer to full responsiveness than any of the other WordPress themes I’ve recently tried. In fact, I believe that the few glitches in responsiveness that I’ve seen could be worked around with the correct settings changes. It’s just that X is so full-featured that I haven’t had time to explore every option yet. I’m looking forward to doing just that.

Comments 5

  1. Hi Dave,

    Nice review – I am quite frustrated with the inability of X to handle header tags responsively. I found myself looking for the often familiar h1, h2 size and color options in the customizer or in theme options. You won’t find those!

    In order to make your full width pages display well on a smartphone be sure to either stick with the standard WP editor or if you are going to use Cornerstone then make sure all headings are using the short-code for headers so you can implement the responsive short-code and apply the responsive element to have the kind of control needed for smaller screens. This is page by page or post by post, yep not so nice!

    The other option is to ensure you are using a small enough base size in customizer to accommodate what the h1 tag will scale up to and look like on your full width site on small device screens.

    That’s the answer to my $64 dollars question 🙂

    1. Post
      Author

      Hi Mario, thanks for the comments. It’s not exactly clear to me what sort of responsive behavior you’re looking for in header tags. What I’ve noticed is that they look rather large on my phone (Samsung Galaxy S5). I’d prefer them to be a bit smaller but they haven’t seemed so oversize that I’ve been motivated to try and fix them. It sounds like maybe you’re doing some more advanced fine-tuning than I have yet. And, you’ve apparently found a solution.

    1. Post
      Author

Leave a Reply