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

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

What we’ll need: 

Creating a new post type: Wheels

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

Adding a new post type in Jet Engine

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

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

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

Empty front end in wheels single pages

Activating the Jupiter X child theme

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

The Jupiter X child theme is active

Add the shortcode in the child theme

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

			//});
		
		</script>
		 

<?php
    
}

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

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

The result would look like this:

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

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

Use the shortcode in the single wheel’s post templates

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

  • The number of prizes
  • The prize names

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

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

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

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

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

The result looks like the following:

create a gaming website in Jupiter X - results

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

Adding 3 new prizes to the post

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

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

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

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

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

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

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

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

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

create a gaming website in Jupiter X - final result

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

Wrapping up

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

5 Things You Can Do with Jupiter X Lite Version

Earlier in June, we finally released the Jupiter X Lite version in the repository. Jupiter X Lite is totally free and many of the amazing features of Jupiter X theme are available in it. The Jupiter X lite version offers a decent experience of Jupiter X with a group of essential features that are enough to create a powerful WordPress website. In fact more features than what can be found in many free and even paid themes in the WordPress themes repository! Let’s dig deeper!

Why Jupiter X Lite version?

The WordPress community has always asked Artbees to release Jupiter X on the official WordPress theme repository along its lifetime. At every WordCamp we joined, we received more and more requests on releasing Jupiter X on the repository. We have been hard at work on it since late 2018, and we submitted it for review and approval in May 2019. But, shockingly, it took a whole year for the theme to get reviewed and approved by the review theme at the WordPress repository. 

That was definitely because of the complexity of a large theme like Jupiter X that was supposed to be not only in accordance with strict rules of WordPress themes repository but that also aimed to deliver read and useful features of Jupiter X in the Lite version, not just a shallow version of a premium theme that cannot be actually used to create a website unless you pay for the premium features. 

We are so happy we were able to work closely with the folks on the WordPress theme review team to preserve some amazing features (which we’ll cover in this article) to allow the community to create great websites without even needing the locked features. We hope this is a leap forward for the WordPress community who want to use a free but capable theme to create real websites. At the same time, anyone considering a premium theme to create a website can simply get an idea about the product and see if it suits their needs before paying for it.

Let’s have a look at the five amazing things you can do with the totally free version of Jupiter X Lite! 
Before anything, download and install the Jupiter X Lite theme from the WordPress themes repository. Simply search for Jupiter X Lite in WordPress -> Appearance -> Themes -> Add New, then install and activate it.

Installing Jupiter X Lite from the WordPress themes repository

1 – Build a blog with decent customization

I remember the first days of WordPress when you had almost no option to globally change the blog page stylings unless you got your hands dirty with code. Each theme added one or multiple styles but for further customizations, you had to code again. In Jupiter X Lite, you can customize and style every single element on the blog pages without a single line of code. Every option is provided in the customizer in front of your eyes, and you’ll see the result of whatever changes you make live.

Setting the featured image full width in blog single page using Jupiter X Lite theme

So, if you wish to have an amazing blog and a set of customization options, add your blog posts, choose the default blog page from WordPress -> Settings -> Reading and enjoy customizing the single and archive blog pages using Jupiter X Lite!

2 – Build a shop and customize the single page

A lot of WordPress users are using it because of WooCommerce. WooCommerce allows you to build your e-commerce website for free. While it offers only a little customization and styling settings, Jupiter X Lite provides a full set of options allowing you to style and customize your shop pages. The Shop Customizer contains a vast variety of options including quick cart view, product page elements customization, load more and pagination behavior for product lists, number of rows and columns on product list pages and much more.

Customizing the shop single page in Jupiter X Lite

The point here is that you can still customize your WooCommerce template files inside a child theme, so from the other point of view, except for the different single page premade templates, every other option is still available to build a great WooCommerce website. 

3 – Build and customize online portfolios

The portfolio post type is bundled with the Jupiter X Lite theme. So, in addition to blog posts, you can also showcase your portfolios. The portfolio section in the customizer allows you to customize and style the portfolio single and archive pages.

Portfolio single page customization and styling

Although the free version of Elementor provides a lot of good features to build portfolios, you can still use free Elementor add-ons. You can search through the WordPress plugins repository for tons of add-on pack plugins that have more or less free elements for portfolio pages. Take a look here

4 – Build stunning headers

Jupiter X Lite is capable of providing regular header, sticky header and fixed header options. It further provides several options to customize and style your headers. The sheer combination of settings and different layout options allow you to build dozens of header looks. You can find more information about it here in this article.

Header customizer

One of the coolest features in the Jupiter X Lite version is the Fixed Bottom headers. Your header can be sticky at the bottom of the browser all the time. Depending on the type of site you run, this could greatly enhance user experience.

Jupiter X Lite version
Fixed bottom header in Jupiter X Lite

5 – Build amazing sidebars

One of the most useful features of the Jupiter X Lite version is the ability to change the page and post layouts and style the widgets inside them. Using the sidebar feature along with the side width options will allow you to make unique web designs even with a free WordPress theme.

Jupiter X Lite version
Layout options in the Customizer in Jupiter X Lite

Better to mention that all the layout and sidebar options are possible to override inside the single pages. If you wish to do that, just install and activate the Advanced Custom Fields (free) plugin and change the post options as you wish.

Jupiter X Lite version
Overriding layout and sidebar options on individual pages using the Jupiter X Lite theme.

Conclusion

Although premium themes are highly recommended by pros in the WordPress industry, sometimes some free themes can be great competitors. The Jupiter X Lite version provides not only all the features and ease of access you need from a theme, it also provides you with the experience that you’re using a tool used by professionals.. As it lowers the overall final project cost, Jupiter X Lite is a great tool to use for projects on a tight budget. If you get your hands on the new Jupiter X Lite, please let us know what you think about it and what would be the next step for it to take.

Create a Virtual Tour on Your Own WordPress Website with This Technique

As the world suffers from the Covid-19 pandemic, many have lost the opportunity to follow through with their vacation plans this summer. As a travel enthusiast, I haven’t completely lost out and was able to spend time with family visiting places I had never had the chance to see before via Google Street View and a couple of virtual tour websites. For the first time, the Louvre museum provided a way to virtually visit its exquisite treasure of artwork that I’m sure only few people would have had a chance to see, even if this pandemic had not overwhelmed the world. This article will provide an overview of the fundamentals of virtual tours and will show you how you can create a virtual tour for your own website.

What is a virtual tour?

A virtual tour gives the audience the feeling that he/she is visiting a place – whether it’s a catalog, video, game, audio – or even listening to someone explaining something to you can be classified as a virtual tour. a. However, the most popular meaning of a virtual tour is a combination of panoramic images that are linked together and provide extra information on them, such as a map, tour guides, hotspot tips, videos, music, etc.

A good virtual tour will give you a good sense of the atmosphere of that place. Check out this Forbes article and enjoy visiting the top-15 ranked virtual tours around the globe.

How can I make a virtual tour?

To create a virtual tour on your website, you’ll need a camera, a tripod, an image stitcher and a virtual tour maker software. You’ll also need to take a 360° image by shooting the area around you using the tripod and camera, stitching them all together into one panoramic image and then putting it on a tour maker app. After adding your hotspots (among other things), you’ll need to build the output. In order to make a good panoramic image, you should understand projections. Imagine you want to project a sphere into a rectangle. There are multiple ways of doing that. Cartographers are already familiar with projection concepts, because they have to draw the map of a sphere on a surface.

Image from gisgeography,com

More information about different projections can be found here

We’re first going to use an image stitcher to create a panoramic image. There are tons of image stitchers out there. One of the best free image stitchers is “Image Composite Editor” from Microsoft. Since it’s only available for Windows, if you’re using a Mac, you may give some other software a try here

So, we’ll start by installing the Image Composite Editor app from here. After installing, click on New Panorama button on at the top.

Creating a new Panorama using the Microsoft Image Composite Editor

Here, you should select all the images that you shoot on a tripod, which should encompass the entire area around you. Depending on your camera’s wide-angle lens, the number of images might vary. Read this article to find out more about how to shoot a good panorama image. 

After selecting all the images, click on the Next button.

Reviewing the images. Better to shoot and import the images in clockwise order.

Let the app find the overlaps on each image and stitch them all into one.

Aligning and compositing the images

If you’re with the results, click on the Next button. But make sure the image dimension is 360×180 degrees, otherwise you’ll have issues with some virtual tour viewers.

Review the un-rendered image and set the horizon. 

Here, you can resize the merged image and crop it, how you want. If you’re satisfied with it, click on the Next button.

Resize and crop the final panorama image

It’s time to export the image to get one panorama file.

Export the result into one panoramic image.

Save the file and build more panoramic images for the place you’re going to create the tour. The more nodes you make, the more details you can cover on your virtual tour. 

Now it’s time to create the virtual tour using the Pano2VR app. Download and install it from here. After installation, right click on the Tour browser pane and import your panorama images.

Import the panorama images into Garden Gnome Pano2VR app

Add the hotspots, effects, skin, map, tour guide and anything else you want here. I added a hotspot to be able to move to the next panorama in my tour. You can find the documentation of this software here. Follow it to make an amazing tour.

Add a hotspot and allow users to move to the next panorama by clicking on that hotspot.

Now, click on the output icon and add the HTML5 output on the right panel.

Add the output type and settings.

Set the proper output settings, click on the gear icon and wait for it to be finished.

Build the output and wait for it to be finished.

After completing the process, you’ll find the output folder like this. You’ll need all the files and folders here.

create a virtual tour
Output result. The tour is ready.

In the next step, we’re going to embed this tour onto a WordPress website.

How do I show it on my website?

In order to embed the tour onto your website, you’ll need all the files on your output to be uploaded first. Simply make a zip package out of it first.

create a virtual tour
Make a zip package of all the tour files and folders.

Using a File Manager plugin, create a folder on wp-content/uploads/ named “vt” to better organize your tour.

create a virtual tour
Create a folder named “vt” in the uploads folder.

Now upload the zip file into this directory.

create a virtual tour
Upload the zip file into the vt directory.

Right click on the zip file and extract it here.

create a virtual tour
Extract the tour package

You can remove the zip file. Now, you’ll need to embed the index.html file into your page using an iframe.

create a virtual tour
The tour index.html file

Since I was using a local machine to make this sample, the URL of the tour file will be like this:

http://localhost/jupiter/wp-content/uploads/VT/index.html

Now, you can embed this URL into your page. Simply create a page.

create a virtual tour
Add a new page to embed the tour on it.

Using Gutenberg, add a Custom HTML block.

create a virtual tour
Use the Custom HTML block to embed the tour

Put this iFrame code into the code block:

<iframe src="http://localhost/jupiter/wp-content/uploads/VT/index.html" height="500" width="90%"  frameborder="no" /></iframe>

You can use the same method to add the tour in Elementor tour. While editing the page via Elementor, add the Custom HTML widget to your page and put the same code on it.

The results will be like this:

Final Words

Tip: Alternatively you can use tools like WP VR to create virtual tours on a WordPress website.

In this post, we learned how to create and embed a virtual tour onto a WordPress website. However, there are dozens of different methods to go about doing this. But the method mentioned above means that you won’t be restricted or limited in building a virtual tour. Although, it’s worth mentioning that other plugins might have fewer steps to take in embedding the panoramas onto a WordPress. However, they have their own limitations and you may need to look for a way to be able to bypass those limits. This method can work on any other website as well, not necessarily a WordPress website.

Developing a Custom Slider in Jupiter X Without Custom Coding

Once I had a customer who wanted a simple slider on his website and had no interest in using advanced slider plugins such as Revolution Slider or Master Slider. What he asked for required minimum slider functionalities and he wanted to populate the sliders time by time out of his page editor. In Jupiter v6, there was a reliable shortcode named “Edge Slider (Doc)” which was exactly doing the same thing as required here. However, I didn’t want to use the WPBakery page builder anymore, so I decided to create a slider with a trick. In this article, I’ll share my experience on how to develop a custom slider in the Jupiter X theme without even a single line of code.

What we need:

After installing and activating the Jupiter X theme on your WordPress website, you need to install the Jet Engine plugin. Follow this tutorial to find out how to install it. Now, we’re ready to make our custom slider in Jupiter X.

Create the Slider custom post type

Creating a new post type named Slider

Then expand the Advanced Toggle and add the Thumbnail feature to your slider post type. We’ll use this as the background image on our slides.

Add the thumbnail feature to the post type

Now add the Title, Title Link, Description, Button text and Button link to the post type meta fields. You can skip the Title field and use the post title instead.

Required meta fields for the slider post type

Remember that you can add as many meta fields as you want. As an example, you may need to have a secondary button for another call to action on your slider. If that’s what you need, simply add two more meta fields: Button 2 Text and Button 2 URL.

Now hit the “Update Post Type” button and navigate to WordPress admin -> Slider and add a new entry.

Adding the Slider entry

Populate the post meta fields and remember to add a featured image to it.

Simple post type entry example

Add a couple of more items and then create a listing template from Jet Engine -> Listings.

Design your Slider template

custom slider in Jupiter X
Add a new Listing item

Choose to edit the listing template via Elementor and make sure you select the Slider post type when creating it. 

Using the Elementor editor, add a full-width section and add a minimum height to it like below. Also, set the column position to Middle.

custom slider in Jupiter X
Add a full-width section that represents the container of the slider

The above section will be considered as your slider template. So, it’s up to you how you’d like to set the height, color and effects it should have. Also, you are free to change the layout and design the proper slider template as you wish. 

The next step in creating a custom slider in Jupiter X is to add a background image. In order to do that, navigate to the Style tab while the section container is selected. Now choose to have a background and select the dynamic background and then select the Featured Image. After that, set the background size to be “Cover”.

custom slider in Jupiter X
Assigning the dynamic background image to the slider template

Now add two Heading and one Button to the section and associate the title and links on them with the custom meta fields you created for your post type. More information about dynamic fields can be found here.

custom slider in Jupiter X
Dynamic Description on the slider.

As for the button and the title, since we need them to have a link to somewhere, we need to set the link attribute dynamically with the meta field value we created on the post type.

custom slider in Jupiter X
Dynamic link URL for the button.

Use the slider on your page

Now update the template and get back to the WordPress admin. Create a page and drop a “Listing Grid” element into it.

Set the number of columns to 1, and scroll down the options and enable the “Slider” and update the page. You may want to add the navigation buttons or Dot navigation and style them on the style tab. 

The final results will look like this:

You can add a category to your Slider post type, select a different category on your page and a ton of other cool filtering options. As soon as you publish a slider post, it will show up on your slider.

Conclusion

In this post, we learned how to create a custom slider in Jupiter X and Jet Engine template. In general, the dynamic post types play an important role in WordPress and allow you to add unlimited functionalities to your website. By using dynamic post type features, we were able to create a simple slider like the old Edge Slider and allow the site admin to manage the slides without editing the whole page.

How to Build a WordPress Website Notification System

Sending out a notification on a website that users can interact with plays a significant role. When users do something on a website, a notification system can keep them motivated and encourage them to do more. And the great thing is that there are plenty of ways you can send notifications to your users: emails, SMS, direct messages, push notifications on browsers and also internal notifications on the website itself. In this post, we’ll provide an overview of how you can build a WordPress website notification system, which could then be used as a base structure for all kinds of notifications.

Scenario:

Let’s say we have a website where users can edit their own profiles and have different roles and by doing an action, the user should receive a notification. We might ask users on our website to take quizzes, and in this case, we would then need a way to notify them of whether or not they passed a quiz. 

WordPress website notification system

Tools we need:

Installing the Ultimate Member plugin

To begin setting up your WordPress website notification system, install WordPress and navigate to Dashboard -> Plugins -> Install Plugins.

Search for Ultimate Member and install the plugin.

Installing the Ultimate Member Plugin

After that, activate the plugin and create the default pages.

WordPress website notification system
Activating the Ultimate Member plugin and setting up the default pages

We are done here. It’s time to configure the plugin and add the notification plugin.

Configuring the Member’s directory and user profiles

The Ultimate Member plugin extends the WordPress user management system and adds a lot of capabilities to it. The good thing about the Ultimate Member plugin is that it has a vast variety of add-ons, and you can even build and shape a real social network using this plugin. Each user can have a profile and you – as the admin – can choose to have different registration fields or user profile details on the website. It’s a very good choice to run a membership directory website. Ultimate Membership will add restricting access capability to your content and menus. You can define different user roles and show different content to them. The plugin settings are located in Ultimate Member -> Settings

WordPress website notification system

Configure the plugin with your optimal setting and also create your user roles and registration forms under Ultimate Member -> User Roles and Ultimate Member -> Forms and test the registration and check the user public profiles.

WordPress website notification system
Default profile view of the Ultimate Member plugin using Jupiter X

I want the sidebar to be removed on the profile pages. I also want to hide the title bar on top of the profile pages. So, I’ll install the ACF plugin from Jupiter X -> Control Panel -> Plugins and edit the profile page like this:

Activating the Advanced Custom Fields plugin in Jupiter X.

Now I’m going to find the profile page in the list of my pages. It’s named as “User.”

User Profile Page

I’ll hide the sidebar and title bar by setting the layout options and disable the title and description on the page.

Disabling the sidebar and title bar on the profile pages

This can also be done by simply selecting the Full Width template from the page attributes. Using this method you can also remove the extra gap on top and bottom of the page. 

A Full-Width profile page without any gaps on top and the bottom

The result would be like this:

WordPress website notification system

Now you can add a cover photo, custom avatar and all the profile details you want. More information can be found here.

Installing and configuring the Real-time Notifications extension

The good thing about Ultimate Member is that it lets you use extensions, particularly those whufeful when setting up a WordPress website notification system. Most of its extensions are not free, but indeed worth buying. A list of available extensions is provided here. It also has a developer API available here.

We want to add the Internal Notifications feature, so I’m going to buy and download the Real-time Notifications extension. On the extension description they say:

Add a real-time notification system to your site so users can receive updates and notifications directly on your website as they happen. This helps to increase user engagement and keep users on your site.

Great! So, after purchasing the extension, we need to install it like every other plugin. Navigate through Plugins -> Add New and upload the package and install. Then activate it through the plugins page. 

Activating the Ultimate Member – Real-time Notifications

Register the plugin with your purchase key and go to Ultimate Member -> Settings. Right after the activation, you can see that a new tab named as Extensions is added to the settings page of the plugin. 

Ultimate Member Extensions settings

The first available settings on the extensions, prior to the installed ones, is notifications here. Configure the plugin as you wish. I would like to enable the instant notification to send the notifications even if the user has not refreshed the page.

Here you can find out about the features that this plugin offers. As the plugin doc says:

  • Enable real-time instant notification – It is recommended to turn this setting off if your server is getting some load.
  • Change the location of the notification icon to either bottom left or bottom right. 
  • Modify the number of seconds on how often you want the ajax notifier to check for new notifications.
  • Always display the notification icon – If turned off, the icon will only show when there’s a new notification.
  • Account Tab – Show or hide an account tab that shows the web notifications.

You can turn on or off notifications and edit the templates for the following :

  • Role upgrade
  • New guest comment
  • User view profile
  • Guest view profile
  • User awarded points for action
  • User deducted points for action
  • User receives points from another person
  • User gets a new private message
  • User gets a new wall post
  • User gets a new wall comment
  • User gets a new post like
  • User gets a new mention
  • User account is verified

I’m going to create a temporary profile and test the functionality when I visit that profile. As soon as a guest or a member visits a profile – since we have enabled the “User View Profile” notification in the settings – he/she will get notified that someone visited their profile. 

Notification received

By clicking on the notification button, the following notification will be shown:

Notifications listed and sorted by date in descending order

In the next step, we’re going to notify a user with a customized notification while triggering an action. For example, you may need to send a notification to a user when he/she downloads a file or when the user membership is about to expire.

Adding custom notifications using API

Let’s say that you have an online quiz website. The users register to your website, purchase a membership plan or a quiz and then want to take that quiz and get notified about the results. I skip the part that you take to provide the membership plan and monetize the quiz, but in brief, you can do it with a combination of the WooCommerce and Ultimate Membership plugin. You can add a new user role, then add a new WooCommerce product and use this extension to automatically assign that role to the user right after purchasing that product and then restrict your content for that user role.

Assuming that you are using the Quiz Master plugin, we want to send a notification to the user who finished the quiz and notify them as to whether or not they passed the quiz.

For the first step, I’m going to install the Quiz Master Plugin.

Installing the Quiz Master Plugin

After that, from the Quiz Maker menu, I’ll add a new quiz.

Add a new Quiz/Survey

Then I’ll provide the questions inside the quiz. You can find information about this process here.

I’ll add a page and a question and save the quiz. 

Creating a page and question in a quiz

Then in the Options tab, I’ll make sure the quiz is only available for the logged-in users. If you want more restrictions, you need to redirect all the single quiz pages to the login or content restriction page using a redirection plugin. Then embed the quiz with a shortcode into a page and using Ultimate Member, restrict the quiz to the specific user roles. Also, make sure these two options are checked and activated in the Quiz Maker settings:

  • Disable Quiz Posts From Being Searched?
  • Disable Quiz Archive?
Configuring the quiz plugin settings

By clicking on the Embed link on the quizzes page, you can get a shortcode and put it on the page you want.

WordPress website notification system
Getting the embed shortcode of the quiz

After copying the shortcode, create a page and add it to the content of that page. Then configure the page visibility for different user roles and, by doing that, you are restricting the quiz to specific roles.

Restricting the quiz to different roles

Now while visiting that page and have the correct user role, you can take part in that quiz.

WordPress website notification system
The quiz page. Use the page settings to remove the sidebar and title bar if you wish to have a clean quiz page.

Here, I’d like to add a custom notification for the users to be notified about the results of their quiz. To do that, I need to activate my child theme and write some codes. As the first step, install and activate your child theme like what’s described here. Then, in the child theme’s functions.php file, I will add these codes:

/*

This code sample shows you how to use the API to create
and add custom notifications (for real-time notifications)
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_rad_shodan_notification_type', 200 );
function add_rad_shodan_notification_type( $array ) {
		
	$array['failed_in_quiz'] = array(
		'title' => 'Failed In the QUIZ', // title for reference in backend settings
		'template' => 'You failed in the quiz!', // the template, {member} is a tag, this is how the notification will appear in your notifications
		'account_desc' => 'When the user failed in the quiz', // title for account page (notification settings)
	);
	
	$array['pass_in_the_quiz'] = array(
		'title' => 'Passed the QUIZ', // title for reference in backend settings
		'template' => 'Congrats! You passed the quiz!', // the template, {member} is a tag, this is how the notification will appear in your notifications
		'account_desc' => 'When the user passed the quiz', // 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 == 'failed_in_quiz' ) { // note that our new action id is "new_action" from previous filter
		$output = '<i class="um-icon-android-close" style="color: red"></i>';
	}
	if ( $type == 'pass_in_the_quiz' ) { // note that our new action id is "new_action" from previous filter
		$output = '<i class="um-icon-android-done" style="color: green"></i>';
	}
	
	return $output;
}




//get the results of the quiz and in case the user was having the acceptable number, change his role to "passed_quiz_1"
//Add this custom action to php\classes\class-qmn-quiz-manager.php at one line before return the results in submit_results() function in order to be able to get the final results and parse the array based on category results
//        do_action('qsm_quiz_submitted_custom', $results_array, $results_id, $qmn_quiz_options, $qmn_array_for_variables, $result_display);

add_action('qsm_quiz_submitted_custom', 'get_the_results', 10, 5);
function get_the_results ($results_array, $results_id, $qmn_quiz_options, $qmn_array_for_variables, $result_display) {
	

	
	// Test if quiz name contains the word "Quiz 1"
	if(strpos(strtoupper($qmn_quiz_options->quiz_name), "QUIZ 1") !== false){
		$user_id = $qmn_array_for_variables["user_id"];
		// Fetch the WP_User object of our user.
		$u = new WP_User( $user_id );
		$matches = array();

//use the placeholder we put in the results text to fetch the results of different categories
preg_match('/\[points\]?(?:(.+?)?\[\/points\])?/', $result_display, $matches, PREG_OFFSET_CAPTURE);
		if(!empty($matches)) {
				$score = $matches[0];
				$category_results = explode(" " ,$score[0]);
				$CATEGORY_1 = $category_results[1];
				//$CATEGORY_2 = $category_results[2];
				//$CATEGORY_3 = $category_results[3];
				//$CATEGORY_4 = $category_results[4];
				//$CATEGORY_5 = $category_results[5];
				//$CATEGORY_6 = $category_results[6];
				//$CATEGORY_7 = $category_results[7];
				
				

//If the score in between equal 5 to 7 give him the score 7.5 and store the result in a meta field for the user
			       if($CATEGORY_1 >= 5 and $CATEGORY_1  <=7){
					update_user_meta( $user_id, 'CATEGORY_1', 7.5 );	
					$CATEGORY_1=7.5;				
				} 
				else {
					update_user_meta( $user_id, 'CATEGORY_1', $CATEGORY_1 );
				}

				//Add as many customizations as you like in the results. 

				if ( $CATEGORY_1 > 7 ){
						$u->add_role( 'passed_quiz_1' );
						$u->remove_role( 'subscriber' );
						UM()->roles()->set_role( $user_id, 'passed_quiz_1' );
						$user_data = wp_update_user( array( 'ID' => $user_id, 'user_url' => '' ) );

//Link to congratulations page and the other restricted content for the new user role. This link is being used when the user clicks on the notification. 
	   $vars['notification_uri'] = get_the_permalink(1);

//trigger the notification API and send it to the user

UM()->Notifications_API()->api()->store_notification( $user_id , 'pass_in_the_quiz', $vars );
				}
				else {
						
						$u->add_role( 'failed_quiz_1' );
						$u->remove_role( 'subscriber' );
						UM()->roles()->set_role( $user_id, 'failed_quiz_1' );
 
						$user_data = wp_update_user( array( 'ID' => $user_id, 'user_url' => '' ) );
 
 						//Link to failed page and the other restricted content for the new user role. This link is being used when the user clicks on the notification. 
						$vars['notification_uri'] = get_the_permalink(2);

						//trigger the notification API and send it to the user
						UM()->Notifications_API()->api()->store_notification( $user_id , 'failed_in_quiz', $vars );
				}
		}

	}
	return;
	
}

The above code will create two new notifications type:

  • failed_in_quiz
  • pass_in_the_quiz

It will trigger them in the ‘qsm_quiz_submitted_custom’ action as provided in the code.

You also need to modify the Quiz Master plugin a little bit and add a custom action to be able to fetch the results and do your calculations. Add this custom action to:

php\classes\class-qmn-quiz-manager.php at one line before return the results in submit_results() function in order to be able to get the final results and parse the array based on category results

do_action(‘qsm_quiz_submitted_custom’, $results_array, $results_id, $qmn_quiz_options, $qmn_array_for_variables, $result_display);

You need to know that, after adding a custom notification type, you need to activate it through the plugin settings to make it work. So, just navigate to Ultimate Member Settings -> Extensions and activate the new notification types and save the changes.

WordPress website notification system
Activating the new notification types

To make sure the code is fully functional, you need to pass the score to the results in a hidden div and fetch it the code using regex. Maybe in the next versions of Quiz Master plugin, they will do this favor and provide a way to fetch the category scores individually. But for now, this is the best way you can get the category scores one by one. So, I will add this code to the results of my quiz to make my code work:

<div style="display: none; " >
[points]%POINT_SCORE%[/points]
</div>
WordPress website notification system
Printing the score in a hidden div in a shortcode structure to be able to fetch it via actions

The results would be like this:

  1. User takes the quiz. If the user gets a minimum score, he/she will be considered as passed and his/her role will change to passed_quiz_1.
  2. If the user doesn’t get the minimum score (which is 7 here), he/she will be considered as having failed it, and his/her role will change to failed_quiz_1.
  3.  In any of the cases above, the user will receive a notification prior to his/her acceptance or failure. This will be done by calling the notification API type pass_in_the_quiz or failed_in_quiz
WordPress website notification system
Custom notification in action

Add the notification button in the header

By default, you can only choose to place the notification button in the bottom left or right corner of the website. However, using Jupiter X, you can put it anywhere you want! Using a custom header template, I will put the notification button on my header and will hide the bottom corner button via custom CSS. In order to add the button in a header, create a custom header template like this and just add this shortcode anywhere you’d like:

[ultimatemember_notifications_button]

Adding the notification button to the header in Jupiter X

Find more how to create a custom header in Jupiter X here.

Final Words

In this article, we learned how to create a WordPress website notification system for our website using the Ultimate Member plugin and its addons. It still has a way to go – however it’s still possible to set up your internal notification system.

You may need to send an SMS or Email to inform the users and notify them about the things that are waiting for them on your website. Or you may need to provide a way to push the notifications in your user’s browsers. While there are so many other functionalities to discuss, we learned the fundamentals of running a notification system and also integrated it with custom functionalities like a quiz. If you had any questions or issues regarding the above code, kindly let me know in the comments below.

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.