TheGem WordPress Theme Offers Beautiful and Versatile Website Toolbox

This article was researched and written by our experts using our in-depth Analysis Methodology.
TheGem is an impressive WordPress theme with a strong focus on versatility, customization, and beautiful design. Jam-packed with demo concepts, templates, premium plugins, and other features, it feels like a website development "toolbox" for creating and customizing just about any kind of website you or your clients desire. And best of all, it lets you do so with a beautiful interface and without having to touch any code.
Table of Contents
WP Engine High Performance Hosting
BionicWP Hosting

TheGem is a new, multipurpose WordPress theme from the developers at CodexThemes. First created in August, 2016, it comes with a huge number of features that can meet the needs of nearly any website. However, its versatility and large number of predesigned styles and demo content make calling it a “theme” sound like a disservice.


Typically, when it comes to WordPress themes, we expect a particular style and look that works best within a limited range of niches. But TheGem breaks through the traditional concept of a theme and operates more like a toolbox of nearly unlimited options, design elements, and styles for satisfying the needs of a wide variety of website niches. And it’s extremely customizable, without the need to touch any code.

In this review, we’ll take TheGem for a ride and check out its many features, talk about how to set it up and start using it, and give you my thoughts about which WordPress users will benefit most from what it has to offer.

TheGem Theme’s Main Features

TheGem comes with a huge number of features and options, making it an all-encompassing toolbox for your website development needs. Here’s its main features:

• Modern creative design by top designers from the network
• Large number of predesigned content, layouts, demos, and sliders
• Over 150 predesigned demo pages to get you started quickly, including 40+ homepage concepts
• Unlimited page layouts, multipage and one page websites, as well as fullscreen scroller websites
• Full-width or boxed layouts for pages
• Clean, intuitive GUI with one-click demo import options—no need for touching code
• Updatable Visual Composer for frontend and backend content editing (drag-and-drop page builder with shortcodes, 60+ custom content elements and add-ons, 40+ predefined layouts and templates, ability to save pages and elements as templates, and more)
• Shortcodes for over 60+ elements (in 250+ styles)
• Numerous color and font options (including Google Fonts and custom fonts with inbuilt font manager)
• 2500+ font icons from Font Awesome, Elegant Icons, Material Design Pack
• Unlimited portfolio options (including 20+ portfolio/gallery layouts, 6 hover options, 3 loading and pagination options, project detail and caption options, 6 animation effects, and more)
• 14 blog layouts (including classic and styled lists, masonry and justified grids, media grids, compact lists, creative timelines, and more)
• 12 column layouts
• 20+ custom widgets
• Widgetized footer area
• 3 embedded menus (top primary, top area, footer) with different menu layout options
• 8 menu navigation concepts in 20+ customizable styles
• Built-in mega menu options with 2 different styles and numerous customization options
• Navigation colors, backgrounds, and fonts
• Video and parallax sections and backgrounds, with 3 different parallax effects (including parallax effects and CSS animations on mobile devices)
• Content animation options
• Infinite scrolling and “Load More” pagination
• Smooth scrolling
• Lazy loading for faster performance
• Custom page heading title backgrounds (color, image, video, icons, patterns, transparency, etc.)
• Includes premium plugins with free updates (Visual Composer, Slider Revolution, LayerSlider, Nivo Slider)
• Unlimited sidebars
• Social network sharing icons and profiles
• Fully compatible with WooCommerce, including ecommerce designs for product, shopping cart, and checkout pages
• Different logo options for desktop and mobile presentation
• Child theme for safeguarding of custom theme changes
• WPML optimized for translation (multilingual and RTL ready)
• Backup and restore theme settings
• SEO-friendly and performance optimized
• Highly rated support and online documentation, including video tutorials
• Fully responsive and 100% retina ready
• Extensive third-party plugin capability
• Full cross browser compatibility
• Free updates and support

Setting Up and Using TheGem


1. After purchasing TheGem from ThemeForest, download it to your computer and unzip the file.

2. In WordPress, go to Appearance… Themes… Add New Theme and click Upload.

3. Inside the folder you unzipped earlier, find the file named and click Install Now.

4. After the theme is installed, click Activate.

5. To fully activate the theme, paste in your purchase code from ThemeForest and click the Activate button.

Install Included Plugins

TheGem theme comes with a number of plugins that work alongside the theme, including a few premium plugins that you get for free.

After having installed and activated the theme, you’ll see a message for “required” and “recommended” plugins.


Required plugins include:

TheGem Theme Elements (features, functions, shortcodes, and custom post types)
Visual Composer (premium drag-and-drop page builder)
WordPress Page Widgets (for creating sidebar content)
Black Studio TinyMCE Widget (adds a visual editor to widgets)

Recommended plugins include:

TheGem Import (allows you to import demo content)
LayerSlider (premium multilayer slideshow plugin)
Revolution Slider (premium slider plugin)
MailChimp Signup (MailChimp newsletter signup form)
Contact Form 7 (for creating contact and feedback forms)
Easy Forms for MailChimp (mailing list opt-in forms)
ZillaLikes (let readers “like” your posts and pages)

Child Theme Installation

Whenever you modify the source code of a theme in any way (e.g., CSS, PHP, JavaScript), it’s best practice to use a child theme. This way, any changes you make to the theme are not overwritten when the parent theme is updated.

Although TheGem allows you to do customization without touching any of the theme’s code, the developers understand that more technical users might want to do some behind-the-scenes tweaking. That’s why I like how the developers of TheGem take the initiative to provide a child theme.

Users can install and activate the child theme after you install TheGem.

Importing Demo Content

After you have TheGem set up, you can get a head start on building your site by importing all or some of its demo content. And you can customize and combine any of this demo content however you wish.

If possible, the developers of TheGem recommend importing their demo media on a new WordPress installation. However, if you already have an existing WordPress installation, they recommended using the “Reset WP” plugin to reset your media database and content before importing.

With TheGem theme’s included TheGem Import plugin, you have the option to import predesigned demo and template content into your site.

You can import full demo content, selected demo concepts, or partial demo imports. Depending on the import option, you can bring into your site predesigned posts, pages, portfolios, ecommerce content, and more. And after importing the media demo content, thumbnails are automatically generated.


Here’s the three import choices you get with TheGem theme:

Full demo import allows you to import all demo content (posts, pages, portfolios, images, video, etc.) with one click. Due to the large number of files a full demo import requires, you’ll want to think twice before going with this option. Doing a full demo import can take over an hour, depending on the speed of your connection, and is likely you’ll never use most of the files it brings in. Instead, I strongly recommend using one of the other import options below. Unless you’re serving multiple clients or audiences, it’s probably best to bring in just one individual demo concept that most meets the needs of your market or niche.

Import of selected demo concepts allows you to choose the demo material you want to bring in, such as specific homepage and pages from among different topics such as agencies, apps, business, creative, landing pages, lawyers, photography, portfolio, shop, and more. Because there’s typically less content to import with this option, it’s the fastest import option.


Partial demo import provides two buttons to allow you to import content (posts/pages) or media (images, videos, etc.) separately. For example, by choosing the button to Import content without media, you’ll get all posts and pages without images, videos, and such. On the flip side, Import only media demo content brings in all demo images and videos without the posts and pages. Importing this way is faster than the Full demo import option.

Customizing and Building Content

After bringing in your chosen demo content, you can start customizing it or adding your own content.

To start making decisions about the foundational elements of your site, a good place to begin is at Appearance… Theme Options. Here, you can start making sitewide choices about for the layout and look of your site.


TheGem theme options consist of 11 tabs:


• Choose between “Fullwidth” or “Boxed” layout for your site’s pages
• Turn on/off smooth scrolling, and the “Scroll to Top” button
• Turn on/off page preloading, and choose a preloader style
• Set site logo options for mobile and desktop
• Add custom CSS or JavaScript
• Choose a custom 404 page
• Enable Lazy Load animations on mobile devices


• Select whether to have a fixed header
• Choose the layout type for your main menu and website header (including styles and colors)
• Choose your logo position in your website header
• Select the menu appearance style on tablets (for both portrait and landscape orientation)


Select the font and font attributes (family, style, size, line height, etc.) for different sections of your site, including:

• Main menu and submenu fonts
• Subtitle font
• Header fonts (H1-H6)
• Body font
• Extra large title and light title fonts
• Widget title font
• Button fonts
• Portfolio and gallery fonts
• Quickfinder fonts
• Testimonial fonts
• Nivo Slider fonts
• WooCommerce product fonts
• Font for counter numbers


Choose colors for:

• Primary palette and background
• Menu and top area
• Text
• Buttons
• Widgets
• Portfolio and gallery
• Slideshows and image boxes
• Quickfinder
• Bullets, icons, drop caps, and pagination
• Forms


Select/upload background images for:

• Site backgrounds that use the box layout
• Main menu and header areas
• Top area
• Main content area
• Footer and footer widget areas

Nivo Slider Options

• Effects you want to use with your slider
• Number of slices
• Number of columns and rows
• Animation speed
• Pause time

Blog & News

The Blog & News tab allows you to choose whether you want to show the author of your posts, and decide on the length of your post excerpt.


This tab lets you choose whether you want to activate the footer, and if so, the footer text that you want to display.

Contacts & Socials

• General contact information (i.e., address, phone, fax, email, website)
• Top area contact information
• Social icons you want to display
• Social media profile links you want to display


The Backup tab allows you to backup all of the settings you make for your installation of TheGem. It also allows you to restore your settings or import the settings into another installation of TheGem.

Theme Activation

This is where you input your purchase code in order to activate your copy of TheGem.

This page also has links to online documentation, the support forum, and video tutorials. It also includes a link for rating the theme, if you wish to do so.

Creating Content with TheGem and Visual Composer


When you create pages and posts with the TheGem theme, you’ll see that Visual Composer gives you editing options you don’t typically see with other WordPress themes.

Visual Composer allows you to customize imported demo content, or create (and save as templates) pages and posts from scratch.

When you go into the WordPress page/post editor for TheGem theme, you’ll see three options for building your content:

• Classic Mode
• Backend Editor
• Frontend Editor

Classic Mode is the normal WordPress page/post editor you’re familiar with. But it also includes buttons for getting to the Backend and Frontend editors.

Backend Editor lets you edit through Visual Composer’s drag-and-drop editor, in the same area that’s normally reserved for the class WordPress editor.

It includes buttons for adding shortcode elements (over 60 available with 250+ styles), including text blocks that can then be edited with the HTML/text editor.

You can choose among elements for content, social media, content structure, WordPress widgets, WooCommerce, TheGem, and a short listing of deprecated elements.


The Backend Editor also lets you add templates to the page/post editor. You can choose among numerous default templates provided by the theme, or choose your own custom templates based on previous page/post layouts that you saved.

There are 40+ default templates to choose from, including templates for your About page, call to action templates, news layouts, FAQ templates, image gallery templates, landing pages, team members, product pages, portfolios, service templates, video templates, and much more.

The Backend Editor includes a button to immediately jump to Classic Mode or the Frontend Editor, so you can see what your page looks like to your visitors. You also have the ability to immediately go to fullscreen editing mode.

Frontend Editor allows you to edit your website on the actual page or post. The advantage of the Frontend Editor is that you get immediate feedback of what your content looks like to your visitors. Many of the features of the Frontend Editor are similar to the Backend Editor, including buttons for adding elements (including text boxes), and adding (and saving) templates.

In addition, the Frontend Editor provides access to page title and custom CSS options, multiple screen size previews, and buttons for saving a draft, publishing, or going back to the Backend Editor.


TheGem theme allows you to use each editing mode in combination with each other. For example, you might use the Backend Editor to quickly add some predesigned elements, and then switch to Classic Mode to add other features. In this way, you can take advantage of each editing mode’s strengths, whether you need the full power of Visual Composer, or whether the normal WordPress editor is all you need to create your content.

Other Content Building Features

Custom Fields

When you’re on the WordPress editor page, (whether in Classic Mode or Backend Editor mode), you’ll see a new set of custom fields for your posts and pages. They can be found below the editor, and include options for:
Page Title

• Styles and alignments
• Rich content titles (using the editor to create titles with media)
• Excerpt features
• Background images and colors
• Icon elements
• Video backgrounds

Page Header

• Menu, logo, and transparency options

Page Sidebar

• Sidebar position and “sticky” sidebar options

Page Slideshow

• Slideshow type

Additional Options

• Page as one page, fullscreen vertical slider, etc.
• Margin settings
• Lazy loading options (for faster performance)
• Redirection options
• Ability to hide header and footer areas

Page Preloader

• Turn on/off

Slider Revolution Options

• Choose slide template

Page Widgets

• Use default widget settings or customize
• Includes many custom theme widgets

The post editing page includes all of the above options, along with additional features for:

Blog Item Settings

• Featured content
• Video options for video posts
• Rich content options for quote posts
• Options for gallery posts

Custom Post Types

From within the WordPress admin sidebar, TheGem comes with a number of different custom post types, including:


These custom post types make it even easier to create common types of content that can sometimes be laborious to create, such as portfolios and galleries.

TheGem Support & Documentation


TheGem comes with excellent support and documentation. The developers have high support ratings on ThemeForest and currently offer support in multiple languages, including English, German, and Russian. They say that they also plan on supporting Spanish and French in the near future.

TheGem’s documentation is very well done. I found it to be as clear and thorough as any theme documentation I’ve seen. It’s well organized, extensive, and includes plenty of screenshots.

Their online documentation, video tutorials, and support center can be easily reached through the WordPress admin at Appearance… Theme Options… Theme Activation.

The developers also offer an extensive shortcode guide, advanced tips and tricks, and lots of other information for customizing your site.

TheGem Pricing

TheGem can be purchased from ThemeForest. It costs $59 for a regular license that includes future updates and six months of support from CodexThemes. Support can be extended to 12 months for $17.63.

When you consider everything that TheGem offers, including the inclusion of other premium plugins, I believe it’s a great value for any WordPress user.


Conclusions & Recommendations

TheGem is an extremely impressive WordPress theme with a strong focus on versatility, customization, and beautiful design.

As I said before in this review, it feels like a bit of a disservice to call TheGem just a WordPress theme. It feels more like a website development “toolbox” that is jam-packed with features and options for creating and customizing just about any kind of website. And it lets its users do so with a beautiful interface and without having to touch any code.

Whether you’re just creating a site for yourself or your business, TheGem can definitely do the job. And because TheGem is good enough to handle so many varieties of sites, it feels especially ideal for an agency or freelancer looking to use it as a “developmental platform” for handling a multitude of client needs.

With many multipurpose WordPress themes, templates and demo content are often just repeats of a common layout or design. With TheGem, CodexThemes does a great job of designing to the specific needs of each niche and providing a look that is more unique among the different templates they provide. The developers of TheGem credit this uniqueness to their research on the latest design trends and understanding the different needs among various industries.

But with so many features, options, and additional plugins, TheGem may be a bit overwhelming for those novice WordPress users who are looking to build a simple website and don’t care about having so many bells and whistles. Certainly, TheGem can handle such simple websites as well, but to take full advantage of the theme and its included premium plugins, a decent commitment of time is required.

For example, the included Slider Revolution premium plugin is perhaps the most impressive slider animation plugin on the market. It has the capability to take a website to another level with its dynamic animation features. But to realize its full potential, it takes time to learn and understand its capabilities. The same can be said for Visual Composer, also included with the theme.

So what type of WordPress user would most benefit from TheGem? If you’re someone who’s comfortable with using WordPress, and you’re looking for a multipurpose theme solution with amazing versatility and customization options, TheGem may be just what you’re looking for. For many people, it might fit the bill for that “all-in-one solution” to their website development needs. It offers near limitless power for creating whatever kind of site you, or your clients, desire. And it’s definitely a theme you can grow with.

To find out more about TheGem, and all it has to offer, you can visit ThemeForest for more information. Check out the demo website here.

David Coleman

David is an award-winning online marketer and brand developer with a passion for WordPress. He helps individuals and organizations live inspired lives through their unique story and brand. Twitter: @DavidBColeman

Discover more from our archives ↓

Popular articles ↓

2 Responses

Share Your Thoughts

Your email address will not be published. Required fields are marked *

Claim Your Free Website Tip 👇

Leave your name, email and website URL below to receive one actionable improvement tip tailored for your website within the next 24 hours.

"They identified areas for improvement that we had not previously considered." - Elliot

By providing your information, you'll also be subscribing to our weekly newsletter packed with exclusive content and insights. You can unsubscribe at any time with just one click.