Category: How to

How to Send Engaging Marketing Emails They Can’t Help But Click

In today’s digital era with the rapidly increasing number of internet and email users, marketers use email as an essential part of their campaigns to get in touch with new and potential customers. However, not all email marketing campaigns are created equally, with some having more success in grabbing people’s attention than others. In other words, if you don’t send engaging marketing emails, then it’s likely those emails are lost into the void or simply ignored.

In this article, we’ll explain how personalization plays a key role in building a lasting relationship built upon value with your audience and maximizing their engagement using all your marketing material, including email campaigns. We’ll also provide some killer personalization techniques to guarantee higher open and click rates. Let’s dig in!

Marketing is a contest for attention relevancy!

If we want to add to Seth Godin’s famous saying, “marketing is a contest for people’s attention,” then in the 2020 context, we should say that marketing is a contest for relevancy. Because in a world that is overly-saturated with marketing and advertising, only relevant messages will get attention. This applies to all channels through which they interact with your brand: your website, ads, marketing campaigns and so forth.

Each of your customers have certain personal/contextual details and preferences and react differently in your online shop. All these differences will cause them to have different expectations and demand various kinds of content. With relevant content, we are able to show that we acknowledge their differences and tailor our solutions to fit their exact characteristics and attributes.

Why personalization is key in email marketing success

Providing your users with exactly what they want has a deeply positive effect on them and can extend their loyalty and lifetime value. The more personalized the experience, the healthier the relationships between the two parties. That’s why personalization just might be the most important factor to consider in every attempt to improve your audience engagement with your email campaigns.

Personalization in email marketing is executed through two major steps:

Segmentation
Automation

In this article, we’ll use Artbees’ new Growmatik plugin to practice personalization in email marketing. Growmatik is a marketing automation and personalization tool for WordPress that utilizes user attributes, behavior and interests to personalize customer experience across all main touchpoints (website content, email and popup).

How to do segmentation

If we want to address our audience by their different attributes and behavior, we should identify a special segment for each attribute or behavior. And when we send different email(s) to each segment, then we can say that we truly send engaging marketing emails that are personalized.

Segments can be defined based on a variety of attributes – for example contextual, personal or behavioral. It’s your job to find the criteria to consider when making segments for your business. Which groups of users constitute the biggest chunk of your audience? Or which types of users matter more for your business?

The example below shows that metrics/attributes are normally important to consider for a typical business. You can use them directly or use them as a starting point to find the segments that matter the most to you:

Personal

Language
Country
City
Timezone

Contextual

Date

In-site Activity

Sign-up date
Total visits
Last visit date
Average time spent per session
Number of viewed pages

Email Activity

Number of opened email
Number of clicked emails
Number of unopened email
Number of unclicked emails

Shopping activity

Number of purchased items
Number of orders
Total order value
Last purchase date
Has abandoned cart
Number of coupon used
Top purchased item

By using the above metrics, you can form the example segments as seen below:

Metrics to identify important segments in email marketing

As you can guess from the table, you can create segments using one or a combination of these metrics based on your business or campaign goals. Now, you should create these segments on your email marketing platform. Let’s take Growmatik as an example.

Click on the People page from the Growmatik left sidebar.
On the left side, the default and custom created segments are listed.
The upper right side of the page displays the filters to create segments.
Select a user type and add filters based on the segment you want to create.
In order to create compound filters, you can group multiple filters and use the and/or logic between them. For example, the filter below means ….
Click on the Save Segment button.

How to create email automations for segments

With our segments created, we now need to create automations for each segment. You should first check if your email marketing solution provides an automation feature for different segments. Different solutions have their own way of defining automations for different segments, but an ideal automation tool allows you to define one condition and one action for your automation. Once the condition is triggered, the action gets fired. Within Growmatik, you can define automation within the “IF this THEN that” structure. Let’s create one.

Once you create your segment in the last step, click on the Automate Segment button next to your filters.
The Automation page shows up, and your selected segment is set as the condition.
Now set an action for your automation, which in our case, is Send Email.

Effective Email Personalization recipes

Smart nurturing email for leads

If you’re running a blog, you can send nurturing emails for your leads as part of an overall plan to send engaging marketing emails. This includes welcoming them as a subscriber to your blog as well as routine feed about your new posts, e-books, freebies or anything that they might be interested in.

In Growmatik, go to the automate section, and create new automation by clicking on the plus button in the leads column. Then set the condition to choose User behavior > Sign up or All Leads and set the action as Send Email. Once the email builder is open, start creating the content based on your goal. Make sure to use Dynamic tags > First Name to make your email look more personalized and intimate. Find the blog elements in the Growmatik email builder toolbox. You can set it to show Recent, Related or Popular blogs. If you want to notify them about your blog posts, you can set it to Recent. If you want to show the most popular posts, set it to Popular, and if you want to show everyone only the post they are interested in – which I would recommend – you can set it to Related.

Smart upselling/cross-selling email for customers

Your audience is fond of new things as long as it’s related to what they want and the value they seek. It’s a good idea to target your existing customers with similar items related to what they have bought. This can happen right when they checkout their order by suggesting upselling, downselling and cross-selling items or via email after they purchase an item. This is an effective way to increase the lifetime value of a customer.

In Growmatik, you can simply create upselling/cross-selling emails by creating an automation with a condition in the Customer column User behavior > Purchased, then define a product for the condition and then define sending an email as the action. Once the Growmatik email builder asks you to create a template for your email, you can include the cross-selling product that you want offered manually yourself or set Growmatik to automatically include the related product based on the user’s past purchase history.

Follow up with cart abandoner email

One excellent way to increase sales is through sending out abandoned cart reminder emails. But you can take it one step further with more personalization. In Growmatik, head over to the automate section, create a new automation by clicking on the plus button and then set the condition as User behavior > Abandoned cart.

After doing this, then you can set the action to Send Email. After the email builder is opened, you can let your imagination run wild to style it. Remember to include the customer’s name using the Dynamic Tags options.

Occasion-based emails

Let’s say that you want to send out an email on a specific calendar day. You’d send out an occasional email. For instance, this could mean sending out a promotional email for Black Friday or even a simple Happy Birthday email. Sending out these types of emails that are extremely relevant to a certain time of year and the holidays is an excellent way to cement your relationship with your subscribers or to drive direct conversions.

And in Growmatik, you have the opportunity to create completely automated occasional emails. And here’s how you can do it: go to the Automate page and click on the plus icon to create a new rule. As the condition, choose Date > Specific date. You can select a date and save it. For the action, choose Send email and personalize the content of the email in the email builder. For this part, remember to add customizations to the email using Dynamic tags.

Welcome your new customers

Another great way to strengthen the relationship between you and your customers is by welcoming them onboard. This is an important part of sending engaging marketing emails as it allows you to send them content that is highly relevant for them at the right time when they are mentally ready. When it comes to welcome emails, the content of the emails depends entirely on your customers and the type of your business. This might be a simple greeting complete with useful links to your site or it could be a step-by-step onboarding tutorial.

In Growmatik, head to the Automate page, click on the plus icon and then create a new rule. . For the condition, choose User behavior > Orders placed and define the number of orders to 1. This will allow you to target customers who have placed only one order on your site. Save it and set Send email as the action. Once the email builder is open, you can begin creating the content, which will depend entirely on your goal. Make sure to use Dynamic tags > First Name so that your email appears more personalized and intimate.

If you sell more than one product, then you can take personalization to the next level and introduce the products that are related to a recent purchase that your customer made. To do this, use the products element. Then, you’ll want to click on the gear icon to open the option panel. Choose the Related option. You’ll then want to checkmark the Products related to the last purchase option. If you want to display the products that are related, then you can increase the number of products.

Appreciate loyal customers

There’s no doubt that sending engaging marketing emails will help keep people in the loop. And there are several ways of doing this. In order to appeal to your audience and cement your relationship with them – you can acknowledge and show appreciation for their presence, which will then act as motivation for them. You can also convey to your audience how much you value their time and generosity through expressing gratitude.

To find high-value users, Growmatik offers quick conditions such as User behavior > Orders placed and Total Spent time in the automation dashboard as well as custom segments based on any combination of the criteria we explained earlier. After setting the segment as the condition, then set Send email as an action and start crafting the content of your email.

To extend your gratitude even further, you can even offer your audience a discount. You can easily accomplish this in Growmatik by using the Coupon element. After putting the Coupon element in the email’s body, select it and change the discount options by clicking on the gear icon at the top.

Follow Up with away users

In Growmatik, you can go to the Automate page and click on the plus icon to create a new rule in the leads or customer columns. Use one of the predefined segments such as User behavior > Away and set a time period of inactiveness or create a more advanced segment in the People section using a combination of the metrics we explained in the table. For the action, choose Send email and then create the content of your follow-up email.

After opening the email builder, begin by saying “hello” to the user. All you need to do is place a text element at the top of the email and set the cursor in the correct place. Make sure to use Dynamic tags and choose First name. You can do more to add a more personal touch to your emails, such as adding products and articles relevant to the user’s interest.

It’s important to add that the email should include an emotional message to convey the sentiment that you miss that user and would like to have them back. You can use this message as your subject line as well. Also, offering discounts is a great way to attract user’s attention. If you have an e-commerce store, then you might want to take this into consideration to see if its doable. After opening Growmatik’s email builder environment, insert the Coupon element. Set its associated options and then you’re done!

Final words

Email marketing is all about sending people what they’d like to see in their inbox. Once they see it, they won’t be able to help themselves and they’ll open and click on it. In this article, I tried to explain why personalization is an efficient way to deliver value to the audience’s email inbox as part of marketing campaigns. I also provided sample recipes of personalized email campaigns that you can try as your next email campaign with Growmatik for free! You can send up to 10/000 emails every month with Growmatik for free, including all the features such as segmentation, automation and the email builder.

If you have interesting experiences about sending your audience personalized marketing emails or have a suggested recipe to add to our list, please share them in the comments.

Everything You Need to Know About Updating a WordPress Website

Are you in the habit of updating your WordPress website (including its themes and plugins)? If not, your website could be open to security threats or could be repelling potential customers. As a member of the Artbees support team, I saw that the reason many customers didn’t update their themes/plugins is that everything was working well, and they didn’t want to risk losing functionality. But this is problematic: by using outdated files, your website becomes vulnerable and could be hacked. Or sometimes people thought they were keeping their entire site up to date by only updating WordPress while they were using old themes and plugins. This often causes incompatibilities, and it’s likely some functions won’t work on the site.

Why is updating WordPress so important?

WordPress websites use themes and plugins that are created by third-party organizations. This means that when a new WordPress version is released, they update their products to fix any incompatibilities too. So let’s say you update the theme/plugins but keep using the old WordPress version, you may experience some troubles on the site like layout problems or some functions not working properly.

Another reason to update WordPress is to get your hands on new features. Sometimes you won’t notice them right away as the features could be minor – or they could be major and be exactly what you wanted.

If a vulnerability in an old WordPress file is fixed in the new version, you’ll want to update it without hesitation on your part. Not getting rid of the vulnerability will make it easier for hackers to quickly and easily hack your site.

Hackers typically check the WordPress changelog, and they can see where the vulnerabilities were fixed, so they can easily get into the sites with the old WordPress version. So be sure you always use the updates.

It’s no secret that if you’re using an old version of WordPress, you might experience website issues like slow loading speed, navigation-related problems or redirected pages. Outdated plugins and themes can increase website response time, and your visitors may leave the site quickly.

When you face some problems on your website and want to contact online support for help, most answers will be related to new versions of WordPress and you’ll definitely be suggested to update yours.

In this article, you’ll be able to find detailed instructions on how to easily and quickly update a WordPress website.

Problems of using outdated WordPress plugins and themes

Once you’ve updated the WordPress version, you need to also update all of your website’s WordPress plugins and themes. Along with new features, the plugins/themes authors might also include security solutions. This means that installing the latest version of the WordPress plugins and themes makes it harder for hackers to break your website.

If you don’t update the plugins and themes, old versions might have a negative effect on your website speed and performance in several ways. They can increase your website response time, which will result in fewer visitors on your site.

Installing the latest plugins and themes is much better as they are more optimized for the latest WordPress technologies, and you’ll improve both performance and user experience.

Tips for safely updating your WordPress website

Before hitting the “Update Now” button, it’s important to follow the steps below to keep your site safe:

Make sure to backup all your WordPress files and database. You can do this via your hosting control panel or using some plugin, for example, BackWPup.

Use a staging environment before applying updates to your live site. After testing the update on the staging site, you can overwrite the live environment with the staging. It takes more time, but you’ll avoid any problems that may be caused on the live site. To create a staging environment refer to these two articles: Update your WordPress Website Using a Staging Site and How to Setup your WordPress Development Environment.

Check the plugins and themes changelog to avoid any risks that may occur.

First update WordPress installation and then update your plugins and theme. Many of the WordPress plugins can be automatically updated from the WordPress plugin repository. It doesn’t work like this, however, for premium plugins and themes. You may not receive a notification of the update. And by overwriting the files on FTP level or through a special control panel of the theme you can only update the plugin or theme.

Don’t forget to test the site after you made the updates. Make sure the frontend is functioning properly. The most important steps to test:
- Check the homepage and a few other pages
- Fill in a form and check if the message is delivered
- Check if the multilingual function is working (if using WPML or Polylang)
- Check elements such as sliders, pop-ups, call-to-action
- Test the search function

What to do if the update goes wrong?

If for some reason your live website got broken after the update, you should hide it from the public to fix it before showing it again. This means that you should enable the maintenance mode for the website. For this, you can use a plugin such as the WP Maintenance Mode, or, if you’re using the Jupiter X theme, you can enable the maintenance mode in Customizer.

Make sure to clear the cache of your website to see all the features or changes that came with the current update.

Check the theme or plugin’s support forums. Perhaps the issue you have was already discussed, and you’ll be able to find a solution to your problem quickly.

Some themes/plugins may require to re-save the options to update the database. Try to re-save theme or plugins settings, and don’t forget to clear the cache.

Contact the support team. If you have a premium theme, then you’ll get a fast response. Just be specific in your description, provide screenshots of the errors, as well as the login details to the wp-admin panel and FTP, so the support agents can investigate the problem.

If you’re unable to find a solution, it’s better to restore a site from the backup. You can ask for help from your hosting provider support to get your site restored. Then contact a theme/plugin support, so they can investigate the issue with the update. It’s also better to provide your staging environment where the support team can test.

Wrapping up

It’s important to continue updating your WordPress site so that it’s safe, and hackers cannot get to it. You may think you don’t need an update as the site is now functioning properly. But please note that further down the line, ignoring updates will cause more problems.

Updating your site will provide several benefits: improved performance, new features, and a secure website! Stay updated – stay safe!

wordpress website update wordpress updates updating WordPress website updating themes updating plugins

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.

Tools we need:

A WordPress website
The Ultimate Member plugin (Free)
Real-time Notifications addon from the Ultimate Member plugin (Premium)
Quiz Master plugin (Free)

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.

After that, activate the plugin and create 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.

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.

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.”

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:

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.

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.

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.

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

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.

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?

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

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.

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

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.

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>

The results would be like this:

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.
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.
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.

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.

WordPress website notification system WordPress website notification system

How to Use Redirection to Personalize Your WordPress Website?

URL redirection is a method to redirect visitors to a specific page or section of your website. It’s most commonly used when a website is rebranded or under maintenance – through a simple URL redirection, visitors are redirected to the new website or the “under maintenance” page. However, what a lot of people don’t realize is that URL redirection can do a lot more than that; it can also be a powerful marketing tool. In this article, I’m going to explain how to effectively use redirection to personalize your WordPress website.

What is a URL redirection?

A URL redirection sends users and search engines to a different URL from the one that they requested.

There are two different types of redirections, and each has different use cases:

HTTP level redirection

This is done by 301 (moved permanently) and 302/307 (moved temporarily) redirects.

301 Redirect
Facilitates permanent redirects of a page or domain to the new URL.

302 Moved Temporarily
Facilitates temporary redirection of a page or domain to the new URL.

HTTP-level redirection lets search engines know about the redirection. So, for example, if your website declares a 301 permanent redirect to Google, Google transfers your old page or domain ranking power to the new one. But if you use 302 temporary redirects, the old site’s ranking power won’t be transferred to the new page or domain as the redirection is temporary.

This type of redirection is useful for rebranded or migrated websites as well as to update obsolete pages within the websites but If you want to use HTTP-level redirection you have to be cautious with its SEO implications.

You can do HTTP redirects by directly editing the .htaccess file in your server or by using SEO tools such as YoastSEO and UltimateSEO.

Browser-level Redirection

There is also a second method in implementing conduct redirects right within the browser without changing anything at the HTTP level and letting search engines know about it. This is useful when you want to redirect your visitors to different pages based on specific conditions but you don’t want this to affect your website’s and individual pages ranking power. For example you want to redirect the traffic coming from a specific source to a special page optimized for that source but you don’t want this to affect the SEO ranking power of your main landing page.

Browser-level redirection can be done by coding or readymade tools. This type of redirection is most useful for personalization and marketing purposes. For example:

Redirecting users from a specific source such as Instagram to a special landing page
Showing different homepages to visitors based on their stage. For example guests, leads and customers seeing different versions.
Redirecting users from Brazil to a Brazilian version of your homepage with local content
Showing a totally different and optimized homepage to your mobile users
Showing a temporary and exclusive landing page to a loyal customer when they hit a certain number of purchases

In this article, we’re going to further cover this kind of browser-level redirects. We’ll use our newly introduced marketing automation and personalization tool for WordPress and WooCommerce websites called Growmatik as a case study to show how to create conditional redirections to personalize your website for different segments.

Growmatik creates automation in the form of a ‘IF this THEN that’ rule. You can define different conditions (such as specific source, location, device or date) to trigger a redirection, and the redirection will automatically get executed when the condition is triggered.

Redirect traffic from a specific domain

If your website has a noticeable amount of traffic from a specific website such as a social media website or a partner blog, you can consider showing them a special landing page on their first visit. The content of this page can be optimized based on the source they are coming from and boosted with exclusive items such as discounts.

Using Growmatik, we’ll define this rule:
IF [Source is X] THEN [Show Page Y].

In the Growmatik automations page, click on the + icon in one of the columns. This defines the user type you want to target with this redirection. It can be guests, leads and customers. We’ll select customers for this example.
Select Source from the conditions list (next to If)
Select domain and enter the website you want to define as the source. Let’s say it’s instagram.com and click Save.

redirection to personalize your WordPress website

4. Select Show Page from the actions list (next to Then). You will have two options from:
By internal, you can choose a page inside your website and
By external, you can define an external website to refer the visitor to

5. Check the ‘Activate rule immediately after creation’ if not checked and click on the Create Rule button.

Using the above simple rule all of the customers who are referred by Instagram, will be redirected to Instagram landing. Please note that this applies only to your existing customers as we defined that user type when creating the rule.

Redirect your ads traffic based on URL parameters (UTMs)

You can redirect the traffic coming from specific ad campaigns that you publish via Adwords, banners or blogs you do outside your website to personalize your content accordingly. For example, a nice special landing page exclusively built for your Adwords ads, a page built for your promotional email campaign or a special landing page for an online event or visitors of your booth who get a QR code to visit your website and join a competition, get discounts and so on.

You will need to define URL parameters in the form of UTMs in links you put in your ad campaign to your website. UTM values help you identify the source of the traffic in a narrower level than domain. So for a promo email campaign, you can use the link:
https://your-website.com?UTM_source=PromoEmailCampaign

We will create a redirection rule such as the previous one just this time source should be set UTM values:
IF [UTM_source is X] THEN [Show Page Y]

Redirect your mobile visitors to an exclusive landing page

All of us know the importance of optimizing websites loading speed and responsiveness to improve the mobile experience, but this is actually being done by many already. So if you want to take it a step further to stand out in the competition you can create a totally different landing page for mobile users with optimized design and exclusive content.

IF [device is mobile] THEN [Show Page X]:

In the Growmatik automations page, click on the + icon in one of the columns to define the user type you want to target with this redirection. For this example, we’ll choose customers.
Select Device from the conditions list.
Select the device type you want to target with: mobile, tablet or desktop

4. Select Show Page from the actions list and define an internal or external URL to redirect the segment and click on the Create Rule button.

With the above automation, your new mobile visitors will be automatically redirected to the page you specified.

Redirect visitors from a specific country

Next up in your redirection list should be geographical redirection to personalize your WordPress website.

It’s good practice to show optimized or even different content on your website to people from different countries. More relevancy will increase engagement from your visitors in different stages across your website.

For geolocational personalization, you need to first find out the main countries that sent traffic to your website and create special landing pages preferably with translated and more localized content.

IF [Location is Italy] THEN [Show Page X]:

Let’s create a simple automation in Growmatik:

In the Growmatik automations page, click on the + icon in one of the columns to define the user type you want to target with this redirection. I’ll choose leads.
Select Location from the conditions list and choose the country you want to target with your redirection. You can select one or multiple countries to target.

3. Select Show Page from the actions list and define an internal or external URL to redirect the segment and click on the Create Rule button.

With the above redirection automation, your leads from Austria will see the German landing page when they enter your website.

Redirect only on a specific date

Running occasional promotional campaigns can be an effective way to engage your visitors. Think of a special landing page made for Black Friday or a special homepage during a period (like the COVID-19 pandemic maybe just you don’t know when this occasion is going to end!)

So the redirection rule you need to define is:

IF [date is X] THEN [Show Page Y]

In the Growmatik automations page, click on the + icon in one of the columns to define the user type you want to target with this redirection. I’ll choose guests.
Select Date from the conditions list.
Choose the date or date period you’d like redirection to happen.

4. Select Show Page from the actions list and define an internal or external URL to redirect the segment.

The above redirection automation will redirect all your guest visitors during 2020 November 27 to your Black Friday landing page.

Redirect when a specific page is visited

When your service is under maintenance or a product is out of stock, and you don’t want to show a null ‘check back soon’ or ‘under maintenance’ page to your visitors, you can redirect them to a temporary page with useful links and alternative products or service they might like to check and prevent a hard bounce.

So the redirection rule you need to define is:
IF [page X visited] THEN [Show Page Y]

In the Growmatik automations page, click on the + icon in one of the columns to define the user type you want to target with this redirection. I’ll choose leads.
Select Page Visit from the conditions list.
Choose the page you want to trigger the redirection when visited.

4. Select Show Page from the actions list and define an internal or external URL to redirect the segment.

By using the above automation, all of your leads that visit the product X page will be redirected to your product roundup page.

Redirect when a user made a specific number of orders

If you have a retention strategy for your WooCommerce business, you should definitely consider gamification techniques in your business and website. This means you can define milestones for your customers to do specific actions on your website such as visiting a page or buying a particular amount of products. Imagine users will see a temporary ‘thank you page’ with a special design, cross-selling links and probably discount coupons everytime they hit an order count milestone.

The redirection rule you will require is:
IF [X orders placed] THEN [Show Page Y]

In the Growmatik automations page, click on the + icon in one of the columns to define the user type you want to target with this redirection. We will target customers in this example.
Select User Behavior > Orders Placed from the conditions list.
Choose the number of orders that should trigger the redirection.

4. Select Show Page from the actions list and define an internal or external URL to redirect the segment.

The above redirection will show the ‘Milestone thank you page’ every time a customer hits a total count of 5 orders in your website.

Wrap up

If there’s one way that marketing in the 2020s will differ from the past decade, it’s deeper personalization and more automation. Using smart redirections can help you make more relevant experiences for your WordPress and WooCommerce website visitors. In this article, I tried to show how to use redirection to personalize your WordPress website without affecting the search engine ranking of pages on your website.

In a future article, I’ll share more tips on how to achieve a deeper level of personalization in WordPress and WooCommerce websites with Growmatik. If you have experiences with using redirection for marketing and personalization purposes, please do not hesitate to share in the comments below.

WordPress website personalize WordPress website URL redirection website personalization Growmatik

Everything You Need to Know About Outsourcing WordPress Development

WordPress now powers more than a third of the world wide web (36,5% as of May 21, 2020). This includes blogging, businesses, online stores and service websites in a wide variety of niches and sectors. And there is a huge line-up of businesses that evolved around the dominant CMS that builds and maintains WordPress websites: WordPress themes, hostings, managed services and, of course, maintenance and outsourcing businesses that help in developing and maintaining WordPress websites on your behalf.

Due to its piecemeal structure, WordPress is not as easy of a website building solution as its competitors such as Wix, Squarespace, etc… In recent years, this has led more individuals and businesses to consider using third-party services to complete the technical side of WordPress for them. In this article, we’ll take a look at the ins and outs of outsourcing WordPress development. We’ll answer the most common questions about outsourcing work in WordPress, whether or not you should do it, as well as tips on how to go about it the right way.

Why choose outsourcing WordPress development?

There’s no doubt that WordPress is easy to use, but it’s not very easy to set up and maintain. Unlike a SaaS solution, you have to put together different sections of the CMS together like lego pieces in order to get it working. This, on one hand, makes WordPress formable and extendible, which gives it a huge advantage over its competitors. On the other hand, this also makes it difficult to create and maintain. There are many solutions and options for each of these lego pieces you must choose from: themes, page builders, plugins, hostings, caching service and more.

You should either develop knowledge, experience and skillset to work with each of these yourself or break the bank to recruit and hire an in-house developer(s) to do it. But there’s a third option: outsourcing WordPress development to a ghost middle-man who specializes in WordPress. And even in a specific theme or plugin such as Jupiter X or Elementor. But in what ways is this beneficial to you?

Leverage expertise without having it

A WordPress specialist has developed years of experience and skills about the ins and outs of WordPress that your in-house developer might not know right off the bat. Even if you want to tackle the learning curve, there is a period of trial and error that you can skip by simply jumping on the back of a veteran WordPress specialist.

While the process of creating and operating in WordPress themes and page builders is standard, clear and documented, there are dozens of ways to do one single thing. And the result can vary widely based on which way you chose to do it. Specialists have learnt the best way to do different things after years of working with that theme or plugin.

Eliminate legwork and focus on creativity

Digital media production has a serious drawback in general: legwork. And it’s even worse with creation within WordPress. Some WordPress tasks involve more legwork than creativity. You spend tons of time converting your PSD to WordPress, playing with Elementor to create a page template or moving your content from an existing source to your new website.

There can be times when you spend more time building a template in Elementor than it took you to design it in Photoshop or Sketch!

The most important benefit of outsourcing is that it can free up your time to focus on what matters and what can only be done by you. Being a leader, designer, thinker, strategist, an ideator are things that cannot be outsourced. So you might save some time and focus on your creativity rather than installing WordPress.

Increase productivity and velocity

Development and QA is where the bottleneck happens in most teams. Especially if it involves new and unexplored areas where some research and trial and errors are involved. And it’s at that point where you can get a hand from an expert to get you out of a jam, smoothen your workflow and increase productivity by focusing on the other parts of the workflow like strategizing, customer development and marketing.

Having a smooth development workflow will give you confidence to work on more projects simultaneously. This is particularly important for high-volume teams where velocity is limited to the number of the few developers working in-house and you cannot assign them multiple tasks from different projects freely. By outsourcing to the right team, you’re actually doubling or tripling your team size without actually increasing your workforce.

Cut costs and increase profit margins

High-volume WordPress businesses such as agencies might reduce production costs by outsourcing WordPress labour instead of spending money to recruit, hire and employ staff.

What are white-label services?

White-label services ensure that your brand – and only your brand – will appear on the final product, even if you had a freelancer or agency doing the work on your behalf. Make sure to hash out the terms for branding and disclosure in the contract.

This is good for your brand and will protect your clientele. However, this also increases your and your contractor’s responsibility to assure the quality of the work. If there are any problems, the responsibility will lie on your shoulders (not your contractors), and your brand may be at stake.

White-label + partnership: The ideal formula!

White-label services are suitable for high-volume WordPress businesses and the regular flow of projects you want to outsource to someone reliable. It would be ideal if you can form a long-term relationship with your contractor and strike an agreement that would work in the interests of all parties involved. For example, a special rate exclusive to you when you promise to outsource a specific number of projects every month.

A long-term relationship fosters trust and reliability and transforms your contractor into a partner. There are some white-label agencies where you can have your own permanent team of experts who work on your projects, you get to know each other over time and perfectly improve the productivity as a result of long-term collaboration.

Who should outsource? Freelancers, agencies or end-users?

The short answer is everyone! Freelancers, agencies and end-users alike would benefit from getting help from a WordPress expert. It might be an end user who just bought a WordPress theme and needs help customizing it, a freelancer who needs a hand doing a job for their client or an agency with a large clientele who needs another team to lift off part of the workload.

What can be outsourced?

Custom WordPress development

You might want to consider outsourcing if you need advanced WordPress development for particular requirements on your website or you need WordPress plugins developed from scratch for your project. You require a lot of knowledge and skills with WordPress to get something like this yourself or by your developer.

✅ I want a custom calculator plugin …
✅ I want a few custom post types for my hotel website …
✅ I want a custom booking plugin built for my WordPress website
✅ I want a custom header design to look and feel like on example.com
✅ I want my popup to be showing a dynamic carousel populated by a post type in the WordPress backend.
✅ I need my portfolio to have some custom fields with specific relations
✅ I need a custom language selector for my multilingual website
✅ I need to integrate an LMS with WooCommerce
✅ I need to customize my Membership plugin
✅ I need a custom shortcode to show a content under specific conditions to a group of my users

Theme customization

This is one of the most popular outsourced services on the WordPress market: You bought a WordPress theme, and you want to customize it by adding a custom functionality, capability or some custom codes to add a specific visual function that is not possible with built-in features.

✅ I want a custom menu look in my template
✅ I want plugin X installed and optimized in my theme
✅ I need my current mega menu to to have a different look in mobile and desktop
✅ I need to make the plugin X look like the other parts of my website in my theme
✅ I need to customize my blog page to look like this

Performance & security optimization

This is another area where having extensive knowledge and skills is crucial – without which, you may risk your website health, data and security. If you have an active WordPress website with high traffic or several pages, you might want to have it audited by an expert for possible security measures and performance improvements.

Performance and security improvement checklists usually include the installation of SSL, caching and CDN services, which may require server and development knowledge and hands-on experience with different protocols and tools. It’s better if this is done by an experienced engineer.

✅ I need a 90% Google Page Speed for my client WordPress website
✅ I need a security checkup for my WordPress website
✅ I need a checkup on the performance leaks of my WordPress website (unused plugins, image optimization, compression, etc.)

Converting to WordPress

This may be the most popular outsource WordPress task among different WordPress teams. Let’s say you like and select a WordPress theme but don’t know how to implement the designs you or your designer did. Or you’d just like to get it done by someone who is an expert on that theme and already knows the best practices rather than playing around with trial and errors.

For instance, a Jupiter X expert could help you achieve maximum design loyalty as well as the efficient usage of elements and plugins to convert your design from a variety of sources such as PS, Sketch or Adobe XD.

✅ I need to create these templates with Elementor.
✅ I’d like to build my landing page with Jupiter X WP.
✅ Can I convert my Sketch designs to WordPress?

Custom design

Well, this is not directly a WordPress development job but definitely a part of it. If you’re creating a website for a very picky client or with special brand characteristics, you might want to have your website designed by expert designers exclusively based on your very own needs and preferences.

✅ Design me the most beautiful WordPress website!
✅ I’m representing a client with very unique brand characteristics, and we need a WordPress website for them.
✅ I want to add a brand new template in harmony with the rest of my theme.

Maintenance, migration & content management

If you’re running an active website for yourself or for a client with regular content updates, you may want a helping hand in completing the usual maintenance such as WordPress updates, plugin updates, theme updates and regular health checkups, as well as content additions such as the creation of weekly or monthly posts.

You may also need help migrating your content from an existing website with many posts, pages or products to a new WordPress theme (for example migrating from Jupiter to Jupiter X.)

You could handle this yourself if you have the skillset and enough knowledge about the original and destination platform. But if not or if you’re sensitive about your content and want a seamless migration, an expert will be helpful. They can assure a migration with maximum loyalty and with the best migration practices or content recreation in the destination platform for parts of your content that are not natively compatible and supported by the destination platform.

✅ I want a seamless migration from Jupiter to Jupiter X.
✅ I need a hand migration from Divi to Elementor.
✅ I want a regular maintenance checkup for my WordPress website.

What should not be outsourced?

It’s good to think of outsourcing as a solution to get something that you don’t know much about done by an expert. Or if you have the knowledge base but you simply don’t have enough time to complete the project. If it’s the former, it’s still important to have basic knowledge about the essence of what you want done. This may include basic knowledge of WordPress and how it works. Some coding knowledge of the language you want can also be helpful if your project is purely related to development.

If you’re running a dev team and considering outsourcing part of the development to another team, then you probably have a deep knowledge of your WordPress plugin or app and you should note your contractor may take time to achieve the same amount of knowledge and familiarity with your product.

There might be a learning curve, trial and errors and even possible defects before your contractor learns as much as you know about your plugin.

❌ I want to build the next Facebook with WordPress. Is that possible!?
❌ I want to build an open-source CMS to rival WordPress.
❌ I want a plugin developed to do all my accounting, site maintenance, online payments and security checkup for my WordPress website.

How to choose a WordPress outsourcing service

1- Begin small

If you’re new to outsourcing, it’s better if you start with small projects. You may face problems with outsourcing you didn’t expect and you were informed during your contractors sales pitch. It may take time for both of you to know each other’s needs and capabilities.

If you’re considering a long-term relationship, starting small will help you minimize possible damages and errors and learn the best practices along the way. This is particularly true about the development projects where tight collaboration and in-depth knowledge of both parties is crucial for a successful collaboration.

2- Provide clear descriptions

Make sure to specify all the details and material your contractor requires to start your WordPress project. This changes depending on the project type but below might come in handy for common project types:

WP conversion > Well-organized design files with proper layer folder and naming conventions
Theme customization > Detailed list of requested functionalities – if a visual feature, possibly with an explanatory video.
Custom Design > Possible samples of design that you admire and reflect the design characteristics you want in your design. Also detailed brand guidelines.
Content management > Well-organized content that you want posted on your website such a text, images, video with details about publishing date, category and tags.

3- Consider the best price, not the cheapest

When it comes time to outsourcing, the cheapest price is not always the best deal. It’s the value/price ratio! Like we discussed earlier, there may be a dozen ways to do a specific thing in WordPress. If a candidate contractor offers a price slightly higher than others, try to ask them and figure what specific feature or capability makes them eligible for that.

If your project is just another ordinary WordPress conversion project, then anyone who knows Elementor and Photoshop can convert it. In other words, there is not high loyalty and quality standards for you or your client. This means that you’re better off considering a lower price. However if you have a special and loyal client who trusts you because you respect their values and brands, then you should make sure your outsourcing contractor shares those values as well so the final product you deliver to your client is coherent, consistent and seamless.

In which case you should not consider the low prices and be open to pay more for a team who aspires to high-quality standards and cares as much for your client as you do.

4- Work with good communicators

When outsourcing WordPress development, communication is maybe the most important factor to take into consideration after the value for price. The best teams to collaborate with are not those who have the best engineers or best-in-class designers, they are the best communicators. The most important factor that leads to a positive and progressive collaboration is communication, and without proper communication, your collaboration will be painful and will fail to produce satisfactory results.

Make sure you know how you’ll communicate with your contractor team. Is it through a WhatsApp channel? Or an advanced briefing section built into their website? If you’re considering a long-term relationship with the contractor team, it’s good if you can establish a direct communication line and account manager who can directly interact with you.

Ideal white-label outsourcing teams offer different communication options such as phone calls, Zoom calls and briefing sections for their high-end and loyal clients.

5- Don’t proceed without a plan and written agreement

A risk factor of many outsourcing companies is that they are a group of coders and designers sitting in some unknown country behind computers and getting something done for you. You’re sharing critical information about your project, your business and your clients, so you should research the credibility of the team you are considering before starting working with them.

Check to see if they have written and coherent terms of service. If they do, then study it carefully so you’re informed about possible incidents along the way.

Do you see your rights reflected in the agreement you sign? Do they have a refund or dispute policy? Do they accept your NDA terms? And so on.

Furthermore it’s best practice to use the briefing section you are granted to write down and document everything so it can be used in case it’s required in the future to refer to a specific part of the conversation or project. Conversations made over the phone or on a Zoom call might not be referred to in the future if necessary.

6- Find reliable partners – not doers

An ideal team to get help from should be like any other team member, not an outside contractor just working behind the scenes delivering projects. If you want the best outcome from an outsourcing collaboration, you should foster a solid relationship that rewards both you and your contractor team and makes them as integrated into your team as your employed engineer or product manager. That is, of course, a mutual responsibility for both parties to achieve this level of trust and integration through offering each other the maximum value and mutual benefits.

What is WPDone?

Earlier this year, we rebranded our former custom modification subservice called Artbees Care into a brand new white-label WordPress Service called WPDone. WPDone is powered and operated by Artbees, the maker of the Jupiter X WordPress theme, and applies a decade-long experience with WordPress in delivering its clients’ projects.

In WPDone, our goal is to become another member of your team – not just a contractor – and to build good products without our name on it. We helped achieve the highest quality standards, development technologies and aesthetics values for more than 11 global WordPress agencies from different continents within the scope of more than 600 WordPress projects.

If you’re a high-volume WordPress freelancer or agency and are considering outsourcing WordPress development as part of a long-term collaboration with a white-label savvy WordPress team, then you can check out the WPDone Partners program for surprisingly good rates considering the high quality service you get.

outsource WordPress Development outsourcing wordpress development outsourcing

How to Create a Custom Gutenberg Block with the Block Lab Plugin

With the rising popularity of Gutenberg, building tailored Gutenberg blocks is becoming an essential skill for every developer. Throughout time, the WordPress community has made some great contributions to Gutenberg. Today, let’s take a look at the Block Lab plugin. Creating a custom Gutenberg block with the Block Lab plugin is much easier than standard custom block creation via the native Gutenberg API.

In this article, let’s see how we can create a custom Gutenberg block with the Block Lab plugin. But before going forward, you might want to check out the following articles we posted about Gutenberg if you haven’t done so already.

Before diving into codes

First thing’s first. Let’s get familiar with the Block Lab plugin and then we can start creating an example block with this plugin to explore its features.

Features:

WordPress- and Gutenberg-friendly UI.
19 available field types.
Highly flexible in creating different types of blocks from easy to complex ones.
Developer-friendly functions.
Good documentation and tutorials.

Creating a custom Gutenberg block with the Block Lab plugin

To demonstrate how this plugin works, let’s create a posts loop block in a few steps. Almost all websites need to use these types of blocks to show posts, portfolios, news and other types of content. Now imagine that you can create any type of posts loop block by yourself using this plugin.

For this article, we are going to create the following posts loop block called Modern Posts. It allows you to fetch posts from different post types and to specify the number of the posts.

1. Install a child theme

We need to use a child theme for our PHP and JavaScript codes. For the purposes of this article, we’re going to use the Jupiter X Child theme.

2. Plugin installation

Go to Plugins > Add New, search for the block lab, then install and activate the plugin.

3. Configuring the block

To configure the essential settings for the Modern Posts block, go to Block Lab > Add New then fill in the Title and Icon settings as shown below. You may change other settings based on your needs.

4. Add the block fields

Fields allow us to set different settings for each block. Almost all blocks benefit from the flexibility the fields offer. We suggest that you read the Fields documentation.

To create the Modern Posts block’s fields based on the initial design (as shown above), we need the following Post Type and Number of Posts fields. You may add more controls based on your needs. Let’s create them.

1. Click on the Add Field button to add the fields.
2. Add the Post Type field as shown below.

3. Add the Number of Posts field as shown below.

4. Click on the Publish button. Afterward, you’ll see the following message which tells you where to create your PHP file in the child theme.

5. Write the block code

Now it’s time to create the PHP and CSS files to make the block show the posts loop.
1. Create the block-modern-posts.php file in blocks folder in the child theme as shown below.

block_value() function gets the value from the fields that we created in the previous section.
We used a custom WP_Query to create a custom loop.

<div class="block-modern-posts <?php block_field( 'className') ?>">

	<?php
	// Variables
	$post_type  = block_value( 'post-type' );
	$post_count = block_value( 'number-of-posts' );

	// WP_Query arguments
	$args = array(
		'post_type'      => $post_type,
		'posts_per_page' => $post_count,
	);

	// The Query
	$modern_post_query = new WP_Query( $args );

	// The Loop
	while ( $modern_post_query->have_posts() ) {
		$modern_post_query->the_post();
		?>

		<div class="block-modern-posts--post">
			<img class="block-modern-posts--post-thumbnail" src="<?php the_post_thumbnail_url(); ?>" alt="<?php the_title(); ?>">
			<div class="block-modern-posts--post-content">
				<h4 class="block-modern-posts--post-title"><?php the_title(); ?></h4>
				<div class="block-modern-posts--post-excerpt"><?php the_excerpt(); ?></div>
				<a class="block-modern-posts--post-more" href="<?php the_permalink(); ?>">Read More</a>
			</div>
		</div>

		<?php
	}

	// Restore original Post Data
	wp_reset_postdata();
	?>

</div>

2. Create the block-modern-posts.css file in the blocks folder in the child theme as shown below.

.block-modern-posts--post {
	display: flex;
	margin-bottom: 40px;
	align-items: center;
}

.block-modern-posts--post-thumbnail {
	width: 28%;
	height: 400px !important;
	object-fit: cover;
	border-radius: 30px;
}

.block-modern-posts--post .block-modern-posts--post-content {
	font-family: "Helvetica Neue";
	background: #fff;
	padding: 50px 40px;
	margin-left: -60px;
	box-shadow: 0 0 20px #0000001c;
	border-radius: 30px;
}

.block-modern-posts--post .block-modern-posts--post-title {
	font-family: "Helvetica Neue";
	font-size: 26px;
	font-weight: 400;
	line-height: 1.2;
	margin: 0 0 0.5rem;
}

.block-modern-posts--post .block-modern-posts--post-excerpt {
	margin-top: 20px;
	margin-bottom: 45px;
	color: #999;
	line-height: 1.8;
}

.block-modern-posts--post-more {
	background-color: #7882ff;
	border-radius: 50px;
	padding: 12px 22px;
	color: #fff;
	font-size: 14px;
	text-decoration: none;
}

/* Featured */
.block-modern-posts--post:first-child {
	display: block;
	margin-bottom: 60px;
}

.block-modern-posts--post:first-child .block-modern-posts--post-thumbnail {
	width: 100%;
	height: 550px !important;
}

.block-modern-posts--post:first-child .block-modern-posts--post-content {
	margin: -70px 50px 0;
	position: relative;
}

3. After adding the files, you can now play with the block in the WordPress editor.

Wrapping up

As outlined in this post, we walked you through how you can build a custom Gutenberg block with Block Lab, which is much easier than creating the blocks with the native Gutenberg API. In other words, the Block Lab plugin is a huge timesaver when it comes to creating custom blocks.

We’d love to hear about your experiences with the Block Lab plugin, so please share your custom blocks with us in the comment section below.

gutenberg Custom Gutenberg Block custom block for Gutenberg Block Lab Plugin

How to Create a Custom Gutenberg Block with Lazy Blocks Plugin

custom Gutenberg block with Lazy Blocks - featured

Every day, we’re seeing more and more plugins extending Gutenberg in different directions. This is great news for Gutenberg lovers since they can enjoy using it even more. One of those handy plugins that we’re going to cover today is called Lazy Blocks.
In this article, we’ll look at how we can create a custom Gutenberg block with Lazy Blocks. It’s worth mentioning that we also published similar articles.

Before diving into writing codes

The user-friendly architecture of this plugin will help us to easily create custom Gutenberg blocks. The following sums up the plugin’s key features:

User and Gutenberg friendly UI.
Various controls (checkbox, email, file, gallery, image, repeater, …).
Usage of Handlebars, which makes writing PHP codes a breeze.
Separate editor and frontend code blocks to help us write different outputs.
Custom templates for your posts.
Many hooks for PHP and JS codes.
Good documentation.

We recommend that you check out the following resources to become more familiar with this plugin:

Create a custom Gutenberg block with Lazy Blocks

The mentality behind this plugin is to spend your time and energy on the result, not on learning how to create blocks. This mentality will allow you to unleash your potential in creating custom Gutenberg blocks.

In this article, we omitted some technical and extra explanations, so you can more easily follow this post’s flow in making your first block. To learn even more about the process, you might want to read the plugin documentation.

So let’s dive into it and create an attention-grabbing Gutenberg Blockquote block in a few simple steps.

1. Plugin installation

Go to Plugins > Add New, search for lazy blocks. Then install and activate the plugin.

1. Configuring the block

To configure the essential settings for the Blockquote block, go to Lazy Blocks > Add New then fill the Title and Icon settings as shown below. You may change other settings based on your needs.

2. Add the block controls

Controls allow us to specify dynamic settings for a block, and it’s almost necessary for all the blocks to have controls. They offer flexibility for the blocks. We suggest that you read the Controls documentation.

To create the Blockquote block’s controls based on the initial design (as shown above), we need the following Icon Background, Avatar, Text and Author controls. You may add more controls based on your needs. Let’s create them.

1. Under the Controls section, go to the Content tab and click on the + icon to add the controls.

2. Add the controls one by one as shown below.

3. At the end, your controls should look like below.

3. Write the block code

Now we need to write the actual codes based on the design to make the Blockquote block work. In this section, we also use the created controls in the block to make it dynamic based on the settings.

1. Under the Controls section, go to the Frontend tab and add the following codes. The controls names have been wrapped in curly brackets {{control-name}} then added inside the following code. We recommend that you read the Codes documentation.

<blockquote class="lazyblocks-blockquote">
    <span class="dashicons dashicons-format-quote" style="background-color:{{icon-background}};"></span>
    <p class="lazyblocks-blockquote-text">{{text}}</p>
    <footer class="lazyblocks-blockquote-footer">
        <img class="lazyblocks-blockquote-avatar" src="{{avatar.url}}" alt="{{author}} quote" />
        <span>{{author}}</span>
    </footer>
</blockquote>

2. Update the block and go to a page to see how the block works. You may add different texts, names, avatars and icon backgrounds to the block. All this can also be added in different layouts like columns.

Conclusion

In this blog post, we easily created a custom Gutenberg block with Lazy Blocks without the hassle of creating a separate plugin, child theme or other development obstacle. This Lazy Blocks plugin will definitely help actualize your ideas about custom Gutenberg blocks in no time.

We’d love to hear from you, so please share your custom blocks with us in the comment section below.

gutenberg Custom Gutenberg Block custom block for Gutenberg Lazy Blocks

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

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.

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.

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.”

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

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.

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:

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:

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

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.

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.

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

jupiter x poll website create community poll website

How to Create a Custom Gutenberg Block Using the ACF Plugin

Due to its popularity – as well as its popularity in the WordPress community – the Advanced Custom Fields (ACF) plugin needs no introduction. In a nutshell, ACF has made the developer’s job a breeze for adding custom fields anywhere in WordPress, now it’s time to help them create a custom Gutenberg block using ACF.

Not surprisingly, Elliot Condon (the creator of ACF) hasn’t stopped there. He introduced a groundbreaking feature called ACF Blocks for Gutenberg in the ACF PRO version 5.8, which is a game changer for ACF and Gutenberg players.

In this article, let’s see how we can implement this in real life and create a custom Gutenberg block using ACF.

Note: This article requires the ACF PRO plugin version 5.8.0 and above. If you’re a Jupiter X user, you can activate the plugin from Control Panel > Plugins.

Before diving into writing codes

ACF is a simple yet advanced plugin. If you’re unfamiliar with the ACF plugin, we recommend that you read the following articles to build a good foundation before proceeding any further.

Create a custom Gutenberg block using ACF

Creating native custom Gutenberg blocks requires decent knowledge of JavaScript, which is not ideal for many users. The ACF Blocks feature is here to save time and help you to unlock your potential for creating custom Gutenberg blocks.

Let’s create a Blockquote block in a few simple steps.

1. Prepare a base plugin

Let’s create a base plugin to hold the block codes. Depending on your preferences, you can use a child theme instead of a plugin.

1. Go to your plugins folder on your site, then create a my-acf-blocks folder.

2. Create a plugin.php file as shown below.

3. Activate the plugin from WordPress admin.

2. Register a block

Using the acf_register_block_type() function, we can add a new block in Guttenberg with PHP.

1. Add the following function in the plugin.php file to define the block properties.

function mab_register_acf_block_types() {
    acf_register_block_type( [
        'name'            => 'blockquote',
        'title'           => __( 'Blockquote' ),
        'description'     => __( 'My blockquote block.' ),
        'render_template' => dirname( __file__ ) . '/blocks/blockquote/blockquote.php',
        'category'        => 'formatting',
        'icon'            => 'format-quote',
    ] );
}

2. Hook into acf/init action to register the block.

if ( function_exists( 'acf_register_block_type' ) ) {
    add_action( 'acf/init', 'mab_register_acf_block_types' );
}

3. Now you should be able to see the block in the Gutenberg editor. As you see, the block is empty and has no settings. In the next step, we’ll add some settings.

3. Create a field group

To create the block settings, you need to register your settings in a field group.

1. Add a field group called Block: Blockquote in Custom Fields > Fields Group, then add the following fields (settings). There’s no limitation to add the fields but it’s recommended to keep it as few as possible.

2. In the Location, set the Block to Blockquote. By doing so, ACF will show the created fields (settings) for the Blockquote block.

3. Now, you should be able to see the settings in the Gutenberg editor. If you change the settings, nothing will happen. In the next step, we’ll implement the settings.

4. Render the block

Finally, we need to tell ACF how to render the block. This is just a standard process to get the settings and generate the HTML properly.

1. Create blockquote.php in the blocks/blockquote folder in your plugin, then add the following codes. The codes are based on standard ACF docs.

<?php

// Create id attribute allowing for custom "anchor" value.
$id = 'blockquote-' . $block['id'];
if ( ! empty( $block['anchor'] ) ) {
    $id = $block['anchor'];
}

// Create class attribute allowing for custom "className" and "align" values.
$className = 'blockquote';
if ( ! empty( $block['className'] ) ) {
    $className .= ' ' . $block['className'];
}
if ( ! empty( $block['align'] ) ) {
    $className .= ' align' . $block['align'];
}

// Load values and assign defaults.
$color = get_field( 'color' );
$quote = get_field( 'quote' ) ?: 'Your blockquote here...';
$author = get_field( 'author' ) ?: 'Author name';

?>
<div id="<?php echo esc_attr( $id ); ?>" class="<?php echo esc_attr( $className ); ?>">
    <blockquote class="mab-blockquote">
        <span class="mab-blockquote-text"><?php echo $quote; ?></span>
        <span class="mab-blockquote-author"><?php echo $author; ?></span>
    </blockquote>
</div>

2. Now you should be able to see the block in the Gutenberg editor. By default, it has some default values, which you can change by altering the Quote and Author settings.

3. Now, let’s spice it up by adding some styling. Add blockquote.css in the blocks/blockquote folder in your plugin, then add the following codes.

.mab-blockquote {
    padding: 50px 30px;
    text-align: center;
    border: 8px solid #ff3131;
}

.mab-blockquote-text {
    display: block;
    padding-bottom: 30px;
    font-size: 26px;
    font-family: serif;
}

.mab-blockquote-author {
    color: #777;
    font-family: sans-serif;
    font-size: 18px;
}

4. ACF can’t automatically detect the styling files. In other words, we need to tell it where to find the file. Add the enqueue_style param in the plugin.php file.

'enqueue_style'   => plugin_dir_url( __FILE__ ) . '/blocks/blockquote/blockquote.css',

5. Now, you should be able to see the block in the Gutenberg editor as shown below.

6. Now, let’s take another step and make the border color dynamic based on the Color setting. Open the blockquote.php file then do the following modifications.

<blockquote class="mab-blockquote" style="border-color:<?php echo $color; ?>;">

7. Now you should be able to set a different border color from the block settings.

Conclusion

Now that you have enough knowledge to create a custom Gutenberg block using ACF, you can create any type of custom blocks for Gutenberg.

We’d love to hear from you, so please share your custom blocks with us in the comment section below.

gutenberg Custom Gutenberg Block ACF Advanced Custom Fields

How to Create a Website with Google Sheets for Free

Honestly, I can’t believe my eyes, and I have to share what I just found out with you. I recently stumbled across a service that I can use to power websites, apps or whatever else I want – all with a simple Google Sheet. This service is called Sheety, which I found on Product Hunt. In short, Sheety allows you to create a website with any Google Sheet and instantly turn it into an API – all for free.

Why build a website with Google Sheets

You’re probably wondering why you should build a website with Google Sheets when there are numerous services out there like WordPress.

And that’s a fair question. So let’s break it down: the idea behind Sheety and comparable tools is definitely not to replace services like WordPress as they are irreplaceable. That said, let’s briefly go over some benefits of building a website with Google Sheets, so you can decide if this is the tool for your project.

Google Sheet is basically a spreadsheet – and it’s free.
Almost anyone knows how to create/update a spreadsheet.
Spreadsheets can be easily stored and backed up.
Good for creating a quick and free personal site.
Suitable for rapid website prototyping.
Ideal for building a newsletter list.
No need to export/import your spreadsheets data.

Which service should I use?

As mentioned before, Sheety is one of these available services. There are alternatives to Sheety ranging from free to premium to help you to create your website.

Sheety
Sheet2Site
Browse alternatives on Product Hunt.

For the purpose of this article, let’s use the Sheety service which is free yet powerful.

Sheety – turn your Google Sheet into an API

The Sheety service turns any Google Sheets into an API, so you can fetch your data in any website. Before getting the ball rolling, it’s a good idea to read the following articles to get more familiar with this service.

How to create a simple portfolio website with Google Sheets

Because nearly everyone needs a way to show off their work, portfolios are one of the most popular types of website. So then let’s create a simple portfolio website like the one you see below.

You can see the final live version on CodePen.

Prepare a Google Sheet

1. Create a new Google Sheet, then add two sheets called Meta and Items.

2. In the Meta sheet, add the Title, Read more and Footer data as shown below.

3. In the Items sheet, add Title, Description, Tags and Screenshot columns as shown below. These columns will function as dummy data to populate the portfolio items.

Connect the Google Sheet to Sheety

1. Sign into Sheety with your Gmail login information.
2. Add a new project, then set Project Name to Portfolio and Spreadsheet URL to your Google sheet and click on the Create button.

3. Click on the Sync button to generate the API endpoints. After doing so, you should be able to see the Meta and Items endpoints.

Prepare the website

For this article, I used the CodePen website. You can use any other services or create your own HTML in your local host.

1. Create a pen in CodePen and call it Sheety Portfolio.
2. Add Tailwind CSS framework. This is used to quickly create a visually appealing layout.

https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.2.0/tailwind.min.css

3. Add the Vue.js framework and Axios library, which are used to fetch data from API and populate the HTML properly.

https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js
https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js

4. Copy and paste the HTML and JS from this pen to your pen. There’s no need to explain the HTML and JS codes here since it’s outside the scope of this article. However, I did add some comments in the codes to help you understand the codes.

5. Now, you should be able to see a website like in the first screenshot. From now on, as soon as you update your Google Sheet and refresh your pen, the new data will be automatically shown.

Conclusion

All-in-all, I’m glad that I found this Sheety website and shared this service with you. In this article, we first learned about a cool service to create a website with Google Sheets. Secondly, we created a simple websites to grasp the potential of these services.

It’d be cool to share your websites powered by Google Sheets with us in the comment section below.

Google Sheets Website with Google Sheets

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:

Cheap or free of charge
Actively maintained and updatable
Independent and installable on shared hostings
Customizable with a minimum amount of coding
Community based, meaning that the community of users should populate it with their content
Loaded with a function that allows users to share the polls in their social networks
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.

It uses WordPress, which is free. The BBPress is also free.
Both BBPress and WordPress are actively maintained.
I can install both of them on any shared hostings.
I can customize everything with the minimum amount of coding.
It’s where the users will create polls with their own content. It’s a community after all.
It allows me to share the polls with specific permalinks wherever I want.
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.

View of the final website in desktop and mobile

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:

Single page of the online poll community

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.

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.

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.

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.

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 ]

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:

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.

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.

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.

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.

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.

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:

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:

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.

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.

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:

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.

jupiter x poll website create community poll website

How to Speed Up your Website in Jupiter X

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:

The request is sent to a DNS server where it resolves the IP addresses and passes it over to your server.
The server receives the request and passes it to the web server.
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.
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)
The interpreter will generate a page based on the user request and send it back to the web server.
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 to Artbees Themes Blog for the best WordPress tips and insights.

Speed up website website speed speed improvement Increase Website Speed jupiter x

How to Add Two-Factor Authentication in WordPress

Two-factor authentication – commonly referred to as 2FA – adds an extra level of protection for user accounts. As much of our daily lives these days happens online with the use of mobile and laptop devices, it’s only natural that our accounts have become a target for criminals. This means that we need to adapt to new technologies to improve our security – and learning how to add two-factor authentication in WordPress can do just that.

Each type of technology has its own benefits and drawbacks – and two-factor authentication is no exception. Let’s see how it stacks up.

Benefits

Two-factor authentication systems gained widespread popularity due to the next level of security it offers users. Briefly, it provides the following benefits:

Stronger protection
Low cost
Easy to implement

Drawbacks

This technology is a reliable and effective system that blocks malicious access to accounts. Like any other system, it still has some drawbacks.

Vulnerabilities
Takes longer to log in
Maintenance

Common Types of Two-Factor Authentication in WordPress

Various types of 2FA have been created and adapted in different environments to increase the level of protection. We’re going to cover this briefly in this section.

Hardware Tokens

Probably the oldest method is the one that produces a token. They normally are in the shape of a key fob or a USB and produce a token key which is for 30 seconds.

Software Tokens

This method is one of the most popular forms of producing tokens. It relies on some software on your mobile app, for example, to provide users with a one-time passcode.

SMS Text/Voice

Some of the big companies like Google have quickly come around to using voice/text message for tokens. Chances are that you’ve used this if you have a Gmail account.

In this method, after entering a username and password, the site sends a one-time passcode to the user’s phone to complete the login process.

Push Notifications

Instead of getting a passcode, the sites send push notifications to a user’s mobile device to approve or deny access.

Biometric

With new innovations such as detecting fingerprints and facial recognition, it’s now possible to treat the user as a token. It’s likely that this method will soon be the most popular.

Popular Plugins for Two-Factor Authentication in WordPress

Some WordPress plugins are available that allow you to quickly implement two-factor authentication in your website. We selected the following plugins based on their popularity and the number of downloads. We’ll briefly explain three of them in the following sections.

Google Authenticator Plugin

The Google Authenticator plugin provides WordPress users with 2FA while also using the Google Authenticator app (which can be downloaded on any IOS or Android devices).

If you’ve taken steps to enhance your security, then you might have already downloaded the Google Authenticator app on your mobile device. This plugin is already in use for a number of other sites and services including Gmail, Dropbox, and Amazon.

Features

Fast setup
Usage of software to generate codes

Quick Setup

Install the Google Authenticator plugin and activate it.
Go to the Settings > Google Authenticator page and configure the settings as it fits your site.

Two-Factor Authentication in WordPress First

Two Factor Authentication Plugin

You can secure your WordPress login with this Two Factor authentication plugin. Users for whom it is enabled will require a one-time code in order to log in.

Features

Supports standard TOTP + HOTP protocols (and so supports Google Authenticator, Authy, and many others).
Displays graphical QR codes for easy scanning into apps on your phone/tablet
TFA can be made available on a per-role basis (e.g. available for admins, but not for subscribers)
TFA can be turned on or off by each user
TFA can be required for specified user levels, after a defined time period (e.g. require all admins to have TFA, once their accounts are a week old) (Premium version)
Works together with “Theme My Login” (both forms and widgets)
Includes support for the WooCommerce and Affiliates-WP login forms
Does not mention or request the second factor until the user has been identified as one with TFA enabled (i.e. nothing is shown to users who do not have it enabled)
WP Multisite compatible
Simplified user interface and code base for ease of use and performance
Added a number of extra security checks to the original forked code
Works together with “WP Members” (shortcode form)

Quick Setup

Install the Two Factor Authentication plugin and activate it.
Go to the Two Factor Auth page and enable it.

Two-Factor Authentication to WordPress Second

Wordfence Security – Firewall & Malware Scan Plugin

Included in the Wordfence plugin is an endpoint firewall and malware scanner, both of which were created from scratch to safeguard WordPress.

This plugin is an all-in-one stop plugin for security. Two-factor authentication is only one of its features.

Features

Two-factor authentication (2FA), one of the most secure forms of remote system authentication available via any TOTP-based authenticator app or service.
Login page CAPTCHA stops bots from logging in.
Disable or add 2FA to XML-RPC.
Block logins for administrators using known compromised passwords.

Quick Setup

Install the Wordfence Security – Firewall & Malware Scan plugin and activate it.
Go to Wordfence > Login Security and scan the codes with your authenticator app. If you need further guidance, you can read this article.

Two-Factor Authentication to WordPress Last

Wrapping Up

In this article, we first explained what 2FA is and the different ways in which it’s used. In today’s world, digital technologies play an increasing role in our lives, which means the importance of security now takes center stage. This is where 2FA comes into play: this system is crucial for almost all websites and it’s highly recommended that you use it for your website. We further highlighted some WordPress plugins specifically designed for 2FA and their features and provided the steps you need to take to seamlessly install each plugin.

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

WordPress Development jupiter x two-factor authentication in wordpress

How to Restrict WordPress Website Content

Restrict WordPress Website Content Featured

If you have a website, you may need to restrict the content of a WordPress website to certain people. You might want to set the content of the site visible only to logged-in users – or you might need it to be even more specific and make it visible to logged-in users with defined roles. WordPress allows you to assign each logged-in user with specific roles. One can then use this role and set content to be either visible or hidden.

Why would you need to restrict content?

There are many reasons – and many ways – you can restrict WordPress website content.

Usually, such restrictions are necessary if you offer your users the chance to download an e-book, file or something else in return for doing something like registering, subscribing to a newsletter or publication.

There are certain benefits for all those WP users and web owners who try to restrict content on a WordPress website. In particular, it will help them create a stronger and larger community around their specific business or undertaking and make more money from “selling” access to tutorials, learning courses, documents, instructions, videos, and audio recordings, as well as from any other type of multimedia or content.

If you want to restrict content on a WordPress website, there are some options available:

Set password protected and private pages
Create a simple Members Area on your WordPress site through coding
Free plugins that will help you control access to your site’s pages, posts, and other content

Restricting content through coding can be tricky for many users, so we’ll discuss the WP plugin you can use to limit access to different types of content.

Password protected pages

The simplest way to restrict access to your page is to use the ‘visibility‘ settings that WordPress provides by default.

You can find these options in the right-hand panel when you add a new page or post:

Restrict WordPress Website Content Password Protected

Under the visibility settings, there are three options:

Public – Under this default setting, the content is available to all site visitors.
Password protected – Only the readers with the page’s (or post’s) password can unlock access to the content.
Private – This option allows access to specific users based on their role.

In other words, the password protected and private visibility options allow you to restrict content.

Password protected pages/posts

This option helps you to have specific pages and posts that are password protected simply by assigning a password to that page (or post). Anyone who knows the password can access the content.

Restrict WordPress Website Content Access

Marking pages/posts private

Private pages don’t require individual passwords to unlock. Access to such pages is granted after checking a user’s role. Typically, only site admins or editors can view such private pages. For others, such pages will display a “Not Found” message or might not even load.

So the big difference between password protected and private pages is that if you don’t have sufficient privileges to view a page, then it won’t be displayed on the website anywhere. To avoid coding when creating a members area, consider installing one of the following plugins. They can help you protect your content from unregistered users:

– Paid Memberships Pro – With this plugin, only your members will get access to different content of your website such as pages, posts, categories, and more.
– Restricted Site Access – This plugin limits access to your site to visitors who are logged in or are accessing site content from a specified IP address range. Guests can be redirected to a different page including a login page or a message displayed by you.
– Ultimate Member – This is a simple and effective plugin that makes it possible to create an easy registration form and to build new communities online. You can create custom user roles and also engage in content restriction on a global scale and on a per post/page basis. This plugin differentiates between three categories: logged-in users, logged-out users and everyone else.

Let’s install the Ultimate Member plugin on the Jupiter X site as an example of restricting WordPress website content.

To install Ultimate Member, you can check out our article, which provides instructions on how to install any compatible third-party plugin. To get started with Ultimate Member, we suggest that you also read their documentation.

After the installation of the plugin, you’ll see the menu labeled “Ultimate Member” in your WP Dashboard. After clicking the menu, you will be able to see the settings. In the settings, you can manage everything including user roles, emails, access control, etc.

Before setting up the plugin, you’ll have to go to the general settings and tick the box labeled “Anyone can register.” This way, every user who is visiting your website will be able to register and become a member of your community.

Restrict WordPress Website Content Community

After that, check out the users setting where you can set the default roles of the members or subscribers. You can set all the fields based on your requirements.

Then you can move to the Access bar where you can manage the accessibility of the website for general users and community members.

You can also build your own restricted access message that users will see when they are trying to access the content they don’t have permission to use or see. You can also restrict, post, page, category and taxonomy access if you want.

If you would like to know how to restrict content for different users, you can read the detailed instructions in the plugin’s documentation.

To learn how to create a registration form on your website, you can refer to this article, which also has detailed instructions.

Setting up a membership website with Ultimate Member is easy. However, you can use any other membership plugin that you think will be better for you, and you’ll be happy with the results. In any case, Ultimate Member offers several benefits and multiple features including front-end user registration/login, front-end user profiles, a drag and drop form builder, and much more.

Wrap up on how to restrict WordPress website content

While it’s possible for you to build a completely private website, sometimes it’s easier to just deny your visitors access to certain content based on their user roles. Select a plugin that you find is the best for your needs and set to display content to a specific group of visitors.

In this particular article, we described how to install and restrict WordPress website content using the Ultimate Member plugin on a Jupiter X site. We’re excited to hear about your experiences or questions, so please comment below!

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

WordPress Development restrict wordpress website content website content

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:

Create a custom Post Type and custom meta fields for it.
Create a Custom Post Type template for the single pages and assign it using Jupiter X.
Create a Custom Listing template and based on that, create and assign it to archive post type templates using Jupiter X.
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.

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:

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 to Artbees Themes Blog for the best WordPress tips and insights.

create custom filters with Jupiter X custom filters Smart Filters

How to Create a Deals Website with Jupiter X

Saving money is essential in today’s world. There are several cost-cutting measures out there like replacing normal light bulbs with LEDs, installing a programmable thermostat, getting rid of unused memberships, and so forth. But that only helps save a couple of bucks here and there. One of the best money savers you can offer customers is a deal or discount. This article explores how you can easily build a deals website with Jupiter X.

What is a deals website?

As the name suggests, a deal or discount website is a place where visitors can purchase some products or services for a discount or a much cheaper price. Also, a deals website can provide their visitors with coupons so they can use to buy products or services cheaper from an online store like Amazon and eBay. There are several deals websites on the internet such as Dealnews, Woot, Offers and more.

WordPress has several plugins in WordPress to conveniently build deals websites such as:

In this article, we cover the Affiliate Coupons plugin to create a simple deals website with Jupiter X.

Affiliate Coupons

Description

Affiliate Coupons is a coupon plugin that allows us to add coupons and deals to our post and page with simple shortcodes. Also, we can show coupons in the sidebar or widget area with a widget.

The coupon shortcode comes with the click to copy the coupon functionality, which means that the coupon code is copied to the clipboard when the user clicks on the coupon.

With the Affiliate Coupons plugin, we can further define categories, types, and vendors and then assign our coupon to them.

Features

Create vendors and predefine affiliate links.
Create coupons and link them to vendors.
Display coupons via a shortcode on the frontend.
Multiple options in order to filter/sort your coupon presentations.
The configuration page for more options and customizations.
Prepared templates: Standard, Grid & List.
Widgets for displaying coupons in your sidebar

Useful shortcodes

Single Coupon Shortcode – Can be used to show any single coupon.
- Example: [affcoups id=”123″]
Multiple Coupon Shortcode – Can be used to show multiple coupons at once.
- Example: [affcoups id=”123,456,789″]
All Coupons Shortcode – Can be used to show all coupons.
- Example: [affcoups] or [affcoups max=”10″]
Coupon Category Shortcode – Can be used to show coupons from a specific category.
- Example: [affcoups category=”123″] or [affcoups category=”group-xyz”]
Coupon Vendor Shortcode – Can be used to show coupons from a specific vendor.
- Example: [affcoups vendor=”123″]
Coupon Types Shortcode – Can be used to show all coupons from a specific type.
- Example: [affcoups type=”123″] or [affcoups type=”type-xyz”]
Show/Hide Expired Coupons – Can be used to show/hide expired coupons.
- Example: [affcoups hideesc_html_expired=”true”] vs [affcoups hide_expired=”false”]
Sorting Coupon – Can be used to sort coupons (acs/desc) or order by (name, date, random, title, description, discount, valid_from, valid_to).
- Example: [affcoups order=”asc”] or [affcoups orderby=”title”]
Coupon Template Shortcode – Can be used to show coupons in standard, grid, list, and widget.
- Example: [affcoups template=”standard”] or [affcoups grid=”3″]

Creating a deals website with Jupiter X using the Affiliate Coupons plugin

At the end of this article, we’ll create a simple website like below.

Deals Website with Jupiter X Demo Website

Note: The scope of this article is about creating a simple Deals website with Jupiter X, Elementor and the Affiliate Coupons plugin so we won’t be able to explain every single detail in depth. If you need more in-depth resources about Jupiter X, you should read the following articles containing its explanatory video.

Our site consists of the header, content, and footer as the main parts. Let’s start by creating the content.

Creating the Content

For creating the content part of the site, we should first install and activate the Affiliate Coupons plugin. We will be able to create the required pages, coupons, vendors and categories with this plugin.

Creating the vendors

Vendors are the shops, websites, and providers that we will provide coupons for on the site. Following the steps below to create vendors.

1. Go to Affiliate Coupons > Vendors.

2. Click on the Add Vendor button.

3. On the new screen, set the Title and Url, then click on the Publish button.

After clicking on the Publish button, the plugin generates a shortcode for us, which we can use in a related page later on.

Repeat the aforementioned steps to create as many as vendors you need.

Create Categories

1. Go to Affiliate Coupons > Categories.

2. In the new screen, set the Name or other optional settings, and then click on the Add New Category button.

Deals Website with Jupiter X Add New Category

After adding the category, a shortcode will be generated for this category.

Repeat the previous steps to create as many as vendors you need.

Creating the Coupons

A coupon is a ticket or document can be used to get a discount when purchasing a product. Let’s add some coupons for your users by following the steps below.

1. Go to Affiliate Coupons > Add Coupon.

2. In the new screen, set the essential settings like below.

Deals Website with Jupiter X Essential Settings

Now, you’ll be able to see a coupon like below.

Deals Website with Jupiter X Coupon Demo

Note: Go to Affiliate Coupons > Settings > General Tab, and set the Button Background Color to #dd2476.

Deals Website with Jupiter X Select Color

Create the Pages

We at least need the following pages to run a proper site.

Home page: The frontend page.
All deals page: Shows all coupons from all categories and vendors.
Categories pages: Unique page for each category.
Vendors pages: Unique page for each vendor.

Create Category Pages

Create a new page, set a title and add a Shortcode widget to the page. Add a category shortcode like [affcoups category=”15″] to it.

Repeat the previous step to create as many as category pages as you need.

Create Vendor Pages

Create a new page, set a title and add a Shortcode widget to the page. Add a vendor shortcode like [affcoups vendor=”74″] in it.

Repeat the aforementioned step to create as many vendor pages as you need.

Create an All Deals Page

Create a new page and add [affcoups] shortcode in it.

Create a Home Page

Create a new page with the Full-Width template then edit it with Elementor.

1. Add a section with five columns as shown below.

2. Set the background color of the section to #f7f7f7.

3. Add an image widget to each column, then set proper images and set a proper link for each image.

4. Add a new section with one column to page then add the Shortcode widget with [affcoups grid=”3″] value to it.

In the end, we should have a page as shown below.

Creating the Header Part

In order to build the header, we can use Jupiter X’s awesome custom header feature in Customizer.

Note: Before creating the header, we need to set our site’s logo from Customizer > Site Identity > Logo.

1. Go to Customizer > Header, select Custom type then click on the New button.

2. Add a section to the page, then add Logo, Flex Spacer, Search Form and two Buttons widgets one by one to the section. Modify the settings to get the look that you want. Consider that all the widgets (except Flex Spacer) have an Inline position that you can set in Advanced > Custom Positioning for each widget.

3. Add another section to the page and set the background color (#f7f7f7). This section displays categories.

4. Add the Icon List widget to the section. Add the necessary items, and set the Text and Link of related pages.

In the end, we’ll have a header as shown below.

Creating the Footer Part

Similar to the Header, we use the Custom Footer feature of Jupiter X.

1. Go to Customizer > Footer, select Custom type then click on the New button.

2. In the Elementor editor, click on the Add Template button.

3. From Block > Jupiter X Footer Category, insert the following footer.

4. Edit the Logo widget and set it to Primary.

5. Replace the top text with “Get free coupons and promo codes from the shops your love in your email“.

6. Replace Phone, Email and Location widgets by a Form widget with only an email field. Set the button color to #dd2476 and some other styling.

That’s a Wrap!

In this article, we defined what a deal site is and then introduced you to some useful plugins that help in creating a simple deal site. More specifically, we used the Affiliate Coupons plugin and its shortcodes to build the site.

Finally, we showed you how to easily create a simple deals website with Jupiter X. Feel free to share your thoughts and experiences in the comment section below!

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

deals website with Jupiter X discount website affiliate coupons

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.

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.

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 to Artbees Themes Blog for the best WordPress tips and insights.

Woocommerce ecommerce online shop JetWooBuilder

How to Build a WordPress Multisite with Jupiter X

Build a WordPress Multisite with Jupiter X Featured

If you’re the owner of several WordPress websites that share common aspects such as themes and plugins, then you might wonder if there’s a more efficient way of managing them as a single install. WordPress Multisite might just be the exact thing you’re searching for. Since version 3.0 came out, WordPress has offered the multisite feature. Multisite allows users to create a network of sites on a single WordPress installation – which ultimately means that you can run as many sites as you like. Read this article in its entirety to find out how to build a WordPress Multisite with Jupiter X.

Advantages of WordPress Multisite

Ability to use the same plugins on your project (e.g. performance, security, SEO).
Flexibility to use one theme as a parent theme on multiple sites.
Ability to share similar media files for your organization’s branch sites.
Saves time on updates to your sites.
Freedom to experiment with new ideas while developing client sites on a temporary domain.
Community networks

Let’s take a look at these benefits in more detail.

Disadvantages of WordPress Multisite

The things that make Multisite a great sharer also contribute to its flaws.

Migrations. Because the network uses one database and stores data from each site in a single database, migration is a bit difficult and complex.
Users. You can’t separate users, meaning that each one will continue having access to the entire network. Also, you cannot create separate users for FTP uploads because only one folder is used for all the sites.
Plugins. You aren’t able to install one plugin for only one site, once the network administrator installs the plugin, it will immediately be available for all the sites in the network. Also, if you delete a plugin, all sites using that plugin will be affected.

So then, this begs the question: Who needs a WordPress multisite network?

Enable a Multisite Network in WordPress

By default, the Multisite Network feature is built-in with each WordPress installation. All you need to do is set up and activate it.

To do this, you’ll need access to the files in your WordPress installation. Use the FTP browser or file browser in your hosting to edit files. This process requires access to two files .htaccess and wp-config.php – both of which are in the base folder of your WordPress installation. Make a backup of both of those before you start. (It’s also a good idea to backup your entire site too.)

To start, open the wp-config.php file in your code editor and add the following code just before the

/* That’s all, stop editing! Happy blogging. */ 

/* Enable Multisite */
 define( 'WP_ALLOW_MULTISITE', true );

Once you’ve done that, save your changes to the server. This code simply enables the multisite feature and once enabled, you will still need to set up the multisite network

P.s. don’t forget to create a complete backup of your WordPress site.

Setting Up WordPress Multisite Network

Now that we have successfully enabled multisite, it’s time to configure the Network settings. Head over to the Tools » Network Setup page to configure your multisite network.

You’ll then see a screen that asks how you want your network to be set up and whether or not you want to use subdomains or subdirectories.

Select which one you want to use, enter the title and admin email address for your network in the Network Title and Network Admin Email fields, and click the Install button.

After this, you’ll be taken to the Network Setup screen. Here, you’ll find some codes with instructions where to paste them. One is for the wp-config.php file and one for the .htaccess file.

How to build WordPress Multisite with Jupiter X Network Setup

Please note: you’ll get different code from this site because we have different sites 🙂

Once you make changes to the files, go back to your site admin. Click the link on the Network Setup screen, and log into your network. Use your default login credentials you used before.

Now, you’ll find that your admin changed a little bit, and you’ll see new items in the toolbar at the top called My Sites and the second one called Network.

My sites – used to manage your sites. Among these settings, not only can you add or delete but you can also deactivate and archive sites.
Network – used for configuration and overall network setup, user roles, plugins and theme management, and their updates.

And that’s it! You’ve successfully activated the WordPress network, and you’re now ready to add your new sites in the network.

Building a WordPress Multisite in Jupiter X

As we now know all the advantages and disadvantages of this feature, we should think about how to use WordPress Multisite with Jupiter X. There might be several use cases, but let’s take a look at the most interesting one.

Let’s say you are a freelancer who travels a lot and loves mountain biking. You want to create a site or sites where all these interests will be published according to their styles.

This is what our task looks like:

Freelance site. This site will have a solid looking design, complete with your portfolios and the services you provide. You’ll also want to list all your clients and their testimonials.
Travel site. Since you’re traveling quite a bit and have accumulated good experiences that you want to share with the world, the site must contain a gallery, trips, places you’ve, as well as your future plans.
Mountain Bike. Since you’re really into mountain biking, you’ll want this website to have a very sporty style. If you’re participating in various races, then you’ll also want to have race events and stylish blog posts where you will publish your previous and future adventures.

Having these sites under one hood where you’ll be able to manage everything from one dashboard sounds like a great plan. Now, let’s take a look at what Jupiter X can offer us and how it can help us achieve our goal.

Currently, Jupiter X offers 250 premade templates that are sorted into 16 categories. You’ll find at least one type of business in this extensive list of premade templates. Now, let’s check what we got for our situation.

The freelance-style website under the creative/portfolio category has 33 premade demos:

How to build a WordPress Multisite with Jupiter X Premade Demos

I will choose Creative Studio, which has a clear design, pleasant typography and colors match – all of which I’d like to incorporate into my website:

How to build a WordPress Multisite with Jupiter X Creative Studio

Travel site – There are 9 templates in this category:

How to build a WordPress Multisite with Jupiter X Category

And my favorite is Adventure since it closely resembles my personality and active lifestyle:

Lastly, for my mountain bike hobby, I’ll go ahead and choose the Mountain Bike template from the 10 available demos. It has everything needed on a hobby site and the design exactly what I want.

Now, as we already know what we want, it’s time to roll up our sleeves and get our hands dirty. This is what our task looks like for now:

Install WordPress.
Setup a WordPress network site.
Create three domains and name them based on our goal (For example Freelancer, Traveler, Biker).
Install Jupiter X and all the necessary plugins.
Install templates for each domain.
That’s it – now it’s your turn to make the final changes to them. The Jupiter X templates are almost ready. All you’ll need to change are the text and images. Everything else has already been taken care of (Thanks to the design team behind Jupiter X).

Wrapping Up

WordPress Multisite is a great feature when used correctly. While it has it up and downsides, you can use it for your personal or business sites, to host client or community sites or to run a WordPress.com-like system of blogs that people create themselves.

In this blog post, we took a deep dive into how you can set up, enable and build WordPress Multisite with Jupiter X quickly and efficiently so you can begin managing several sites at once. We’d love to hear more about your thoughts and experiences in the comment section below!

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

jupiter x jupiter x templates WordPress Multisite with Jupiter X Multisite Network

How to Build an Editorial Calendar for Your WordPress Blog

editorial calendar for your wordpress blog featured

Are you struggling to keep your blog up-to-date? Or do you have a list of great ideas for blog topics but are unsure when to publish each one? If so, then an editorial calendar can help you schedule the posts and assign due dates. In other words, editorial calendars for your WordPress blog allows you to have a plan for your post – there are even some calendar plugins that will help you create a content calendar.

What is an editorial calendar?

An editorial blog calendar is more than just a calendar. It allows you to set it and forget it. It’s hard to simply wake up and know what to blog about that day, how long it’ll take to make a post and how much information you should provide so freely, among other things.

With an editorial calendar, your blog starts working for you, instead of you working for it. Your blog will become a powerful tool for your business that attracts new customers.

Why do you need an editorial calendar for your WordPress blog?

Editorial calendars make it easy to keep track of your blogging schedule, blog post ideas and holidays that might inform your blog topics. Other reasons to use editorial calendars include the following:

Keep your content consistent.
Organize your writers and contributors.
Visualize and share your strategy with your team.
Fill in any content gaps.
Plan your SEO strategy before creating content.

How to create a WordPress blog editorial calendar

1. Determine how many posts per week you can write

When starting an editorial calendar, you first need to determine how many days you will actually post. Don’t try to post seven days a week if you don’t have time for it. It’s better to consistently post twice a month than randomly post every day for one week followed by three months of no posts at all.

2. Define topics for each post day

Think of over 5-10 blog topics related to your business that your customers are interested in. You must know who you are talking to in order to create an editorial calendar of topics that will engage your audience.

3. Brainstorm post ideas

It’s better to take a pen and a paper and write down everything that pops into your head. You should provide interesting and useful information for your potential customers that will attract new readers.

4. Create an editorial schedule

You can do this step with a paper calendar, Excel sheet, etc. Below I’ll show 2 plugins that can be used with Jupiter X theme to create a schedule.

5. Write and share your post

Of course, you have to write posts in order to build your blog. Write at least two blog posts. Schedule those two blog posts to be published on the days marked on your editorial calendar. You can pick a day of the week and write as many posts as you can in one business day so you can focus on other things on other days. It is really up to you. Then once you have a finished post, share it! Share it across your various social media – even send out a newsletter if you want. Your audience won’t know to tune into your valuable information if you don’t tell them to.

Creating an editorial schedule

There are several editorial calendars that integrate directly into WordPress. These calendars will show your planned WordPress posts and allow you to schedule new content.

We’ll review two of them:

Using the PublishPress Calendar, you can easily see when content is planned and when it was published. You can also drag and drop content to a new publication date.

The calendar gives you a powerful overview of your publishing schedule:

editorial calendar for your wordpress blog 1

You can read more about how to install the plugin in the PublishPress documentation.

When you add a new item to the calendar, it will automatically be saved under the Pitch category and assigned to your user account. To see all of your content and its categories, you can go to the PublishPress > Content Overview tab:

editorial calendar for your wordpress blog 2

The Content Overview screen allows you to drill down and see content organized by status, categories or users. You can find out more information here.

The calendar gives you a powerful overview of your publishing schedule. By using the Editorial Calendar, you’ll easily be able to see when content is planned and when it was published. You can also drag and drop content to a new publication date. By default, you see all the WordPress content you have planned for the next six weeks. If you need to drill down, you can filter the calendar by post status, categories, users or post types.

Conclusion

Creating an editorial calendar for your WordPress blog content can be time-consuming, especially if you are posting regularly, but is a vital part of successful blogging. Using a plugin can make it easy to setup and manage your scheduled posts.

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

editorial calendar for your WordPress blog Editorial Calendar

September Crash Course: How to Build a Restaurant Landing Page with JupiterX

Restaurants – which are nearly as old as the service industry itself – have been serving food (hopefully clean!) on-demand and at a reasonable speed (at least the good ones) for all sorts of folks for centuries. Making a website that helps a restaurant business is essential (I know, you already knew that, but bear with me). The question is: “how can you make a website that is more than a digital brochure to actually helps the restaurant?”

My name is Afshin. I’ve been a Jupiter user for 5 years and used this theme to create many WordPress websites for my clients. My real expertise is branding, so I don’t know how to code aside from some handy custom CSS tricks I learned here and there. In this blog post, I’m going to cover the 4 important things that make a restaurant landing page with Jupiter X stand out of the crowd. I’ll then walk you through the steps of how to build it using Jupiter X – it goes without saying that not a single line of code will be written today!

4 Important Things that Make a Restaurant Website Stand Out (With Jupiter X, Obviously!)

1- Look and Feel (Because Instagram!)

The restaurant website should look the part of the cool, hip place it’s representing online. It’s “game on” the second a visitor enters a restaurant’s webpage as they will almost instantaneously make up their mind about that business. Things like using professional, tempting photos of the food and eye-catching pictures of the ambiance go a long way in communicating the quality of the services along with the restaurant’s look and feel.

2- Being Informative (But not Boring)

Having a well-thought-out, honest and clear message that tells visitors why a restaurant is different and more importantly, the type of cuisine served can leave a lasting impression. To make the webpage actually useful for visitors, information regarding working hours and the restaurant’s location should be easily accessible (But careful! This info shouldn’t be in their faces the whole time!). These details are the most looked at on any restaurant’s website. Let’s not forget people usually just Google the name of the place and working hours, which means that we need SEO to work right there and then. It would be a definite plus if visitors could also make reservations directly from the website.

3- Mobile First (For Real)

Have you seen those people who have their smartphones with them day and night? Yeah, they’re probably going to visit your website on those very same phones (After all, who checks a restaurant webpage on a desktop computer sitting in an upright position?!). So the website should be mobile-friendly or – as web designers like to put it – “responsive,” so people can find what they need on their tiny screens before moving onto the competition.

4- It Should Be Fast (Or Don’t Bother!)

Last but not least, your restaurant website needs to be snappy. I mean, you probably won’t get a second chance to be snappy (remember those people with smartphones? They’re not really known for their patience), so choose your hosting service, CMS, themes and plugins wisely because that website is going to fill your spot online. It better be worth it and fast.

Making a Restaurant Landing Page with Jupiter X

In this part of the blog post, I’ll explain the steps required to recreate the Jupiter X Pro Template Restaurant landing page with Jupiter X, Raven elements and Elementor. If you need more details about any of the steps, you can watch the video to see the entire process. I’m going to assume you have a fresh installation of WordPress, a registered Jupiter X WordPress Theme, installed necessary plugins and activated them.

Restaurant Landing Page with Jupiter X Essentials

Setting up the essentials

Making a website starts with the essentials like the website’s title and subtitle, its colors, typography settings and a few other global customizations. You can adjust these settings via Customizer. If you are unsure where to start, you can take this file and simply import it in your own Jupiter X installation (I won’t tell anyone, wink!). After importing the settings into Customizer, it would be a good idea for you to explore Customizer and get an understanding of what can be changed/adjusted and where, so you can make these settings in future projects using Jupiter X. I would recommend checking the site identity, typography, header, footer, and menu.

Restaurant Landing Page with Jupiter X Menu

Creating the Navigation Menu

When you’re setting up the menu, it’s imperative that you consider which pages matter more and how most people would go about finding the relevant information they are after. To create your menu:

Go to Appearance > Menus, and create a menu.
Since this is a one-pager, you’ll need to add menu items as Custom Link.
Use titles such as #about (also known as anchors – more on this below) and save.

Restaurant Landing Page with Jupiter X Header

Making a Header and Footer for your Restaurant Website

Now that we took care of what is under the hood, it’s time to create the header. Headers matter as they are usually the second thing that catches visitors’ attention. Creating headers with Jupiter X is really straightforward.

In the Dashboard > Templates > Header tab, you can (create and) add a header. In the next screen, you can simply import one out of many header templates. Choose the one with the Jupiter X tag that looks like the one in the template. You can edit the template in Elementor to give it the look you need. The process for the footer is exactly the same.

Restaurant Landing Page with Jupiter X Hero

Hero (Go big or go home!)

This is the first thing visitors to your website will see. Done correctly, it’ll save the day, hence the name hero. The hero section of a website usually has a hero image, an eye-catching graphic element, two to three pieces of typography and a call-to-action button (Duh!). To create the hero section:

Add a section from the left sidebar then add a heading, headline and text paragraph.
Edit the content in each of the sections you added. The great thing about the Jupiter X headline element is that it allows you to edit the text in two separate boxes and automagically applies two sets of typography and color adjustment to them.
Don’t forget to set the headline to H1 and the heading to H3 so they will get their size color and font from the customizer settings that you imported before.

Now add the button and change the text and color (the accent color hex code is #ff5600).

Intro (The specifics…)

If the user scrolls past your hero without bouncing (closing the browser tab), you are either lucky or have done a good job with the hero section (or the visitor just has nothing better to do!). Either way, you must now offer more details about your services to your online walk-in, so you need details on what you serve and why your place is different. But the trick is that you can’t just pile it on. It’s better to share this info in a structured way. Using icons really helps.

To create this part:

Add a section, then a headline, and set it to H2. Edit the two sections according to the template.
Add a sub-section and then click on the top-right corner on either of the columns to add one more column.
Drag and drop an image box element in on the columns, add the image from the settings and edit the styling from the middle tab for both the image and the content (watch the video for the full setting description.)
Right-click and click “duplicate it twice,” then drag and drop each of them in empty columns and edit the content.

History (Why should I trust you?)

You can claim you are the best, hippest, most awesome place in the city that serves Italian cuisine. But I would most probably not take your word for it. In this way, you should “show your work” and to build trust, a business (especially restaurants) should share their credentials such as the head chef, awards and the number of years in operation.

To make this part:

Add a section and a subsection.
Edit the column to use 65% of the total length, add an image to the right column and choose an image for it.

On the left column:

Add a heading (H3), a Jupiter X headline (H2) and edit the content accordingly.
Add a subsection then drag and drop image boxes into one of the columns. Edit the image and content, set up the style and make the title H3.
Now duplicate the image box three times and carry two to the right column in the under-section.

The Menu (The Juice)

Whatever you do, please don’t stick a picture of your restaurant’s menu on the first page – or any other page for that matter. The easy explanation is that Google doesn’t like it, and neither do your visitors. Offering text in the form of an image makes your website look unprofessional and difficult to operate and we don’t want that. Offer your menu with mouthwatering photos of the meal. Jupiter X has a set of comprehensive style options and a visually-appealing gallery element that can come in handy when we want to make any product/project showcase (namely a restaurant menu).

To make this part:

Add a section. Then you’ll need a heading (H3) and a headline (H2). Edit the content exactly like the similar ones above.
On the sidebar, search “tabs” and add the one you see in the picture below. Note that like the header, this element needs the content to be made beforehand so it can actually work.

Leave the tabs (save your work first!), go to Dashboard > Templates > Saved Templates and click Add New. (Since this is a mock website, we made only one template. But if you really want to make your tabs work like tabs, you should make five templates – one for each tab).

In the window that opens:

Choose the Section and give it a name such as “Offered Menu.”
Click “Create Template.” Add a subsection and duplicate one of the columns to get three columns. Also, make sure that you set the inner section to Full Length from the Layout.
Search for the Animated Box and then drag and drop it in one of the columns. Edit the content as seen in the picture below:

In Style > General, apply the below settings.

Duplicate this element four times. Put one in the middle column and two in the outer ones.
From Style > General, change the middle animated box.

Now you can click publish, and… Congrats, you’ve created your first custom template!

Testimonials and Partner Brands (Do not fake it until you really make it!)

Typically, people like to read about a new place before trying it. For that reason, having your own set of short review excerpts – especially if they are from Yelpers who have a high readership on the website – can really close the deal for you. To do this, you can invite a bunch of reviewers to eat at your restaurant to get their opinion. Also having the logos of your suppliers on your page gives a sense of trust and reliability.

To build this section:

Add a section.
Drag and drop testimonials, a heading (H3), a headline (H2) and finally a brands element to the section.

I’ve explained how to style the testimonial and brands in the video but In short, you’ll have to add testimonials one by one. We’ve included a picture, name, position and the rating in each item. In the style tab, you can change the shape of arrows, how pictures are shown and the testimonial background.

The same goes for the brands as you can adjust them, like below:

Restaurant Landing Page with Jupiter X Reservation

Have them make a reservation online (Don’t forget to tell your staff you have this feature on your restaurant website!)

Yes, yes, I know with a gazillion apps out there for making reservations at restaurants and bars, you’re thinking “who needs a reservation form on their own website?” Well, EVERYONE! If you don’t include a form to make a reservation, they’ll have to call your restaurant (What if your staff don’t hear the phone ring?) or use an app to make a reservation (What if they cannot find your place on their specific app?). So make everyone’s life easier and just add the form and link it to an email address you would always check. By the way, a little birdy just told me that soon taking reservations on your website in Jupiter X will be similar to taking orders on an e-commerce website, which would make the task of following up on reservations much easier and more practical.

To make the last part of your webpage’s body:

Add a heading (H3), a headline (H2) and finally a subsection.
Drop an image (and choose an image for it) into the right column and a Jupiter X form element into the left column.
In the settings you change the type of information you get from each field also the color, font, spacing and all styling details of the form element.

Setting up all the nitty gritties

Obviously, without adjusting all your paddings, margins and other little details, you won’t have a market-ready webpage. In other words, don’t forget to retouch each section to give it that nice and sleek look. I tried to only include the gist of the tutorial in the blog post to avoid getting TLDRs in the comment section.

In the video tutorial, I’ve made the whole restaurant landing page with Jupiter X from scratch without a single line of code – and this includes all the small settings and adjustments that make it look the way it looks. Make sure to watch the tutorial!

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

jupiter x restaurant website restaurant landing page with Jupiter X

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

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.

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.

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.

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.

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.

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 to Artbees Themes Blog for the best WordPress tips and insights.

WordPress Development jupiter x A/B Testing Troubleshoot an issue