Developing a Custom Slider in Jupiter X Without Custom Coding

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

What we need:

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

Create the Slider custom post type

Creating a new post type named Slider

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

Add the thumbnail feature to the post type

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

Required meta fields for the slider post type

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

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

Adding the Slider entry

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

Simple post type entry example

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

Design your Slider template

custom slider in Jupiter X
Add a new Listing item

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

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

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

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

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

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

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

custom slider in Jupiter X
Dynamic Description on the slider.

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

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

Use the slider on your page

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

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

The final results will look like this:

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

Conclusion

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

Five Causes of a Slow WordPress Site

According to W3tech, WordPress currently supports 37.5% – or one-third – of all websites. Of course, this is awesome – however, for all the opportunities that WordPress provides us, it also has its challenges such as security and performance issues of its sites. 

Enhancing the performance of a WordPress site is a hot topic these days. It’s possible to find dozens of articles and methods online on how to improve overall speed and performance, which are crucial as both affect your site’s search engine ranking. Furthermore, visitors to your site will quickly leave if the load time is longer than acceptable. This is extremely important for sites with shop functionality where speed is one of the most important factors. In this post, we’ll discuss the top five causes of a slow WordPress site and how to improve them.

1. Low performing WordPress hosting service

It’s not news that high-quality hosting is a cause of a slow WordPress site if the files of your project are hosted on a reliable, fast and high-performance web server. So if chosen wisely, one of the most important tasks of performance improvement is done right. Before deciding on a good hosting provider, there are several things to keep in mind: 

  1. Shared hosting
    We may think its good idea to host our project on shared hosting that temptingly offers “unlimited” space, email accounts, bandwidth or other features. But the key point we miss in this offer is that shared hosting never offers the level of performance that is needed to run a normal project, especially during peak traffic hours. Most of the shared hostings fail to provide 99% of uptime within the month.

    Another major disadvantage of shared hosting is that your project files are placed among countless other websites. Your files essentially share one space, and there is no information about how many resources are used by other websites. In other words, you simply don’t know how well your shared hosting is optimized for performance. The cost of shared hosting is cheaper than any other hosting and starts from $2.

  2. Do-it-yourself VPS hosting
    These are hostings that must be manually created, configured and optimized. The crowd behind these servers are startups, developers, DIY enthusiasts and those who want to save money from already-configured VPS hosting. The most popular and cheapest server provider on the market is Digital Ocean with a $5 plan.

    Similar VPS hosting is great, but it can also be really challenging. If you don’t have enough experience to deal with the problems that come with it, then there might be some serious implications.  We don’t recommend that you opt for this type of hosting if you’re not tech-savvy and if your project is important for you. This type of hosting is best used for experimentation.

  3. Managed web hosting
    This is similar to the above do-it-yourself VPS hosting. However, in this case, the company between you and the cloud platform provider manages everything instead of you. You have nicely designed backend functionality where with just mouse click, you can deploy, restart, stop or pause the VPS server. Such companies also provide support when needed, and they have great optimization features. Due to the popularity of WordPress, in recent years, there has been a rise in dedicated WordPress VPS servers. Such servers offer a fully optimized environment for WordPress as they have the best configuration of files and databases.

    There are many popular managed to host providers on the market, including Kinsta, Cloudways, WPEngine, Flywheel, and others. The prices of such hostings are the highest and start from $10 or $15.

2. Not using the right themes and plugins

Choosing a good theme for your project is probably one of the most important decision you will make, sure thing you want to have the best-looking website but very often shiny and beautiful themes come with many “features” they have dynamic content, custom header, and footer, sidebar, many widgets, all these benefits are great to have in the pocket but they will definitely affect the overall performance of the theme and can cause slow responses from the hosting. Based on this you have to always choose a theme with a good framework, with good performance score.

How to choose the right theme? There are two things you should take into consideration when asking this question:

  1. Less is more, and this goes for themes as well. You’ll want themes with only the features you need for your projects. Such themes are niche-specific themes. For example, let’s say you’re working on a personal resume website, and you choose a theme that has been created solely for resume sites. Generally speaking, this theme has  everything you want to have. Such themes are lightweight, easy to maintain and they don’t require resources from the server.

  2. You can choose to use a general-purpose theme but with options to disable features. These themes offer feature-rich options that can be disabled if you don’t need them. So for instance, there are many themes out there that include many different demos. Make sure features in these themes can be disabled. If you’re not going to use them, they will add useless weight to your project.

Page builders

In the era of page builders, it’s hard to find themes that don’t use page builders. Working with a page builder is quick and easy-to-use, however they add extra weight to your project. Sometimes, they are much heavier than the themes themselves. So, seriously take into consideration whether you need a page builder to utilize or not.

Too many plugins

Adding a new plugin to WordPress site today is just a single click away, however, having too many plugins is a common cause for a slow WordPress site. As we mentioned before, WordPress supports more than 37% of all sites. Because of the popularity of WordPress, new plugins for every occasion pop up on a daily basis.

It’s easy to find a plugin for nearly any purpose. Plugins can be free or premium and come with or without support. Of course, getting support offers us the opportunity to receive technical help in solving our problems, but we should only hold onto important plugins. It’s better to critically ask yourself: is this particular feature important for you? Or is it just a feature that’s nice to have but jeopardizes the performance of your project?

3. Not using caching tools

slow WordPress site

When it comes to WordPress optimization, caching is one of the most important and easiest ways to speed up a WordPress site. 

Let’s check your site through Google PageSpeed insight or ySlow. You’ll see a warning about Javascript and CSS files minification. Without minification you’ll have a bounce of calls of these files to the server, and minification reduces these calls and minifies files sizes of CSS and JS files. In the end, you’ll have fewer calls to the server and less weight of the files to load.

The caching tool – in this case – the caching plugin stores some files to the disk of the server (depending on configuration, it can be stored in the RAM as well), and it remembers the same content that was served in the past session. It reduces server resources that respond to user requests and, as a result, makes a website work much more quickly.

There are many great plugins available for caching. Some of them are dedicated only for caching Javascript and CSS files (for example, Autoptimize) while others do more complex work. Aside from JS and CSS modification, they offer other important optimization works such as image optimization (for example, WpSmush, Wp-optimize), which is one of the important points in WordPress optimization.

Loading media files that haven’t been optimized to the front will greatly increase the loading speed of the website. That’s why you definitely need to consider their optimization, and be aware that image compression is one of the mandatory factors that must be taken into consideration.

4. Not using a content delivery network

slow WordPress site

A Content delivery network – or CDN – will not disappoint you if you use it for site optimization. The main purpose of CDN is to deliver your content to the user, no matter where they’re located on the physical map. Needless to say, your website will not load at the same time for a visitor from Singapore and visitor from California. This is where CDN comes into play. It stores a copy of your website in various data centers in different places in different countries. By doing this, your visitor will be served from the nearest CDN point, which will dramatically increase the website’s loading speed.

There are many great CDN services out there: Cloudflare and MaxCDN are two of the most popular and widely used CDN networks.

5. Version of PHP

slow WordPress site

Well, its fact that recent versions of WordPress started warning users about upgrading their PHP version from 5.6 to the 7.4 version. You can learn more about it in WordPress’s official recommendation

Please note that Worpdress is currently supporting the version of PHP 5.6, but all versions prior to version 7.3 will not receive updates. They are at the end of life (EOL), which means that your site might be exposed by security vulnerabilities.

Now let’s take a closer look why you might want to update your PHP to the latest 7.4 version:

  1. Improved bandwidth
    Versions above 7.0 perform a minimum of twice as fast as 5.6
     
  2. Lower latency
    Latency is the time between the first request and the first response from the user to the server. In this case, lower is better, and the PHP version above 7.0 is showing twice – and some times three times – better results than the 5.6 version. For example, if the average latency for the 5.6 version was 156 ms, then it’s about 68 ms for 7.4.

  3. WordPress support
    WordPress versions above 4.0 are specially optimized for PHP version 7. According to tests on the same hardware and software, but with a different PHP version, it doubled in performance. 

  4. Security
    Nowadays, running the PHP version 5.6 for any software means you’re not protected. All this software is EOL (mentioned above). By not updating your PHP to the latest version, you’re putting your project at risk as even version 7.2 is not very well protected.

  5. Significant performance changes
    Someone from WP Engine tested WordPress with different PHP versions. This test showed WordPress on PHP7 is 6.6 faster than on version 5.5. You can take a look here.

Now, since you already know one of the causes of slow websites, check the version of PHP on your WordPress site and safely update it. Also please note that backing everything up is always a good idea.

Wrapping Up

One of the main reasons for optimizing and lowering your website’s loading speed is to enhance user experience. No one wants to browse a slow WordPress site that is not optimized. This is a major point to keep in mind when creating a WordPress site for all devices. A smooth browsing experience is a must for all types of devices – including phones and tablets. Aside from this, you’ll also improve your ranking in search engine results.

Above, we only listed reasons that a WordPress site might be slow – this isn’t a comprehensive list. We only discussed the major reasons for a poorly performing site but of course there are more. If we missed something, don’t hesitate to write us a comment in the section below!

Pure CSS Parallax in 5 Minutes

Many people underestimate the power of CSS. Some of the fancy features that we see on the websites use JavaScript codes, but they can be implemented with pure CSS these days. For example, parallax sections almost always use JavaScript libraries, but in this article, we’ll cover how to build a pure CSS parallax section in just a few minutes.

Using pure CSS parallax can be easier and more performant since we don’t need to use JavaScript libraries.

What we’ll build

In this article, we’re going to build the following parallax sections with pure CSS. You can see the live demo at CodePen.

Understanding the used properties for pure CSS parallax

This technique relies on the CSS3 transform and perspective properties. By using these properties, we can create 3D elements in the space and scale and move them as necessary.

Transform property

This property enables you to transform elements in a two-dimensional and three-dimensional space. By using this property, we can rotate, scale, move and skew the element in the space.

pure CSS parallax

You can see different examples of transform properties in this pen.

Perspective property

This property is used to enable three-dimensional space for the element. The children of the element can be positioned in the space.

pure css parallax

In this pen, you can test the perspective property live.

Implementing the technique

Now that we’ve learned a bit about transform and perspective properties, let’s get our hands dirty and write some actual codes. The codes will be divided into two sections: HTML and CSS codes.

Markup

We need some simple markups for the parallax section. The role of each markup is explained below.

<main class="main">
  <section class="section static static-one">Static</section>
  <section class="section parallax parallax-one"></section>
  <section class="section static static-two">Static</section>
  <section class="section parallax parallax-two"></section>
  <section class="section static static-three">Static</section>
</main>

Notes

  • .main is used for setting perspective and overflow properties.
  • .section is used for setting general styling, not necessarily related to parallax.
  • .static is used for setting the static section properties.
  • .static-(one|two|three) is used for setting different background colors for static sections. 
  • .parallax is used for setting ::after (pseudo-element) which holds the transform properties. 
  • .parallax-(one|two) is used for setting different background images.

Styling

This is where the magic happens. The necessary lines are commended to help you understand the codes.

.main {
  /* Fill the available space */
  height: 100vh;
  
  /* Make the children of the element closer to the viewport */
  perspective: 2px;
  
  /* Hide the overflow */
  overflow-x: hidden;
}

/* General styling, not necessarily related to parallax effect  */
.section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80vh;
  font-size: 40px;
  text-transform: uppercase;
  font-weight: bold;
}

/* Different background colors for demo purpose */
.static-one {
  background-color: #feceab;
}

.static-two {
  background-color: #aacfcf;
}

.static-three {
  background-color: #c06c84;
}

.parallax::after {
  /* Position the pseudo-element to fill the parent */
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  
  /* Scale the image to full */
  background-size: cover;
  
  /* Move the element back then scale the element, it helps to appears more slowly */
  transform: translateZ(-1px) scale(1.7);
  
  /* Set the parallax section before the other elements. */
  z-index: -1;
}

/* Different background images */
.parallax-one::after {
  background-image: url(https://source.unsplash.com/vs6a4EHj_Ro/1600x900);
}

.parallax-two::after {
  background-image: url(https://source.unsplash.com/P86-JPbDnPY/1600x900);
}

Wrapping up

In this article, we covered one of the coolest CSS implementations. By learning these types of techniques, we’ll understand how CSS is powerful and what we may be able to create in pure CSS.

This implementation was one of the most straight-forward ones, you can see the following ones for more advanced usages. 

We’d love to hear about your pure CSS parallax websites, so please share your examples with us in the comment section below.

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.

Key Elements to Create an Events Website

Various types of events or occasions such as birthdays or weddings mark significant milestones throughout our lives. Or important meetings for start-ups that propel a business forward. And it can be quite annoying if anything goes wrong during one of these events – many of these mistakes can be avoided through proper planning and organization, which starts out on an events website. However, doing so requires solid planning skills and appropriate tools.
There are tons of resources out there for planning any kind of event that it can be difficult to choose which to use to fit your needs. In this article, we’ll give you all the info you need to incorporate key elements to create an events website while working in Jupiter X so you don’t miss anything when planning your next event.

1. Menu and hero section

Making a good first impression is crucial when a visitor lands on your site, so having an appropriate top section is much more important than other aspects of a site. This should be at the top of your priority list when you sit down to create an events website. In other words, the menu and hero section can greatly impact what the visitor will do after going on your website.  Depending on the type of event, the menu and the hero section might contain a slider or a single image of a previous or upcoming event, important links in the menu (including contact info such as an address or phone number and a booking button.

Let’s first take a look at the Conference, Halloween, Art Gallery Listing and DJ templates.

create an events website
create an events website
create an events website
create an events website

2. Event introduction in the section

After we’ve introduced our site with a stunning hero section and formed a positive first impression, it’s now time to provide more details about the event. Typically after a hero section, we might want to give some teasers of the event such as a countdown, the address, a shortlist of attendees. The details you choose to reveal will be different depending on the type of event.

Excellent examples of these sections can be seen in the DJ, Concert and Wedding Invitation templates.

3. Event details (date, place and other event-specific details)

This is another significant aspect of your events site, since it’ll contain all the necessary details about the event. When you set out to create an events website, try to be as informative as possible while only including necessary info such as the date and length of the event, where it’ll take place (and how to get there), attendees, as well as booking and cancellation details.

Similar examples can be found in the Concert, Event Listing and Night Club templates.

create an events website
create an events website
create an events website

4. Event line-up, schedule, details and program

As we previously mentioned, not all events were created equally. This difference requires various approaches when listing event details. For instance, the schedule for a wedding will vary drastically from a nightclub event or an Halloween event. Luckily, Jupiter X has you covered with its wide array of layout and style choices for different events.

Let’s take a look at the Wedding Invitation, Running Race, Conference and Concert templates.

create an events website

5. Section for event tickets and booking

This section can contain details about event booking, tickets details and seat placement at the event. Again, depending on the event, you may also need to release early bird tickets, which might contain different plans with different prices.

Examples of these elements can be found in the Concert, Running Race, Wedding Invitation and Halloween templates.

create an events website
create an events website

6. Event sponsors

Another important element of creating an events website is listing the sponsors and supporters of the event. These are important people or organizations who are providing some sort of support – listing them can add weight to your event and attract more visitors.

In creating this section, you’ll need to include the logo of the sponsors, their names and links to their sites. And if possible, you can also include a few words about them.

You can see how even sponsors are  showcased in the Conference and Running Race templates.

create an events website

7. Contact details and directions

For this section or page, you’ll want to provide as much information as possible about how to contact the event organizers and how to get to the event venue itself. Basically, you should try your best to answer all questions your visitors might have and not leave anything to chance.

Examples from the Jupiter X theme can be seen in the Concert, DJ, Conference and Eirene templates.

Conclusion

In this article, we discussed the most commonly used, must-have elements needed to create an events website. For this, Jupiter X is there by your side to help you in easily designing your site by offering sleek ready-made templates – and all you have to do is import them! Why spend your precious time on redundant tasks when basic templates are available at your fingertips? Simply make a couple of changes here and there, and you’re good to go.