How to Use HubSpot with a Jupiter X Website

Use HubSpot with Jupiter X featured

It’s inevitable that you’ll day you’ll need to dive into the world of marketing to promote your product or service. At this point, the search for the necessary tools begins. You’ve probably heard of HubSpot, which is one of the most widely-used marketing platforms. HubSpot is an all-in-one software for marketing, sales and services. By using it, you can create and optimize your content, nurture leads and monitor your marketing progress. In this article, we’ll review the most important HubSpot tools and how to use HubSpot with Jupiter X.

Understanding HubSpot and what the HubSpot platform includes

HubSpot is a company founded in 2006 at the Massachusetts Institute of Technology. It provides software products for inbound marketing, sales and customer service with the same name – HubSpot. All the HubSpot tools are divided into hubs: 

  • HubSpot CRM – A free customer relationship management (CRM) software, which helps you to organize and track your leads and customers.
  • Marketing Hub – Set of tools that help to grow traffic and convert more visitors on your site.
  • Sales Hub – Allows your sales team to manage and communicate with your leads and customers.
  • Service Hub – Customer service tools that help your customer service team to identify and resolve customer’s issues in a way that leaves them happy.
  • CMS Hub – Website builder and blogging platform that provides the ability to build and host a website without the help of a designer.

The HubSpot CRM

The HubSpot CRM is a free platform in the HubSpot core that includes access to all HubSpot marketing, sales, customer service and contact management tools for unlimited users. It helps companies to track leads and analyze business metrics.

The HubSpot CRM offers a visual dashboard with a view of the entire sales funnel. By using the CRM system, you can track customer interactions through email, live chat or phone calls, social media, and every interaction is stored in a timeline organized by lead. The platform integrates with other HubSpot tools such as Marketing Hub, Sales Hub and Service Hub.

Despite the HubSpot CRM being a free platform, it offers a long list of tools you can use to get new leads and do better business with the existing customers. The full list of CRM free tools can be found on this page.

The HubSpot Marketing Hub

The Marketing Hub consists of a set of tools developed to make life easier for your marketing team. By using them you can run a successful marketing campaign from start to finish. Here are the most features of this hub: blog and content creating tools, landing pages, social media, emails, SEO, marketing automation and analytics. These tools will help you to attract visitors, convert them into leads and delight potentials and current customers. The Marketing Hub connects with your HubSpot CRM to increase the website traffic and track your lead’s progress.

The HubSpot Sales Hub

The Sales Hub has tools your sales team needs to close better deals in less time. This hub lets your sales department see what pages and how often they are visited by your leads, so that helps to focus attention on what matters most and close deals with qualified clients. The Sales Hub syncs with the HubSpot CRM and you can monitor which deals are won, lost, or still in progress. The main features included in the hub are: email templates and sequences, free calling, meeting scheduling and pipeline tracking.

The HubSpot Service Hub

An important component of a successful business is great customer support service, and the HubSpot Service Hub can help you with that. It has all the necessary tools such as live chat and conversational bots, knowledge base, support tickets, phone support, customer feedback, canned snippets.

Integrate and use Hubspot with Jupiter X site

HubSpot has its own content management system (CMS) where you can build and host your site and manage marketing progress. However, you can integrate WordPress-based website with HubSpot using the plugin, so it gives you an ability to continue using WordPress as your CMS and use HubSpot’s marketing features.

The WordPress plugin called HubSpot All-In-One Marketing – Forms, Popups, Live Chat allows you to use HubSpot with Jupiter X site by connecting your account with the site. Thus you’ll get access to many of HubSpot’s tools directly from your WordPress dashboard.
To install the plugin, log in to your site’s dashboard, go to Plugins > Add New and find the plugin by typing the word “Hubspot” in the keyword field.

Once the plugin is installed and activated, you’ll need to connect your HubSpot account with the plugin. To do this, go to the HubSpot section and log in to your HubSpot account. If you don’t have it yet then you’ll be prompted to create one.

When it’s done, you’ll be able to create forms, lists, monitor new contacts and more from your WordPress dashboard.

Let’s check the example of creating the popup form using Hubspot. Open the Hubspot > Forms section and click the Create a free form button.

Select the Pop-up box form type and click Next.

In the next step, we need to configure the Callout view: add featured image, edit the text and color.

In the Form tab, we can edit the form view which will be displayed to our visitors after the subscribe button is pressed in the Callout window.

Also, we can set up the thank you message once the visitor subscribed in the Thank you tab.

In the Targeting tab, configure when the popup will appear, and if needed, add filters based on information about your visitors.

When all the settings are set, you can preview the newly created popup and then publish it.

Aside from that, the Hubspot plugin allows you to use chat and chatbots to engage visitors, build beautiful email newsletters inside the WP dashboard and nurture your leads with marketing automation campaigns. Also, you can manage your contacts and group them with the built-in list builder, as well as measure your business growth in real-time with analytics dashboards.

Set the HubSpot action in the Raven Form widget

In Jupiter X, using the Raven Form widget, we can submit our form data to the HubSpot form. To do that, we need to create a new form in HubSpot at first via the HubSpot account in Marketing > Forms.

Or if you have installed the Hubspot integration plugin, then you can do it directly in WordPress Dashboard > HubSpot > Forms.

Use HubSpot with Jupiter X - create form wp

However, the Hubspot plugin isn’t required for the functioning of the Raven form feature we are going to review. Once the form is ready, you can get the Portal ID and Form ID which are required for the action settings in the Raven form. You can find those IDs in the Embed section when editing the form.

Use HubSpot with Jupiter X - form edit
Use HubSpot with Jupiter X - embed forms
Use HubSpot with Jupiter X - form ids

The next step is to configure the Raven form action. In the Elementor editor, open the form settings and select Hubspot in the Add Action field.

Use HubSpot with Jupiter X - raven form settings

Then we need to add the Portal ID and Form ID in the Hubspot tab settings and set the Field Mapping fields to connect Hubspot form fields with our Raven form.

Use HubSpot with Jupiter X - action settings

Now when the form is submitted the data from our Raven form will be collected on the HubSpot side for further analysis, creating contact lists and more.

Wrapping Up

HubSpot offers great software as a free CRM along with specific free and paid software for marketing, sales and customer service teams, which integrate together to help your company grow. Besides that, HubSpot has its own CMS for creating and hosting websites, and it also easily integrates with the WordPress platform that gives a powerful tool for your inbound marketing on existing WordPress sites. Also, what is great in HubSpot is that it provides an opportunity to level up your professional skills with free online courses at the HubSpot Academy.

How to Create a Gaming Website in Jupiter X Using Dynamic Shortcode

create a gaming website in Jupiter X Featured

At some point, you’ve probably heard of dynamic elements in Jupiter X. They allow you to turn your raw data into fascinating page templates without coding. However, sometimes, using custom coding is inevitable, especially when you want to use your dynamic data with a piece of Javascript code. In this article, we’ll take a look at how you can create a gaming website in Jupiter X  by using dynamic data, transforming it into custom made shortcode and using it in a wheel of fortune game.

What we’ll need: 

Creating a new post type: Wheels

In creating a gaming website in Jupiter X, I’m going to start by creating a new post type named Wheels. The reason is that I want to create different wheels with different colors, conditions and prizes. Imagine that you own a website where users are able to select different wheels of fortune and start the game as they wish. Also, creating a new post type using the Jet Engine plugin allows me to create the wheels upon user submission in the future. We can aim to build a gaming website with a combination of aforementioned features and a membership plugin. However, it’s just a simple example of how you can integrate your dynamic data with custom features developed on your own in Jupiter X. 
Let’s get back to work. I assume you already enabled the Jet Engine in the Jupiter X -> Control Panel -> Plugins. So, let’s create the post type “wheels.” I want to be able to create multiple wheels with different prizes.

Adding a new post type in Jet Engine

Now, try to add as many prize options as you wish and also set a meta field for the number of prizes. This field should indicate how many prizes a wheel should have.

Now update the post type and then navigate to WordPress Dashboard -> Wheels and add a new wheel.

As you can see, the post looks empty in the front end, but don’t worry, we are going to add the wheel of fortune using the dynamic shortcode capabilities there.

Empty front end in wheels single pages

Activating the Jupiter X child theme

Since we need to create a shortcode to use in our single templates, it’s better to use a child theme, define the shortcode there and only call it in the posts. To do that, download and install the Jupiter X child theme package provided here and then activate it.

The Jupiter X child theme is active

Add the shortcode in the child theme

The next step in creating a gaming website with Jupiter X is to add the shortcode to show the wheel of fortune. To do that, first download the winwheel.js library from here. Then extract the files and copy the winwheel.min.js to the jupiterx-child/assets/js/ folder. You also need to add the TweenMax.js library to preserve the smooth animation while the wheel is spinning. After downloading and adding both JS files into your child theme, add this line to your jupiterx-child/functions.php to include the js file in your website.

wp_enqueue_script('jupiterx-child-wheel', get_stylesheet_directory_uri() . 'https://d34b8fs2z18t5a.cloudfront.net/assets/js/winwheel.min.js', [ 'jquery' ], '', false );
wp_enqueue_script('jupiterx-child-tween', get_stylesheet_directory_uri() . 'https://d34b8fs2z18t5a.cloudfront.net/assets/js/TweenMax.min.js', [ 'jquery' ], '', false );
wp_enqueue_style( 'wheel_of_fortune', get_stylesheet_directory_uri() . '/assets/css/wheel.css' );

The last line will add the necessary CSS snippets to style the wheel. You need to also add some image files into the assets folder.

The structure of the child theme having the wheel of fortune shortcode.

Now, to only test the static version of the wheel, I will add the codes from one of the samples in the wheel.js package and then change the image file paths and actually integrate it with my child theme. Using the below code, we are creating the [wheel_of_fortune] shortcode, but it’s just showing a static wheel. It’s not using our post meta fields to load the dynamically created wheel.

add_shortcode( 'wheel_of_fortune', 'jupiterx_wheel_of_fortune' );
function jupiterx_wheel_of_fortune( $atts ) {
	?>
		<table cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td>
                    <div class="power_controls">
                        <br />
                        <br />
                        <table class="power" cellpadding="10" cellspacing="0">
                            <tr>
                                <th align="center">Power</th>
                            </tr>
                            <tr>
                                <td width="78" align="center" id="pw3" onClick="powerSelected(3);">High</td>
                            </tr>
                            <tr>
                                <td align="center" id="pw2" onClick="powerSelected(2);">Med</td>
                            </tr>
                            <tr>
                                <td align="center" id="pw1" onClick="powerSelected(1);">Low</td>
                            </tr>
                        </table>
                        <br />
                        <img id="spin_button" src="<?php echo get_stylesheet_directory_uri() . 'https://d34b8fs2z18t5a.cloudfront.net/assets/img/spin_off.png' ?>" alt="Spin" onClick="startSpin();" />
                        <br /><br />
                        &nbsp;&nbsp;<a href="#" onClick="resetWheel(); return false;">Play Again</a><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(reset)
                    </div>
                </td>
                <td width="438" height="582" class="the_wheel" align="center" valign="center">
                    <canvas id="canvas" width="434" height="434">
                        <p style="{color: white}" align="center">Sorry, your browser doesn't support canvas. Please try another.</p>
                    </canvas>
                </td>
            </tr>
        </table>
		<script type="text/javascript">

			
			 // Create new wheel object specifying the parameters at creation time.
            let theWheel = new Winwheel({
                'numSegments'  : 8,     // Specify number of segments.
                'outerRadius'  : 212,   // Set outer radius so wheel fits inside the background.
                'textFontSize' : 28,    // Set font size as desired.
                'segments'     :        // Define segments including colour and text.
                [
                   {'fillStyle' : '#eae56f', 'text' : 'Prize 1'},
                   {'fillStyle' : '#89f26e', 'text' : 'Prize 2'},
                   {'fillStyle' : '#7de6ef', 'text' : 'Prize 3'},
                   {'fillStyle' : '#e7706f', 'text' : 'Prize 4'},
                   {'fillStyle' : '#eae56f', 'text' : 'Prize 5'},
                   {'fillStyle' : '#89f26e', 'text' : 'Prize 6'},
                   {'fillStyle' : '#7de6ef', 'text' : 'Prize 7'},
                   {'fillStyle' : '#e7706f', 'text' : 'Prize 8'}
                ],
                'animation' :           // Specify the animation to use.
                {
                    'type'     : 'spinToStop',
                    'duration' : 5,     // Duration in seconds.
                    'spins'    : 8,     // Number of complete spins.
                    'callbackFinished' : alertPrize
                }
            });

            // Vars used by the code in this page to do power controls.
            let wheelPower    = 0;
            let wheelSpinning = false;

            // -------------------------------------------------------
            // Function to handle the onClick on the power buttons.
            // -------------------------------------------------------
            function powerSelected(powerLevel)
            {
                // Ensure that power can't be changed while wheel is spinning.
                if (wheelSpinning == false) {
                    // Reset all to grey incase this is not the first time the user has selected the power.
                    document.getElementById('pw1').className = "";
                    document.getElementById('pw2').className = "";
                    document.getElementById('pw3').className = "";

                    // Now light up all cells below-and-including the one selected by changing the class.
                    if (powerLevel >= 1) {
                        document.getElementById('pw1').className = "pw1";
                    }

                    if (powerLevel >= 2) {
                        document.getElementById('pw2').className = "pw2";
                    }

                    if (powerLevel >= 3) {
                        document.getElementById('pw3').className = "pw3";
                    }

                    // Set wheelPower var used when spin button is clicked.
                    wheelPower = powerLevel;

                    // Light up the spin button by changing it's source image and adding a clickable class to it.
                    document.getElementById('spin_button').src = "<?php echo get_stylesheet_directory_uri() . 'https://d34b8fs2z18t5a.cloudfront.net/assets/img/spin_on.png' ?>";
                    document.getElementById('spin_button').className = "clickable";
                }
            }

            // -------------------------------------------------------
            // Click handler for spin button.
            // -------------------------------------------------------
            function startSpin()
            {
                // Ensure that spinning can't be clicked again while already running.
                if (wheelSpinning == false) {
                    // Based on the power level selected adjust the number of spins for the wheel, the more times is has
                    // to rotate with the duration of the animation the quicker the wheel spins.
                    if (wheelPower == 1) {
                        theWheel.animation.spins = 3;
                    } else if (wheelPower == 2) {
                        theWheel.animation.spins = 8;
                    } else if (wheelPower == 3) {
                        theWheel.animation.spins = 15;
                    }

                    // Disable the spin button so can't click again while wheel is spinning.
                    document.getElementById('spin_button').src       = "<?php echo get_stylesheet_directory_uri() . 'https://d34b8fs2z18t5a.cloudfront.net/assets/img/spin_off.png' ?>";
                    document.getElementById('spin_button').className = "";

                    // Begin the spin animation by calling startAnimation on the wheel object.
                    theWheel.startAnimation();

                    // Set to true so that power can't be changed and spin button re-enabled during
                    // the current animation. The user will have to reset before spinning again.
                    wheelSpinning = true;
                }
            }

            // -------------------------------------------------------
            // Function for reset button.
            // -------------------------------------------------------
            function resetWheel()
            {
                theWheel.stopAnimation(false);  // Stop the animation, false as param so does not call callback function.
                theWheel.rotationAngle = 0;     // Re-set the wheel angle to 0 degrees.
                theWheel.draw();                // Call draw to render changes to the wheel.

                document.getElementById('pw1').className = "";  // Remove all colours from the power level indicators.
                document.getElementById('pw2').className = "";
                document.getElementById('pw3').className = "";

                wheelSpinning = false;          // Reset to false to power buttons and spin can be clicked again.
            }

            // -------------------------------------------------------
            // Called when the spin animation has finished by the callback feature of the wheel because I specified callback in the parameters
            // note the indicated segment is passed in as a parmeter as 99% of the time you will want to know this to inform the user of their prize.
            // -------------------------------------------------------
            function alertPrize(indicatedSegment)
            {
                // Do basic alert of the segment text. You would probably want to do something more interesting with this information.
                alert("You have won " + indicatedSegment.text);
            }

			//});
		
		</script>
		 

<?php
    
}

And finally, by calling the shortcode on a page, we can see that the wheel of fortune is successfully functioning:

create a gaming website in Jupiter X - wheel of fortune
Calling the wheel of fortune shortcode on a page.

The result would look like this:

create a gaming website in Jupiter X - wheel
The static version of the wheel integrated with a WordPress website

Now, let’s make it dynamic and use our post to create different wheels! 

Use the shortcode in the single wheel’s post templates

The exciting part here is that we can make the wheels as dynamic as we want or even allow our users to create their own wheels. To do that, we need to first make the wheel dynamic by modifying some part of the shortcode we created. The dynamic settings that we have right now are these:

  • The number of prizes
  • The prize names

We can add more and more dynamic fields, but for now, we just want these. So, I’m going to find the place that I would need to change. Here it is:

let theWheel = new Winwheel({
                'numSegments'  : 8,     // Specify number of segments.
                'outerRadius'  : 212,   // Set outer radius so wheel fits inside the background.
                'textFontSize' : 28,    // Set font size as desired.
                'segments'     :        // Define segments including colour and text.
                [
                   {'fillStyle' : '#eae56f', 'text' : 'Prize 1'},
                   {'fillStyle' : '#89f26e', 'text' : 'Prize 2'},
                   {'fillStyle' : '#7de6ef', 'text' : 'Prize 3'},
                   {'fillStyle' : '#e7706f', 'text' : 'Prize 4'},
                   {'fillStyle' : '#eae56f', 'text' : 'Prize 5'},
                   {'fillStyle' : '#89f26e', 'text' : 'Prize 6'},
                   {'fillStyle' : '#7de6ef', 'text' : 'Prize 7'},
                   {'fillStyle' : '#e7706f', 'text' : 'Prize 8'}
                ],
                'animation' :           // Specify the animation to use.
                {
                    'type'     : 'spinToStop',
                    'duration' : 5,     // Duration in seconds.
                    'spins'    : 8,     // Number of complete spins.
                    'callbackFinished' : alertPrize
                }
            });

All the settings are stored here, so it’ll be an easy move. I would just need to set the number of prizes dynamically and add the “segments” to in a for statement and add a random color for each prize.

<?php  $number_of_prizes = get_post_meta( get_the_ID(), 'number-of-prizes', true ); ?>
	 // Create new wheel object specifying the parameters at creation time.
            let theWheel = new Winwheel({
                'numSegments'  : <?php echo $number_of_prizes ?>,     // Specify number of segments.
                'outerRadius'  : 212,   // Set outer radius so wheel fits inside the background.
                'textFontSize' : 16,    // Set font size as desired.
                'segments'     :        // Define segments including colour and text.
                [
                	<?php 
					for ($i = 1; $i <= $number_of_prizes; $i++) {
					    ?>
						{'fillStyle' : '<?php echo sprintf('#%06X', mt_rand(0xF00000, 0xFFFFFF)); ?>', 'text' : '<?php echo get_post_meta( get_the_ID(), 'prize-' . $i, true ); ?>'},
					    <?php
					}
					?>

                ],
                'animation' :           // Specify the animation to use.
                {
                    'type'     : 'spinToStop',
                    'duration' : 5,     // Duration in seconds.
                    'spins'    : 8,     // Number of complete spins.
                    'callbackFinished' : alertPrize
                }
            });

The result looks like the following:

create a gaming website in Jupiter X - results

Now if I add 3 more prizes to this post, we can see the effect in the front end:

Adding 3 new prizes to the post

Remember to change the number-of-prizes meta field to 9 as well.

create a gaming website in Jupiter X - prizes
Result of adding 3 new prizes to the

Now it’s time to use this shortcode in a post template. First I need to enable the post type option in the Jupiter X -> Control Panel -> Settings like:

create a gaming website in Jupiter X - enable wheel
Enabling the wheel post type in Jupiter X -> Control Panel -> Settings.

Then I can add a template in the Customizer for the wheel single posts. To do that, I’ll open Customizer and navigate to Post Types -> Wheels -> Single and add a custom template.

create a gaming website in Jupiter X - add template
Adding a new template for the wheel post type.

Here I will add a Shortcode element and add my shortcode inside it.

create a gaming website in Jupiter X - add shortcode
Adding the shortcode into the template.

Now I’ll go ahead and save the template and refresh my page. Here’s the result:

create a gaming website in Jupiter X - final result

The source code of the child theme that is being used here can be found here.

Wrapping up

Dynamic data can bring life to your website. In this article, we showed you how to easily create a gaming website with Jupiter X. Imagine using a simple game like above, and you’ll actually be able to monetize your website. You can integrate the wheels with a membership plugin, make some levels and assign people to those levels, keep their scores etc. It would be an easy way of creating a gaming and entertainment website. The features of the dynamic fields do not stop there. And we’ve already provided ways in our Artbees blog about making your own polling website using Jupiter X, building hotel and booking websites, dynamic sliders and more. If you have any suggestions or comments, please write them in the comments section below!

How to Create a Multilingual Jupiter X Site with the WPML Plugin

create a multilingual Jupiter X site featured

If your website has visitors from throughout the world, then it’s good practice to make it available in different languages. Making the site multilingual is a smart marketing strategy as it helps to increase subscribers and customers, and as a result, widen profit margins. In this article, we’ll show you how to create a multilingual Jupiter X site using the popular WPML plugin.

What is the WPML plugin and why do you need to use it?

The WPML plugin – which stands for WordPress Multilingual – is the most popular WordPress plugin that helps users to build a multilingual website. It allows you to translate the site’s content into multiple languages, and you can manage them in the same domain with a single WordPress installation. The WPML plugin is easy-to-use as it enables you to be able to quickly make your site multilingual.

WPML is a premium plugin with 3 different pricing plans:

  • Multilingual Blog
  • Multilingual CMS
  • Multilingual Agency.
create a multilingual Jupiter X site - pricing

With all these pricing plans, you’ll get support and updates for a year. WPML consists of a core plugin and add-ons, which can be installed to get additional functionality. Each plan has the WPML core plugin and different combinations of add-ons.

Here are the most useful WPML add-ons in order to create a multilingual Jupiter X site: 

WPML String Translation – The add-on allows to translate interface strings directly from WordPress without using .mo files. You can translate static texts and user-generated texts that are outside of posts and pages.

WPML Translation Management – With this add-on, you can manage the translation on your site, add your own translators, assign them a translator role as well as translation work. You can also use different translation services.

WPML Media Translation – This add-on helps you to create the WordPress Gallery in different languages, and it allows you to control which images will be displayed for each language.

WooCommerce Multilingual – This add-on can be used to build a multilingual e-commerce site. It allows you to translate all WooCommerce content including products, categories, variables, fields, etc.

The full list of WPML add-ons can be found on the official website.

Installing the WPML plugin and its components for a multilingual site

As mentioned above, WPML consists of a core plugin and add-ons. The core plugin is called WPML Multilingual CMS, and it’s always required. To make your site multilingual, you need to install the WPML core plugin and the main add-ons:

  • String Translation
  • Translation Management
  • Media Translation

The plugins packages can be downloaded from your WPML account’s downloads page. Important note: the WPML Multilingual Blog account type does not provide access to String Translation and Translation Management add-ons. 
After downloading, all plugins can be installed via the Plugins > Add New > Upload Plugin section on your site’s WP Dashboard.

create a multilingual Jupiter X site - upload plugin

You can get more detailed information on how to install the WPML plugin and its components in the WPML installation instructions.

Adding languages, configuring language URL and language switchers.

After installing and activating WPML a setup wizard will help you to configure the required settings to prepare your site for multilingual content. In WPML > Languages choose your current content language.

create a multilingual Jupiter X site - setup

In the next step, select the languages that you want to be enabled on your site.

create a multilingual Jupiter X site - select language

For the 3rd step, you can configure the language switcher. You can set the order of the languages and then add the language switcher to the navigation menu, footer or widget area on your site. You can also choose the language switcher style and what to include in the language switcher.

create a multilingual Jupiter X site - language switcher

After you’ve configured the language switcher options, you’ll need to then enter your site key to register for automatic WPML plugin updates. The key can be found in your account on WPML’s website.
In Jupiter X, in most cases the custom header/footer templates are used, so let’s see how to add a language switcher in the custom header template. First you need to open your header template to edit in Jupiter X > Customize > Header.

create a multilingual Jupiter X site - custom header

When you are redirected to the Elementor editor, on the left widgets sidebar, search field type “WPML” – or you can find the WPML Language Switcher widget manually in the General widget tab.

create a multilingual Jupiter X site - switcher widget

Then drag the widget into the header template section and place it where you want it to be displayed.

create a multilingual Jupiter X site - switcher added

The one thing before starting translating the site is configuring the language URL. Go to WPML > Languages and choose the URL format you want in the Language URL format section. Here you can set directories, subdomains or parameters for different languages in the URL.

Translating the site: Posts and pages, taxonomies, menus and strings

By using WPML when creating a multilingual Jupiter X site, you can translate WordPress pages, posts, custom post types, categories, tags, custom fields and content created with page builders.

Let’s take a look at the example of translating pages in Jupiter X. To start translating the pages, go to Pages > All Pages. There you’ll see the list of all your pages and the number of pages per language. You can translate pages by clicking the plus icon next to the content you want to translate.

create a multilingual Jupiter X site - translate pages

After clicking the plus icon, you’ll then be redirected to the default WordPress editor to add a new translated content. Add the title and then click the Edit with Elementor button.

create a multilingual Jupiter X site - translate page editor

When the Elementor editor opens, translate the page content and save changes.

In the WPML plugin, you can translate taxonomies (categories, tags) in the WPML > Taxonomy translation section. Select the taxonomy to translate and add translation by clicking the plus icon next to the taxonomy you need.

To translate menus, you can use two options. The first option is navigating to the Appearance > Menus section and creating a new translated menu by clicking the plus icon for the translations.

The other way is by using the menu sync tool in WPML > WP Menus Sync which automatically synchronizes the menu’s content. For detailed information on how to translate menus in WPML please, take a look at this article.

All other texts that are not in posts, pages and taxonomies can be translated with help of the String Translation tool in WPML > String Translation. You can follow this guide about the string translation. 

Wrapping up

WPML is the most popular WordPress plugin for multilingual sites and particularly useful while creating a multilingual Jupiter X site. It offers a number of useful features to translate your WordPress site into multiple languages easily. The plugin is user-friendly and simple to use. WPML has different add-ons, and you can install only the ones you actually need. WPML is a great solution for different types of multilingual websites such as eCommerce sites, blogs, social network and business sites.

How to Run a Speed Test for a WordPress Website

Speed Test for a WordPress Website featured

It’s a fact that fast loading times are extremely crucial for a WordPress website as it affects search engine rankings and attracts more visitors. If it takes your website longer than three seconds to load, a visitor is likely to leave your page. So then you might be wondering: how can I find out how well my website is performing? The great news is that there are easy-to-use tools available that allow you to perform a speed test for a WordPress website.   

In this article, we discussed how to improve a site’s loading speed, but now we’ll list some tools that will help you to test website performance.

Reasons for a slow website 

If you’d like to know the reasons for a slow website, you should know what a page lifecycle is. 

As you enter a URL into your browser and hit Enter, it’ll go through the following process:

  1. The browser passes the URL to your network default DNS servers or gateways. It will try to resolve the URL with an equivalent IP address in order to find the web server. The web server is the place where your website files exist. A slow DNS server can cause a slow website. 
  2. After locating the IP address, the request will be sent to your web server. The web server will then receive your request and will route you to the path requested. If the path exists, it will return the page with a HTML 200 code. If it does not exist, it will return a 404 error code along with a 404 page (if it exists).
  3. If your website is not static, it means that the page you requested must be generated. Depending on your web server, you might have different compilers or interpreters in use. You might also use a CMS like WordPress. Each web server, software, CMS or script you are using is involved in the page generation lifecycle and might cause performance glitches. Even a non-optimized database can cause performance issues. 

In other words, there might be several reasons at any stage of a page generation lifecycle for a slow website.  Here, we’ll provide an overview of some of the most common problems on a WordPress website. 

Poor hosting

Simply put, more server resources provide better performance. Using cheap hosting is like creating a long queue for each visitor. Long queues can cause a long TTFB (time to first byte). If you’re using a cheap hosting that you know doesn’t have the proper resources for your site, it’s time to think about new, faster hosting. Some shared hosting providers that are suitable for your WordPress site include:

Also, check out this article to learn what other hosts are recommended for WordPress.

Poorly coded themes

When looking for a WordPress theme, it’s important to pay attention to speed optimization. If you find a theme that is visually appealing, it might be poorly coded, which can drastically slow down your website. The themes that are free or offered for cheap are usually not optimized. In other words, it’s better to switch to another theme (note that a good theme will cost $60-$120). Before purchasing a theme, make sure developer support is available so that you can contact them anytime you experience an issue.

Third-party plugins

When installing a new plugin, it’s good form to ensure that it’s also not poorly coded as this will slow down the site. Pay attention to the plugin rating, how many times it was downloaded and how long it’s been since the last time it was updated. You can disable/enable each plugin while running a speed test, but it’ll be time consuming, so it’s better to use the Query Monitor plugin. This plugin reports the database queries on your site and can be filtered by a plugin to see which one is causing high CPU usage.

Large Images

Everyone knows that images are extremely vital to any website as they provide much more info than simply text. The downside is that images also increase the size of the page. That said, you can optimize the images and still retain the quality.

Online image compression tools can help you with this. The top ones are TinyPNG and Kraken. First compress your images using one of these tools, then upload the optimized ones to your site. 

Before running a WordPress website speed test

When running a WordPress website speed test, you need to take into account the following:

  • Check different geographic locations

You may not know where your visitors are coming from. In this case, you can use Google Analytics. If most of your visitors are from the USA, then you need to choose a test server from Chicago, for example. If your visitors are from all over the world, then you’ll need to run several tests with multiple locations.

  • Enable the website cache

To run a website speed test correctly, you need to enable the caching on your site. When it’s on, you’ll test website caching as well and see how effective it is and if the performance has improved. 

  • Enable the website firewall/CDN

It’s recommended to switch on a CDN service and the firewall to improve the performance. We have a separate article about CDN and why it’s so important for website loading speed. To find out more info about this, feel free to read How To Set Up CDN For Your WordPress Website.

Best tools to test website speed 

Below, we’ve listed the top tools that you can use to check how fast your site is loading for your visitors.

GTMetrix

GTMetrix is a very popular tool and easy to use. If you’re a novice, chances are that it’ll be your favorite tool for testing. Besides the full report of the website’s loading speed, GTMetrix also provides suggestions on how you can improve the performance of your website. It’s really useful as you’ll get advice on what you need to fix to make the site load faster. Here you’ll see your site’s score from A (excellent) to F (fail). The score is based on load time, page size and the total number of requests.

Speed Test for a WordPress Website - gtmetrix

WebPageTest

One upside offered by WebPagetest is the ability to select a country from which you want to test, so you can see how well your site is performing in different parts of the world. Like GTMetrix, the WebPagetest tool will provide you with recommendations on how to resolve your site performance issues.

Speed Test for a WordPress Website - webpage test

Chrome DevTools

The Chrome DevTools panel is related to the Chrome browser and is quite popular among developers for performing a speed test for a WordPress website. You can activate the Network panel in Chrome by pressing Command+Option+I (Mac) or Control+Shift+I (Windows, Linux). Then you can generate a waterfall analysis of your site. Note that Chrome will show Network requests while the Network panel is open. If you want to inspect a request that happens on page load but you don’t see anything, all you need to do is refresh the page while you have the Network panel open.

Speed Test for a WordPress Website - devtools

Wrapping Up

There’s no doubt that website speed is crucial to running and maintaining a WordPress site. If the site loads quickly, your visitors will be able to view your content without delay. Quick loading times could further work to convert new visitors into subscribers or paying customers.
In this post, we reviewed some of the best and easy-to-use tools to test speed for WordPress websites. Once you’ve identified how well your site is performing, then make sure to head over to this article to learn more about how to speed up loading times.

5 of the Best WordPress Development Environments

WordPress development environments featured

Developers spend most of their time in test environments. Having a good development environment can save tons of time and energy. This begs the question: what’s the best test environment for WordPress? In this article, I’ll share some of my personal thoughts about five of the best WordPress development environments. I’ll dive deeper and talk about their features, so you can make an informed decision when choosing the right environment for your particular workflow.  

The best WordPress development environments in a nutshell

I chose 6 of the most necessary features and will do a quick comparison among the Valet, Vagrant, Local, DesktopServer and XAMPP development environments, so you can quickly wrap your head around these environments.

ValetVagrantLocalDesktopServerXAMPP
Cross-platformMacMac, Windows, LinuxMac, Windows, LinuxMac, WindowsMac, Windows, Linux
Easy installationYesYesYesYesYes
DashboardNoNoYesYesYes
Easy configurationTo some extentTo some extentYesTo some extentYes
Multiple websitesYesYesYesUp to 3 in free versionYes
PriceFreeFreeFree & ProFree & PremiumFree

Valet

Simply put, Valet is awesome. I can’t help but use this development environment since I found out about it some years ago. I’ve been amazed by the simplicity of this environment. The Laravel team has done a fantastic job in developing so many great features. I won’t list all the features but will quickly share a few key points with you.

Pros

  • It’s open-source and free.
  • It’s blazing fast.
  • It has a wide range of support for different platforms (WordPress, Laraval, Lumen, Drupal, …)
  • It’s easy to install via Homebrew (The Mac package manager).
  • With the help of Homebrew, you can switch between different PHP versions. In my job, I am sometimes in great need of this feature.
  • It offers two ways to share your local project online via Ngrok or Expose. It’s very practical for quickly getting feedback from your clients.
  • It has well-written documentation.
  • It has a long list of commands to control different aspects of the development environment.
  • No usage of virtual machines. This might be a con also but to me, the simplicity that it provides in comparison to virtual machines is worthy.
  • You can secure your site with TLS easily using a single command.

Cons

  • Multisite WordPress installation requires installing a separate driver. It’s easy to install, but I feel that it should have native support.
  • It’s not cross-platform. It only has official support for Mac users. There’s a fork called Valet Windows for Windows users, but it’s not official.
  • It configures your Mac to use some specific server type, and it can get messy if you want to use other servers and packages.
  • It’s not possible to turn on/off individual sites.

Vagrant

Vagrant is an all-in-one software for having full-featured environments. The main selling points of this software is that it’s portable and distributable, which allows it to provide lots of flexibility regardless of your operating system. It’s able to handle any type of environment that you need. The initial feeling that you may get is that it’s a software for pro developers but once you get your head around it, you’ll like it.

Pros 

  • It’s open-source and free.
  • It’s a cross-platform software that runs on Mac, Windows and Linux.
  • It’s portable and distributable via Vagrantfile. This is a killer feature.
  • It has the necessary commands to control the software via the command line.
  • Isolated packages and configurations for each environment.
  • Ability to turn off/on individual sites.

Cons

  • It has good documentation, but it could be improved to help newbie developers learn faster.
  • It seems that it’s intended for pro developers, not all developers.

Local

best WordPress development environments Local

Local is a modern WordPress development environment that offers many features. It provides a dashboard in which you can control your sites easily. If you are the type of developer who likes to have a dashboard instead of working from the command line, Local is one of the best available tools.

Pros 

  • It’s free. There’s a premium plan, but the free version is rich with features.
  • It’s a cross-platform software that runs on Mac, Windows and Linux.
  • If you want to serve your site in Flywheel and WP Engine, you can simply push your site to those servers from the dashboard.
  • To quickly share your local site online, you can create a live link with one click.
  • After creating the site, you can easily reconfigure the settings via the dashboard. Like changing the PHP version, server confirmation and more.
  • Ability to turn off/on individual sites.
  • It has built-in support for Mailcacher which makes email testing easy.
  • You can export/import your sites. It’s very handy to recreate your site in another operating system.

Cons

  • It seems that it’s slower than Valet in some cases.
  • It’s not possible to use the command line to control the environment.

XAMPP

best WordPress development environments XAMPP

XAMPP is an old player in providing WordPress development environments. It’s completely free and easy to install. I have used XAMPP before, and it has all the necessary features for having a good WordPress environment but I moved to Local some time ago.

XAMPP has a unique feature that almost none of the other environments has, which is a community that can quickly offer help. 

Pros 

  • It’s completely free.
  • It’s a cross-platform software that runs on Mac, Windows and Linux.
  • It’s getting frequent updates to support the latest versions of PHP.
  • It provides a way for you to easily configure the PHP and the server.
  • It comes with all the necessary modules to run a smooth WordPress environment.
  • It has a wide range of add-ons to support different platforms not only WordPress.

Cons

  • It’s slower than Valet based on my testing in some cases.

DesktopServer

best WordPress development environments desktopserver

DesktopServer is similar to Local and offers a dashboard to manage your sites. It’s not intended only for developers, other people like designers can also use it easily. It has free and premium versions. The free version is very limited in comparison with Local and XAMPP. I’ll mention the pros and cons of the free version below.

Pros 

  • It’s free with basic features.
  • It’s quick and easy to create a WordPress site from the dashboard.
  • It has built-in support for Xdebug which is a handy tool for debugging.
  • Ability to duplicate a site. This feature comes very helpful for me since I need to create my main sites with different versions of WordPress themes for testing purposes.
  • It includes the latest versions of PHP.

Cons

  • It’s not possible to create multisite. 
  • It’s limited to creating only 3 sites.

It’s worth mentioning that the premium version of DesktopServer has tons of features. Some of their features like importing/exporting, having code editor integrations, and blueprints for automated WordPress configurations are indeed time saver and worth the try.

Wrapping up

Selecting the right development environment is a personal choice, and I shared a few pros and cons of each of them. It’s recommended that you play with different environments and use the one that fits your needs.

In my opinion, what I’ve mentioned above are the best WordPress development environments at the moment. Personally, I use Valet and Local based on my needs. I’d love it if you would share your development environment in the comment section below and share their key pros and cons!

5 Key Maintenance Tasks for Your WordPress Website

maintenance Tasks for your WordPress website featured

Nowadays, as the digital world is evolving like never before, creating a website and leaving it is simply not enough. When it comes to content management systems like WordPress, keeping up with routine tasks is vital. If you are running outdated software on your site, don’t have an optimized database or if you simply don’t care about security questions, sooner or later these maintenance tasks for your WordPress website will catch up to you. Fixing them down the line will be much harder and may even cost extra money.

A better approach is to use the simple tactic of running routine tasks or even automating them in order to streamline this process.

In this post, we’ll discuss the significance of maintenance tasks for your WordPress website and the most important runs to keep your site functioning optimally.

Updates – themes, WordPress, plugins

Plugins and themes are barebones of your site. Basically, your project mainly runs on themes and plugins. However, if you don’t update them, you might encounter serious issues with security or performance. Some users are hesitant about updating their themes and plugins as they think that the update will break the site and lead to some unwanted results. But this is the absolute wrong mindset to have. In this case, staging sites are the best option for those who want to test every update before running.WordPress has a system to manage automatic updates for themes and plugin, however, there are some cases when you might miss an update. Luckily, WordPress addressed this problem in its recent 5.5 update, which allows you to set automatic future updates for plugins and themes. To do this, all you have to do is go to the WordPress dashboard > Plugins and on the right side of the plugin list, set it to Automatic update:

The same thing can be said about the WordPress update – which is the most popular content management system as it backups more than one-third of the world’s websites – which always offers the most important performance and security updates. 

The automatic WordPress update can be easily done by using the Easy Update Manager WordPress plugin, or you can manually set it in the wp-config.php file by adding this line of code:

define( 'WP_AUTO_UPDATE_CORE', true );

Now your WordPress core will update automatically without your input.

Maintaining your database 

Maintaining your database is one of the most important maintenance tasks for your WordPress website. The more content you add to your site, the bigger your database becomes. Changes made to your site, post revisions, your site’s content, user settings, comments, and pretty much everything else is stored in the database. 

As the database becomes bigger and heavier over time, it will slow down your site’s loading speed. Furthermore, the larger your backup, the more it might affect the uploading and downloading speed of your backups.

There are many methods to optimize a WordPress database. The WordPress plugin repository offers many plugins that you can use for a particular job. If you want to save time and use tools that have been tested by many users, you might want to consider using Wp-optimize. This plugin contains pretty much everything you need to optimize your database.

This plugin has more than 900,000 installs and was created from the same group as Updraftplus. Once you install and activate the plugin, visit the plugin’s main page and select how you want to optimize your database as seen below.

Please note that when working with a database, it’s always a must to create a backup before doing anything. Wp-optimize has this option on the right side of the Run all selected optimization button. Don’t forget that important step before proceeding.

The plugin also has image, cache and minification settings that you can use for different purposes. 

Regular backups

Backing up your website is another important thing to consider to protect your site against any unexpected surprises. Whether you update your theme or WordPress, instal a new plugin or just optimize your database, you’ll need to create a database.

For this, you’ll also have some great options to choose from for backup plugins in WordPress. We went ahead with UpdraftPlus, which is one of the most popular and universal tools for this task:

Maintenance Tasks for your WordPress Website - updraftplus

Once you install and activate the plugin, go to the setup tab and setup the plugin to meet your goals.This plugin offers some amazing features like backing up and restoring the site from the Cloud or migrating from one server to another and etc.

Security scan and logs

Security in WordPress is one of the most important aspects of site management. Keeping your WordPress, themes, and plugins up-to-date or having a good hosting is a must. But sometimes, event updated software is not enough to protect you from newly written malicious code.Hiding your security gaps is a massive question – so big in fact that it might require a different post entirely. Aside from the basic things such as changing the admin password, setting up two-factor authentication, disabling file editing, among others, it’s also vital to run a general security audit on your site.  You might want to consider Wordfence, which is one of the most popular tools out here for this purpose:

Maintenance Tasks for your WordPress Website - wordfence

Wordfence can run an audit and security scan of your site. If it detects any malicious code in your files, it’ll provide recommendations to further protect your site. Along with its security functions, Wordfence also can be used as a firewall.After installing and activating the plugin, the next thing you need to do is to run a scan of your site. You can do this by going to Wordfence menu > Scan:

Maintenance Tasks for your WordPress Website - wordfence scan

Once the scan of your site is complete, you can then follow the instructions provided by Wordfence.

Checking broken links

As you add more content to your site, you are also adding more articles. You might notice that links in your older articles no longer work. The reasons for this vary such as the link or the URL was changed – or perhaps the website was taken down. The same thing might happen if you’ve added images from other sources.  A scheduled inspection of broken links on your site is important, since they may affect user experience and it could hurt SEO ranking in general. But checking these links manually is time consuming, so it’s better to use a plugin for this. For this, we recommend using the Broken Link Checker plugin.

Maintenance Tasks for your WordPress Website - broken link checker

This plugin will monitor all broken and dead links on your site and inform you either by mail or in the dashboard.

Conclusion 

This post is by no means a comprehensive list of tasks that you’ll need to maintain your online business. There are other important things you’ll need to keep track of such as image optimization, spam comments, abandoned themes or plugins, performance tests, SEO audits, among much more. 

If you have any questions related to WordPress maintenance, let us know in the comments section below!