Here are the steps you need to take to migrate to Jupiter X:
1. Take a backup before switching to a new theme. It’s just to keep the process safe and in case anything happened, you will be able to restore backup easily.
2. Do everything on a staging website, not on a live one. Not only because you have to put your live website on maintenance mode, but because in case by any chance you lost your data, you won’t lose your real website. In this post you'll find more info how to create a staging site.
3. Make sure your web host meets the server requirements for having Jupiter X.
5. Click on Add New Theme.
6. Click on Upload Theme button.
7. Click on Choose File button and select jupiterx.zip that you have extracted from the ThemeForest downloaded file, then click on Install Now button and wait for the install to complete.
5. After the theme is installed successfully, click on the Activate button.
Note: If for some reason you can't upload Jupiter X via Wordpress Dashboard, you can do this via FTP (the second method) which is described in this article.
6. Once the theme is activated, you must install Jupiter X Core plugin. You'll see the notice in the dashboard at the top:
Click on Activate Jupiter X Core Plugin button. It will enable Jupiter X Control Panel and you'll see it on the left side on WordPress Dashboard. Also Jupiter X Customizer settings will be available after activating this plugin.
Note: It's recommended to install the child theme just after the Jupiter X parent theme installation, and activate the Jupiter X child theme. It will be useful if you decide to edit some functions in the theme or translate some strings. All these changes should be made in the child theme and you'll be ready for customizations as the child theme will be already activated in your dashboard.
Registering the theme
When you installed Jupiter X on a staging site, you can register it with the existing Purchase Code, that you used for Jupiter V6. In this case you need revoke the API key and generate a new one.
Revoking Purchase Code
1. Log in to artbees.net dashboard.
2. Go to the Register Product section and find the Purchase Code you want to revoke.
Note: Make sure to copy and save your purchase code before removing it.
3. Click on the Delete button of that Purchase Code row to revoke it.
Revoking the API Key
To revoke the old API key from your website:
1. Go to your old website dashboard with Jupiter V6 in Jupiter > Control Panel > Register Product.
2. Click on the Revoke this API key button.
Running Setup Wizard
After the theme activation you'll get a Setup Wizard which helps you to configure the theme:
Clicking Run Setup Wizard button will redirect you to a setup page where you'll be able to register the theme with your purchase code, install the bundled plugins and install any pre-made template that also can be found in Jupiter X > Control Panel > Templates.
You can discard the Setup Wizard and work on the theme settings via Jupiter X Control Panel, but the Wizard gives you a quick configuration just after the theme activation, so you can set up Jupiter X in few clicks.
Setting Theme Options
After enabling the Jupiter X, you will notice that the page layout and design are corrupted. Don’t worry, there is a simple workaround to fix it.
You will need to open the old website Theme Options to see what are your old configuration. Then for those parts that need to be reconfigured, open the Customizer from Appearance > Customize and start reconfiguring the theme options. Here are some tips that can help you speed up this process:
- Everything is visual and live in the Jupiter X customizer. You will get what you see, so you can move fast reconfiguring everything.
- You can choose the default header from Customizer > Header which is the same as Header Style 1 in Jupiter. The rest of the Header Styles should be created as Custom Headers in Elementor > My Templates > Header. You can also import from many premade Elementor Header Templates when you want to create a new Header. Here is more info.
- The same applies to the Footer. You can design a completely customized footer, or simply choose between the footer layouts. Here is more info.
Unlike Jupiter theme which we had a bunch of custom post types, we only have one here. It is the same Portfolio post type in Jupiter, but have different meta fields. Read more about it here.
Creating pages in Jupiter X
As mentioned before, we are still keeping the WPBakery Page Builder and our developed shortcodes with Jupiter X, however, it is highly recommended to use Elementor as your page builder because:
- It is built based on Frontend editor UX in mind.
- It requires much less learning curve.
- It is freaking fast both editor and rendering the site.
- Your WordPress site speed won’t be affected by Elementor’s presence (can’t say the same for WPBakery page Builder)
- It does not use Shortcode API to store the content and render it, excess usage of Shortcode cause slower sites.
- It has customizable built-in elements
- Its element controls have better UX and arrangements
- It has much better extendibility codebase
- Header, Footer, single page builders and many more unlimited functionalities are included.
Assuming that you already checked the Elementor tutorials from here or you are familiar with it, we will review some points that will speed up your page creation using Elementor.
- If you wish to create a full-width page, you MUST choose the Elementor Full Width template from the Page Attributes. Otherwise, removing the sidebars and make every section Full Width, will add some space on top and bottom of your content.
- We developed Raven plugin to extend the functionality of Elementor by adding elements that were available in Jupiter and were not by default in Elementor. For more information please check here. It would be easier for you if you know what element you must use in order to have the most similar look to Jupiter.
Here is a list:
Portfolio Shortcode > Post element and choose the post type to Portfolio
Page Section > Section
Inner Row > Inner Section
Blog Shortcode > Post Element and choose the post type to Blog
Product Loop > Products (Raven)
Flip Box > Animated Box
Padding Shortcode > Spacer element
Clients Shortcode > Brands element
Contact Form Shortcode > Form element
The rest of the Raven elements are having the same name as Jupiter shortcodes. Also, some other elements are available in Jet Elements which are needless to say. For example, Advanced Google Maps is now Advanced Map and etc. You can find more info about Jet Elements here.
- You can use Block templates in Elementor. It means that you can save a section and use it in multiple places. This will help you rapidly build up your website. Here you can find more info about it.
In case you want to keep using WPBakery Page builder, just make sure you activate it from Jupiter X Control Panel > Plugins.