In this article, I’d like to point you to some of the best tutorials for X and Pro that I’ve come across. All of these share pretty much the same similarities: they’re dense in content, and they’re comprehensive enough to be both satisfying and sufficient for getting your feet wet.
First off, a few general resources that I’d like to visit from time to time.
The best place to start is Themeco’s official knowledge base. It’s updated and contains everything you need to know. For a knowledge base though, it’s poorly structured and it’s hard to find something. Definitely, something Themeco needs to work on. But hey, who reads manuals anyway?
This part of the knowledge base is worth a mention as it contains all the utility classes that you can use with the X and Pro theme. For example, using the class
mtl will add
margin-top: 2em to your target element.
Owned by Michael and Roy—both active members and contributors of X—this site is a great place for (advanced) code snippets and tutorials.
Specific X Theme tutorials
Now on to more specific tutorials that are worth a watch. Keep in mind that in some tutorials the user interface of the theme has changed. Nonetheless, the same principles apply and the content is still valuable.
Asad from iDesignSmart does a great job at explaining how to properly install and register the theme. If you want to jump straight to the action and skip the intro, I suggest starting the video at 02:54.
Demo content is a great starting point, especially if you’re relatively new to X or Pro. Playing with the demo content will help you paint a picture of what this theme is capable of. Four years ago when I first started with X, I would import demo content on a blank WordPress install, explore everything and use the WP Reset plugin to reset the database shortly after I was done.
I couldn’t find an easy to use overview of the X Theme Shortcodes. So, I scratched my own itch. I even included copy/paste buttons. Since I created this, the page builder has had quite an overhaul and you don’t necessarily need shortcodes anymore. But every now and then, they come in handy. Bookmark it!
Donald from WPBuilders does a great job at explaining the ins and outs of the Template Manager, which has been available since X 6.0 and Pro 2.0. The template manager is a real game changer. Being able to have a dedicated library to manage, view and export all of your templates make web design a breeze.60+ blocks and templates for the X Theme that use the new Template Manager
This video is for you if you’re quite new to X. Chris Spiegel walks you through the different parts of the page builder. Whilst a few things in the interface have changed since new releases, this will still help you cut time off that initial learning curve.
As of the first release of Pro (X’s sister) a couple of new powerful elements have been introduced to the page builder. The V2 elements allow you to go deeper into the actual design by tweaking the settings in the page builder. With the V1 elements, you’d always have to assign a class and write CSS, which can be a burden for some.
Pro, as mentioned earlier is X’s big sister and was released on April 10 of 2017. The major difference between X and Pro is that Pro allows you to edit the header and footer of your theme in a similar page builder. Also, the ability to assign a footer/header to a specific page/post is a game changer. This X Theme tutorial by Charlie—who’s doing a great job a teaching by the way—is a deep dive into the new header builder.
I wrote this article because some of my readers asked me how I go about creating landing pages in X. Whilst the screenshots are outdated—and I’ve gotten much better at design overall—the article itself still holds value as I start off with some marketing best practices.
Ben, noticed there was a recurring question in the Facebook Group: “How do I create a full-width blog post”. Believe it or not, X doesn’t support this out of the box. Something X is definitely missing is a more intuitive way to change the layout of the blog. I mean, it’s easy if you’re comfortable with PHP and CSS. But if designing/developing sites is not right up your alley, you can really mess up your site if you’re not careful. Enter Ben, he created a simple Child theme and all you have to do is install it.
As I mentioned above, X doesn’t have an easy way to change the blog layout. Toolset aims to solve this problem. Their homepage says it all: Toolset Helps You Build Advanced WordPress Sites Without Programming. Donald at WPBuild guides you through on how you can create your own beautiful layouts for your blog. Sit tight!
Design Cloud is a feature that only exists in Pro and is basically a library of templates online that you can pull from. Other site owners can submit to this cloud, and there is an internal filtering process at Themeco’s headquarters before these assets are being published to Design Cloud. Personally, I think this is an unnecessary feature, but I can see the added value for some people.
To bring this around, here’s a blog post that showcases some of the best X sites that I’ve come across. Enjoy!
Did I miss anything?
I’m sure there are plenty of other X Theme tutorials on YouTube or blogs that are worthwhile. If you know of any, please let me know in the comments below. I’d love to check them out and perhaps learn a few things. Otherwise, I’d hope the above tutorials will help you.