How to Run a Speed Test for a WordPress Website

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

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

Reasons for a slow website 

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

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

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

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

Poor hosting

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

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

Poorly coded themes

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

Third-party plugins

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

Large Images

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

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

Before running a WordPress website speed test

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

  • Check different geographic locations

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

  • Enable the website cache

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

  • Enable the website firewall/CDN

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

Best tools to test website speed 

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

GTMetrix

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

Speed Test for a WordPress Website - gtmetrix

WebPageTest

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

Speed Test for a WordPress Website - webpage test

Chrome DevTools

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

Speed Test for a WordPress Website - devtools

Wrapping Up

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

Automate Marketing for WordPress: How to Choose a Tool in 2020

Due to the extensive breadth covered by marketing in today’s world, the field is inundated when it comes to touchpoints, channels and ins and outs. Throughout the years, marketing has become increasingly comprehensive to cover more and more aspects of a business – from increasing conversions to ensuring customers are happy, from fostering a loyal customer base to encouraging advocacy for a brand.

In its most traditional form, marketing aimed to appeal to people and sell something to them while you had their attention. However, marketing has transformed since its early days to engage with the customer throughout their entire journey.

The factors already mentioned mean that the marketing world is filled with tools. Today, you can find a number of tools that help with every aspect of the customer journey. This includes tools for advertising and SEO, automating email campaigns, personalizing websites, moderating affiliates and referrals, among much more.

Needless to say, a marketer’s job has become much more complicated over the years. In order to carry out comprehensive marketing campaigns and to eliminate legwork, redundancy and dependency, a typical marketer has to work with at least 5 tools. Eliminating excessive repetition and legwork is reason enough to allow for a new vertical function in the digital marketing realm called marketing automation. However, this is not the biggest hurdle that automation should overcome.  

Within the scope of this blog post, we’ll cover what marketing automation in WordPress looks like today, discover what effective and efficient marketing automation is and take a look at some helpful products that allow you to automate marketing for WordPress.

Personalized marketing is in 

To quote Seth Godin, “Marketing is a contest for people’s attention.” However, this is no longer the name of the marketing game as everyone is constantly hit with marketing ads. In a day and age of millions upon millions of ads, you need something to stand apart from the competition. What you need is relevancy.

automate marketing for WordPress set godin

So what exactly does this mean? The message you convey should be relevant throughout all marketing channels, including your website content, email and marketing campaigns, ads, and so on. Moreover, the aim of marketing automation shouldn’t be simply cutting down on legwork or automating repetition, but to incorporate attributes that personalize automated content.

Tools that personalize automation for WordPress need to be able to send out content customized for each and every visitor based on particular preferences, purchase histories and attributes.

Factors to consider when selecting an automation tool 

With this new type of marketing in mind, it’s crucial to choose a tool that provides the features listed below in order to automate marketing for WordPress.

Omni-channel structure

As we already mentioned, your campaigns should include personalized content on every main marketing channel, including websites, popups and emails. And all these channels should be in tune with one another. Failing to align these campaigns with each other will cause a rupture in the customer journey.

Most of the marketing automation tools – both for WordPress and other platforms – do not have this feature and only deal with one or two aspects such as website content or email campaigns. A tool like Growmatik combines all the tools and channels needed to automate marketing for WordPress.

Segmentation capability

The first step in automate marketing for WordPress is identifying segments that break down a customer base depending on specific characteristics or behavior. Site visitors or potential leads could be segmentations that you use to expand your customer base. To do this, the automation tool we select should have a broad selection of segmentation filters, including behavior, personal and contextual. A vaster range of segmentation criteria will make more capable automations.

Rule creation workflow

The type of automation tool we’re after needs to be able to trigger automation whenever particular conditions are met. The easiest and best way to do this is with the “IF this THEN that” rule. These rules should be implemented without the need to write code.

UX of builder and personalizer tool

Another thing to take into account is the type of tool you’d like to work with. Would you rather work within a custom user interface and tuned user experience (such as Growmatik) or would you rather create and maintain automations in the native WordPress backend with a customizer, meta options and custom fields at your disposal? (such as If-So and Groundhogg).

Performance consequences

Automation is related to your website speed and performance. Automation rules are set to be triggered when specific events occur. It’s the responsibility of your automation tool to frequently and repetitively (sometimes every hour) check to see if any of these events are triggered for a user so it fires the relevant action. This whole operating and execution requires server resources, and it can become a serious matter when your user base grows. 

If the tool you choose to automate marketing for WordPress is not a service but just a WordPress plugin (such as AutomateWoo, If-So, Groundhogg and Logichop), the server resources required for this operation will be on your server’s shoulders. You should make sure that you have enough server resources to cover these operations, otherwise your website speed and performance will be compromised. However, if your automation tool is a service such as Growmatik and Jilt, your server resources won’t be used to operate and execute the automations, and it will be included in the service you pay for.

Email sending service

When researching different tools, you’ll want to check to see if they include sending emails as part of the plan. Several of the tools on the market  such as AutomateWoo and Groundhogg will require you to link them with a third-party email sender, which incurs an additional fee. Or they might ask you to use your own email server, which also necessitates additional resources and technical know-how. While tools such as Growmatik and Jilt include the email delivery in their service.

Pricing

You’ll want to make sure that the licenses or membership subscription in your paid plan has all the features you need. Some tools such as Jilt might allow you to access their features but limit the extent to which you can use them. Other tools such as Groundhogg and If-So might limit both features and usage. We recommend that your preferred tool allows you to test out the product for free or through a trial plan (ideally with unlimited features such as Growmatik), so you can make an informed decision before purchasing.

Let’s now dig into a handful of the automation tools out there for WordPress and WooCommerce.

automate marketing for WordPress - Growmatik

Growmatik is a unified tool to automate marketing for WordPress and WooCommerce that takes information about user types and behavior and breaks them down into segments. It then further uses this info to tailor a harmonized customer experience across multiple channels: emails, popups and webpage content.

You can create automations in the form of the “IF this THEN that” rule with premade segments, or you can build custom segments with 50 attributes. Growmatik offers both premade templates and powerful native builders for your emails, popups and web page personalizations. With Growmatik, you won’t need a third-party email service to send your emails and your server resources will not be used for automation operations.

Automation ChannelsSegmentation CriteriaAutomation BuildingBuilders/Personalizers
✅ Email
✅ Webpage Content
✅ Popups
50 Attributes in:
✅ Personal details
✅ Referral activity
✅ In-site activity
✅ Email activity
✅ Shopping activity
– IF this THEN that
– Independent interface
– Native email builder
– Native popup builder
– Front-end web page personalizer
Email Delivery ServiceRequired Server resourcesPricingFree Plan
✅ Included✅ Included✅ All features available in all tiers
– Starting from $20/month when annual
✅ All features available
– 2000 subscribers
– 10,000 visits / month
– 50,000 emails / month
Growmatik Features
automate marketing for WordPress - Groundhogg

Groundhogg is an email funnel builder for WordPress and with a wide integration list. It connects the funnels that you build with a third-party email service of your choice and doesn’t send it itself. Although you will need more tools to automate your popups and personalize web page content, Groundhogg offers a decent integration support to connect it to different tools. It uses the native WordPress backend (Customizer, post types, meta options, etc) that makes it a decent email automator for anyone used to the WordPress classic backend experience.

Automation ChannelsSegmentation CriteriaAutomation BuildingBuilders/Personalizers
✅ Email
❌ Webpage Content
❌ Popups
❌ Personal details
❌ Referral activity
✅ In-site activity (very limited: Signup, form entry, link click, tags)
❌ Email activity
❌ Shopping activity
– Building funnels
– WP native interface
– Basic text-based email builder within free plan
– Third-party integration within paid plan
Email Delivery ServiceRequired Server resourcesPricingFree Plan
❌ Not Included❌ Not Included❌ Some features locked in lower tiers
– Starting from $20/month when annual
❌ Some features locked
– Send emails (no integration), create funnels, CRM, Reporting, Rest API.
Groundhogg Features
automate marketing for WordPress - If-So

If-So is a personalization plugin with dynamic content for WordPress, allowing you to add or replace content on your website based on visitors’ profiles or interactions with the site. It uses WordPress backend meta boxes and custom fields. Like Groundhogg, If-So uses the native WordPress backend and is useful for an average WordPress user to personalize the appearance of their WordPress website.

Automation ChannelsSegmentation CriteriaAutomation BuildingBuilders/Personalizers
❌ Email
✅ Webpage Content
❌ Popups
✅ Personal details (Limited)
✅ Referral activity
✅ In-site activity (Very limited)
❌ Email activity
❌ Shopping activity
– Condition & actions
– WP native interface
Personalizing via WordPress backend
Email Delivery ServiceRequired Server resourcesPricingFree Plan
❌ Not Included❌ Not Included❌ Some features locked in lower tiers
– Starting from $139 lifetime for 1 domain and up to 1000 geolocation sessions
❌ Some features locked
– Targeting based on device, logged-in users, date, IP and geolocation (up to 250 session/mo)
If-So Features
automate marketing for WordPress - Logic Hop

Logichop is also a page content personalization for WordPress where you define Logics (which are the conditions) and blocks or bars which are the content to show if the condition is met. To create recipes (rules), you should use backend custom fields in one step and assign those rules to triggers inside your page builder as another step. LogicHop supports a variety of page builders and lead generators, but you need to install a separate plugin for each of them.

Automation ChannelsSegmentation CriteriaAutomation BuildingBuilders/Personalizers
❌ Email
✅ Webpage Content
❌ Popups
40 attributes in:
✅ Personal details (limited)
✅ Referral activity
✅ In-site activity
❌ Email activity
❌ Shopping activity
– Condition & actions
– WP native interface
Personalizing via WordPress backend
Email Delivery ServiceRequired Server resourcesPricingFree Plan
❌ Not Included❌ Not Included❌ Some features locked in lower tiers
– Starting from $199/year
❌ Some features locked
Logic Hop Features
Jilt

Jilt is an email marketing automation tuned for WooCommerce. It offers segmentation, personalization, broadcast and transactional emails. It enjoys wide segmentation criteria, deep integration with many e-commerce platforms including WooCommerce and a powerful native email builder. With Jilt, you won’t need a third-party email service to send your emails.

Automation ChannelsSegmentation CriteriaAutomation BuildingBuilders/Personalizers
✅ Email
❌ Webpage Content
✅ Popups
✅ Personal details
❌ Referral activity
❌ In-site activity
✅ Email activity (limited)
❌ Shopping activity
– Rules for user types
– Independent interface
– Native email editor
– Native Popup Builder
Email Delivery ServiceRequired Server resourcesPricingFree Plan
✅ Included✅ Included✅ All features in all tiers
– Starting from $29/month
❌ Some features locked
– Up to 300 subscribers
– Up to 600 emails/mo
Jilt Features
AutomateWoo

AutomateWoo is an email marketing automation for WooCommerce where you can create workflows for different segments, and emails are rolled out according to the workflow conditions. In order to make sure your emails don’t end up in the spam folder, you will need to connect a third-party email sender service and pay for it separately, but AutomateWoo offers built-in reports and analytics of all your campaigns.

Automation ChannelsSegmentation CriteriaAutomation BuildingBuilders/Personalizers
✅ Email
❌ Webpage
❌ Popups
✅ Personal details
❌ Referral activity
❌ In-site activity
❌ Email activity (limited)
✅ Shopping activity
– Rules for user types
– WP native interface
WordPress-based email editor
Email Delivery ServiceRequired Server resourcesPricingFree Plan
❌ Not Included❌ Not Included– $99/year❌ Not Available
AutomateWoo Features

Epilogue

In this post, we provided an overview of marketing automation in WordPress, discussed how personalization is the best way to automate marketing for WordPress and what to take into consideration when selecting a marketing automation tool for WordPress and WooCommerce. In today’s ever-evolving world, marketing will continue to reinvent itself to retain its relevancy. Undoubtedly, personalization is the first step in this process. To hop on today’s marketing bandwagon, we need to understand how we can personalize our message and offerings to make it relevant for each user type.

How to Perform a WordPress Security Audit

WordPress is the most widely used free CMS platform, which makes doing a security audit extremely important. Failing to run these audits will provide hackers with greater opportunity to break into your site. Once they have access, they can add illegal content, steal personal data and engage in many other malicious actions. In other words, performing a security audit will allow you to prevent hackers from taking control of your site. While this might not be an all-in-one solution, updating your website security will help in making your site more secure. In this post, I’ll explain the steps you need to take to perform a WordPress security audit.

What is a WordPress security audit?

A WordPress security audit is the process of checking for security gaps by looking to see if there is any suspicious activity or malicious code on your site. You might be concerned that this process is too complicated and that you’ll need to hire a developer to perform the audit for you – worry not! In fact, the steps are quite simple, and you can perform them manually. 

Take note that online audit services are also available that you can use to check the security of your website. 

Below, I’ll describe the steps you need to take and which automated tools you can use to run the security check automatically.

When to run a security audit

Even if you don’t detect any suspicious activity on your site, it’s prudent to run a security audit every quarter. However, if you notice something odd happening on your site, you should check it immediately.

You should perform a WordPress security audit if you notice any of the following signs: 

  • Your website started loading too slowly 
  • Your website traffic suddenly dropped
  • Some new accounts appeared that you didn’t create, you received forgot password requests or login attempts on your website
  • Some suspicious links were placed on your website 

If you experience all these issues, you should perform a security audit immediately! Let’s move to the section below, so I can show you how easily you can get this done.

How to perform a WordPress security audit 

To evaluate your site from top to bottom, you need to first go through several steps. Here are the most important tasks that need to be done to perform a security audit.

Check username and password

What username do you use to log onto your WordPress site? Is it “Admin”? If so, you must change that username. To do this, you need to create a new user at first that has Administrator rights. Then delete the “Admin” user and assign all content to a new user that you created.

Make sure you’re the only user who has Administrator rights. If there is another user with an Admin account, you should remove it by creating a new user for him/her. If you keep two Admin usernames, please note that your site will definitely be under brute force attack.

As for the password, it must be difficult, so it’s hard to guess. Use not only letters but also symbols and numbers. You can generate a secure password with an online service.

Another tip to secure your WordPress site is to use two-factor authentication. It requires a user to enter not only a password but also a security code which is usually sent to a phone or an email. So if someone guesses your password, he/she won’t be able to log in as they would also need a security code, so they will need access to your phone or email.

Updates

Updates are very important as outdated items are the first cause for security issues. You need to make sure your WordPress plugins and themes all have been updated for their latest versions. Do this easily via Dashboard > Updates and update all software. If you don’t regularly update the items, you’ll then run the risk of getting your website hacked. Read more about why updates are so important in this article.

Remove unused plugins and/or themes

Check the list of the plugins in the Plugins menu of your dashboard. All plugins should be installed only from the trusted sources – avoid installing any pirated or nulled version of plugins and be sure to delete them immediately if you have any. Such plugins will infect your site with malware and open backdoors for hackers. 

If you have some inactive plugins that are not required for your theme anymore, delete them. Use only the ones that are needed for the site.

perform a WordPress security audit

The same goes for themes: keep only the one that you are using. There’s no need to install different themes as they may provide vulnerabilities. Make sure your active theme is up-to-date!

Run backups

Having a backup of your WordPress installation is extremely important and useful. If anything goes wrong (such as your site being hacked or simply broken after an update), you can always restore the site from a backup. We already have some articles regarding backup solutions, so you can find the detailed information about backups here:

How to Perform a WordPress Backup in Jupiter X with BlogVault

How to Backup Your WordPress Database Like a Pro

Restore Your WordPress Website Using a Backup: Here’s How!

Run a security scan

There are many online tools that help you to check your site for vulnerabilities. For example, one of the tools you can use is the Free WordPress Website Security Scanner. Note that such scanners check only public pages of your site. To run a deeper scan, you can use security plugins. When looking for a plugin, check if it has these features:

  • Malware scan
  • Malware cleanup
  • Malware alert
  • Login protection
  • Activity log
  • Firewall

Further down in the article, you’ll find the plugins that you can install.

Check the file/folder permissions

It’s also important to find out what permissions are set for the files and folders in your WordPress installation. The correct permissions should be 755 for folders and 644 for files. You can ask your hosting provider support to help you change permissions. Don’t hesitate to contact them as the permissions are a server-related issue and are not related to the WordPress theme. The detailed description about permissions is in the WordPress Codex.

Check the upload file extensions

Double check the upload file extensions on the forms anywhere on the website as they might be used as backdoors for attackers. Read this doc to find which file types are accepted in WordPress.

Check additional code

Also check every custom code you’ve added to your website because many of the custom codings do not pass any security test. As an example, a JS customization that uses cookies can be used to steal some user information.

Automatically perform a security audit

To keep records of all activities on your site and automate the security audit, it’s better to use a WordPress plugin.

The WordPress Security Audit Log plugin is one of the best tools that will make it easier for you to run security checks – and you’ll have the logs of all user activities. The detailed knowledge base and the documentation of this plugin can be found at this link.
Another great plugin for security audit is Sucuri Security.

perform a WordPress security audit

It provides protection from DDoS attacks, improves your site loading speed, scans your files for suspicious code and has many other features. For more information, check the Sucuri knowledge base.

Using a security plugin, your site will be protected and no one suspicious will be able to attack it. So keep that in mind when installing such a plugin.

Wrapping up

By taking the steps outlined above, you’ll be able to prevent hackers from entering your site. As mentioned earlier, it’s best to perform these tasks frequently so that your site is both up-to-date and secure. Performing a WordPress security audit isn’t too difficult or time-consuming, and you’ll save hours of time if anything happens to your site.

Also the following articles may be interesting for you regarding this topic:

Make Your WordPress Site Safer, Learn to Create Your Own Login URL

Tips for Successfully Taking Over an Existing WordPress Site

How to Add Two-Factor Authentication in WordPress

How to Use WhatsApp with WordPress to Boost Sales and Personalization

This is a guest post contributed to Artbees Themes blog by Thuy Nguyen from Ninja Team.

WhatsApp is not a social network but rather a messaging service. However, if you’re running an online store and you want to boost your customer base, using WhatsApp with WordPress with a click-to-chat functionality can earn a solid spot in your marketing strategy – but only when done correctly.

In this article, I’m going to show you 4 ideas that you can use to take advantage of WhatsApp’s ever-expanding user base with Jupiter X or any other WordPress theme . Two of these ideas rely heavily on the WhatsApp Chat WordPress plugin. With these strategic solutions, we’re looking to help sales, service and support teams engage with online customers on the channel they already prefer.

Let’s hop on the first WhatsApp plugin tactic which is very budget-friendly:

Create a click-to-chat floating widget

One great way to use WhatsApp with WordPress is through adding a click-to-chat widget onto your site. The mission of this WordPress plugin is simply to make it easier for people to contact you via WhatsApp. Its strong points lie in its elegant design and premium features. and you can use it completely for free.

Let’s start off by downloading this WhatsApp plugin from the WordPress repository.

Run a click-to-chat floating button

After activating, you can add your WhatsApp number for the floating widget. This widget button can be displayed on every page of your site or only on selected pages. What’s even better is that this plugin allows you to add multiple WhatsApp accounts belonging to  other support agents with his/her own name, title, avatar and greetings.

It’s always better to greet someone by name. Thus, vice versa, it’s much better when your customers know who they’re talking to. This simple personalization hack can create mutual trust through chat communication and build customer loyalty by leaving a good impression from the very first conversation.

Set a pre-defined message using shortcode

For each agent’s WhatsApp account, you can set a different button label and pre-defined text. Here you can insert shortcode like [njwa_page_title] or [njwa_page_url] to output your visitor’s current page title and URL, respectively. For example, when I set this text field just as: 

Hello, I’m interested in [njwa_page_title] at [njwa_page_url] 

Imagine how easy it would be for any WhatsApp user to ask whatever questions they have in mind no matter where they are at that time on your site:

As you can see, predefined text is not only a great personalization tool but also a time saver. This little pre-filled text message will definitely steer your customers toward making a purchase.

Assign customer requests to proper service representatives

If your business provides a wide range of products or services, your support agents might be overwhelmed by customer questions inside of loads of conversations across multiple support channels. So why not enhance your own support funnel by using WhatsApp with WordPress?

Create custom click-to-chat button on landing page/post

Let’s say you’re running a lead-collecting campaign in which people have to message you on WhatsApp to get the coupon codes. 

Instead of placing the regular coupons downright to your prospective customer’s face, you can now combine strategic couponing by building your own WhatsApp contact list and offering exclusive coupons to those who message.

  1. Add a custom button in WordPress

To do that, you need to add a WhatsApp block in Gutenberg editor. There, you can easily find the block settings and customize your text, button color and phone number as you see fit for your campaign.

Once published, your post or page will look like this. This way, your page visitors can get the message directly, and they will be intrigued to tap the button.

  1. Automatically reply to those who message you via that button

Now that people are pinging you on that specific phone number, you can set an automated reply to those messages using the WhatsApp Business App

After downloading the app to your smartphone, enter the very phone number that you want to use in this campaign. Head on over to Settings > Business tools > Away message. Choose Custom schedule and set the private message including the tailored coupon code.

With this simple configuration, everyone contacting you will promptly get their coupons during your campaign. And when the schedule ends, your away message will be automatically toggled off by this WhatsApp Business app.

Segment consumer requests on WooCommerce product pages

Here comes another trick to taking your WooCommerce single product pages to a new level. This WooCommerce button allows you to choose a specific supporter to be there on product pages. This feature is readily built into Ninjateam’s WhatsApp plugin. So all you have to do is go to WhatsApp settings > WooCommerce button. There you can switch it on, adjust the display position and select the agents you want to show.

On the front-end, your support agent account will be displayed in the order you set. If you set the agent account to “Always available,” the button appears in WhatsApp’s green by default or in your chosen color. Otherwise, it turns grey to indicate an unavailable status.

use WhatsApp with WordPress

Hence a stronger relationship can be built between your consumers and your brand!

Add a WhatsApp call-to-action in Facebook Ads

If your consumers are heavy users of WhatsApp, why not give them the option to click on a chat welcome via Facebook ads?

To add this option to your Facebook Ads Manager, you need to link your Facebook fan page to your WhatsApp account first. This can be done easily by going to your Facebook fan page > Page Settings > WhatsApp, then input your business phone number. Once successfully connected, you can now set a new campaign with the call-to-action of “Send message on WhatsApp.”

use WhatsApp with WordPress

You can even suggest multiple options for your audience by clicking Add a question and listing what you want to express to your new customers. With this type of ad, the insights of your customer needs or concerns are just a tap away!

use WhatsApp with WordPress

Improve your WhatsApp Business database

The WhatsApp Business app already includes many useful tools to run your online store.

  • Product Catalog

This feature helps put up a sleek and handy showcase for your products or flagship. Cataloged products here also make it smoother when you want to share it in your WhatsApp groups and other circles.

  • Away Messages and Greeting Messages

As discussed above, those message settings are not only useful to deliver greetings to customers— they can also be very helpful in boosting your coupon marketing strategy! 

  • Quick Replies

These shortcuts for lengthy messages are a big time saver when you have an enormous number of messages during peak seasons or omnichannel marketing campaigns.

  • Labels

With default colorful labels for New customer, New order, Pending payment, Paid and Order complete, this gives you initial ideas in how to organize your most important assets: WhatsApp users and their conversations. Therefore you can take good care of them and find the chat details easily when you need to.

Final thoughts

Given the fact that WhatsApp is being the most widely used instant messaging app, it’s a great way to offer prospective customers with quick access on a platform they’re already comfortable with. 

With WhatsApp expansion into web and mobile apps, you can find plenty of WordPress plugins to help integrate click-to-WhatsApp functionality to your website.

Moreover, your business digitization has been topped with the help of the versatile WhatsApp Business app. Backed by Facebook, the WhatsApp Business app has been built with full-fledged business tools for small to medium-sized stores, while WhatsApp Business API is promising to gear up for bulk messaging, automation, chatbot and other tactics for large to enterprise-level businesses.

Have you set up a WhatsApp click-to-chat? What do you think of its capabilities or do you want other features? Let us know in the comments!

How to Install and Set Up WP Rocket with Jupiter X

Setup WPRocket with Jupiter X featured

This is a guest post contributed to Artbees Themes blog by Vashishtha Kapoor.

Choosing WP themes and plugins can be a daunting task, but this article will help you run a WordPress site hassle-free with an upgraded performance using WPRocket and the Jupiter X theme. WP themes and plugins are the bread and butter for the smooth functioning of every WordPress site. Therefore, we need to tread cautiously.

As many people often fail to choose the right themes and plugins for their WordPress site, I decided to do the hard work so you won’t make the same mistake.

So, in this article, I’ll provide more detail on both Jupiter X (as well as how to install it) and WPRocket and walk you through step-by-step how to install and setup WPRocket with Jupiter X, so you can be on your way to boosting your site’s performance in no time flat.

What is WPRocket?

WPRocket is one of the fastest WordPress caching plugins that loads your WordPress site in just a few clicks. It offers rocket-speed performance with minimal configuration settings, so you don’t need to waste your time on complexity. With such a killer performance booster plugin, your site will experience superior performance without any effort. If you face any issues with the speed of your website, then the Rocket support team is on standby to fix your site issues. You’ll never experience simplicity like WPRocket, as it starts caching your pages instantly without any coding skills required.

Get WPRocket Now

The goal of this test will be to compare the results before and after optimizing one of our demos. We’ll first look at the test results on a demo that has not been optimized and then we’ll enable features of WPRocket to see it how impacts the site’s performance.

How to install the WPRocket plugin

Before you install and setup WPRocket in Jupiter X, ensure your site meets the following basic requirements:

PHP 5.6 or more, Apache (with mod_rewrite, mod_expires, mod_deflate), NGINX, Litespeed or Windows, Pretty permalinks, Self-hosted WordPress site.

Follow these simple steps to install the WPRocket plugin using the WordPress dashboard panel.

If you have already logged into your WordPress dashboard, go to Plugins> Add New> Upload Plugin.

Setup WPRocket with Jupiter X

You must have a zip file of the WPRocket plugin. Click on Choose file and browse the zip file from your system and click on Install. Wait for the theme to be installed.

If everything goes smoothly with the installation process, the plugin will be installed successfully. You just have to activate it – no more manual steps required.

Site score before optimization

Now that we have installed WPRocket, let’s go ahead and measure our site’s current optimization status. This is crucial as these scores are going to improve after optimization.

For this purpose, we’ll use Gtmetrix.com tools.pingdom.com and Developers.google.com. Here are the results of the initial rung of the tests:

Setup WPRocket with Jupiter X
Setup WPRocket with Jupiter X

Now, let’s activate the WPRocket plugin and dive into settings such as cache, file optimization, image optimization, and CDN.

You’re probably wondering which is the best setting for my site to use for the best optimization. We should first mention that every site might use different demos, a different set of plugins, different configurations for them, as well as various testing environments.  That said, the configuration for a particular site depends on the site itself and its not universal for all sites.

WPRocket starts working right after the plugin is first activated, even if you haven’t enabled any settings. Keep in mind that activating all the settings at once is not a good idea as it could lead to issues, and it’ll be difficult to figure out which setting caused the problem.

Let’s choose the safest way and begin activating settings one at a time.

Caching

By activating WPRocket, your site will experience an ultra-fast loading time. It happens due to the immediate page caching activation.

It further improves your site rank in search engines instantly with cache preloading, as we all know that speed is yet another ranking signal.

The lighter the code, the faster your site’s speed will be. By reducing the weight of HTML, CSS and JavaScript files via minification, your WordPress site becomes lighter and loads extremely quickly.

It compresses the files without harming the quality or effectiveness of the static files. WPRocket enables mobile caching by default to load your site faster for mobile visitors.
If you have a dedicated mobile theme or plugin, enable the “Separate cache files for mobile devices.”

You can enable caching if you have user-specific content on your website by clicking on “Enable caching for logged-in WordPress users.”

Setup WPRocket with Jupiter X

File optimization

Options here in the Basic setting will not dramatically improve the page speed of your site but it’s a best practice that can be considered as optimization, its safe to activate and will usually not cause any problems.

The minification of CSS and JS files will remove white space and comments from these files and will reduce files size.  We can also combine CSS or JS files into one file to reduce URL requisition – so what does this actually mean? Let’s say you’re loading 8 CSS files. If you use this option, they’ll be combined into one file; instead of 8 requests from your browser, you’ll only have one. The same can be used for JS files.

After enabling these options, it’s important to check your site and compare the before and after scores to find the best configuration for your site. Please also consider that combining JS and CSS files may improve the score of our site, but it will not improve the speed of the site.

Setup WPRocket with Jupiter X

Media

Do you know which strategy is implemented by big websites like Facebook and YouTube?

The technique used by these websites is to load the images as the user scrolls down the page. WPRocket offers the same image on request expertise and improves your page load time.

By enabling LazyLoad for images, iframes and videos, your site will load much more quickly.

Once you enable Lazy load, open your site in the Incognito window and check whether it works or not. It’s easy to check. Once you start scrolling down on the site, you’ll notice how images appear in the viewport once you scroll over them.

Check several pages of your site and make sure everything is working. If you don’t see any issues while browsing and if everything looks good to move on to the next tab,  let’s move onto checking the file optimization.

Database

The database tab of the WPRocket plugin offers various methods to optimize your website’s database. This question becomes more important if you run an active blog and you have many blog posts and content on your site. In this scenario, cleaning up a database is a vital task.

In this tab, you may find options to clean up post revisions, drafts, trashed posts, spam comments and transients with different options. You may also schedule an automatic cleaning of your database daily, weekly or monthly if you want to save time on doing it manually.

CDN network

If you’ve purchased RocketCDN (or any other CDN), enable it in the WPRocket dashboard.

Go to WPRocket dashboard > Integrate CDN,  and click on Enable Content Delivery Network.

Specify the CNAME(s) in the box, and if you want to exclude some files from CDN, specify the URLs in the “Exclude files from CDN” box.

Setup WPRocket with Jupiter X

WPRocket is a clean, developer-friendly plugin that offers easy customization for developers.

Results

Now, let’s take a look at the results of our optimization. 

As we can see, our site’s optimization has been greatly improved. We can also see a decrease in the number of URL requests and more optimized images. As we can see scores of the optimization are better than before.

Conclusion

We hope this article was informative in showing you how to install and setup WPRocket with Jupiter X in order to optimize your site’s performance. As I said before the optimization of your site is highly dependent on the individual site itself.  In some cases, activating particular settings may not lead to the desired effect; instead, it may cause slow loading or pages that are not optimized. So, it’s very important to run a test after you’ve changed the setting in the plugin.

If you have any queries regarding both the theme and plugins, feel free to ask in the comment section.

Stay tuned for next-gen tips at AffNext.

How to Use Location to Personalize Your WordPress Website

More and more online businesses – such as retailers, service providers, restaurants, among others – utilize their visitor’s geolocations for a variety of purposes to tweak their pricing based on region, territorial licensing, to run advertising campaigns based on location, or to make use of SERP (search engine results page). Implementing geolocational marketing into your campaigns will get you one step closer to personalizing the entire user experience for your visitors throughout the world. In this post, we’ll tackle how you can use location to personalize your WordPress website. 

Why use Geo-targeting in reaching out

You might be wondering why you would want to add another factor to take into consideration while ideating your marketing campaigns. Geo-targeting allows you to identify the geographical location of a visitor so you can personalize your marketing activities based on their particular location. And what you do with the content is up to you – it could be translating your site into the language spoken in that area or using cultural symbols or references that are location-specific. 

Anyone working in marketing or advertising is always on the lookout for different avenues in conveying a message that’s as personalized as possible to set themselves apart from everyone else. In other words, standard cookie-cutter messages simply won’t do the job anymore. So if you want to hop onto the personalization bandwagon, using location to personalize your WordPress site is the first step to take.  

How to begin geolocational marketing

Get into the regional mindset

Having a good grasp on the local context and executing that in your marketing campaigns is the key to grabbing a visitor’s attention. Take WordPress, for instance. WordPress has experienced such cross-cultural popularity due to its network of polyglots who have translated the CMS for users around the world. This is the byproduct of “thinking regionally.” To accomplish this, after understanding the local context, think about what role it could play in your overall business strategy. To put this into action, pinpoint your site’s locational funnels, enhance the ones that aren’t working well and improve the ones that are.

Continually expand your regional knowledge  

After you’ve analyzed important locational funnels, ideate the best way of conveying messages about your product to visitors in those locations. At this stage, you might need to get into the thick of it and conduct deep market research – or you can reach out to local professionals who can help with that. Ask yourself these questions: What are some significant cultural markers in this particular location? How can you use these markers to market your product or service? How does your current pricing compare with the currency used in this particular location?

Run geomarketing tests yourself 

Try to imagine your site the way your targeted visitor would. How does it look from their perspective? Would it really make a difference if they saw your site’s personalization or would it seem like you’re trying too hard to make a sale? What impact would it have on your engagement rate?

Now, it’s time to do the work and implement the concepts previously mentioned for localized personalization. We’ll use the Growmatik to do this. Growmatik is a cross-channel marketing automation tool for WordPress that uses user types and behavior to personalize your message across all touchpoints (website content, email and popup). 

Step 1 > Identify the location of your visitors

The first step in using location to personalize your WordPress site is determining your site’s locational funnels. We’ll break this down into two parts:

1- Where is the most traffic coming from? 

In Growmatik, you can get to the customer journey by going to Sidebar > Customer Journey. On the left, the first column is called Location, which provides a list of the top countries that refer the most traffic.

use location to personalize your WordPress website

2- What actions are these visitors taking on your website after they arrive?

Growmatik’s customer journey feature also allows you to discover what visitors from various locations are doing on your site. Like the last step, find the customer journey by going to Sidebar > Customer Journey. The first column from the left is called Location, which lists the top countries based on the traffic they refer. 

  • From here, you can click on any of the countries listed to gain insight into what users from that location have by navigating through the columns: Source, Landing Page, Subscription and Purchase Product. For instance, if you select Canada, you can find out:
use location to personalize your WordPress website

Canadians
→ were mostly referred by Bing, arrived in alt-landing.html, signed up via the popup form X and purchased shorts

  • You can also narrow your focus to a certain funnel by using filters. For instance, once you’ve chosen a country from the Location column, select a specific landing page, like the following:
use location to personalize your WordPress website

Users from Canada 
+ that landed on homepage.html
→ are mostly referred by Amazon ads and have mostly bought gadgets.

Growmatik helps to uncover all funnels that include visitors from the most popular locations onto your site. On top of this, you can gain deeper insight by using one of several factors. After you’ve gotten a good picture of each location, you can start creating regional personalizations for locations that refer the most visitors to your site.  

Step 2 > Implement geo-targeting onto a WordPress site

Gaining insight and creating a plan is one thing – implementing it is another. You’ll need to be able to automatically implement your desired action as soon as someone from a top location lands on your site. There are various ways of going about this. You can either do the coding yourself or use tools on the market. If you do the latter, make sure the tools allow you to automate your activities.

The best type of automation tool will allow you to set simple yet comprehensive rules – by using the “IF this THEN that” rationale – to allow for easy automation. You can assign locational segments and an action that you would like to be triggered for them:

There are two important actions required for your automation:

  • Personalization
    When choosing an automation tool, check to make sure it has in-page personalization capabilities that allow you to customize part of a page without the need to build up a new page.
  • Redirection
    Let’s say that you’d like to redirect visitors from a specific location to a different domain or page. This is when you’d want to use redirection. The automation tool you choose should allow you to redirect in the browser (as opposed to HTTP level redirection). By going about it this way, your page SEO won’t be affected.

In the next section, we’ll take a look at some examples of how to use Growmatik to create locational personalizations for WordPress websites. 

Examples of geolocational personalizations

Display a landing page that is geolocal 

As part of using location to personalize your WordPress website, you can build up your site’s landing page to be personalized for visitors from the targeted countries. This might differ from using redirection to an independent domain or websites (that have a URL like yourbrand.de) with specific designs or content related to the region. Or you can even add other personalized content on the same landing page or translate the page’s content and change the design if needed. 

In Growmatik, you can set an action to Show Page to redirect visitors from a specific location to a page that is different from your default homepage. 

Show a welcome message specific to a region 

Personalizing the landing hero page and showing a localized welcome message to your user is a surefire way to make a lasting impression. For instance, you can set your greeting message to “welcome to Belgium’s online entertainment stop!” for a belgian visitor or “Fastest food delivery in the Bay Area” to a visitor from the Bay Area.  

To replace your hero section’s header or text and set location-specific automation for it, you can use the Growmatik personalizer. When this action is triggered, your users from that particular location will see that version of the text. 

Localize your logo

Adding a location-specific logo on your site is a good way to boost visitors’ trust in your brand and business. Great examples of this include Amazon Japan and Samsung France. 

To go about doing this, you can make use of the webpage personalizer in Growmatik, substitute your site’s logo with another image and build an automation to display a customized page to users from the desired location. 

Redirect to a custom domain

If you want to go the distance when it comes to localizing sales in your targeted geographical area, then you can build up a website via a custom domain such as de.band.com to redirect your visitors from this area. This is a great way for your localized website to be visible on search engines.

In order to do this, you’ll need to create an automation rule to redirect users from France to the subdomain. 

Personalize call-to-actions

Depending on the landing page, a call-to-action might be the most crucial piece of content. Let’s say that you’re tight on time and resources and are unable to translate and/or localize a whole page on your site. In this case, the best thing to do would be to translate only the call-to-actions. It’s possible that visitors from your targeted location have some knowledge of English, but they would appreciate it if you take the time to translate the call-to-action into their language – and you could even include a deal or coupon specific to that region. 

You can go to Growmatik’s webpage personalizer to tailor call-to-actions and then set it as an automation rule for users from that location. 

Offer localized seasonal deals 

Providing special pricing or discounts for regions – and showing them in bold – that are important for your business is another great way to use location in personalizing your WordPress website. The best way to schedule these campaigns is by adhering to the local calendar and special occasions. 

Use Growmatik’s personalizer to build a section on your homepage, which should include the region that will only be displayed to visitors from that specific location.

Display localized in-store popups

Show promotional popups that get sent to visitors from a specific area. 

Growmatik’s popup builder allows you to easily make popups or select from one of its templates. Then, all you have to do is connect it with the location condition as an automation rule. 

Wrap up 

And that’s it. In this post, you learned how to find important location segments by analyzing website funnels and then created automated personalizations to personalize your WordPress website based on location. This will drive more engagements, help better relationships and eventually result in a higher lifetime value with your customer. With Growmatik’s free plan, you can create geolocational personalizations and customize your website for 10,000 visits every month.

How to Build a Dropshipping Business Website with Jupiter X

build a dropshipping business website featured

Have you decided to start your dropshipping business but you’re unsure where or how to begin? Uncertain as to whether or not go with WordPress or Shopify – or perhaps another e-commerce platform managed by someone else? If so, you’re in the right place! In this quick guide, I’ll walk you through how to easily build a dropshipping business website with Jupiter X in WordPress in less than 20 minutes. 

What is dropshipping? 

Dropshipping is a business model in which you don’t have any physical products and you don’t manufacture items or manage any inventory. Instead, you simply resell products at a higher price from the actual owner. 

How this works is that you have an e-commerce site and you list products that you don’t actually have. But when someone buys something from you, you purchase that product from the owner at a lower price point. You then transfer the order details to your supplier, and they will pack and ship it to your buyer. You then send the shipping details to your customer. Sounds quite simple, right? Indeed, this is why, in recent years, dropshipping has become such a popular business model. That said, dropshipping has several pros and cons. Let’s quickly review them. First of all, a major factor in this model is that you don’t spend anything on producing, moving, storing and shipping actual products from point A to place B. All of this is managed by your supplier.

As you’re the middle man between the seller and the buyer, you have to manage thousands of orders from customers and then orders from the seller. But the actual process – which is managed by software – is fairly simple. You just need to find a good supplier that has quality products at the lowest price. 

That said, this business model has its downsides such as a relatively long shipping time. Typically, products are shipped from China, which tends to take a long time. This often negatively affects customer satisfaction. Of course, it’s better if you can find a good supplier of the products close to the bury, but this may not always work.

Because of the long shipping times, your customer might request a refund or to return the product, meaning that you need to be ready to  create some small inventory to hold returned products. This might not necessarily be a warehouse, but this is something you must be ready for, particularly as sales increase.

Dropshipping on WordPress vs. DropShipping on other platforms

The popularity of dropshipping first started on Shopify and Oberlo (an extension of Shopify). This combination provided an opportunity to easily resell products from other suppliers. Later on, other platforms hopped on the dropshipping bandwagon and began also offering dropshipping services to their customers. The same thing began happening in WordPress as it’s one of the most popular content management systems in the world. Because of this, many software providers began offering their own dropshipping tools. 

Both platforms – Shopify and WordPress – have both advantages and disadvantages when it comes to building a dropshipping business website. For the scope of this article, we’ll discuss the benefits of WordPress.  

  1. Easy setup
    Are you hesitant about creating a WordPress shop? Particularly if you don’t have any technical background? Well, you might be surprised to learn that in today’s world running such a business doesn’t require much technical know-how. 

    Once you set up WordPress, install WooCommerce and give yourself a pat on the back – more than 70% of your job is already done! With WooCommerce, pages like My Account, Shop, Cart and Checkout are already created. 

    WooCommerce also supports several payment gateways you can’t find on other platforms. It also has a wide range of plugins, so you’ll be able to easily extend the functionality of your shop.
  1. Choice of theme and plugins
    Since WordPress is one of the most popular platforms, it has one of the richest selections of themes and plugins. There are thousands of themes and plugins waiting at your fingertips to meet any kind of customer need. What’s more is that new themes and plugins – both free and premium – are coming out on a daily basis. In other words, there’s a plugin for everything. 

    Most themes are already responsive and are SEO-ready to improve your Google search rankings. You can choose a general theme like Jupiter X or niche-specific themes that are more lightweight and specially designed for one particular business.

    Aside from premium themes – which come with premium support – you can also find free themes. If you’re good at writing code, then you could potentially save a lot.
  1. Power of open source
    WordPress is an open-source software, which means that a community of thousands of enthusiasts develop this platform and its ecosystem of themes and plugins. Being an open-source software gives you the freedom to develop your own tailored features and maximize your customization.

    Managing open source software is way more effective than a hosting application as you can change your host anytime you want, you can implement your security rules and tap in the territory where hosted applications are unable to tap into.

Tools that can be used as for dropshipping in WordPress

Since we’ve already decided to choose WordPress as the platform to build our dropshipping business website, we have to choose the main tools necessary to run the dropshipping business. We can divide these tools into two categories:

Necessary tools

These are plugins that are necessary to run the business. Without them, you cannot  manage orders,  buy or sell anything on the site. In other words, you would be unable to dropship.

WooCommerce – This is your store’s engine. WooCommerce is one of the most popular, open-source shop plugins that can be used to sell anything from physical to digital products on your site. Setting up this plugin is fairly easy and does not require advanced knowledge of website development.

A dropshipping plugin – This type of plugin will do the majority of managing your dropshipping business. The main things a dropshipping plugin does includes: 

  1. Importing products from the supplier website, which could be a marketplace like AliExpress or a dedicated site of a brand
  2. Listing products on your site and managing all product details like price, inventory, description, etc..
  3. After a product is purchased, the plugin will place the order on the supplier site with the order details
  4. Managing tracking information. Once the supplier sends the product, the plugin will automatically update the order on your site with the tracking number.

That’s it, these are the minimum requirements for a dropshipping plugin. However, due to high demand for similar plugins, you might want to search for the right plugin that offers features particular to your dropshipping business. 

For the purposes of this article, we’ll use the Ali2Woo plugin, which is free and can be found here.

Tools that are nice to have

Other plugins might not play a direct role in the function of dropshipping, but they could greatly extend the functionality of your website. For instance, there are plugins for newsletters (to send updates on orders), abandoned carts, payment gateways, as well as after-sales automation, among others., This list of tools depends on the particular project and may vary depending on the store owner’s needs.

Now, let’s jump in and learn how to create a simple and functional store by using Jupiter X and the Ali2Woo plugin.

Setting up a dropshipping store using Jupiter X and the Ali2Woo plugin

The setup of a basic dropshipping store is fairly easy and can take up to 30 minutes. And by this, I mean you can make the first sale and accept your first payment in this time period. Let’s dive in.

  1. Set up the Jupiter theme and template
    For our purposes, we’ll use the Clothing Shop template, which you can find here. This template is good for shopping for clothes, but you can use it for other purposes if you like the style. 
    I used the template installation and, in just two minutes, the template was successfully deployed onto my test site:

    build a dropshipping business website

  2. Plugin installation and setup
    After we installed the desired template, we’re ready to install the dropshipping plugin. To do this, head to WordPress Dashboard > Plugins > Add New, type Ali2Woo Lite, and install it.

    build a dropshipping business website

    While this plugin has a premium version, the free version will do the job. 

    During the plugin installation, it will ask you to install a Chrome extension, which is necessary for normal functionality, so please follow the instructions and install the extension.

    Once you install and activate the plugin, head to the settings and set up the basic aspects of your website. From this page, you can set up rules for the dropshipping plugin such as language, currency, pricing rules for imported products, reviews of the product, shipping details, product description, images, words filtering and nearly everything you need from the plugin. This is how it will look:

    build a dropshipping business website

    3. Searching and preparing products for import
    Once you’ve set up the plugin, you’re ready to import products. Ali2Woo works with AliExpress, since the latter is one of the main sources of cheap products from China. 

    Head to the Search Products page and start searching for products you want to dropship. It will look like the following:



    You can search for a nearly unlimited variety of the products you’d like to sell on your site. Once you’ve selected what you’d like to sell, click on the Add Import list. Repeat this step as many times is necessary.

    Once you finish searching and adding products to the list, you can then move onto the next step. 

    4. Products review and import
    In this step, you have to review products by adjusting the name, fixing broken description text or images, adding it to the appropriate category and adding tags to the product. Or perhaps you want to add something extra to the name or description – or simply want to change the price – all these tasks happen on this page. 

    Once you’re finished with this step, click on the Push to shop button, and this will appear in Products on your WooCommerce site.

That’s it! Now you’re ready to accept your first order and get paid for your job. Once someone places their order, the plugin will place similar orders to the supplier with the order details – and all of this is automatically done by the plugin.

Wrapping Up

Essentially, in this post, we covered how you can build a dropshipping business website with Jupiter X. However, there’s more to it than that. In real life, you’ll definitely want to extend  the functionality of your store by adding extra features, analytics, optimizing SEO, implementing security measures, among other things. The good thing is that if you choose Jupiter X as your theme, you’ll be covered since it already has all the above mentioned points. 

The dropshipping business model is still on the rise, so, don’t waste any time and set up your million-dollar store as soon as you can! 🙂

Tips for Successfully Taking Over an Existing WordPress Site

You might be thinking that taking over an existing website is a good deal to make. After all, you don’t need to create anything new as everything is already done, right? All you need to do is ask for login credentials, and you’re well on your way. 

Unfortunately, it’s not as easy as that. If there’s something you’ve missed or overlooked, you won’t be able to administrate the site fully, and the previous admin will still have access and may do harm to your website or ruin the changes you’ve already made. You also might be unaware that the site you took on has some malicious code, which could make your site vulnerable to getting hacked. That’s why it’s so important to follow all the steps below when inheriting a website. Here’s a list of what you need to check and remember for successfully taking over an existing WordPress site.

Get All Login Credentials 

When inheriting a website, the first thing you need to do is to get all login credentials. It doesn’t mean you only need the username and password for your WP Dashboard. Here’s everything you need to get: 

  • Access to WordPress dashboard (make sure you have an Admin role so you can manage the dashboard freely)
  • Hosting account (you need this to be able to change certain settings, for example, PHP version or to edit the files to troubleshoot)
  • Domain registrar (usually domains come together with hosting, however, it may be separate. You need to check that you have access to the domain management to be able to update its registration or change DNS)
  • CPanel (some hosting providers have management panels like CPanel or ISP Manager, so you should make sure to get access to that panel where you can manage your site easily: change PHP version, create backup, edit files via File Manager, etc.)
  • CDN (make sure you have access to this as well. A great tool to speed up WordPress, it may be Cloudflare)
  • Email accounts – there are email accounts that may be connected to your site. You need to have access to all of them for administration.

Change All Passwords And Emails

Another step in taking over an existing WordPress site is to change all the passwords after receiving the login details. You don’t know who else has them, so to secure the website, change all the passwords immediately after you’ve received that information. As you already know, your passwords should be strong. You can use this password generator tool to generate robust passwords.

Another thing you need to do is to change the email address to yours: go to Settings > General and replace the email address there so you can get any notifications.

taking over an existing WordPress site

Set up Automatic Backups

It’s necessary to make regular backups so you are able to restore the data if something goes wrong. You can create a full backup via CPanel or use a WP plugin like UpdraftPlus.

taking over an existing WordPress site

The following articles will be helpful for you to get more information regarding backups:

How to Backup Your WordPress Database Like a Pro

Restore Your WordPress Website Using a Backup: Here’s How!

How to Perform a WordPress Backup in Jupiter X with BlogVault

As an admin, you need to be sure that you have solutions to restore the site data if something is corrupted.

Update User Roles

Another important point in taking over an existing WordPress site is checking the user list. Go to the Users menu on the dashboard, find the person who managed the site before you. It’s better if you remove his/her access or downgrade the role so he/she can’t administrate the site.
If you see other users with Administrator roles in the list, but you are supposed to be the only one, be sure to delete those users.

taking over an existing WordPress site

Update Outdated Items

Now it’s time to update the site. When taking over, you’ll definitely get some plugins or themes that are out of date. If not, then you’re lucky! So, before starting an update process, you need to create a backup to be able to restore the site if something is broken during the update. Don’t proceed with a bulk update, do it one by one, especially when it comes to plugins. You’ll want to update plugins one after the other and then check the site after each update. This way you’ll know which plugin caused the issue if your site got broken after the update.

Another recommendation is to do this maintenance work on the local or staging environment, so the live site is safe and visitors don’t see a broken layout.

By the way, there’s a great tool that helps in managing all your WordPress websites at once – ManageWP. You can run all updates with one click and automate the backups. It’s very handy and helpful if you have many WordPress websites which you can manage from one place. 

Scan a Website for Security

The next step while taking over an existing WordPress site is checking if your website is secure and that there is no malicious code. You can find free online tools for a security scan, such as Sucuri SiteCheck. Also I’d recommend that you install a security plugin (if you don’t already have one) like WordFence, Sucuri or iThemes.

If your site doesn’t have an SSL certificate, it’s better to install it. Your hosting provider should help you with this. Also check your site for performance: you can use online speed test tools like  GTMetrix and Pingdom. And if you need to enhance your site’s performance, you can use a caching plugin such as WP Rocket, WP Fastest Cache, etc. Refer to this article for more detailed information.

Check Premium Features

It’s likely that the previous site owner used premium themes or plugins. Check to see if you’re able to receive automatic updates for those items. You’ll need a purchase code or API key to gain premium access. If possible, contact the previous admin and switch all licenses to your account. If needed, make a purchase under your account and re-register the theme or plugin, and you’ll definitely get premium support and automatic updates.

Delete Unnecessary Items

It’s good if you get rid of the unnecessary things on the site: uninstall the themes and plugins that you don’t use and delete user accounts that you don’t need. It’ll make the site more secure, and because using too many plugins slows down site loading time, your site’s performance will be enhanced. Also, you’ll want to make sure to optimize the database as some plugins may keep their tables in the database even after uninstalling them. The WP Optimize plugin will help you with this.

Wrapping Up

All the steps we’ve mentioned in this article are important to successfully taking over an existing WordPress website. And the responsibility falls on your shoulders – now that you’re the site owner, you’re the only one who can ensure that the site is functioning properly. As we’ve mentioned in the post, don’t forget to regularly update the site after gaining full access – in other words, keep improving it! The more work you put into your site, the better the outcome will be.

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

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

What is a virtual tour?

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

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

How can I make a virtual tour?

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

Image from gisgeography,com

More information about different projections can be found here

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

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

Creating a new Panorama using the Microsoft Image Composite Editor

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

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

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

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

Aligning and compositing the images

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

Review the un-rendered image and set the horizon. 

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

Resize and crop the final panorama image

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

Export the result into one panoramic image.

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

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

Import the panorama images into Garden Gnome Pano2VR app

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

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

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

Add the output type and settings.

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

Build the output and wait for it to be finished.

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

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

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

How do I show it on my website?

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

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

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

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

Now upload the zip file into this directory.

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

Right click on the zip file and extract it here.

create a virtual tour
Extract the tour package

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

create a virtual tour
The tour index.html file

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

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

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

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

Using Gutenberg, add a Custom HTML block.

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

Put this iFrame code into the code block:

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

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

The results will be like this:

Final Words

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

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

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:

  1. Segmentation
  2. 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.

Growmatik People Section
  1. Click on the People page from the Growmatik left sidebar.
  2. On the left side, the default and custom created segments are listed.
  3. The upper right side of the page displays the filters to create segments.
  4. Select a user type and add filters based on the segment you want to create.
  5. 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 ….
  6. 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.

  1. Once you create your segment in the last step, click on the Automate Segment button next to your filters.
  2. The Automation page shows up, and your selected segment is set as the condition.
  3. 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.

send engaging marketing emails

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.

send engaging marketing emails

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.

send engaging marketing emails

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.

send engaging marketing emails

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. 

send engaging marketing emails

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.
  • 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. 
Updating a WordPress Website
  • Make sure to clear the cache of your website to see all the features or changes that came with the current update.
Updating a WordPress Website
  • 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.
Updating a WordPress Website
  • 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!

How to Build a WordPress Website Notification System

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

Scenario:

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

WordPress website notification system

Tools we need:

Installing the Ultimate Member plugin

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

Search for Ultimate Member and install the plugin.

Installing the Ultimate Member Plugin

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

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

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

Configuring the Member’s directory and user profiles

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

WordPress website notification system

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

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

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

Activating the Advanced Custom Fields plugin in Jupiter X.

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

User Profile Page

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

Disabling the sidebar and title bar on the profile pages

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

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

The result would be like this:

WordPress website notification system

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

Installing and configuring the Real-time Notifications extension

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

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

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

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

Activating the Ultimate Member – Real-time Notifications

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

Ultimate Member Extensions settings

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

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

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

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

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

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

Notification received

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

Notifications listed and sorted by date in descending order

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

Adding custom notifications using API

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

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

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

Installing the Quiz Master Plugin

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

Add a new Quiz/Survey

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

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

Creating a page and question in a quiz

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

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

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

WordPress website notification system
Getting the embed shortcode of the quiz

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

Restricting the quiz to different roles

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

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

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

/*

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

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

*/
add_filter('um_notifications_core_log_types', 'add_rad_shodan_notification_type', 200 );
function add_rad_shodan_notification_type( $array ) {
		
	$array['failed_in_quiz'] = array(
		'title' => 'Failed In the QUIZ', // title for reference in backend settings
		'template' => 'You failed in the quiz!', // the template, {member} is a tag, this is how the notification will appear in your notifications
		'account_desc' => 'When the user failed in the quiz', // title for account page (notification settings)
	);
	
	$array['pass_in_the_quiz'] = array(
		'title' => 'Passed the QUIZ', // title for reference in backend settings
		'template' => 'Congrats! You passed the quiz!', // the template, {member} is a tag, this is how the notification will appear in your notifications
		'account_desc' => 'When the user passed the quiz', // title for account page (notification settings)
	);
		
	return $array;
}

/*

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

*/

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




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

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

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

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

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

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

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

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

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

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

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

	}
	return;
	
}

The above code will create two new notifications type:

  • failed_in_quiz
  • pass_in_the_quiz

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

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

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

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

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

WordPress website notification system
Activating the new notification types

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

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

The results would be like this:

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

Add the notification button in the header

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

[ultimatemember_notifications_button]

Adding the notification button to the header in Jupiter X

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

Final Words

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

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

How to 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].

  1. 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.
  2. Select Source from the conditions list (next to If)
  3. 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

redirection to personalize your WordPress website

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]

redirection to personalize your WordPress website

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]:

  1. 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.
  2. Select Device from the conditions list.
  3. Select the device type you want to target with: mobile, tablet or desktop
redirection to personalize your WordPress website

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:

  1. 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.
  2. 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.
redirection to personalize your WordPress website

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]

  1. 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.
  2. Select Date from the conditions list.
  3.  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]

  1. 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.
  2. Select Page Visit from the conditions list.
  3. 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]

  1. 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.
  2. Select User Behavior > Orders Placed from the conditions list.
  3. 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.

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.

outsourcing WordPress development

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.

outsourcing WordPress development

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.

outsourcing WordPress development

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

outsourcing WordPress development

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.

outsourcing WordPress development

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.

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.

custom Gutenberg block with Block Lab

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.

custom Gutenberg block with Block Lab

2. Plugin installation

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

custom Gutenberg block with Block Lab

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.

custom Gutenberg block with Block Lab

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.

custom Gutenberg block with Block Lab

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

custom Gutenberg block with Block Lab

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.

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.

custom Gutenberg block with Lazy Blocks

1. Plugin installation

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

custom Gutenberg block with Lazy Blocks

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.

custom Gutenberg block with Lazy Blocks

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.

custom Gutenberg block with Lazy Blocks

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.

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

create a community poll website

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

Step Four: Implement the single polls page and the homepage

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

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

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

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

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

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

add_shortcode( 'custom_poll_item', 'custom_poll_item_function' );


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

   

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


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

	return $output;
   
}

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

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

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

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

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

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

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

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

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

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

.poll_list_last_column {
    padding: 10px;
}

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


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

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





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

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

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

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

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

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

[custom_poll_item]

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

Adding the custom shortcode to the listing template. 

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

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

Configuring the Listing Grid to show the latest polls. 

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

Adding the proper ID to the Load More button.

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

Go to Smart Filters and add two filters: 

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

For the search box, use the Search filter type:

Setting up the search filter type (text box).

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

Setting up the tags filter using a Radio filter.

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

Adding the Search and Radio filter elements to the homepage.

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

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

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

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

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

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

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

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

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

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

Editing the content-single-topic.php file.

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

Editing the gdpol-poll-content.php

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

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

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

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

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


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


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


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

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



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


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

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


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



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

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

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

This is the final look on the single polls page:

Final look of the single polls page. 

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

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

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

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

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

Ultimate member plugin in WordPress plugins repository. 

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

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

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

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

Step Seven: Add custom notification on the poll votes

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

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

You can find information on how to configure it here:

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

/*

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

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

*/

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

/*

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

*/

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

/*

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



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

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

*/

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

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

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

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


	}


}

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

Activating the newly added notification.

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

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

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

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

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

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

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

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

More configurations and stylings are possible using custom CSS.

Step Eight: Localize and translate to your own language

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

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

Results, further development and roadmap

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

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

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

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

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

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

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

Wrapping Up

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

How to Create a 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.

custom Gutenberg block using the ACF

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.

custom Gutenberg block using the ACF

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

custom Gutenberg block using the ACF

3. Activate the plugin from WordPress admin.

custom Gutenberg block using the ACF

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' );
}
custom Gutenberg block using the ACF

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.

custom Gutenberg block using the ACF

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.

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.

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.

create a website with Google Sheets

Prepare a Google Sheet

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

create a website with Google Sheets

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

create a website with Google Sheets

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.

create a website with Google Sheets

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.

create a website with Google Sheets

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.

create a website with Google Sheets

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.

create a website with Google Sheets

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.

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

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

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

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

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

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

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

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

Defining the UX

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

Wireframe of the online community poll website

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

So, the experience would be like:

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

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

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

Prepare the tools

Creating a community poll website required two major functionalities:

  • Community
  • Membership profiles

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

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

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

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

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

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

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

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

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

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

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

The Jupiter X theme is activated

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

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

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

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

Step Two: Install BBPress and its addons and configure

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

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

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

Activating the BBPress plugin

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

Configuring the main slugs for the forums and topics

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

Adding the “Polls” forum to the website

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

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

Activating GD Topic Polls for the BBPress plugin

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

Step Three: Add the “Create Poll” page

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

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

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

Remember to change the 29 with the forum ID.

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

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

create a community poll website
New topic form

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

create a community poll website
Default Add New Poll form

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

create a community poll website
Submitting the topic with the poll

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

create a community poll website
Topic with its poll after creation

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

create a community poll website
Extra fields and notices to remove

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

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

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

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

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

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

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

The result is now like the following:

create a community poll website

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

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

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

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

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

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

create a community poll website

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

How to Speed Up your Website in Jupiter X

Speed up your website - Featured image

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

Test your site’s performance score in GTMetrix

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

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

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

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

How to find out what’s causing poor performance

Poor performance can stem from two things: 

  • Client side performance issues
  • Server side long execution times

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

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

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

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

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

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

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

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

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

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

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

Disable Development Mode in Jupiter X

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

Deactivating Development Mode in Jupiter X

Disable Cache Busting

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

Disabling the Cache Busting option in Jupiter X

Avoid using tons of plugins

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

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

Use a caching plugin

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

For Jupiter X, we recommend choosing between these plugins:

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

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

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

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

Optimize the images

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

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

Using a CDN

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

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

Use a WordPress optimized web host

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

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

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

Keep your theme and active plugins updated

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

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

Avoid using external content

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

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

Conclusion

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

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

subscribe

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

How to 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

  1. Install the Google Authenticator plugin and activate it.
  2. 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)

Read more about this plugin here.

Quick Setup

  1. Install the Two Factor Authentication plugin and activate it.
  2. 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.

Read more about this plugin here.

Quick Setup

  1. Install the Wordfence Security – Firewall & Malware Scan plugin and activate it.
  2. 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

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

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

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

How to Create Custom Filters with Jupiter X

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

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

Using WordPress to display your product list

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

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

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

Using WooCommerce to represent a list of your products

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

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

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

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

And it would look like the following:

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

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

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

Using JetEngine to showcase your products

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

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

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

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

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

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

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

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

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

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

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

Adding the Range Filter to the listing page

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

Configuring the Smart Filter on the Listing Page.

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

Range filter added to the listing page

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

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

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

Wrapping up How to Create Custom Filters with Jupiter X

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

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

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

subscribe

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

How to Create a Deals Website with Jupiter X

Deals Website with Jupiter X Featured

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

Deals Website with Jupiter X Affiliate Coupons Plugin

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.

Deals Website with Jupiter X 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.

Deals Website with Jupiter X 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.

Deals Website with Jupiter X 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.

Deals Website with Jupiter X Home Page

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.

Deals Website with Jupiter X Link 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.

Deals Website with Jupiter X Header

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.

Deals Website with Jupiter X Footer

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.

7. Change Our Products to Vendors and Our Showroom to Categories. Also, change the sub-footer text to “© 2019 YOUDEALS. ALL RIGHTS RESERVED“.

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

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

Build a Powerful WooCommerce Website using JetWooBuilder and Jupiter X

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

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

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

What does the JetWooBuilder offer?

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

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

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

Setting up an eCommerce store with Jupiter X

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

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

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

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

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

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

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

Creating your first shop page template

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

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

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

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

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

Creating a default shop page in JetWoo-Builder

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

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

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

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

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

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

Available widgets in Jet Woo Builder

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

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

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

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

Setting the Shop Default template

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

Setting up the default shop page template in JetWooBuilder settings

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

Default Shop page of WooCommerce

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

The Default Shop page populated by the dummy products.

Creating the archive and category pages using JetWooBuilder

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

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

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

Final Thoughts

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

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

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

subscribe

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

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.

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:

  1. Install WordPress.
  2. Setup a WordPress network site.
  3. Create three domains and name them based on our goal (For example Freelancer, Traveler, Biker).
  4. Install Jupiter X and all the necessary plugins.
  5. Install templates for each domain.
  6. 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

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

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.

Read more about this calendar here.

Custom Statuses is a feature that allows you to create custom post statuses such as “In Progress” or “Pending Review.” You can further define statuses to match the stages of your team’s publishing workflow. A detailed description can be found here.

So the key features of PublishPress include the following:

  • An editorial calendar to help you schedule content
  • Notifications for custom events, so you don’t miss anything
  • Custom post statuses, so you know how every article is progressing
  • Editorial comments on team members’ posts

The Editorial Calendar plugin gives you an overview of your blog and when each post will be published. You can drag and drop to move posts, edit posts right in the calendar and manage your entire blog.

With this plugin, you’ll be able to do the following: –

  • See all of your posts and when they’ll be posted.
  • Drag and drop to change your post dates.
  • Manage your drafts with the new drafts drawer.
  • Quickly edit post titles, contents and times.
  • Publish posts or manage drafts.
  • Easily see the status of your posts.
  • Manage posts from multiple authors.

To install the plugin, you can follow the steps as for any third-party plugins described here.

After activating the plugin, you can access the calendar via Posts > Calendar:

editorial calendar for your wordpress blog 3

There are no settings to configure and no options to fiddle with. You can start using it immediately. Clicking on the calendar menu takes you to a screen with a calendar display that includes all your published and scheduled posts.

Creating new posts is as simple as hovering over any date on the calendar and clicking New Post. This brings up a Quick Edit popup that enables you to add the post title, content, publish time and status right there in the calendar. Default posts will be created as drafts.

Draft posts will not be published automatically unless you actually set the status to Scheduled.

editorial calendar for your wordpress blog 4

Published posts in the calendar have View and Edit links that link directly to the post’s permalink and the edit screen. Draft and scheduled posts have an additional option for Quick Edit that enables you to edit the post title, content, publish time and status using the same popup mentioned before.

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

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

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

Jupiter X Intro

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.
Jupiter X History

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.
Jupiter X Tabs

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

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

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

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

A/B Testing Featured Image

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

What is A/B testing?

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

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