How to Create a Community Poll Website with Jupiter X – Part 2

create a community poll website

In the previous article, we stopped right after we created a community poll website, which enables users to submit their own polls. . In this post, we’ll walk you through the rest of the process.  The next step is setting up a homepage where users will be able to see the latest votes, filter them based on their tags and also be able to search between them. After that, we’ll need to design the single poll page.

Step Four: Implement the single polls page and the homepage

This is what I want from the homepage: a list of the latest approved polls, which includes the title, subtitle, latest vote date and created date. In case the poll was closed, it should also show a lock icon in the top right corner.

create a community poll website
Logged out view of the desired homepage.

Also, if the user is  logged in, the polls that I’ve already voted on should turn green, so it becomes possible to distinguish between the polls that I’ve participated in and the ones that I haven’t.

create a community poll website
Logged in view of the desired homepage.

At first look, it seems possible to implement this by using a simple listing with the help of Jet Engine and Jet Smart Filter plugin. Well, this is true for sure.  However, one thing that is missing is the conditional logic of colors. Jet Engine doesn’t give me the ability to distinguish between the polls I’ve voted in and the ones I haven’t.

So, the trick here would be to define a custom shortcode, place it inside a listing and then use it to have smart filters. The following code will give me a shortcode that I can use inside a Listing template on Jet Engine. It represents a single topic with the desired conditions that let me style it as I wish:

add_shortcode( 'custom_poll_item', 'custom_poll_item_function' );


function custom_poll_item_function( $atts ) {
   global $_gdpol_poll;
   $topic_id =  get_the_id();
   $poll_id = gdpol_get_topic_poll_id($topic_id);
   $custom_clasees = " " . get_post_status($topic_id) . " " . " poll_list_item";
   $topic_title = get_the_title($topic_id);
   $topuc_desc = get_the_content($topic_id);
   $uploads = wp_upload_dir();
   $upload_path = $uploads['baseurl']; 
   $topic_thumbnail = get_the_post_thumbnail($topic_id) ? get_the_post_thumbnail_url($topic_id) : $upload_path . 'https://d34b8fs2z18t5a.cloudfront.net/2020/01/chart.png' ;
   $topic_post_date = get_the_date('U', $topic_id);
   $topic_url = get_post_permalink($topic_id);
   $last_active = strtotime( get_post_meta( $topic_id, '_bbp_last_active_time', true ) );   
   $topic_button_text = "I want to Vote!";

   

  if(is_user_logged_in())
  {
  	$user_id = get_current_user_id();
  	$has_voted_or_not = gdpol_db()->user_voted_in_poll($poll_id, $user_id);
  	if($has_voted_or_not) 
  	{
        $custom_clasees .= " voted ";
        $topic_button_text = "Already Voted";
  	}
  	else {
  		 $custom_clasees .= " not_voted ";
  	}
  }
  else {
  	$custom_clasees .= " not_voted ";
  }


  $output = "
			    <a href=\"" . $topic_url .  "\"  class=\"poll_link_list_big\" >
	  				<div class='" . $custom_clasees . "' >
		  				<div class='thumbnail_poll' >
		  					<img src='".$topic_thumbnail."' />
		  					<div class='topic_date' >Created: " .  esc_html( human_time_diff($topic_post_date, current_time('timestamp') ) ) . ' ago' . "</div>
		  					<div class='topic_date_last_activity' >Last activity: " .  esc_html( human_time_diff(date('U', $last_active), current_time('timestamp') ) ) . ' ago' . "</div>
		  				</div>
		  				<div class='poll_body' >
		  					<h3>". $topic_title."</h3>
		  					<div>". $topuc_desc."</div>
		  				</div>
		  				<div class='poll_list_last_column'>
		  					<div class='poll_permalink_button'   >".$topic_button_text. "</div>
		  				</div>
	  				</div>
  			    </a>
  			 " ;

	return $output;
   
}

Just put this in your child theme’s functions.php, and the shortcode will be available. I also need to style it a little bit, so I’ll go ahead and add this CSS fix into the jupiterx-child/assets/less/style.css:

.poll_link_list_big .poll_list_item {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.thumbnail_poll {
    max-width: 100px;
    padding: 6px;
    background: #E0E0E0;
}

.topic_date {
    /* font-size: 7px; */
    /* margin-top: 7px; */
}

.thumbnail_poll {
    min-width: 100px;
    font-size: 7px;
    color: #777575;
    text-align: center;
}

.thumbnail_poll img {
    max-width: 48px !important;
    margin: 9px;
}

.poll_body {
    justify-content: flex-start !important;
    text-align: left;
    width: 80%;
    padding: 5px 15px;
}

.poll_link_list_big {
    display: flex;
    background: rgba(224, 224, 224, 0.48);
    position: relative;
}

.poll_body >h3 {
    color: black;
    font-size: 18px;
}

.poll_body > div {
    color: grey;
    font-size: 12px;
}

.poll_list_last_column {
    padding: 10px;
}

.poll_permalink_button {
    background: #fb6800;
    color: white;
    padding: 12px 10px;
    border-radius: 10px;
    font-size: 13px;
    text-align: center;
}


.publish.poll_list_item.voted {
    background: rgba(84, 218, 100, 0.14);
}

.voted .poll_permalink_button {
    background: #00ab00;
}





body .poll_link_list_big .closed:before {
    font-family: "Font Awesome\ 5 Free" !important;
    display: block;
    width: 16px;
    hright: 16px;
    color: #ababab;
    font-size: 16px;
    font-weight: 900;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
     content: "\f023";
     position: absolute;
     right: -7px; top: -4px;
}

Now, go to Jet Engine -> Listings and add a new Listing Item. I named it as “polls.”

create a community poll website
Adding the “polls” Listing template.

While editing the listing, set the Listing Source as “Posts” and assign the “Topics” post type to it. You can set the whole item to be clickable as well.

Configuring the “Polls” Listing template to show the “Topics” post type.

Now drop the Shortcode element into the page, and add this shortcode to it:

[custom_poll_item]

This is the name of the shortcode that we previously built in the functions.php file.

Adding the custom shortcode to the listing template. 

As soon as the shortcode is added, you should be able to see the result in the preview. It’s better to set the margin and column gap of the sections here to 0. Now that you added the listing template, you need to use it on a Listing Grid and put it on your page. 

Go to your homepage and drop a Listing Grid element into the content. Then configure it as follows:

Configuring the Listing Grid to show the latest polls. 

In order to load more polls, you need to add a button and set it’s ID as “loadmore_latest,” which is the ID you set in the Load More Element ID section of the listing grid.

Adding the proper ID to the Load More button.

Now it’s time to add the search box on top of the polls list and then add the tags filter at the bottom. I’ll use a Smart Filter plugin to do that.

Go to Smart Filters and add two filters: 

  • Tags Selection filter 
  • Search for polls
Adding a new Smart Filter.

For the search box, use the Search filter type:

Setting up the search filter type (text box).

And for the tags, use a Radio type as follows:

Setting up the tags filter using a Radio filter.

Update the filters and go back to the homepage. Now drag and drop the search filter and radio filter into the page.

Adding the Search and Radio filter elements to the homepage.

And assign the filters as you wish. Then style them using their styling options.

Configuring the filters to work with the smart filters created earlier.

Also, this CSS snippet is needed to remove the radio circles and to also show a different color on the selected tag:

.elementor-element .jet-radio-list__input:checked ~.jet-radio-list__label {
    background: #ff5c08;
    color: white !important;
}

.elementor-element .jet-radio-list__input ~.jet-radio-list__label {
    background: white;
    padding: 2px 20px 8px;
    color: #0a0a0a !important;
}

The homepage is ready now! Publish the changes, assign this page as your homepage in WordPress Settings -> Readings and check your website. 

‌By clicking on every vote item, you’ll be directed to the polls page where you can participate in the polls. Styling this page requires some modifications in the child theme. 

In the previous article, we showed how to override the bbPress template files in a child theme. Just like before, I would need to override gdpol-poll-content.php from wp-content/plugins/gd-bbpress-toolbox/templates/default/bbpress/ in wp-content/themes/jupiterx-child/bbpress/gdpol-poll-content.php. 

Also I need to override content-single-topic.php from wp-content/plugins/bbpress/templates/default/bbpress/ in the same directory of my Jupiter X child theme (bbPress). 

You can edit the rest of the template files in order to get the look you’re going for. You can find more information here.

Editing the content-single-topic.php file.

Instead of the poll title and description, we used the topic title and description in the previous article. So, we need to show the topic title and description in the poll single page template.

Editing the gdpol-poll-content.php

In the end, adding this CSS snippet to jupiterx-child/assets/less/style.less will give you a better look in the single topics page:

.gdpol-choices-list legend {
    font-size: 12px;
}

.gdpol-topic-poll header h2 {
    font-size: 2em;
}

.gdpol-topic-poll header p {
    margin-top: 20px;
    /* background: #fffdfd; */
    padding: 20px 0;
}
.gdpol-topic-poll footer, .gdpol-topic-poll header {background: none; }

.gdpol-topic-poll {
    border: none;
    background: #fff;table.wp-list-table.widefat.fixed.striped.posts {
    width: 100% !important;
}
}
.um-dropdown-b li:nth-child(2) {
    display: none !important;
}


a.gdpol-action-show {
    margin-left: 8px;
}


.gdpol-poll-choices label span {float: right;}
.gdpol-poll-choices label input {float: left  !important;margin: 4px 6px 0 0px !important;}


.gdpol-fields-wrapper {
    display: block !important;
    border: none !important;
}

#gdpol-poll-status, #wc-comment-header, .wc_stick_btn.wc-cta-button, .wc_close_btn.wc-cta-button, .bbp-form.gdpol-topic-poll-form legend, .d4p-attachment-addfile
,a.gdbbx-attachment-add-file, .gdbbx-attachment-control >div:nth-child(3), .gdbbx-attachment-control >div:nth-child(4),
.wc-field-submit .wpd_label{
    display: none !important;
}



table.wp-list-table.widefat.fixed.striped.posts {
    width: 100% !important;
}


.bbp-form .gdbbx-attachments-form .gdbbx-validation-active .gdbbx-attachment-preview  {
   float: left !important;
   margin-left:  0 !important;
}

.bbp-form .gdbbx-attachments-form .gdbbx-validation-active .gdbbx-attachment-control {float: left; margin-left: 15px;}
.gdbbx-attachments-form {
    text-align: left !important;
}


.jupiterx-post-image picture{
    display: flex;
    text-align: center;
    margin-bottom: 50px
}
.jupiterx-post-image img {
    width: auto;
    height: 100%;
    max-height: 400px;
    margin: auto;
}



.single-topic #bbpress-forums ul.gdpol-poll-choices, .single-topic  #bbpress-forums.bbpress-wrapper ul.gdpol-poll-choices li {
    padding: 12px;
    font-size: 1.2em;
    color: white;
    list-style-type: none !important;
    margin: 0 !important;
    vertical-align: middle;
    padding-top: 24px;
    position: relative; min-height: 75px;
    display: flex;  align-items: center; width: 100%; columns: 1;  flex-direction: column;
    flex-wrap: wrap;
}

.single-topic #bbpress-forums.bbpress-wrapper ul.gdpol-poll-choices li label {position: absolute;  top: 0; bottom: 0; right: 0; left: 0; text-align: right; width: 100%; display: flex;  align-items: center; padding: 10px; cursor: pointer;}

/* different colors on the poll choices */
.single-topic #bbpress-forums.bbpress-wrapper ul.gdpol-poll-choices li:nth-child(odd) { background-color: #292ab1; }
.single-topic #bbpress-forums.bbpress-wrapper ul.gdpol-poll-choices li:nth-child(even) { background-color: #1e7b48; }
.single-topic #bbpress-forums.bbpress-wrapper ul.gdpol-poll-choices li:nth-child(3n) { background-color: darkcyan; }
.single-topic #bbpress-forums.bbpress-wrapper ul.gdpol-poll-choices li:nth-child(4n) { background-color: mediumorchid; }
.single-topic #bbpress-forums.bbpress-wrapper ul.gdpol-poll-choices li:nth-child(5n) { background-color: dodgerblue; }
.single-topic #bbpress-forums.bbpress-wrapper ul.gdpol-poll-choices li:nth-child(6n) { background-color: darkorange; }
.single-topic #bbpress-forums.bbpress-wrapper ul.gdpol-poll-choices li:nth-child(7n) { background-color: firebrick; }
.single-topic #bbpress-forums.bbpress-wrapper ul.gdpol-poll-choices li:nth-child(8n) { background-color: lightseagreen; }

This is the final look on the single polls page:

Final look of the single polls page. 

Step Five: Design the header and footer with Jupiter X and Raven

The next part when you create a community poll website involves designing the headers and footers of the website. There’s nothing special in this section since everything is possible with the Jupiter X’s Custom Header and Custom Footer capability. You may want to put menus and call to actions in the header and ensure they are looking as they should. More information about this section can be found here.

Adding a custom header template with a call-to-action for creating the polls. 

Step Six: Install Ultimate Member and its add-ons and configure

Using a membership plugin can help you create a membership directory and add social networking features to your app. This will also help you monetize your project. For this particular website, we used the Ultimate Member plugin.

Ultimate member plugin in WordPress plugins repository. 

Dozens of add-ons offered by this plugin can help you build a social network. Imagine that the users of your community create polls, share them on social media, and others vote in the polls and join your community. They interact with each other, see their profiles and receive notifications with each interaction. This is all possible with this plugin. Remember that in order to have an integration on the user profiles and the bbPress forums, you would need to use this add-on on Ultimate Member which is premium:

https://ultimatemember.com/extensions/bbpress/

Profile page view and the integration with the forums. We should change the “Forums” to “Polls” later on using translations.

Later on, you can use localization and change the “Topics” word to “Polls.” After installing the Ultimate Member plugin, you need to define some pages as the membership directory page, single profile page and etc. Here you can find more information on how to configure that.

Step Seven: Add custom notification on the poll votes

 Notifications are a must-have for any social poll website. As soon as any sort of interaction occurs, users should be notified. In order to have a notification system, we used the Real Time Notification add-on for the Ultimate Member plugin and configured it as we wanted. By default, it gives you these notifications, and you have full control of the options to enable/disable them and show the texts as you like. 

  • Notify users when the user role has changed.
  • Notify users when someone comments on their post.
  • Notify users when someone replies to one of their comments.
  • Notify users when another member views their profile.
  • Notify users when guests view their profile.
  • bbPress – Notify users when someone replies to them on topics they created.
  • bbPress – Notify users when someone replies to them on a specific topic.

You can find information on how to configure it here:

I want to also notify the owner of the poll whenever his/her poll receives a vote. In order to do that, I’ll write a code with the help of the notification API included in the Ultimate Member add-on called Real-Time Notification.

/*

This code sample shows you how to use the API to create
and add custom notifications (for real-time notifications) in the plugin.

STEP 1: You need to extend the filter: um_notifications_core_log_types with your
new notification type as follows. For example:

*/

add_filter('um_notifications_core_log_types', 'add_custom_notification_type', 200 );
function add_custom_notification_type( $array ) {
		
	$array['new_action'] = array(
		'title' => 'When something happens', // title for reference in backend settings
		'template' => '<strong>{member}</strong> has just did some action.', // the template, {member} is a tag, this is how the notification will appear in your notifications
		'account_desc' => 'When member does some action on my profile', // title for account page (notification settings)
	);
		
	return $array;
}

/*

STEP 2: Add an icon and color to this new notification type.

*/

add_filter('um_notifications_get_icon', 'add_custom_notification_icon', 10, 2 );
function add_custom_notification_icon( $output, $type ) {
	
	if ( $type == 'new_action' ) { // note that our new action id is "new_action" from previous filter
		$output = '<i class="um-icon-android-person-add" style="color: #336699"></i>';
	}
	
	return $output;
}

/*

STEP 3: Now you just need to add the notification trigger when a user does some action on
another user’s profile. I assume you can trigger that in some action hooks.
For instance, when a user views another user’s profile, you can hook like this.



$who_will_get_notification : is user ID who will get notification
'new_action' is our new notification type
$vars is array containing the required template tags, user photo and url when that notification is clicked

UM()->Notifications_API()->api()->store_notification( $who_will_get_notification, 'new_action', $vars );

*/

add_action('gdpol_vote_saved', 'trigger_new_notification', 100);
function trigger_new_notification( $args ) {
	 global  $_gdpol_poll, $um_notifications, $post, $topic;
	 $_poll = gdpol_get_topic_poll_id();
			$poll_author_id =  bbp_get_topic_author_id($args->topic_id); // die();
				update_post_meta( $args->topic_id, '_bbp_last_active_time', date( 'Y-m-d H:i:s', current_time( 'timestamp', 0 )));

	if ( is_user_logged_in() ) {
		
		$vars['member'] = $args->topic_id;
		$vars['notification_uri'] = get_the_permalink($args->topic_id);

		UM()->Notifications_API()->api()->store_notification( $poll_author_id, 'new_action', $vars );
		
	}

	else {
				UM()->Notifications_API()->api()->store_notification( $poll_author_id, 'new_action', get_the_permalink($args->topic_id) );


	}


}

After adding the above code, a new notification will be added to the Ultimate Member -> Settings -> Extensions. Remember to activate it and save the settings.

Activating the newly added notification.

In the meantime, I want to update the topic’s last activity meta field with the latest vote time. So, in the last function, you’ll see this line of code:

update_post_meta( $args->topic_id, '_bbp_last_active_time', date( 'Y-m-d H:i:s', current_time( 'timestamp', 0 )));

This will help you update the latest activity on each poll which is showing on the homepage within the listing you created before. Just add the above code to your child theme’s functions.php file. It’ll give you a look like below. As soon as someone votes on the poll:

create a community poll website
Voting on a poll by a user. 

It’ll send a notification to the user who created the poll.

create a community poll website
The notification received on the other user panel. 

And by clicking on the notification icon, it’ll show you the text that you have provided in your custom function and the configuration of the plugin.

create a community poll website
Custom notification shows up when a vote is submitted on a poll.

More configurations and stylings are possible using custom CSS.

Step Eight: Localize and translate to your own language

The last section in creating a community poll website is translating and localizing the words into your own language. Using the Loco Translate plugin, you can change every single piece of text within this app just as you like. Remember that the texts are located on different plugins, and you need to dig into the plugins to find the source of the text. Mostly, you need to change the word “Topic” to “Poll” wherever it is showing up because of the logic behind this app.

create a community poll website
Translating the Topics to Polls via LocoTranslate.
Results of translating Topics to Polls in the Profile page.

Results, further development and roadmap

We created a social network application based on social polling features. Certainly, there are tons of further considerations to make it like a production app. But the thing is that the base is prepared, meaning that you can add as many features as you want simply by using different plugins and configurations. 

This method will save a lot of money if you aim to build such a community – and compared to the social polling platforms out there, it can be considered almost a free platform. The good thing about this method is that you can keep everything updated and secured with one single click. 

Additional features such as Login by Phone (using two-factor authentication) or the discussion below the threads can be applied to the app using the following plugins:

  • wpDiscuz: advanced commenting plugin. 
  • Digits : WordPress Mobile Number Signup and Login

Adding more plugins may require configurations and, in some parts, or even writing some codes to integrate it with your base. For example, bbPress uses three post types such as “forum,” “topic” and “reply.” You would need to enable the comments for the “topic” post type using custom development because by default, the topics don’t receive any comments. Or you may need to configure the Digits plugin to work with your own SMS platform. 

Also, you may want to push your notification to the users who subscribed to your app or website. This can be done by using FireBase or any other push notification service. However, it may require custom development in some parts to make sure it triggers correctly whenever an interaction happens on your website. 

The last thing you want to do is to wrap the website on a webview and publish it on app stores such as Google Play or iTunes. There are dozens of tutorials out there that can help you with that.

Wrapping Up

Creating a community poll website has never been easier than now. It can be done using bbPress and WordPress and using handy tools such as the Jupiter X theme. Its bundled plugins will ease the process and reduce the cost of development. 
In this series, we provided an overview of how to create a social polling website using their tools we had. Check out the first article of this series here if you’ve come across this post using a search engine.c

How to Create a Community Poll Website with Jupiter X – Part 1

Recently, I was about to build an online community where users could create their own polls and share them on their social networks. Search results show that there are plenty of community poll platforms out there but none of them were what I actually needed. I wanted to create a community poll website that is:

  1. Cheap or free of charge
  2. Actively maintained and updatable
  3. Independent and installable on shared hostings
  4. Customizable with a minimum amount of coding
  5. Community based, meaning that the community of users should populate it with their content
  6. Loaded with a function that allows users to share the polls in their social networks
  7. Fully responsive and adaptable to mobile devices

After digging a lot and testing dozens of demos, I realized each platform lacks one of my requirements or the other. Then suddenly an idea popped into my mind: why not build up the community using WordPress? We recently moved our support platform to a community built by WordPress, BBpress and Jupiter X, which is working quite well.

Then why not build another community using the same tools? So then I thought that BBPress is a community builder and probably has tools I can customize to achieve what I want. The more I looked, the more I realized that it’s exactly what I want.

  1. It uses WordPress, which is free. The BBPress is also free.
  2. Both BBPress and WordPress are actively maintained.
  3. I can install both of them on any shared hostings.
  4. I can customize everything with the minimum amount of coding.
  5. It’s where the users will create polls with their own content. It’s a community after all.
  6. It allows me to share the polls with specific permalinks wherever I want.
  7. By using Jupiter X, it’ll be fully responsive and customizable.

So, I decided to give it a try and start building up my community using the tools I’ve got. The BBPress and WordPress definitely were not enough, and I needed more. Fortunately, nearly all of them were available, and I was able to easily access and use them.

In this article, I’m going to share my experience of creating a community poll website on a budget.

Defining the UX

More than anything, I wanted the website to be mobile friendly. I thought that maybe later I would want  to wrap the whole website into a webview and publish it for Android or iOS. This meant that I needed to consider everything to be fully responsive and think mobile first. I wanted something like the following:

Wireframe of the online community poll website

I also wanted the poll single pages to be something like this:

So, the experience would be like:

  • Viewers will enter the website and see the content and announcements that they need to register and login to vote and participate in the discussions below each poll. 
  • The registration will be completed as quickly as possible and without any unnecessary steps after clicking on the registration or login button on top.
  • After registration, the logged-in user will be redirected back to the page they were on before.
  • Voting and commenting under the votes are visible now after logging in
  • If user got back to the homepage, he can use Ajax search and filters to find an interesting poll and participate
  • The poll list in the homepage is showing the voted polls and not voted with a different color
  • After participating in each poll, whether the user votes on it or added a comment under it, it should send a notification to the user who created the poll.

Also, users have their own profile and clicking on the user name will navigate you to the user profile where you can see the user details, avatar and cover image, created polls, comments, favorite and followed polls. I didn’t want to create membership plans to monetize the website, but it should be possible to do it easily in future. 

So, things got complicated, huh? Don’t worry. We will get through this and see how we can do it step by step.

Prepare the tools

Creating a community poll website required two major functionalities:

  • Community
  • Membership profiles

I chose these two plugins that are absolutely free and popular among users:

Each of these plugins can extend their functionalities using add-ons. So I needed the following:

  • The GD Topic Polls for BBPress plugin makes it possible for the users to create polls.
  • The Real-time notifications for Ultimate Member plugin allows users to receive notifications whenever something happens (premium plugin).
  • GD bbPress Toolbox Pro. The only use for this plugin is to let users upload images and use the image as the poll thumbnail. While I could have developed this another way, this was the easiest solution and worth trying (premium plugin).
  • Comments – wpDiscuz is an advanced commenting plugin and adds functionality to the discussions. 
  • Optional: Digits : WordPress Mobile Number Signup and Login makes it possible to change the WordPress login and allows users to register with their phone numbers instead of emails and also verify the phone numbers using SMS (premium).
  • Jet Engine for its listing feature (premium)
  • The Jet Smart Filters plugin can be used for its advanced Ajax search and filtering features (premium).
  • The free version of Elementor can be used as the page builder
  • Raven (bundled with Jupiter X) was used for creating the custom header and footer.

I wanted to use the Jupiter X theme that already comes bundled with the Jet Engine and Jet Smart Filters. So, this means that two premium plugins were already provided for free. Also, it gave me the ability to build up my custom header and footer and visuals that I needed. So, I would definitely consider this theme as a base and choose the plugins that are compatible with it.

Creating a community poll website like this also requires some coding, which I’ll explain in the following paragraphs.

Step One: Install Jupiter X, Jet Engine and Jet Smart Filter and activate the child theme

The first step is to install Jupiter X and its bundled plugins, which provides an easy way to list the latest polls based on your design and allows you to use the smart filters to create an Ajax search. Also, since Jupiter X is a fully responsive theme, it allows you to implement the whole website to easily use as a mobile app.

After downloading the Jupiter X theme from ThemeForest, install it from Appearance -> Themes and register the product. A complete guide on how you can install and activate the theme is provided here.

Since we need to modify some files and add some customization here and there, it’s better to use a child theme to avoid change loss in the theme and plugin updates. So, right after installing the theme, you need to install and activate the Jupiter X child theme. You can find out how to do this by reading this article. It’s as simple as finding and installing the jupiterx-child.zip file inside the same package you downloaded from ThemeForest.Net.

The Jupiter X child theme package
Make sure the Jupiter X Child theme is your active theme

In order to install the bundled plugins, you need to register the theme first. So, try registering the theme like the guide provided here and make sure you can see that the theme is activated.

The Jupiter X theme is activated

Now you can install the bundled plugins. Simply navigate to Jupiter X -> Control Panel -> Plugins and install and then activate these plugins:

  • Elementor
  • Raven
  • Jet Engine
  • Jet Smart Filters
  • Advanced Custom Fields
The list of required active bundled plugins in Jupiter X for a community poll website

The Jupiter X Core plugin is mandatory, and you’ll need to install it right after installing the theme, so it’s also on the list. 

So, we are done here. Let’s move onto the next step.

Step Two: Install BBPress and its addons and configure

We’ll use BBPress as the main community builder on our website. Whenever you want your users to engage and provide content for your website and actually create a community of users, no matter what functionality you require, the BBPress is the best choice if you’re going to use a WordPress website as the backbone.

What we’re going to build with BBPress is one forum named Polls, then let the users create topics inside this forum and add a poll to their topics and publish it. Then, the other users can vote on each other’s polls and share it on their social networks. Also, we’re going to implement a notification and discussion board for each topic. So this means that the author is notified as soon as other users vote or add a comment to the poll. So, let’s start by adding the BBPress plugin.

In WordPress -> Plugins -> Add New, search for BBPress. Simply install and activate.

Activating the BBPress plugin

Now navigate to Settings -> Forums and change the Forum Root and Topic slugs to “polls” and “poll.” It’ll give you a better permalink structure for your polls as each topic means a poll on your website.

Configuring the main slugs for the forums and topics

After that, go to Forums and add a new forum to the website. This is our main forum that contains all of the polls. So, call it “Polls” again.

Adding the “Polls” forum to the website

Now that the main forum is added, we need to provide a way so our users can add their own topics that contain polls in this forum. But how can we do that? First let’s add a plugin that allows the topics to have polls inside. It’s called GD Topic Polls for BBPress

Go to Plugins -> Add New, search for it and then install and activate it.

Activating GD Topic Polls for the BBPress plugin

The next step is to create a page and add a form to it where users can create topics and polls.

Step Three: Add the “Create Poll” page

We need the polls to be created by the users – but all from the front end. We don’t want them to come to the WordPress dashboard to be able to create a new poll. That’s one of the reasons we wanted to create our website using a community builder.

So, create a page and add this BBPress shortcode to it:

[bbp-topic-form forum_id=29 ]
Adding the new poll page

Remember to change the 29 with the forum ID.

Getting the forum ID for the [ bbp-topic-forms ] shortcode.

The result will be a page like this in the front end:

create a community poll website
New topic form

As you can see, the form is created and that page and the Create New Topic Poll is located at the end. Check the “Add poll to this topic” to see the poll form.

create a community poll website
Default Add New Poll form

Try sending a new poll, and see the results. You’ll be able to add as many responses as you want or choose how many responses are allowed.

create a community poll website
Submitting the topic with the poll

After submitting the form, you’ll be redirected to the topic, and you’ll be able to see the topic with the poll above that.

create a community poll website
Topic with its poll after creation

Congratulations! We’re nearly there. Before finishing, there are a few more things we need to take care of. First, I don’t want users to create a topic and then the polls. I only want Polls. So I need to somehow hide the topic or the poll title and description since I have two of them.

create a community poll website
Extra fields and notices to remove

Technically, I just need to hide the extra fields and notices. Some of them can hide via CSS and some of them can get hidden by actions. However, the easiest solution would be to use the child theme and override the BBPress and GD Polls for BBPress Topics template files in it. It’s as easy as copying/pasting the proper files and the plugin template folder to my “jupiterx-child” folder and editing them.

So, from wp-content/plugins/bbpress/templates/default/bbpress/ I’ll copy the form-topic.php to wp-content/themes/jupiterx-child/bbpress/form-topic.php and then edit its codes and remove the extra fields and notices and save the file.

I should also do the same for the poll form files that are located in wp-content/plugins/gd-bbpress-toolbox/templates/default/bbpress/ and named as

  • gdpol-poll-edit.php
  • gdpol-poll-form.php
  • gdpol-poll-new.php

So I’ll copy them to the jupiterx-child/bbpress/ folder as well.

create a community poll website
Hiding the poll title and description fields

In the gdpol-poll-form.php I commented out the poll title and description fields, and instead, created two hidden fields with constant values to fill the poll description and title. This is required since the poll will not be created if the values are empty. I’ll use the Topic title and description on the polls page.

The result is now like the following:

create a community poll website

I would like to let the users add a thumbnail to their polls as well. This thumbnail can be used in asking users’ opinions if they want to see an image before answering the poll. Adding an image to the topics are not allowed by default, so I need to find a plugin to add it or develop this part on my own.

By using the GD BBPress Toolbox Pro plugin, it’s entirely possible to attach media to the topics and assign the first attachment as the topic thumbnail. It also allows you to control the attachment for the different roles. You can control the size of the image and choose from the allowed extensions. It also provides safety and security for the user file uploads. So, I’ll use this plugin and configure it like this:

create a community poll website
Configuring the attachment settings for the BBPress topics

Also, I would like to only allow the gif, png, and jpg mime types to be uploaded. So from the top General button, I’ll choose the “Allowed Types” and then select my desired file types.

create a community poll website
Allowing certain mime types to be uploaded by the users

There is also another setting that needs to be configured. We need to make sure the attachment will be considered as the topic thumbnail. So, simply choose the “Integration” from the button above and then check the “Auto Generate Featured Image” for the Topics and save the settings.

create a community poll website

Now I’ll need to style the topic creation form a little bit and hide some fields via CSS. In order to do that, I’ll write this CSS fix in jupiterx-child/assets/less/style.less and let the Jupiter X built in compiler enque it to the website. Remember to uncomment this line in jupiterx-child/functions.php before doing that:

jupiterx_add_smart_action( ‘wp_enqueue_scripts’, ‘jupiterx_child_enqueue_scripts’, 8 );

jupiterx-child/assets/less/style.less:

#gdpol-poll-status,
#wc-comment-header,
.wc_stick_btn.wc-cta-button,
.wc_close_btn.wc-cta-button,
.bbp-form.gdpol-topic-poll-form legend,
.d4p-attachment-addfile,
a.gdbbx-attachment-add-file,
.gdbbx-attachment-control>div:nth-child(3),
.gdbbx-attachment-control>div:nth-child(4),
.wc-field-submit .wpd_label {
    display: none !important;
}

.gdpol-fields-wrapper {
    display: block !important;
    border: none !important;
}

.bbp-form .gdbbx-attachments-form .gdbbx-validation-active .gdbbx-attachment-preview {
    float: left !important;
    margin-left: 0 !important;
}

.bbp-form .gdbbx-attachments-form .gdbbx-validation-active .gdbbx-attachment-control {
    float: left;
    margin-left: 15px;
}

.gdbbx-attachments-form {
    text-align: left !important;
}

ul.gdpol-responses-list li span._button:last-of-type {
    padding-left: 4px;
    width: 38px
}

form#new-post {
    max-width: 500px;
    margin: auto;
}

input#bbp_topic_tags,
#bbp_topic_title {
    width: 100%;
}

select.gdpol-select-choices.gdpol-field-extra-select {
    width: 100% !important;
    max-width: 100%;
}

.gdpol-field.gdpol-field-regular label {
    width: 100%;
}

Now let’s take a look at our poll creation page:

create a community poll website
The poll creation page after removing extra fields and styling

Simple, clean and quick as desired. Try submitting a new topic with the attachment and watch it work.

Stay tuned for the second part of this two-part blog series as I’ll show you how to style the single topics page, add membership profiles and implement a notification system. Also, we’ll need to display a list of the polls (topics) created and add filters and search options to it and show it on the homepage.

How to Speed Up your Website in Jupiter X

Speed up your website - Featured image

No one likes slow websites. Even search engines don’t like them and push them down the list of the search results. But how can we make a super-fast website? What if you’re using the Jupiter X theme? Truth be told, a theme is only one factor in the field of performance. While having a lightweight and fast theme is important, the content and how you represent it plays a larger role.  In this article, we’ll provide you with an overview of how you can speed up your website in Jupiter X.

Test your site’s performance score in GTMetrix

Before anything, you need some metrics to measure your performance score. GTMetrix is a well-known performance scanner that also recommends what to do to get a better score.

It measures the PageSpeed Score and YSlow Scores with numbers between 0 to 100. The higher the score, the faster your website. Make sure to keep your results somewhere as you’ll need them to compare at every step you take to see whether or not you’re on the right path.

You can also test your site’s performance with Pingdom and Google Page Speed Insights, but GTMetrix is the most accurate.

speed up your website in jupiter x recipes 3 perfromance
The performance report for the Jupiter X Recipes 3 template on GTMetrix.com

How to find out what’s causing poor performance

Poor performance can stem from two things: 

  • Client side performance issues
  • Server side long execution times

You can check the client side issues using a Chrome browser and observing the network tab while the page loads. We suggest that you do this in incognito mode or while logged out because some plugins may increase the loading time while logged in. You can sort the resource loading time on and see the worse performant resources and check the other details to see what you can do to improve it.

If a resource had a long TTFB (time to first byte), it means that it’s a server side issue. A long TTFB actually happens when the server is executing something before sending the result to you as a client.

One of the Jupiter X templates network tab results in Google Chrome

You can also find a lot of other useful information here in the network tab, which provides information like the server response code or you can check if the resource is already cached or not, among other issues. More information about the network tab and the tools to analyze the performance is provided here.

Remember that you can also use A/B testing to analyze the performance using the same tab. If you believe that a resource is causing performance glitches, you can remove the resource and then test it again to compare with the previous results. Here you can find more information on how to do that.

Now if signs point to the server as the cause of performance issues, then you should take more into consideration.

Understanding a page life cycle will be a great help here. When a web page is being requested by a client, it will take the following general steps to generate a result and being sent back to the client:

  1. The request is sent to a DNS server where it resolves the IP addresses and passes it over to your server. 
  2. The server receives the request and passes it to the web server. 
  3. The web server handles the request based on predefined mime/types and file extensions and finds the proper file path and starts executing it with the help of a compiler or script interpreter. 
  4. While executing, it may continuously fetch some data from the Database Server. (MySQL or MariaDB most of the time if it’s a WordPress website)
  5. The interpreter will generate a page based on the user request and send it back to the web server. 
  6. The web server will send the page to the client and client will render it using a web browser.

Each of the above steps is taken by one or a couple of tools. The request execution part is when a theme or plugin takes part and finding the reason for any performance bottlenecks is possible using Debug Bar, Debug Bar: Slow Actions and Query Monitor plugins. Generally, using these plugins will give you information about the hooks that are causing most performance issues, the queries that are taking more time to execute and actions and filters that are increasing the execution time.

Take note that  although they are great plugins when it comes to debugging performance issues on your website, they will increase the loading time. So, make sure to deactivate them when you don’t need them anymore.

We’ll now discuss and provide some improvement tips for the sake of performance while you are using the Jupiter X theme to develop your WordPress website.

Disable Development Mode in Jupiter X

One way to speed up your website in Jupiter X is by disabling Development Mode. This is because using Development Mode in Jupiter X will cause the Less compiler to run every time you request to load the website. It will indeed increase your loading time. So, if you are set with the development already, simply disable Development Mode in Jupiter X -> Control Panel -> Settings.

Deactivating Development Mode in Jupiter X

Disable Cache Busting

Cache Busting is a method to make sure that the changes you have made on a page or customizer setting won’t get behind a cached version of the static assets, meaning that it won’t be visible for the users. Jupiter X generates a different name for the compiled assets each time you save a change somewhere. Because of this, the static assets will not be cached after making a change. If you don’t want to change the color, typography or anything related to the theme for a while, it’s better to disable Cache Busting to make sure users benefit from the cached version of the static files.

Disabling the Cache Busting option in Jupiter X

Avoid using tons of plugins

One thing to keep in mind when looking to speed up your website in Jupiter X – or any website for that matter – is plugins. Technically speaking, using many activated plugins will cause a drastic performance drop in your TTFB. Each plugin has a different method in its development process. While executing some tasks are heavy by default, it’s not like all the plugins are optimized and performant.

If you’re trying to introduce a small feature onto your website and it’s available on a multipurpose plugin, it’s better to write it on your own or find an alternative. Generally, using a lot of plugins means you need more resources to handle page generation requests. So, keep them deactivated as much as possible. More information can be found here.

Use a caching plugin

Each time a client sends a request to a server, the server should generate the page and send it back to the client. But, what if the server saves the page that is being requested once and avoids creating it again to save some resources? This is exactly what a caching plugin provides. Even Artbees uses caching plugins to save resources and speed up the loading process on its demo templates.

For Jupiter X, we recommend choosing between these plugins:

  • Autoptimize
  • WP Rocket (premium)
  • WP Fastest Cache

While using any caching plugins, you should avoid deferring the JS because it will break the theme. On the other hand, you can use the JS minification and combine all of the JS or CSS files into one. But you should consider one exception only: the web font loader should be excluded from the minification and works stand alone. So, only add this path to the exceptions on whatever caching plugin you are using, otherwise your Google Fonts will not work:

wp-content/themes/jupiterx/lib/admin/assets/lib/webfont/

As per WP-Rocket, here are the optimal settings that you can import to it and use. But remember to change the CDN keys with their current place holders.

Optimize the images

Optimizing images is one of the most important factors in improving performance and in speeding up your website in Jupiter X.  Why use the extra time to load a web page and waste internet traffic when you can represent your content with smaller image sizes and the same quality?

There are many tools out there that can help you optimize images and get better results in the performance tests. WP Smush and Hummingbird Cache are good examples. Also, some plugins offer optimization on the Cloud, and if you can pay for their services, they are actually the best. Tiny Compress Images is an example. You can find more information on this blog post.

Using a CDN

CDN is short for Content Delivery Network, which can be described as a network of servers that delivers cached static content from websites to users based on the user’s geographic location. Pretty confusing, eh? Don’t worry – we’ll break it down in detail.

A CDN allows you to serve your JS, CSS, images and video files to be served from another server. You simply upload them onto your website. But the first time someone checks out your page, the static resources (JS, CSS, images and videos) will be cached on a different server that is close to your location, speeding up the loading process for you. Many of the CDNs offer DNS servers and DDOS protection, so it’s also beneficial for you in other ways. A complete guide regarding using a CDN (CloudFlare) is already provided here. Don’t miss it!

Use a WordPress optimized web host

What if you improve the performance score and you still feel the website is slow? Well, it can be related to your web host. WordPress itself is kind of a heavy content management system. While using a premium theme, you’ll definitely need more resources on the server to speed up your Jupiter X site.

The minimum server resources can be found here, but you may need more WordPress and PHP Memory or a dedicated CPU usage to be able to handle large amounts of users. It’s better to avoid the cheapest plans offered by web hosts if you wish to have a performant WordPress website. A lot of hosting providers that have WordPress optimized plans are worth the money.

For instance, once I was trying to optimize a website for a client, and I did pretty much everything I could. However, the performance score was like 60. Changing the web host to a WordPress optimized plan made huge improvements, raising the score to over 90.

Keep your theme and active plugins updated

Since Jupiter X’s performance will be improved with each release, it’s better to keep it updated along with the bundled plugins.

When a development team realizes what part of their codes cause performance bottlenecks, they will fix and release updates. Jupiter X is also the same. Actually, within the next 3 months, a lot of performance improvements will be applied to the theme, and early results show that it will be at least 5 times faster than the current version. So, keep your theme and all plugins activated.

Avoid using external content

Using outsourced content will always cause a performance drop. It gets worse when the content removes on the external resource or a timeout happens. Ads services, video and audio players, maps and font providers are the most common external content resources that are used on your website. You might not even notice it. It’s true that sometimes using external content resources is cheaper than serving everything through your website. However, you need to balance it out. If you’re using a lot of external resources, you cannot expect to receive a good score from speed testing websites. As an example, you may check out this blog article regarding choosing between socially and locally hosted videos.

In the end, it’s worth looking at this page for further performance optimization tips.

Conclusion

A lot of factors should be considered to have a performant website when it comes to speeding up your website in Jupiter X. Although Jupiter X promises to be a lightweight theme, you may still need to improve your website loading score with whatever you’ve got.

In this article, we outlined the tools needed to scan the performance and ways to improve them. If you’re sure that you applied all the recommendations and your site is still slow, you can contact Artbees Customer Support. We’ll happily review your site and give you expert advice on how you can fix the issue.

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

How to Create Custom Filters with Jupiter X

Hotels, car dealers, travel agencies, tools and hardware sellers – and almost all other business owners that sell some products or services – need a way to show their products to the buyers. If you own a business, you usually represent your products and ask your clients some questions to provide them with the best matches possible.

However, when it comes to websites, your clients need a way to find their own match by looking at products and services on a list. And the best you can do is provide some filters for your product list. Since time is gold, the faster the viewers can find what they’re looking for, the better chance you have in selling a product or service. The good news is that the listing feature along with the smart filters are now part of the Jupiter X theme with the help of its bundled plugins. In this blog post, we’ll take a deep dive to fully grasp how to create custom filters with Jupiter X. But, before we do that, let’s first see what we can do without a listing feature!

Using WordPress to display your product list

The simplest way to show a product list is to create multiple pages, link them to each other and use the WordPress search feature to provide a search feature for them. This doesn’t require any special plugins or extra coding – and it can actually be helpful in some cases. But if you own a shoe store, you wouldn’t want to feature your shoe list like this, right?

Create Custom Filters with Jupiter X 1
Simple product listing, the WordPress way

There are dozens of workarounds to create a better and more appealing listing. One of the popular ways is to use WooCommerce and its filter widgets.

Using WooCommerce to represent a list of your products

One way to create custom filters in Jupiter X is simply through installing WooCommerce and add products. It will allow you to have a shop page, archive page, category page and single pages where you can provide details about your product. Also, since it has a basket feature, it’s a perfect choice to feature the products you’re planning to sell. Many more plugins have been developed for WooCommerce to help you build a better list of your products. Simply using a WooCommerce and categorizing them with the minimum configuration with Jupiter X theme will give you results like the following:

Create Custom Filters with Jupiter X 2
A default shop page made by WooCommerce and Jupiter X

Much better than before, wouldn’t you agree? On the left sidebar, you can select different categories and actually filter the shopping products based on the category. Now if you want to add a new filter widget, for example, by price, you can easily add it through WordPress -> Appearance -> Widgets by drag and drop the “Filter Products by Price” to the sidebar that you are using on the products page.

Create Custom Filters with Jupiter X 3
Adding the filter products by price to the sidebar

And it would look like the following:

Create Custom Filters with Jupiter X 4
Filter by price added to the shop page

There’s no need to say that it’s easy to customize the shop page and layouts using the Jupiter X Shop Customizer.

As mentioned before, there are dozens of plugins out there that can help you have a better listing on your website. Also, there is a bundled plugin named Jet Woo Builder that can help you build stunning shop pages completely from scratch. A brief overview of Jet Woo Builder features has already been provided in the previous blog posts here and here.

Using JetEngine to showcase your products

The exciting part of creating custom filters with Jupiter X starts here. The better you design the user experience, the better chance you have to sell your products or services. Imagine that you have to provide a listing directory of your products but you don’t want to create an e-commerce website. As an example, you want to run a hotel website where it should have a list of available rooms categorized by the number of beds, price, amenities and etc – and you would also need to provide a way to filter them. In these scenarios, the best thing to do is to create a custom post type, add your custom fields to it and provide listing directories and custom templates for your post types. Fortunately, this is all available with the Jupiter X theme.

As for the custom post type and listing directory, there is a Crash Course series on the Artbees blog which shows how you can build a listing website step-by-step. You can find the published posts here and here. If I want to briefly explain the process of creating a listing directory using the Jet Engine plugin, it would be these four steps:

  1. Create a custom Post Type and custom meta fields for it.
  2. Create a Custom Post Type template for the single pages and assign it using Jupiter X.
  3. Create a Custom Listing template and based on that, create and assign it to archive post type templates using Jupiter X.
  4. Add Filters to the archive pages of your listing directory.

Let me introduce the Jet Smart Filters plugin for the last step. This is one of the bundled plugins with Jupiter X and aims to help you create and use smart filters on your listings. This is not only on the custom post types created by Jet Engine, but it can be used on WooCommerce and your regular posts.

You can install it for free from Jupiter X -> Control Panel -> Plugins and then activate it.

Create Custom Filters with Jupiter X 5
Activating the Jet SmartFilters plugin

I assume you’ve already created your listing items as previously instructed in the blog posts here and here. Now it’s time to create a new Smart Filter by navigating to Smart Filters and Add New.

Create Custom Filters with Jupiter X 6
Adding a new Smart Filter

We’ll use this to filter the hotels based on the desired price range. So, we call it “Price Range” and set a minimum and maximum value to it.

Adding the Price Range Smart Filter
Setting the minimum, maximum and other configurations for our price range filter.

Now, it’s time to use our filter on a listing page. On the page where you have added your Listing Grid element, drag a Range Filter into the column you want to show it.

Adding the Range Filter to the listing page

Then configure it to use the Price Range filter you created and assign it to the Jet Engine and set the Listing Grid Query ID.

Configuring the Smart Filter on the Listing Page.

Then update and publish the page. The final result would look like this:

Range filter added to the listing page

Now you can filter the hotels by their price on your listing page. As shown in the picture, you can create a different filter for the facilities. It’s actually part of the Hotel Listing template in Jupiter X. There are plenty of use cases you can make using these smart filters. Fortunately, Jupiter X provides a set of premade templates made for the purposes of listing. You can find them here and simply install them on your websites.

Create Custom Filters with Jupiter X Templates
Variety of Jupiter X Listing templates

We’d also recommend that you take a look at the Jet Smart Filters documentation here if you are looking for more resources. Feel free to ask your questions below in the comments.

Wrapping up How to Create Custom Filters with Jupiter X

We need filters to provide a way to ease make it easier for our website visitors to find the best match of what they are looking for. Although there are dozens of ways to do it, we reviewed the following three methods we can use:

  • Simple WordPress pages and search option
  • Using WooCommerce and its filtering widgets
  • Using Jet Smart Filters to create and use advanced filtering options

Each method has its own use cases. So, it’s better that you are first familiar with them and then put them into action based on your requirements.

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

Build a Powerful WooCommerce Website using JetWooBuilder and Jupiter X

There are dozens of platforms out there to help you build your eCommerce store. If you’re looking for a free and powerful tool, WooCommerce is the most popular one among the shop builders using WordPress. WooCommerce offers some common shopping processes and features including product overviews, add to cart, checkout, shipping and payment and taxes, among others.

However, when it comes to customizing your pages and user experience, you would need to either develop it using a child theme/plugin or through another tool that allows you to customize your shop pages as desired. But wait – there are still ways to build and tailor your WooCommerce store without a single line of code. Read the article in its entirety to learn exactly how to build an eCommerce store in Jupiter X.

The Jupiter X theme offers a great Shop Customizer tool by default. It allows you to customize every part of the default shop pages or choose between the predefined shop page templates. But what if you want to create your own design and layout and use it to build an eCommerce store in Jupiter X? Fortunately, this is possible with the JetWooBuilder plugin which is bundled in with the Jupiter X theme.

What does the JetWooBuilder offer?

Simply put, the JetWooBuilder allows you to override the default shop pages in WooCommerce from single pages to the archive and category pages. It still doesn’t offer any customization on checkout and cart pages, but that part can still be made using Jupiter X or other plugins. So, if you aim to build a completely custom shop page layout, you can make use of the JetWooBuilder plugin. Here is the JetWooBuilder’s official website.

After adding the JetWooBuilder, there will be four global widgets that you’ll be able to use among your templates and even on your own pages:

It also adds a various number of widgets that you can use on your single page templates such as an add to cart button, attributes, content, excerpts, image, price and etc. You can find out how to create a single page template for your eCommerce here. However, we’ll go ahead and go through the steps of creating a shop while using Jupiter X and Jet Woo Builder.

Setting up an eCommerce store with Jupiter X

Let’s set everything up quickly. We already installed the Jupiter X theme and activated it like this. Now we just need to activate the JetWooBuilder plugin and start using it. So, simply go to Jupiter X -> Control Panel -> Plugins, then install and activate the JetWooBuilder plugin. It’s one of the bundled plugins in the Jupiter X theme.

Build an eCommerce Store in Jupiter X Installing JetWoobuilder
Installing JetWooBuilder from the Jupiter X Control Panel

After activating JetWooBuilder, you will notice that two menus are added onto the WordPress Dashboard:

  • Elementor -> JetWooBuilder settings which allow you to set the available widgets.
Build an eCommerce Store in Jupiter X JetWooBuilder Settings
JetWooBuilder settings under the Elementor menu
  • WooCommerce -> JetWoo Templates which lets you add and manage your templates.
Build an eCommerce Store in Jupiter X JetWooBuilder Templates

There is also another place where you can assign your templates to WooCommerce pages. It’s located on WooCommerce -> Settings -> JetWooBuilder.

Build an eCommerce Store in Jupiter X WooCommerce Settings page
The JetWooBuilder tab under the WooCommerce Settings page

Now let’s create our first shop page template and then assign it to our website.

Creating your first shop page template

In order to override your default shop page (usually it would be /shop/ after you finish the WooCommerce wizard), you would need a Shop Page Template and to set the default shop page template in WooCommerce settings.

Let’s do this together step-by-step.

1 – From WooCommerce -> Jet-Woo-Builder Templates, add a new template.

Build an eCommerce Store in Jupiter X Adding a new template
Adding a new template to Jet-Woo-Builder templates.

2 – Select Shop as the “This template for”, then fill in the name of the template and choose your desired layout and click on Create Template.

Creating a default shop page in JetWoo-Builder

3 – Done. Now let’s take a look at the page template that has been created.

The first thing you’ll notice is that this page does not have a style. It may even look like it’s broken.

Build an eCommerce Store in Jupiter X Adding a new template default Shop page template
The default Shop page template created by the JetWooBuilder

Don’t worry – everything is completely ok. It’s just that the widgets used inside the template require dynamic content and since we don’t have any dynamic content at the moment, it looks like this.

On the created page, you’ll see some elements such as filtering widgets among others. Feel free to add or remove the widgets as you wish. Just consider one point: the JetWooBuilder uses the Products Loop element inside the default shop page template. We need the Product Loop widget here. It’s not possible or recommended to change it to Products Grid or any other product loop as it will ruin the mechanism and won’t look good.

Scroll down the left sidebar to see the available widgets under the JetWooBuilder. You can also use other widgets if you like. As you can see, the default shop page utilizes some native WordPress widgets to filter the shopping items in the front end.

Available widgets in Jet Woo Builder

There is one point we should address about the template settings in the JetWooBuilder: The default shop page can be unique, but the rest of the templates such as archive and category pages will be wrapped up inside the default shop page template, as a Product Loop item template if you have it enabled.

This means that you can only design the whole shop page template once, and after that, if you want to use it for category and archive pages, simply create one of the item templates instead of the whole page. In other words, you won’t need to repeat the whole design of your shop page for your category and archive pages.

If you do so, it’ll ruin your pages, and you’ll wonder why the pages aren’t working. The logic behind this is a little bit confusing, but if you know how to use it correctly, then you’ll have as much flexibility as you’ll need to build up all of your custom designs without a single line of code.

Now let’s save this template then add some products to our shop and check out our shop page. Before that, it’s better to set our template as the default shop page in the WooCommerce Settings.

Setting the Shop Default template

1 – From the WooCommerce Settings page, choose JetWooBuilder.
2 – Check the Custom Shop Page checkbox.
3 – Choose the Product Shop Template that you created in the previous step.

Setting up the default shop page template in JetWooBuilder settings

4 – Save the settings.
5 – Make sure you already selected the default shop page in the WooCommerce settings.

Default Shop page of WooCommerce

After adding some products (you can find a dummy product file here), the final results on the shop page will be like the following:

The Default Shop page populated by the dummy products.

Creating the archive and category pages using JetWooBuilder

The overall process was easy, right? Now let’s practice the steps above with a new goal in mind – which is adding the archive and category pages. The JetWooBuilder website explains this topic thoroughly.

However, a question that will probably pop into your mind is: what will happen if you don’t use an archive or category page? Well, the answer is nothing. It will still wrap up the products on the default shop page and show the default loop item layout. If you want to have a different layout on the loop items, you can use the archive and category page templates. Here is the complete tutorial for this: How to create and set a Product’s Archive template

Here’s the video that demonstrates how this template feature works with the JetWooBuilder.

Final Thoughts

The JetWooBuilder is a tool that can help you create highly customizable shop pages. From the default shop page to archive and single pages, there are widgets and options that allow you to create stunning shop pages that fit your needs.

In this article, we briefly explained how to build an eCommerce store in Jupiter X by working with the JetWooBuilder. The most common issue with JetWooBuilder occurs when you change the Product Loop widget on the shop page or use the product grid on the archive pages.

Let us know your experiences and thoughts in the comment section below! 😉

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

Web Designer Tricks to Deliver Website Projects Faster

Deliver Website Projects Faster Featured

Freelance web developers and web design agencies completely understand what it means to have a hasty client and to work harder to deliver website projects faster. Clients usually want their projects to be done in a blink of an eye in addition to all the practical aspects such as elegance, speed, content structure, navigation, ease of management, SEO, security and more. Of course, most of the time, they want all this on a low budget. It gets beautiful, isn’t it?

So, if you were a freelance web developer or a web design agency, what would you do in this situation? Possible options include the following:

  • Increase the project delivery time which causes more costs for both you and the client.
  • Increase the cost and try to hire some other developers to implement and develop the design as fast as possible.
  • Simply say “no, I can’t accept this project.”
  • Use tools to speed up your project.

Wait a second – which tools? Well, there are tools for every job! Imagine you have to move all your furniture in your apartment to another city, and you have these options:

  • Put each thing one at a time into your car and move them to the other city.
  • Load everything into an old truck – which could break down at any second – but for free.
  • Use a big, nice truck with all the gadgets required to move the stuff safely in a short period of time with a low fee.

I would personally choose the third option. It’s also the same for every other job in the world. Tools are there to help us do our jobs better and faster. But which tools to deliver website projects faster and better?

Before we get into this, I should mention that every web developer has their own methods of working quickly. Sometimes, someone uses a CMS (Content Management System) that contains a customly designed template, making it easier for the developer to create a website using his or her own templates. Sometimes, a developer more quickly writes the whole management system than setting up a new CMS.

So, what I’m really trying to say is that each developer chooses their own way of going about things. However, typically there are ways to improve the speed and reduce the costs of a web design project such as:

  • Using a good and flexible CMS. (We will consider WordPress only since it has more than 60% of CMS usage over the internet)
  • Using premade PSD templates that you can easily convert to a website
  • Using a premium WordPress theme that is feature-rich and requires no coding
  • Using premade website templates

Let me explain more about each of these ways.

Using WordPress as a CMS

As of October 2019, WordPress is used by 61.5% of all the websites whose CMS we know. This is 34.7% of all websites. It means that WordPress has the biggest community of users among all CMSs in the world. It also is a great choice for running websites from simple to complex use cases. Since WordPress is actively maintained and has a large community, it’s a secure platform if you keep it updated. Also, plugin variety and theme availability are making it the number one choice for many web developers.

Using Premade PSD Templates

You might have your own PSD designs that can be used with some changes for your other clients or you might be looking for other PSDs and sketch designs. In general, when you show your client a PSD of what his website would look like after implementation, you saved a lot of time and headaches. This is because in case it was not accepted or your client didn’t like it, you could easily change the design using PhotoShop, Sketch or XDesign software which is much less time consuming compared to developing a whole website, then showing it to your client.

Using a Premium WordPress Theme

If you ask an experienced web developer if free or premium themes are more cost-effective, they would most certainly tell you that premium themes are the way to go. Why? After all, doesn’t a free theme mean FREE? Of course, it does, but when using a free theme, you’d need to use a lot of other features and combine everything together. Most of the time, you’ll pay more for a small feature that you need. So, it’s not time and/or cost-efficient at all. Choose a good and flexible WordPress theme, and you can rest assured that what you get is much more than what you pay.

Using Premade Website Templates

This is also a big story alone. There are thousands of premade templates for every category you can think of. Plenty of them is free and available on different websites. Many of them are even award winnings. You only need to search for your category name and “website template” in Google to see thousands of results. Using premade templates is like having a cheat sheet with yourself on your final exam. It gives you great results, but this time, it’s completely legal.

Now that you know what can help us improve our speed, one question that probably annoys you is: How can I ensure that I can implement a premade PSD design with my changes, over another premade template using another theme? The answer is that you can’t. If you’re going to design and implement a website like this, then what’s the point of using tools? You need to find a tool that gives you all of the options together.

Imagine you have a multipurpose WordPress theme that has a vast variety of different templates for different categories and it has the PSD design of each template beside it. What else do you need? You need to be sure that this theme is good for your SEO, performance and has enough flexibility to implement your client’s requirements. It should be easy to manage, maintain and be compatible with third-party plugins. Having premium plugins bundled is a plus.

But, what is the chance that you’ll get all of these features together? If you look for it in big markets such as Envato, you’ll find some of them. The Jupiter X Multipurpose WordPress theme is an example. It’s a WordPress theme that has plenty of demo templates, and you can use any of them by a single click, plus the templates have PSD design files ready to download. The theme itself uses Elementor as the default page builder with 17 premium bundled plugins. It means that you get a $225 package for only $59.

Let’s see how we can build up a Barbery website for our hasty client using the Jupiter X WordPress theme.

Building up a Barbery Website

Before everything, let’s see what options we have among the Jupiter X templates. Open this page and search for keyword “barber”.

Deliver Website Projects Faster List
List of current barbery-related templates in the Jupiter X theme.

Let’s say that I like the Elara template, but I first need to show it with some changes to my client. So, I go to Jupiter X Control Panel and download the PSD package of this template.

Deliver Website Projects Faster Downloading
Downloading the PSD package of Elara Template

I then open the homepage PSD file inside the package and start editing as I wish.

Deliver Website Projects Faster Changing Design
Changing the design on the PSD

Then, I show this PSD to my client and get some feedback. After applying the feedback, it’s time to implement the design on my website. So, I simply install the Elara template on my website and then start changing the content and design based on the final PSD files.

Deliver Website Projects Faster Installing
Installing Elara Template

And it’s done!

Deliver Website Projects Faster Installed
Template Elara is successfully installed.

Now, all I have to do is to go to the homepage and edit my content as I previously edited on the PSD file.

Deliver Website Projects Faster Background
Changing the background image of a column in Elara Template

And then update my page. This would be the final result:

Changing the background image of a column.

That’s it. We’ve made it. Changing the rest of the content is as easy as this. All you need to do is apply the changes one by one.

Ok, but I still want my project to be better than this. Give me some tips!

The best thing I can advise is to have a comprehensive understanding of your website requirements. Imagine that you need to build up a website for a furniture shop. What features first come to mind? Probably high-quality images, big headings, portfolios, shop page, checkout steps and etc. Now observe the templates carefully. See which one has the best match design with the one that you have in mind.

Furniture-related demos in Jupiter X templates

The first thing you need to do is to ensure the designed layout is suitable for your content. The rest is to make sure you can implement your extra features as well. For example, if you need an e-commerce furniture website and your template doesn’t have WooCommerce by default, make sure to provide the correct place for your shopping items first and then enable WooCommerce. Also, make sure to check the Artbees Crash Course that has a great A-to-Z tutorial on how to build a website with different subjects in our blog.

Wrapping Up Tips to Deliver Website Projects Faster

Web design is a tough job and gets worse when you have a client on a tight deadline. However, using tools such as a multipurpose theme will give you the ability to design quicker and better and deliver website projects faster. Here we explained which tools can help you design a quality website in a short timeframe – and that gets a thumbs up from your client.

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

Socially Hosted vs. Locally Hosted Videos: Pros and Cons

Locally Hosted Videos Featured Image

So, let’s say that you own a website and know that videos have a better impact on your viewers. You provide an entertaining video including all the main points and you’re now ready to publish it onto your site. Now, what are your options in showing it to your visitors?

Generally speaking, you have two main options:

  • Using a socially hosted video
  • Using a locally hosted video on your own website

So you might be asking yourself the main advantages of each. If you can clearly grasp the benefits of socially hosted vs locally hosted videos, then you’ll be able to make an informed decision based on your requirements. Let’s review the costs and benefits for each one.

Socially Hosted Videos

YouTube and Vimeo are two famous video sharing websites. Chances are that you already know how to use them. Although other video sharing websites such as Wistia are trending these days, the most popular ones continue to be YouTube and Vimeo. The good news is that it’s easy to embed a video from these websites in Jupiter and Jupiter X.

The process of adding a video from any video sharing website to your WordPress website is as easy as inserting the link of the video into your content or using it in a proper widget in your page builder. Assuming that you have uploaded a video on YouTube and embedded it into your website, you’ll have the following benefits:

Losing fewer server resources

Your server is no longer responsible for responding to video requests, so it’ll for sure use fewer resources. It may save you some money, especially in the cloud-based web hosts that calculate the price based on server usage.

Prepared Statistics

Need some metrics to measure the impact that video made on your viewers? No worries, the video-sharing websites typically provide proper measurement tools so you can even see which countries your visitors are from or what your recent popular videos and comments on your channel were.

Socially Hosted Videos Statistics
Youtube Analytics inside the Youtube Studio where you can moderate your channel

Visibility and sharing options through a large community

Yes, the video-sharing website itself will allow for your video to be searched and viewed. This will help you grow your online visitors if you provide the correct description and link your customers to the proper places. Besides that, you’ll have sharing options too. This means that you’ll get a better visitor flow when some users like your video and share it on their social networks or their own websites (if you allow it, that is). This is actually one of the best reasons to use socially hosted videos on your website.

Some other benefits like the more advanced video players (similar to what YouTube offers) will choose the video’s quality depending on the user’s connection speed. Such options might also encourage you to use a socially hosted video over a locally hosted one. But let’s see how much it costs for you to go the social route.

Performance loss

It’s true – your website will have a lower performance if you try GTMetrix or other performance testers out there. The reason is that the video player needs to load, and it usually has a lot of dependencies on different domains which will be requested by your browser and will certainly increase the website loading time. If you use a lot of videos, the result would be even worse than you think.

Video player customization

You cannot customize or control the video player when using a socially hosted video. (However, while Wistia resolved it somehow, this is still valid for YouTube and Vimeo). This becomes worse when you want to show a video on a section background where users should not see the video controls and borders.

The YouTube border on the top and the controls at the bottom during the first three seconds of a Background video. Currently, the YouTube player does this, and there’s no way to prevent it.

Video not available for different visitors

Sometimes, you might be unaware that you have an issue (for example, a trademark issue) with your video. Video sharing websites will detect this and won’t allow users from certain locations to watch the video. If you don’t pay attention to the notifications from YouTube or Vimeo, then this could lead to a loss in your number of viewers.

In general, maintaining your content in separate places like on YouTube and your own website could be a bit tricky. You are hosting a part of your content somewhere else, meaning that you’ll need to maintain it properly and keep it updated based on the video-sharing terms of use. Also, you need to be careful about the ads that are played on your videos. By default, they are disabled for embedded videos, but if you enable them, you need to make sure that you won’t lose customers because of it.

Now let’s take a look at locally hosted videos.

Locally Hosted Videos

By locally hosted videos, I mean that you upload the video on the same website and web host. So, the video file has the same domain name as your main website. Now, assuming that you have prepared your video and want to show it to your customers, let’s see what you will get if you upload it onto your own website. In general, the benefits of socially hosted videos are the costs here and vice versa.

Better speed performance

While you host your video on the same websites, the requests going to your server will be resolved instantly on your own server, and the browsers will not have to deal with other domains to load a video player. It’ll speed up the server response time.

Controlling the Video Player

You’ll have full control of the video player with locally hosted videos. You can deactivate the controls, timelines, and titles, you can mute the video or add a loop to it or even use a very customized video player if you install a video player plugin.

Locally hosted videos Video Plater
The video is playing inside a laptop video frame mockup using Raven’s Video player without showing the controls.

You can make sure that your video is playing for all your users

You’ll no longer lose your customers over the “this video is not available in your region” error message. However, if you pay attention to the video-sharing website notifications, you won’t face it with that problem either. But in case any new terms show up, making your video unavailable for some of your users might cause you to lose some customers until you fix the issues. You won’t come across this issue at all when using locally hosted videos.

Now let’s take a look at some of the downsides of locally hosted videos.

Multiple formats required

You would need to provide two well-known formats for your video to keep your users around: MP4 and Webm. Unlike YouTube or Vimeo where you can freely upload any video format you like and then easily use them on your website, you have to convert your videos into the correct format and codec and then upload it onto your website.

Big files require big resources


Wondering why your monthly traffic usage increased suddenly? One of the reasons might be the videos you have hosted on your website. If each visitor plays the video to the end, the traffic used will be at least equal to the size of the video. So be careful about your server resources when you host a video. Actually, by 2021, probably more than 60% of web traffic will belong to videos.

Statistics are not easily available

Want to know the impression your video made when you uploaded it on your web host? You’ll need third-party plugins or services or extract the raw data from your server logs. This is a bit time consuming even for advanced users. So, if the statistics are very important for you and you don’t want to pay for other services, you might consider using socially hosted videos.

Final Thoughts

Based on the facts above, you need to decide whether socially hosted or locally hosted videos will work better for you. If you’ve already used locally hosted videos and think that the server usage is not worth keeping the videos on the same server, simply migrate your videos to video sharing websites such as YouTube or Vimeo.

On the contrary, if you think that the performance of your website is much more important and will outweigh the benefits of using socially hosted videos, start moving your videos to your own website. This article will help you decide wisely about the way you deal with your own videos.

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

How to Create a Custom Footer with the Jupiter X Footer Builder

Create a Custom Footer Featured Image

Almost all of the themes out there provide you a way to customize the footer for the website they belong to. But have you ever wondered if there is a way to break the mold and build a brand new design to create a custom footer? This was a question frequently asked by Artbees users – now it’s possible with the new Jupiter X theme!

In this article, we’re going to discover how we can customize our footer area with the Jupiter X theme via the default options and then see how we can create a completely new footer design from scratch. The tools we need for this tutorial include:

  • A WordPress website
  • Jupiter X Pro theme
  • Elementor Page Builder
  • Raven Plugin (Exclusively developed by Artbees to extend Elementor free functionality)

Let’s have a quick overview of how we can customize our website footer with the default options first since it’s an easy and fast method for having a beautiful footer. After that, we’ll show you how to create a completely new footer from scratch.

Customizing the Default Footer in Jupiter X

The first method will use the Jupiter X Customizer settings. As mentioned, it’s powerful enough to build a completely customized footer. However, when using this method, you have only one footer for your entire website, and in case you need a different footer for other pages, you’ll need to create a custom footer and assign it to those pages. We’ll get to that later. For now, let’s look at how we can access the footer customizer and apply some changes on the prebuilt footer.

From the WordPress left sidebar click on Jupiter X > Customize.

Create a Custom Footer Jupiter X Customizer
Access to Jupiter X Customizer

Then find Footer from the list and click on it.

Create a Custom Footer Dashboard
Customizer Dashboard Menu

These settings will allow you to customize everything in your footer including static/fixed behavior, showing/hiding the sub footer, making it full width, and showing/hiding some other elements on the footer like Copyright text and menu.

Create a Custom Footer Choose Footer
Choose Footer from the customizer left dashboard

The cool part is the Widget Area option. As soon as you enable it, you’ll see how many layouts of widgets you can choose for your footer. You can then populate the footer widget areas from WordPress Appearance > Widgets.

Create a custom footer widget area enable
Enabling Widget Area option unveils a set of footer layouts

As soon as you enable the Widget Area, you’ll be able to see the widget styling options in the second tab. It has a set of options including Widgets Title, Texts, Links, Thumbnail, Container, Divider, and Container Styles which allows you to customize every single corner of your widget. And you can do all of it live.

Create a custom footer widget styling options
Widget Styling options in Jupiter X Footer Customizer

It’s pretty neat, isn’t it? Now, let’s see what we can build as a custom footer.

Creating a Custom Footer in Jupiter X

This is the part where you’ll need the Elementor and Raven plugins. Elementor will give you the ability to build fantastic layouts, and the Raven plugin will let you create custom footers and headers on Elementor (free version) and also will give you 22 new elements to use. You can find more information about Raven plugin here.

The great thing about a custom footer is that you are no longer limited to the WordPress widgets. You can put anything you want, anywhere you want in your footer. Also, Jupiter X Pro offers a set of bundled plugins that extends the number of elements and effects (such as Jet Elements and Jet Tricks) that you can use in Elementor. You can utilize them as well.

To use a custom footer on your website, you must:

  • Create your custom footer in Elementor.
  • Assign it to all pages on your website or to a specific page.

We’ll walk you through this process step-by-step.

Creating a new Custom Footer in Elementor

1. Like every other WordPress modification, the first step will start from the backend Side Dashboard. From the menu on the left in, click on Saved Templates beneath Elementor.

Create a custom footer saved templates
Click on Saved Templates to see the old templates and add a new one

2. Next to the Saved Templates title, click on the Add New button.

Create a customer footer add a new template
Add a new template to Elementor

Note: If you are using Elementor Pro, you may see your old footer templates in the Theme Builder instead of Saved Templates.

3. For the template type select Footer, give your footer a name and click on the Create Template button.

Crate a custom footer choosing a template
Choosing a template type while adding a new template to Elementor

4. You will now be redirected to the Elementor page editor where you can choose a footer template from the library or create a custom footer from scratch using Elementor. Some of the pre-made footers are part of Elementor Pro and, in order to use them, you must first purchase Elementor Pro. You can also use the pre-made Jupiter X templates, which are free.

To see the Jupiter X templates, simply click on Jupiter X. You can use your preferred template by clicking on the Insert button.

Create a custom footer Jupiter X footer templates for Elementor
Jupiter X Footer Templates for Elementor

If you don’t want to use pre-made templates and plan to create your custom footer from scratch, simply click on the “x” icon. That will redirect you to the Elementor page editor.

Create a custom footer closing templates modal
Closing the templates modal

5. If you’re using a pre-made template, you can customize it or add new widgets. In order to customize a brand new footer (without using a pre-made template), first determine how many columns you need for your footer template. Then add your desired Elementor’s widgets to it, such as Site Logo. Since this is same as creating any other content on your page, in case you needed more information about how to add and modify content on your template, you can check some Elementor Tutorials and the Jupiter X knowledge base.

Create a custom footer building template from scratch
Building up the template from scratch

You can also add WordPress widgets to your footer template by going to the WORDPRESS category in the Elementor widgets panel.

Create a custom footer widgets in Elementor
WordPress widgets in Elementor

6. Publish the template after customizing it.

Create a custom footer save changes
Save and Publish the changes

Important Notes!
1. In case you are using Elementor Pro for a footer template with Display Conditions, some of the Jupiter X footer customizations may not work properly. To fix this:

Make sure the Display Conditions are not provided for your footer templates.

Create a custom footer elementor display conditions
Elementor Display Conditions

Simply save a template without conditions.

2. Make sure the Sticky option under Scrolling Effect is set to None in the Advanced settings of the Section container in your footer template.

Create a custom footer section scrolling
Section Scrolling effect option.

Assigning a Custom Footer to your Website

Now it’s time to assign our beloved footer template to the website.

1. From the menu on the left in WordPress, go to Jupiter X > Customize.

2. From the dashboard on the left in Customizer, click on Footer.

3. For the Footer Type, select Custom and assign your footer from Template.

Create a custom footer customizer
Choosing the footer template in the Footer Customizer

4. Click on Close and Publish the changes.

You’re done! Now, refresh your page and see how your new footer looks on your website. One thing to mention is that you can add as many footer templates as you want and assign them to different pages. Have a look at this tutorial to find more!.

Summary

Footers are like the summary of an entire website. Having a good summary that contains relevant links and content at the end of a page will send your viewers to the right place.

In this article, we learned how to get rid of the technical coding stuff when creating a footer and easily build customized or new footers using the Jupiter X theme. Now, you can channel your energy into creating amazing your content instead of worrying about how to build a footer because every tool you need is ready for you!

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

Extend Elementor like a pro: Creating a new extension in Elementor

Creating a New Extension Featured Image

Elementor is a powerful drag and drop page builder that allows us to create pages conveniently. One of Elementor’s greatest features is extendibility. With this feature, we can build custom widgets/controls via creating a new extension in Elementor.

This extension implements object-oriented programming in which a main class and extra classes for smaller parts like custom Elementor Widgets or any other components are used.

Plugin Structure

The main plugin should have basic information about the extensions, to check basic requirements and to load the required files to activate the plugin functionality. In the following sections, we’ll take a deep dive into each part of the plugin.

Defining Variable

Variables are used to store information to be referenced and manipulated in a computer program.

In the main class, we must define three constants like:

  • VERSION: store the version of our plugin.
  • MINIMUM_ELEMENTOR_VERSION: store the essential version of Elementor.
  • MINIMUM_PHP_VERSION: store the PHP version used in the plugin.
const VERSION;
const MINIMUM_ELEMENTOR_VERSION;
const MINIMUM_PHP_VERSION;

Single Instance

The singleton pattern is used to restrict the instantiation of a class to a single object, which can be useful when only one object is required across the system.

When creating a new extension in Elementor, we can only have one instance of the main class. To do this, we use a singleton pattern. In this pattern, we must define a private static variable and public static function.

private static $_instance = null;

	public static function instance() {
            //check $_instance is null or not
		if ( is_null( self::$_instance ) ) {
			self::$_instance = new self();
		}
		return self::$_instance;

	}

Constructor

The Constructor or magic function is a special type of function that is automatically executed after a class is created or instantiated. Usually, the constructor starts with two underscore characters.

In the main class, the role of the constructor is to load localization functionality and initiate the plugin.

public function __construct() {

		add_action( 'init', [ $this, 'i18n' ] );
		add_action( 'plugins_loaded', [ $this, 'init' ] );

	}
public function i18n() {
		load_plugin_textdomain( 'our-plugin-name' );
	}
public function init() {
		// Plugin logic here...
	}

Check if Elementor is Installed

As the plugin extends Elementor functionality, you should first check whether Elementor is installed and activated before the main class loads.

If Elementor is activated, the main class will load. If it’s not activated, an admin notice will be displayed and the functionality won’t continue loading. This check must be done in the initialization stage of the main class.

public function init() {

		// Check if Elementor installed and activated
		if ( ! did_action( 'elementor/loaded' ) ) {
			add_action( 'admin_notices', [ $this, 'admin_notice_missing_main_plugin' ] );
			return;
		}

	}

	public function admin_notice_missing_main_plugin() {

		if ( isset( $_GET['activate'] ) ) unset( $_GET['activate'] );

		$message = sprintf(
			/* translators: 1: Our plugin name 2: Elementor */
			esc_html__( '"%1$s" requires "%2$s" to be installed and activated.', 'our-plugin-name' ),
			'<strong>' . esc_html__( 'Elementor our-plugin-name', 'our-plugin-name' ) . '</strong>',
			'<strong>' . esc_html__( 'Elementor', 'our-plugin-name' ) . '</strong>'
		);

		printf( '<div class="notice notice-warning is-dismissible"><p>%1$s</p></div>', $message );

	}

Check the Version of Elementor

After checking whether or not Elementor is installed, we must check the Elementor version for backward compatibility with older Elementor versions. If the defined minimum version of our plugin is not compatible with the installed version of Elementor, then the admin message will be displayed, and functionality will not be able to load.
This check is done in the initialisation stage of the main class.

const MINIMUM_ELEMENTOR_VERSION = '2.5.11';

	public function init() {

		// Check for required Elementor version
		if ( ! version_compare( ELEMENTOR_VERSION, self::MINIMUM_ELEMENTOR_VERSION, '>=' ) ) {
			add_action( 'admin_notices', [ $this, 'admin_notice_minimum_elementor_version' ] );
			return;
		}

	}

	public function admin_notice_minimum_elementor_version() {

		if ( isset( $_GET['activate'] ) ) unset( $_GET['activate'] );

		$message = sprintf(
			/* translators: 1: Our plugin name 2: Elementor 3: Required Elementor version */
			esc_html__( '"%1$s" requires "%2$s" version %3$s or greater.', 'our-plugin-name' ),
			'<strong>' . esc_html__( 'Elementor our-plugin-name', 'our-plugin-name' ) . '</strong>',
			'<strong>' . esc_html__( 'Elementor', 'our-plugin-name' ) . '</strong>',
			 self::MINIMUM_ELEMENTOR_VERSION
		);

		printf( '<div class="notice notice-warning is-dismissible"><p>%1$s</p></div>', $message );

	}

Check for the PHP Version

Finally, we must check our extension’s minimum PHP version, which . must be newer than the PHP version of the Elementor plugin. If there’s an older version, then the admin message will be displayed, and the functionality won’t load.

const MINIMUM_PHP_VERSION = '7.0';

	public function init() {

		// Check for required PHP version
		if ( version_compare( PHP_VERSION, self::MINIMUM_PHP_VERSION, '<' ) ) {
			add_action( 'admin_notices', [ $this, 'admin_notice_minimum_php_version' ] );
			return;
		}

	}

	public function admin_notice_minimum_php_version() {

		if ( isset( $_GET['activate'] ) ) unset( $_GET['activate'] );

		$message = sprintf(
			/* translators: 1: Our plugin name 2: PHP 3: Required PHP version */
			esc_html__( '"%1$s" requires "%2$s" version %3$s or greater.', 'our-plugin-name' ),
			'<strong>' . esc_html__( 'Elementor our-plugin-name', 'extension-name' ) . '</strong>',
			'<strong>' . esc_html__( 'PHP', 'our-plugin-name' ) . '</strong>',
			 self::MINIMUM_PHP_VERSION
		);

		printf( '<div class="notice notice-warning is-dismissible"><p>%1$s</p></div>', $message );

	}

Including Essential Files to Correctly Create a New Extension

After completing all checks, the extension must load essential files like widgets and controls in order for it to run correctly.

public function init() {

		// Add Plugin actions
		add_action( 'elementor/widgets/widgets_registered', [ $this, 'init_widgets' ] );
		add_action( 'elementor/controls/controls_registered', [ $this, 'init_controls' ] );
	}

	public function init_widgets() {

		// Include Widget files
		require_once( __DIR__ . '/widgets/our-plugin-name-widget.php' );

		// Register widget
		\Elementor\Plugin::instance()->widgets_manager->register_widget_type( new \Elementor_extension_Widget() );

	}

	public function init_controls() {

		// Include Control files
		require_once( __DIR__ . '/controls/our-plugin-name-control.php' );

		// Register control
		\Elementor\Plugin::$instance->controls_manager->register_control( 'control-type-', new \extension_Control() );

	}

Workflow Diagram

Create a New Extension - Workflow Diagram

In the end, if we want to create our extension named Spicy, we must have the following code in its entirety.

<?php
 /**
 * Plugin Name: Spicy Extension
 * Description: Custom Elementor extension.
 * Plugin URI:  https://spicy.test/
 * Version:     1.0.0
 * Author:      Spicy
 * Author URI:  https://spicy.test/
 * Text Domain: spicy-extension
 */

	if ( ! defined( 'ABSPATH' ) ) {
		exit; // Exit if accessed directly.
	}

	/**
	 * Main Spicy Extension Class
	 *
	 * The main class that initiates and runs the plugin.
	 *
	 * @since 1.0.0
	 */
	final class Spicy_Extension {

		/**
		 * Plugin Version
		 *
		 * @since 1.0.0
		 *
		 * @var string The plugin version.
		 */
		const VERSION = '1.0.0';

		/**
		 * Minimum Elementor Version
		 *
		 * @since 1.0.0
		 *
		 * @var string Minimum Elementor version required to run the plugin.
		 */
		const MINIMUM_ELEMENTOR_VERSION = '2.5.11';

		/**
		 * Minimum PHP Version
		 *
		 * @since 1.0.0
		 *
		 * @var string Minimum PHP version required to run the plugin.
		*/
		const MINIMUM_PHP_VERSION = '6.0';

		/**
		 * Instance
		 *
		 * @since 1.0.0
		 *
		 * @access private
		 * @static
		 *
		 * @var Spicy_Extension The single instance of the class.
		 */
		private static $_instance = null;

		/**
		 * Instance
		 *
		 * Ensures only one instance of the class is loaded or can be loaded.
		 *
		 * @since 1.0.0
		 *
		 * @access public
		 * @static
		 *
		 * @return Spicy_Extension An instance of the class.
		 */
		public static function instance() {

			if ( is_null( self::$_instance ) ) {
				self::$_instance = new self();
			}

		 	return self::$_instance;
		}

		/**
		 * Constructor
		 *
		 * @since 1.0.0
		 *
		 * @access public
		 */
		
		public function __construct() {	
			add_action( 'init', [ $this, 'i18n' ] );
			add_action( 'plugins_loaded', [ $this, 'init' ] );
		}

		/**
		 * Load Textdomain
		 *
		 * Load plugin localization files.
		 *
		 * Fired by `init` action hook.
		 *
		 * @since 1.0.0
		 *
		 * @access public
		 */
		public function i18n(){}

		/**
		 * Initialize the plugin
		 *
		 * Load the plugin only after Elementor (and other plugins) are loaded.
		 * Checks for basic plugin requirements, if one check fail don't continue,
		 * if all check have passed load the files required to run the plugin.
		 *
		 * Fired by `plugins_loaded` action hook.
		 *
		 * @since 1.0.0
		 *
		 * @access public
		 */
		public function init() {

			// Check if Elementor installed and activated
			if ( ! did_action( 'elementor/loaded' ) ) {
				add_action( 'admin_notices', [ $this, 'admin_notice_missing_main_plugin' ] );
				return;
			}

			// Check for required Elementor version			
			if ( ! version_compare( ELEMENTOR_VERSION, self::MINIMUM_ELEMENTOR_VERSION, '>=' ) ) {
				add_action( 'admin_notices', [ $this, 'admin_notice_minimum_elementor_version' ] );
				return;
			}

			// Check for required PHP version
			if ( version_compare( PHP_VERSION, self::MINIMUM_PHP_VERSION, '<' ) ) {
				add_action( 'admin_notices', [ $this, 'admin_notice_minimum_php_version' ] );
				return;
			}

			// Add Plugin actions
			add_action( 'elementor/widgets/widgets_registered', [ $this, 'init_widgets' ] );
			add_action( 'elementor/controls/controls_registered', [ $this, 'init_controls' ] );
			
			// Register Widget Styles
			add_action( 'elementor/frontend/after_enqueue_styles', [ $this, 'widget_styles' ] );

		}

		public function widget_styles() {
			//For Example
			//wp_enqueue_style( 'spicyPluginStylesheet', plugins_url( '/css/gallery.css', __FILE__ ) );
		}

		/**
		 * Admin notice
		 *
		 * Warning when the site doesn't have Elementor installed or activated.
		 *
		 * @since 1.0.0
		 *
		 * @access public
		 */
		public function admin_notice_missing_main_plugin() {

			if ( isset( $_GET['activate'] ) ) unset( $_GET['activate'] );

			$message = sprintf(
				/* translators: 1: Plugin name 2: Elementor */
				esc_html__( '"%1$s" requires "%2$s" to be installed and activated.', 'Spicy-extension' ),
				'<strong>' . esc_html__( 'Elementor Spicy Extension', 'Spicy-extension' ) . '</strong>',
				'<strong>' . esc_html__( 'Elementor', 'Spicy-extension' ) . '</strong>'
			);		

			printf( '<div class="notice notice-warning is-dismissible"><p>%1$s</p></div>', $message );

		}

		/**
		 * Admin notice
		 *
		 * Warning when the site doesn't have a minimum required Elementor version.
		 *
		 * @since 1.0.0
		 *
		 * @access public
		 */
		public function admin_notice_minimum_elementor_version() {

			if ( isset( $_GET['activate'] ) ) unset( $_GET['activate'] );

			$message = sprintf(
				/* translators: 1: Plugin name 2: Elementor 3: Required Elementor version */
				esc_html__( '"%1$s" requires "%2$s" version %3$s or greater.', 'Spicy-extension' ),
				'<strong>' . esc_html__( 'Elementor Spicy Extension', 'Spicy-extension' ) . '</strong>',
				'<strong>' . esc_html__( 'Elementor', 'Spicy-extension' ) . '</strong>',
				self::MINIMUM_ELEMENTOR_VERSION
			);

			printf( '<div class="notice notice-warning is-dismissible"><p>%1$s</p></div>', $message );

		}

		/**
		 * Admin notice
		 *
		 * Warning when the site doesn't have a minimum required PHP version.
		 *
		 * @since 1.0.0
		 *
		 * @access public
		 */
		public function admin_notice_minimum_php_version() {		

			if ( isset( $_GET['activate'] ) ) unset( $_GET['activate'] );

			$message = sprintf(
				/* translators: 1: Plugin name 2: PHP 3: Required PHP version */
				esc_html__( '"%1$s" requires "%2$s" version %3$s or greater.', 'Spicy-extension' ),
				'<strong>' . esc_html__( 'Elementor Spicy Extension', 'Spicy-extension' ) . '</strong>',
				'<strong>' . esc_html__( 'PHP', 'Spicy-extension' ) . '</strong>',
				self::MINIMUM_PHP_VERSION
			);

			printf( '<div class="notice notice-warning is-dismissible"><p>%1$s</p></div>', $message );

		}

		/**
		 * Init Widgets
		 *
		 * Include widgets files and register them
		 *
		 * @since 1.0.0
		 *
		 * @access public
		 */
		public function init_widgets() {
			 // For Example
			// Include Widget files
			//require_once( __DIR__ . '/widgets/gallery.php' );

			// Register widget
			//\Elementor\Plugin::instance()->widgets_manager->register_widget_type( new \spicy_oEmbed_Widget() );
			//\Elementor\Plugin::instance()->widgets_manager->register_widget_type( new \spicy_gallery_Widget() );

		}

		/*
		 * Init Controls
		 *
		 * Include controls files and register them
		 *
		 * @since 1.0.0				
		 *
		 * @access public
		*/
		public function init_controls() {
			//For example
			
			//Include Control files
			//require_once( __DIR__ . '/controls/multi-unit.php' );

			// Register control
		    //\Elementor\Plugin::$instance->controls_manager->register_control( 'spicy-multi-unit-control', new spicy_multi_unit());

		}

    }

spicy_Extension::instance();

Also, you can download the entire code by clicking on this link.

Conclusion

In this article, we went into depth to illustrate the basic structure of the plugin that extends the functionality of Elementor. Also, we explained each essential part of the plugin code like Variable, Single Instance, Constructor, Checking steps and Include files. Finally, we included the entire code for the Spicy plugin.

We’d love to hear from you! Feel free to drop us a comment to share your experiences and ideas.

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

Create a scrollable tab like the WebFlow website using Jupiter X

Scrollable Tabs Post Featured Image

One way to provide visitors to your website with a seamless experience is through creating a scrollable parallax tab similar to the WebFlow.io homepage. Creating a scrollable parallax tab will allow users to access much of your site’s content as soon as they land on your homepage.

Many of our users asked about how to go about building a scrollable tab, and we’re here to answer! And what’s even better is that the Jupiter X theme has endless possibilities that can help you create a similar tab (as seen below) by using a simple trick. If you’re also curious about how you can build this amazing tab using Jupiter X, read this article to the end.

WebFlow sample scrollable tab.

What we need to create a scrollable tab:

  • Jupiter X Pro theme and its Elementor page builder
  • Jet Tricks from the Jupiter X bundled plugins
  • Raven, an exclusive Artbees plugin to extend the functionality of Elementor

First of all, allow me to briefly explain the whole process. We won’t use any tab elements to represent this. Instead, we’ll use the Raven Navigation Menu element and anchor links (#tab1, #tab2 …) as the tab titles. Then, we’ll use multiple sections that have the same ID as the anchor links (so when you click on the menu items, scroll to those sections).

And in the end, we’ll add the Sticky effect to the column container of the menu navigation element using the Jet Tricks plugin. Then, we’ll proceed to write a custom CSS snippet to add a transition to the menu items and make them bigger when they are active. Before starting, make sure you’ve already activated the above plugins from Jupiter X -> Control Panel -> plugins.

So, let’s start by building our menus. Navigate to Appearance -> Menus and create a new menu. Then add your Custom Link items. Remember to use the anchor links like #tab1, #tab2 … as the menu item link.

Add menu items with anchor link hashtags to be considered as Tab titles.

We are now done with this part of the process. Let’s create a page, and do the rest. From the Pages -> Add New, create a new page and start editing with Elementor.

Edit the page with Elementor.

In Elementor, drop a Section into your page, and divide it into two columns. Then drop a Navigation menu to your left column, and add a CSS class to the navigation menu.

Scrollable Tab Screenshot 3 - Add a CSS class to the menu in order to avoid conflict while wiring CSS snippets.
Add a CSS class to the menu in order to avoid conflict while wiring CSS snippets.

The next step is to add a custom CSS to make each menu stay in one line and also to enlarge them when they are active. So, from the page settings (bottom left corner of the page), choose the Advanced tab and then add the following CSS snippet in the Custom CSS section (JX).

/* Add Transition to the items */
.custom_tab_titles li a {transition: 0.2s all;}

/*make the items bigger when they are active while having transitions */
.custom_tab_titles li .raven-menu-item-active {transition: 0.2s all;
    transform: scale(1.3); margin-left: 0.8em;}
    
/* put each menu in one line */
.custom_tab_titles li {clear: both; display: block; width: 100%;}
Scrollable Tab Screenshot 4 - Add CSS snippet to make the menu items vertically aligned and add transition to them on mouse hover.
Add CSS snippet to make the menu items vertically aligned and add transition to them on mouse hover.

Now add some Inner Section elements to your other column. We need to assign an ID equivalent to the menu anchors in order to make them scrollable when clicked.

Scrollable Tab Screenshot 5 - Add a different ID to each inner section equivalent to each anchor link hashtag
Add a different ID to each inner section equivalent to each anchor link hashtag.

Add as much of your content as you want to your scrollable tabs. Here, I kept it empty in order to make it more understandable. I also added a min-height 400px to each inner section. You can avoid it or add more height. The styling part completely customizable, and you can do what you want with it.

The last step is selecting the Column container of the Navigation menu and adding the Sticky behavior to it.

Scrollable Tab Screenshot 6 -
Follow the steps in order to enable the sticky option for the navigation menu. It will be considered as the Tab titles later on.

I also added some typography settings and color changes to the navigation menu in order to make the scrollable tab more eye-catching. Take a look at what we have now:

Scrollable Tab Gif 2 - The scrollable tab made by Jupiter X and Elementor.
The scrollable tab made by Jupiter X and Elementor.

One of the great things about using Jupiter X to create a scrollable tab is that you have the flexibility to create a tab exactly to your liking. You have the option of adjusting the margins and paddings to fine tune the tab, as well as to style every corner of your new tab.

Additionally, you’re not limited by how many tabs you can have: you are free to add more and style them in any way you see fit. Don’t worry about getting carried away in adding too many new elements as this has been tested on all modern browsers, and it’s compatible with all of them.

In this blog post, we’ve provided you with the details on how to create a tailor-made scrollable parallax tab, similar to what can be seen on the WebFlow home. We also illustrated how to create this awesome tab with Jupiter X Pro (and the Elementor page builder), Jet Tricks and Raven.

Do not hesitate to ask any questions you may have in the comments below.

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

How to Do A/B Testing to Troubleshoot the Theme Issues with Jupiter X

A/B Testing Featured Image

What do you do when you face a problem using any of your tools? Some people stop using them entirely, while some try to fix it to avoid having to replace a perfectly good tool. But how do you fix something when you don’t know its mechanism? The answer is simple: Compare it with a fixed version of your tool and see which part is having the issue.

What is A/B testing?

This is how the so-called A/B testing technique can be used to troubleshoot an issue. It doesn’t matter if your tool is a tangible object, virtual machine, or software You can use this method to troubleshoot and solve the problems you encounter. You probably did it before without knowing that your using the A/B testing strategy, but let me give you some examples so you understand it better:

  • The moment that you decide to set up camp in the forest and pitch your tent, you are actually doing an A/B testing. You are always comparing between different locations and tents. Should I put my tent here or there? What will happen if I place it here? How do the other tents look? Are their campsites better than mine? You are pretty much using A/B testing at that moment to find and examine the best location available for your tent.
A/B Testing Tent
  • The moment that a laboratory scientist compares between normal and healthy samples to give you the results of your blood test, he/she is using A/B Testing.
A/B Testing Lab

The moment that you are in a clothing store and testing the clothes to see which one suits you better, you are doing an A/B Testing.

A/B Testing Clothes

There are dozens of other examples of the concept. You basically used this method a lot in your daily life to troubleshoot an issue.

In digital marketing, A/B Testing is the perfect method to measure the impression you make on your users and increase your sales by collecting and analyzing the statistics of different marketing campaigns.

Let’s see how we can use it to troubleshoot an issue with your website. The principle and method are the same. You need to compare your website with a perfect version of it or with the design you provided (PSD) to be able to detect the issues.

Notice: Always do your testings over a staging website and keep a full backup before starting your tests.

Provide the perfect look

The key point here is to have a perfect non-issue-ish version of your website. Whether it’s a PSD version or it’s a completed website, you need something to compare with your problematic website. Otherwise, detecting the issue will be hard. Keep the perfect look open on a different tab on your browser or in your Photoshop software. You will need it for the next steps.

If you had a website that was previously available but recently got issues and you don’t have a backup or screenshot from it, you may use Archive.org to see how your website looked like back then.

A/B Testing Perfect Look

Check the error logs

The first thing you should do is to use the browser Developer tools. Developer tools will help you detect the problems by providing debug tools and consoles. Hover the mouse on the different DOM elements in the Elements tab to see the size and details, and compare them with the other tab. It will help you detect the difference and then you will get one step closer to resolving the issue. Also, for the Javascript issues, you can compare the Browser Console tabs to see if you have any new errors in the problematic page or not.

A/B Testing Error Logs

Apply a change and compare again

This is a repeating task. You need to continuously compare the changes on your staging website and see if it helped or not. When I’m talking about the changes, I mean deactivating plugins one by one, switching the themes, updating WordPress (or other CMSes if you are using them), and even reconfigure your web host settings. Issues come from different places, so you need to perform the changes from different places to see if it’s related to your problem or not.

The thing is, the better you know the mechanism, the smarter you can troubleshoot an issue. For example, if a section background color is not working correctly, the reason cannot be from the webserver configuration (unless it’s a caching issue). Or when you have a server error on your page, it may not be related (or barely related) to the color configurations of your theme at all.

Sometimes, the issue goes further and comes from the Database or third-party API. So, you may need to reset your database and see if it helps or not. In a nutshell: You need to check everything that involves your website to be able to detect an issue.

Here is a list of things were common issues usually come from:

  • Web hosts and servers configurations. You should check the server requirements of your theme and plugins and make sure it meets the minimum requirements.
  • Outdated core CMS (WordPress), theme and plugins
  • Firewalls or security plugins.
  • Plugin conflicts, like multiple caching plugins which will conflict with each other
  • Misconfiguration of plugins, such as forcing SSL which should be done carefully
  • Misunderstanding or using the functions in an inappropriate way, like using a popup trigger on your burger menu icon (side note: Yes, it happened to some users already) which triggers weird popups as you trigger the menu
  • Customizing the codes, whether they are CSS or JS customizations, or even if it’s your child theme and you did change the theme files inside your child theme
  • Database corruptions or invalid data in the database

It’s better that you apply the changes you think may help, step by step, and see if they work.

Isolate the problem

While you are doing your A/B testing, you are also isolating the problem to the point that you find the reason for the issue and resolve it. When you find the problem, you did the job! The faster you isolate the problem, the sooner you get to the answer.

Here are some major testing tips which will help you get to the root of the issue faster:

  • Deactivate your plugins. If it did resolve the issue, you know that it’s a plugin conflict. Now, you have to activate the plugins one by one to see which one triggers the issue.
  • Switch the theme. Sometimes, a good starting point is to see if the issue is happening because of using your current theme or not. Switch to your parent theme if you are using a child theme, and switch to another theme if you don’t have a child theme. In case the issue resolves itself, you at least know that it’s coming from your theme.
  • Switch to another web host. Sometimes, it’s faster to move your whole website to another web server and see if you still see the issue. It’s especially good for when you have permission or caching issues. If your issue was resolved by moving your website to a new web host, then the problem is your previous web hosting service.
  • Change your browser, device or network. It happens sometimes that your browser, device, or even your ISP causes issues. Also, it’s better to deactivate your browser extensions as much as you can because some extensions such AdBlockers may cause some conflicts with parts of your website.

If none of the above helped, you can isolate more by removing the content from your pages or deactivating headers, footers and block sections. These will help you identify issues with your content if you had any.

Software and tools for A/B Testing

Although the best tools to troubleshoot an issue are your personal computer, a browser, and developer tools, each issue requires its own tool or service. Imagine that your SEO rank has dropped and you want to find the issue. What tools would you need? Probably, you will need your Google Search Console, or Alexa and Google Analytics.

Furthermore, each issue requires its own debugging tools. There are plenty of software and services, free and premium, which can help you troubleshoot an issue and also help you do automatic testing.

Here, I listed some of them:

  • BrowserStack Automate. It gives access to 2000+ real mobile devices and browsers, which include real iOS and Android devices, Chrome, IE, Firefox, Safari, and Edge. You can set a bunch of automatic testing tasks with different conditions and get results by Text Logs, Selenium/Appium Logs, Video Recordings, Screenshots, Console Logs, Network Logs, and more.
  • Screener.io. Although this is a good tool for automated testing, it’s Screen Overview function is also a great tool to find differences between two versions of your page.
  • WinMerge.org. It’s a diff checker tool that will allow you to find the difference between two versions of texts. You can use this to spot the differences between page contents, page sources, and even images!
  • GTMetrix.com is a performance analyzer. Open two tabs of the same website and apply your changes to your website. Then, retest on one of the tabs and do your performance A/B testing with it.
  • WordPress logger, debug and troubleshooting tools such as Debug Bar and its Add-ons. They can be considered as A/B testing debug tools as they provide a set of logs. You can then observe them and compare with different scenarios while doing your A/B testing in order to isolate and find the issue.

Conclusion

As mentioned, A/B testing is a method that you are using a lot in your daily life. You can use it to troubleshoot your website issues, too. Every tool you are using to check your website and debug its issues can turn into an A/B testing tool. It’s just about the way you’re using your tools.

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

Meet JetTabs! The Best Way to Organize Your Content

Jupiter X comes with a great page builder named Elementor and it has powerful features that let you create advanced layouts and designs. But unfortunately, it lacks one hell of a feature: Nested elements inside the tabs and accordions.

If you’re not using Jupiter X, you will have to design the complex layouts inside your tabs and accordions using HTML and CSS, and put the code directly inside the tab or accordion content.

Fortunately, we came up with the best way to organize content with Jupiter X. You can now benefit from a bundled plugin called Jet Tabs, which adds the following features to your website — totally free of charge!

  • Accordion ( Advanced Accordion lets you add complex layouts inside its content)
  • Image Accordion
  • Switcher (Toggle between two complex contents)
  • Tabs

All of these elements are capable of showing and/or hiding part of your content. Indeed, it’s the best way to organize content for seamless user experience. Now, let’s take a closer look.

JetTabs is a premium plugin that’s free to use for Jupiter X users. It’s good to know that all of the elements added to your website when you install this plugin (except the Image Accordion) will use the Elementor Block Templates, which is also free in the standard version. You don’t need to pay for the Elementor Pro to benefit from it.

Accordion

Not to be confused with Elementor’s Accordion, this element is Classic Accordion. Classic Accordion widget is the perfect tool for adding content templates built with Elementor or adding your text to every accordion item. You can use this widget in your FAQ page or show the long text content in a more appropriate way.

After adding the classic Accordion element, you can add your items, titles, and icons then set the active element.
For adding the accordion items content, you can add simple text or tabs. It’s also possible to set a section template as accordion content.

In General, the process involves creating your complex content in a block template using Elementor, then assigning the template to the accordion items in the Classic Accordion Settings.

Check out the JetTabs documentation to get more information about the best way to organize content with Jupiter X.

Image Accordion

Image Accordion is a fancy element that lets you showcase your content or categories in a stylish way. You can also use this element to highlight your gallery categories, and so on.

You just need to add the Image Accordion element your page. After that, you can simply add your images with title and description. And in case you would like to add a call-to-action button, it’s possible as well.

There’s a cool option that allows you to change the open and close animation:

Content tab >  Settings > Show Effects

You can see more examples in the JetTabs documentation.

Switcher

Switcher can be considered as a Toggle element, too. The Switcher widget is the perfect asset for you if you need to display two different content blocks and show them under different circumstances. It’s quite practical to use, and it helps you show your site content in a creative way.

Now, there are two items that you can assign your section templates to and set the switch items effect as well.

Check this page out for more information about the Switcher element.

Tabs

And finally, the Tabs! It’s a very useful element, indeed. Tabs is a powerful element that allows you to add your section templates to each tab section. It’s customizable and very easy to use.

First, define your tab contents as a section template in Elementor Templates.

After adding your sections and content, you can assign them into your Tabs element.

Also, in case you would like to add simple text as your tab content, you can change the “content-type” drop-down field to “Editor”.

Feel free to play with the style and design options to get your awesome tab to work exactly the way you imagined.

Now that you and Jet Tabs introduced to each other, it’s time to install it for free on your website, so you can take advantage of the best way to organize content with Jupiter X.

Just follow up these steps:

  1. From WordPress left menu, go to Jupiter X.
  2. From the control panel left menu, go to Plugins.
  3. Next to JetTabs, click on Activate button.
  4. A new pop-up window will appear. click on the Continue button.
  5. After a couple of seconds, a new pop-up window will appear. Click on OK button.
  6. JetTabs plugin is now installed and activated on your website. It will be displayed above in the Active Plugins section.

In case you’re concerned about the compatibility of this plugin with your website features, you should know that:

JetTabs is Multilingual-ready.

Like any other Elementor plugins, you can freely use it on your multi-language website.

Easy-to-use, No Coding Skills Needed.

You can personalize everything without adding any codes. It’s fully customizable.

Compatible with RTL websites

It’s optimized for right-to-left websites.

Responsive layout

You can create vertical and horizontal layouts without having to worry about responsive challenges.

You can also check out our official bundled plugin overview page to access the plugin author website and community, in case you experience any issues with it.

Watch this video to learn how you can easily organize your content using Jupiter X and JetTabs:

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.