Warning: Declaration of JCacheControllerPage::store($wrkarounds = true) should be compatible with JCacheController::store($data, $id, $group = NULL) in /home/thevau2/public_html/lunarvault_01/libraries/joomla/cache/controller/page.php on line 0

Warning: count(): Parameter must be an array or an object that implements Countable in /home/thevau2/public_html/lunarvault_01/libraries/joomla/application/application.php on line 481

Warning: count(): Parameter must be an array or an object that implements Countable in /home/thevau2/public_html/lunarvault_01/libraries/joomla/application/application.php on line 481
lunarvault_01

Warning: count(): Parameter must be an array or an object that implements Countable in /home/thevau2/public_html/lunarvault_01/libraries/joomla/application/application.php on line 481
Log in

Log in

Envato Tuts+ Code

  1. Best Free WordPress Quiz Plugins

    Quizzes on websites can serve a lot of purposes. I am sure you have come across quizzes that simply ask random questions about celebrities or friends for fun. There are also quizzes for things like checking compatibility or aptitude of people. Some websites add quizzes in their posts at the end of courses to help readers assess how much they have learned after taking a course or lesson.

    There are a lot of free WordPress quiz plugins that you can use to set up quizzes on your own websites. Since different types of quizzes might have different types of questions, it can get quite confusing when it comes down to choosing the right plugin. In this tutorial, we will list the features of some popular and free WordPress quiz plugins that you can start using today to create your own quizzes.

    I should also mention that depending on the type of website you are creating, using free plugins might not always be the best choice. In some cases, they will offer a limited set of features while at other times you might get some kind of plugin branding. If you want to create professional-looking quizzes, consider giving these best-selling WordPress quiz plugins a try. You will also get free support for six months after purchasing a plugin. This should help you get up and running in no time.

    1. HD Quiz

    The HD Quiz plugin allows you to very easily create quizzes on your website. You can create an unlimited number of quizzes and embed them in any post or page.

    HD Quiz

    The plugin is designed with responsiveness in mind and it also comes with touch support. This basically means that your readers will have no problem in answering the quiz questions whatever device that they are using.

    Each question in the quiz can have its own featured image and a tool tip to provide any hints. The main quiz questions are displayed as a heading and you can add a small amount of descriptive text beneath them in order to provide more details.

    People taking the quiz have the option to share the quiz itself or their final results in their social media circles. The questions and answer of each quiz can also be placed in randomly selected positions for different users.

    You can also set your own pass percentage for each quiz and set a timer for it to let readers know that they have to answer all the questions within given time.

    2. Watu Quiz

    Watu Quiz is also a very popular WordPress quiz plugin that offers a nice set of features.

    Watu Quiz

    It allows you to assign points to each question in a quiz as well as to the answers of each quiz. For instance, sometimes a quiz question might not have an incorrect answer but simply more or less appropriate answers. In such cases, different options will obviously have different points assigned to them. Watu Quiz allows you to create quizzes with these types of questions very easily. Once the users have completed a quiz, the plugin will figure out the overall score all by itself.

    The plugin allows you to create three types of questions: single choice, multiple choice and open-ended. You can also mark some questions as required or tell the plugin to randomly reorder the questions for each participants.

    The plugin also allows you to create a quiz by pulling random questions from a large set. This will allow you to create unique quizzes for people who want to retake a test.

    You can also export both the results as well as the questions of a quiz to and from a CSV file. Answers to quiz questions can also be shown either at the completion of a quiz or immediately after a user answers each question.

    3. Quiz and Survey Master

    The Quiz and Survey Master plugin allows you to create quizzes and surveys for your users with ease. There are a lot of options available in the plugin to help you configure the quizzes exactly that way you want.

    Quiz and Survey Master

    The plugin gives you the option to add five different types of questions to the quiz or survey. These include multiple choice questions with a single answer, true and false questions, multiple choice questions with more than one answer, fill in the blank questions, and open answer questions.

    It also comes with CAPTCHA support to prevent automated submission of quiz answers. At the end of the quiz, the users can also share their answers on social media. This will help bring more traffic back to your website.

    You will have full control over a lot of other things like a time limit for completing the quiz or the maximum number of times a user can attempt a particular quiz. If the quiz contains a lot of questions, the plugin allows you to specify the number of questions per page.

    The Quiz and Survey Master plugin also comes with two free add-ons that allow you to give certificates to participants and create leaderboards to show the top scores.

    4. Chained Quiz

    Do you need to create quizzes where the answer to one question determine what the next question is going to be for a particular user? The Chained Quiz plugin helps you create such quizzes with very little effort.

    It provides a shortcode for each quiz that you create. You can then add the shortcode to any post or page where you want the questions to appear.

    The unique feature of this plugin is that it allows you to specify what happens when any user selects a particular option as an answer to a question. For example, you can choose to end the quiz, take the user to the next question or show them some other question.

    The same thing happens at the end of the quiz. Once a user has answered all the questions, the plugin allows you to determine the next step based on the score of the user. You could either simply show them their score and give a certificate or you could redirect them to a course that you recommend based on the quiz results.

    You can create single choice, multiple choice and open ended or essay type questions with this plugin. The answers submitted by each user can also be exported to a CSV file for further analysis.

    5. Quiz Maker

    Quiz Maker is yet another plugin which makes it very easy to create quizzes. One unique feature of the plugin is that it allows you to style the quiz to make it blend in with the rest of the website.

    Quiz Maker

    Like other plugins, Quiz Maker also gives you the option to only allow logged in users to take a quiz. However, it goes a step further and allows you to restrict people from taking a quiz based on their roles.

    The only disadvantage of this plugin is that you can only create single choice and multiple choice questions. There is no option to create true or false or fill in the blanks type questions. However, you can randomize both the quiz questions and the options in the answer.

    You can see the quiz results for visitors who submitted their answers along with the time it took them to answer all the questions. You can also add a timer to the quiz so that answer are submitted automatically once the time is up.

    Final Thoughts

    You can easily create basic quizzes with any of the free plugins mentioned on this page. However, each of these plugin also offers unique features for specific situations.

    If you want to include a large variety of question types in the quiz, it might be best to go with the Quiz and Survey Master plugin which allows you to add five different types of questions. Similarly, if you have a large set of questions and want to create a quiz based on randomly selected questions from the list, the Watu Quiz plugin would be perfect for your needs. Finally, people who want to create quizzes where the answer to one question determines what the next question is going to be will find the Chained Quiz plugin very helpful.

    If you need some features that are missing from these plugins, or if you want a more polished look and style for your site, take a look at the premium quiz plugins available on CodeCanyon. All these plugins are highly rated and offer many features that are missing in free plugins. You will also get free support for 6 months so setting things up will be easy.

    Which plugin do you use to create quizzes on your website? Let us know in the comments.

  2. 10 Best JavaScript Media Scripts and Plugins of 2019

    Interactive elements like audio, video, flipbooks, galleries, maps, countdown clocks, and popups increases the time visitors spend engaging with content on your website. They help create great user experiences. 

    JavaScript media scripts and plugins make it easy to bring life and engagement to your website. These include video, audio and PDF plugins that you can check out in some of our other articles.

    In this article I'll show you some other kinds of interactive scripts available on CodeCanyon that can liven up your site.  

    Why Use a Media Script or Plugin?

    There are many kinds of media. Say you want visitors on your website to fill in a survey form that pops up when they navigate your page. Or you want users to search locations of your stores and find out how to get there.

    The most common kinds of interactive media are maps, audio, video, flipbooks, and interactive elements like surveys, popups, and clocks. They are an indispensable part of website content. A good combination of these drive customer engagement. 

    But imagine manually coding every interactive media item—every video player, audio player, flipbook, map, or countdown clocks.

     Here is where a script comes in handy. A JavaScript script or plugin is a piece of code that you can install on a website to add functionality. Media scripts enable you to share and embed media like video, audio, interactive elements, or other multimedia, in addition to books, magazine, or catalogs in flipbook form. 

    Let’s take a look at some of the best JavaScript media scripts available on CodeCanyon

    What is a Script?

    A script is a piece of code that does a certain task or adds a feature to your website. Scripts contain a set of instructions that automate processes on a website. 

    Scripts work in the background—where visitors can’t see them—to make your website flexible and usable. The script is self-initializing when the page loads, and keeps running as long as the page remains open. You just install it and you’re ready to go. The great thing is that you can add advanced features to your website without needing to know how to write code. 

    How to Choose a Media Script or Plugin

    JavaScript media scripts and plugins from CodeCanyon are highly affordable and easy to use. All you need to do is download the script and install it on your website. The script will do all the background work to make your video, audio, flipbooks, or other media work smoothly without slowing down your website. 

    Not only that but because they are built with presentation in mind, they offer a variety of easy-to-use templates you can choose from in order to enhance the look of your website. 

    Things to keep in mind include the following:

    Ease of use: This includes ease of download and installation, how easy it is to upload and resize video and to adapt it various screen sizes. 

    Highly customizable: A script should allow customization to fit perfectly with any theme you choose for your website. 

    Cross-browser compatibility: Not everyone visiting your website uses Google Chrome or Mozilla. Make sure that your script is compatible with any browser your visitors might use.

    Compatibility across devices: A script should seamlessly work on desktops, laptops, tablets, and mobile phones. Not only that, but the script needs to be responsive, meaning it can adapt to various device types, widths, heights, orientations, resolutions, aspect ratios, and color depths. 

    Full touch support: The script should be usable by mobile device with touch screens.

    Lightweight: The file should be lightweight so your media will initialize and load quickly without slowing down the website.

    Standalone: There should be no need to download 3rd-party plugins like flash for the script to work. However, note that it is common for scripts to require common libraries like jQuery.

    Let's take a look at some of the most popular JavaScript media scripts available on CodeCanyon.  

    1. Interactive Maps Generator

    Interactive Maps Generator

    Interactive Maps Generator is a powerful plugin which uses the powerful Google Geochart API which creates the SVG vector maps. It is compatible with Wix, SquareSpace, Joomla and other CMS’s that allow you to paste JavaScript code into the content. 

    Here is what you can do with Interactive Maps Generator:

    1. generate as many maps as you want
    2. embed the code to place maps on any part of your website content

    You can create clickable maps for your website, including a map of the US, a map of the world, or any other region available. That's just the start, you can add active colored regions to the map, and you can add interactivity to the active regions. You will also be able to customize the visuals of your maps: the background color, box border width and color, inactive regions color, width and height of the map.

    User NPCAComms says this about Interactive Maps Generator

    Best money I ever spent. Easy to use and sharp design. I am 100% happy with this map generator

    2. Native Web Radio Player Plugin

    Native Web Radio Player Plugin

    If you’re looking for a browser-based, standalone, native internet web radio plugin that allows you to rapidly weave cross-platform radio streams into your web pages then Native Web Radio Player is the perfect choice. 

    It is written in JavaScript and is compatible with iOS, Android and supports all HTML5 browsers. It is also optimized to look great on desktop, tablet and phone. 

    You can create any color scheme so it’s easy to integrate it in any design. It’s compatible with shoutcast2, icecast2, radionomy, radiojar and many other servers.

    Check out the live preview and find out why user ThomasUber says:

    Best radio plugin ever. Works very stable and fast.

    3. WowBook: a Flipbook jQuery Plugin

    WowBook a Flipbook jQuery Plugin

    WowBook helps turn your photos and PDF files into interactive flip books or slide shows. 

    It comes with 3 ready to use templates that you can customize easily. It has 2 realistic page turning effects one for hardcovers and another for regular sheets of paper. It even plays a turning page sound in browsers that support the audio tag. 

    WowBook is fully compatible with all major browsers. This means you don’t need to download flash and your flipbook can be viewed by all visitors to your website. 

    Not only that, but it's fully responsive: it comes with built-in features to resize the book and make it adaptable to different screens dimensions. It comes with a responsive toolbar. 

    It is also touch enabled with pinch to zoom and double click to zoom.

    User anschinsan says this about WowBook:

    Nice and simple to customize. I use it for several customers—they are satisfied and I've set it up in minutes. Thanks for this plugin!

    4. Touch N Swipe Gallery

    Touch N Swipe Gallery

    You want to take how users engage with image content on your store or your website to another level then Touch N Swipe Gallery is the plugin you should have. 

    Want some reasons why?

    Touch N Swipe Gallery plugin for mobile and desktop is fully touch enabled. Visitors to your store or website can view items closely by mouseover content to zoom on desktop while also allowing pinch to zoom, drag and swipe on mobile devices.

    In addition, it has adaptive image loading which means images load faster and in the correct screen size so you will have an optimal viewing experience whether you are using desktop or mobile devices. 

    Check out the live preview of this impressive fully customizable plugin and see for yourself. 

    5. Resizable Multicolor Countdown

    Resizable Multicolor Countdown

    Do you want to generate some buzz about an upcoming sale or have everyone in your team be aware of time remaining until the important deadline? 

    Resizable Multicolor Countdown displays the days, hours, minutes and seconds until the date of the event on your website. It is a resizable timer that comes with flipping animation and has editable colors that can be set to change over time. 

    It uses vector data to draw the digits and the panels of the countdown.That means the image quality is high no mater what the size. You can also adjust the color of the back panel or you use a static color. 

    User simondlh says:

    Excellent plugin. Easy to customise. Looks very professional

    6. Swift Box: jQuery Content Slider and Viewer 

    Swift Box jQuery

    Content sliders are a great way to present the best content on your website by grouping it together into a series of rotating slideshows. 

    If this is what you want Swift Box has got you covered. 

    What Does Swift Box Do? 

    Swift Box organizes your content into boxes. Every box can have unlimited sources. 

    You can mix content from sources as diverse as RSS feeds, Facebook pages, Twitter, Youtube, Pinterest, Soundcloud and also manage inline contents.  

    The plugin handles everything for you. Titles, links, images, lists, tables: everything is collected and ready to be used.

    Also, you can group multiple contents and sort them by date.

    More features of this great plugin include:

    • Every Swift Box element is customizable. There are more than 40 options to set for your needs.
    • Content can be filtered by a powerful system, allowing you to strip and remove unnecessary HTML tags.
    • Fully responsive, adaptive and mobile optimized to guarantee a perfect display on any device.
    • Supports touch & drag interactions to offer a superior user experience on both desktop and mobile!
    • Slider timings are fully customizable, with the ability to create also a stunning continuous slider effect, perfect for breaking news bars.

    Check the live preview and see what you can do with this plugin.

    7. Slick Modal PopUp

    Slick Modal PopUp

    Slick Modal PopUp is one of the best popup generators in the market. It makes your popups standout by displaying your popup content more effectively and with style. It comes with lots of options that let you create unlimited combinations and achieve eye-catching effect for your messages easily.

    You don’t need any special coding knowledge to use this popup generator script. It comes with 40 pre-made quick start demos to help you out. All you have to do is copy and paste!

    Why Use Popups?

    Popups are very effective. You can use them to conduct surveys, grow your email list, increase your social media following, display ads, and so much more. 

    Ultimately website pop ups are a great way to increase engagement with visitors to your website and also a way of attracting and retaining customers. 

    How is Slick Modal PopUp the Best?

    To create a popup, you can start with any code or layout, including banners, newsletter signups, contact forms, special offers, images, galleries, iframes, video, and maps.

    Here are some more advantages of using Slick Modal PopUp

    • clean design and clean code
    • easy to install and set the options you need
    • easy to customize to fit your design and layout
    • lightweight and cluster-free

    Check out the live preview and see why user scippy says: 

    Great product, useful and indispensable tool for every webmaster! Also with great support! 

    8. Simple Price Calculator

    Simple Price Calculator

    Simple Price Calculator  can transform any HTML-based form into a price calculation form. The form is capable of multiplying two fields together and a quantity field can be added if needed.

    Visitors to your website can get instant price quotes or estimates on products and services. They can see the totals together with details displayed dynamically within your page. It very easy to use: simply add the functionality to your form id, setup a few attributes and the form is ready to go!

    Finally, currency and some of the form text can be changed through plugin options.

    User pagespages says:

    Fantastic! Easy, flexible, great documentation, great examples. Super smooth product.

    9. Media Boxes Portfolio 

    Media Boxes Portfolio

    Media Boxes Portfolio allows you to display all kind of content in a highly powerful grid. You can use it for blog posts, display media, clients, portfolios, shopping carts, galleries, etc. It also comes with a powerful filter, sorting and search system.

    You can put the plugin in with your existing HTML and CSS and it will automatically adapt to its container. Also you can quickly customize it so it adapts to your needs.

    The plugin also uses Fancybox and the Magnific Popup which are very popular and powerful lightbox and popup plugins. You can load a lot of stuff in the popups like images, iframes, HTML text, Google maps and more. 

    It also supports deeplinking. You can directly link to the popup so you can share the popup content with your friends or in your social network. 

    Check out the live preview and see why user paulhtanaka says this of this fantastic plugin: 

    Images load fast and the display is perfect! The filtering and search functions are the best part of what people tell me. Love it!

    10. Smart Forms 

    Smart Forms

    Forms are the most necessary tools for any website. If you need a good plugin for creating your own forms look no further than Smart Forms. Smart Forms is a responsive professional form framework with a clean consistent form UI. 

    It comes with the following widgets: 

    • date pickers, time pickers, month pickers, and color pickers
    • numeric steppers and UI sliders 
    • Google maps
    • toggle switches validation
    • masking 

    It also comes with a large collection of ready-to-use templates such as contact forms, login forms, order forms, simple surveys, registration forms, checkout, comments, quotes, feedback forms and many others.

    It also includes a plugin for formatting numbers and currencies to add separators, currency symbols, brackets and so much more. 

    Here are some things you can do with Smart Forms:

    • create multi-step and modal popup forms 
    • dynamically clone forms and form elements 
    • create chained select elements
    • use form conditional logic and branching
    • create autocomplete and combo widgets
    • format numbers and currencies 
    • export data in PDF

    The forms work well across a wide rage of desktop and mobile browsers. 

    Check out the live preview and see why user digidave0205 says:

    Feature-packed and amazing code quality. Highly recommended.

    Bonus 

     Chameleon HTML5 Audio Player With or Without Playlist

    If you want a fully-featured audio player that can also give you the option to add background music to a website Chameleon HTML5 Audio Player With or Without playlist is your best choice. It supports .mp3 and .ogg audio files. 

    The minimal version allows you to add background music to your website.

    Here are more things you can do with this player: 

    • You can customize it by changing the color for the player background, volume slider, timer, buffer, seekbar, song title, playlist background, playlist font and playlist item line separator. This makes it easier to integrate the player into any design. 
    • You can automatically generate the player playlist from a folder which contains the MP3 files.
    • You can insert multiple audio players on your website or on the same page

    User by alexlom2012 says: 

    I am fully satisfied with Player and its features! The item is exactly the same I supposed! Thank You!

    HTML5 Video Player With FullScreen Video Background

    HTML5 Video Player With Full Screen Video Background

    HTML5 Video Player With FullScreen Video Background is a plugin that can be used as a full-screen video background for your website that will cover the entire screen without any black stripes. It also has optional fallback images for mobile devices. 

    You also have options to set the video background only for a particular div in your site. 

    Some features of this plugin include:

    • fully responsive, including images and videos and will adapt the browser or device resolution
    • compatible with IOS and Android operating systems
    • fixed width or full width video player
    • position the bottom navigation to left, right or center.
    • lightweight: the JS file is only around 22KB

    Check out the live preview and see why user jleesley says:

    Great plugin! Works flawlessly. 

    Conclusion:

    The plugins I covered in this roundup certain stood out for me. There are many great Javascript media plugins that weren't included in this article. You can find these and more on CodeCanyon that will take your website to the next level. 

    If you enjoyed this article have a look at some of our related articles and tutorials.


  3. Create an Online Community for Your WordPress Site With UserPro

    When you think of social websites, chances are that social networks such as Facebook immediately spring to mind, but the ability to create a profile and connect with other users can be a valuable addition to many different websites.

    Imagine you’ve created a website for your business; you could use social features to build an employee directory where potential clients can identify and connect with the exact person they need to speak to.

    Social and membership features can also be a good fit for any website where visitors can post their own content, such as forums, blogs, or review websites. If you visit TripAdvisor and click through to any user’s profile, then you’ll find many familiar social features, such as a list of their followers, an Activity feed, any badges they’ve earned, and a map of all the places they’ve visited. 

    By adding social and membership features to your website, you can improve the user experience while encouraging visitors to engage with your site’s content. 

    In this article, we’ll be implementing everything you need to create a thriving online community using the UserPro WordPress plugin. By the end of this tutorial, anyone who visits your website will be able to create a profile and connect with others. In a future post, we'll let them share their location using Google Maps integration and give visitors the option to create an account using their existing Facebook or Twitter credentials.

    Getting Started With the UserPro Community Plugin 

    To start, we need to download and install the UserPro plugin. 

    If you haven’t already registered, create your free Envato Market account. Head over to the CodeCanyon website, click the little Sign In button in the upper right, and then enter your Envato account details.

    Once you’re logged in to your account, head over to the UserPro listing, click Buy Now, and then follow the onscreen instructions to complete your purchase. When prompted, download the plugin. Unzip your plugin; the subsequent folder should contain a number of folders and files, including a userpro.zip file, which you’ll need to upload to your WordPress account. 

    Adding a Third-Party Plugin to WordPress

    Once you’ve downloaded UserPro, you’ll need to upload it to your WordPress account.

    Log in to your WordPress account, if you haven’t already. Select Plugins from WordPress’s left-hand menu, followed by Add New. Select the Upload Plugin button. Scroll to the If you have a plugin in a .zip format section, and select Choose file. Select the userpro.zip file and click Install Now

    UserPro will now be uploaded to your WordPress account. After a few moments, you should see a Plugin installed successfully message. Select the Activate Plugin button.

    A new UserPro item should appear in WordPress’s left-hand menu. 

    How to Activate Your New Plugin 

    Next, you’ll need to activate UserPro by finding your unique purchase code and adding it to your WordPress website’s functions.php file, which is a template used by your WordPress theme.

    When you purchased UserPro, you should have received an email with the subject line [CodeCanyon] Purchase Confirmation. Open this email, and you should find a Purchase code. Keep this information to hand, as you’ll be needing it shortly. 

    Switch back to your WordPress account, and in the left-hand menu click UserPro and select the Licensing tab.

    Select UserPro from WordPress left-hand menu followed by Licensing

    Scroll to the Activate UserPro section, and copy/paste your purchase code into the accompanying text field. Then select Save Changes.

    Once the page refreshes, you should see a Thank you for activating UserPro message.

    Exploring Your Website’s New Social Features 

    UserPro automatically creates all the pages you need to implement a functioning social network, including pages where the user can create a profile, edit that profile, and connect with other users.

    Select Pages > All Pages from WordPress’s left-hand menu, and you should see that UserPro has created the following pages:

    • My profile. This is the user’s public-facing profile. 
    UserPros automatically adds a My profile page to your WordPress
    • Edit profile. This is a page where the user can edit various parts of their profile, including their display name, profile picture, and location. 
    UserPro generates an Edit profile page where the user can edit various parts of their profile
    • Connections. This displays a list of the user’s connections.
    You can use UserPro to connect with other users
    • Followers. This displays all of the user’s followers.
    The Followers page displays a list of all the users whove followed your account
    • Following. This displays a list of every account this user is following. 
    • Member directory. This is a searchable directory of every person who’s registered with your website.
    The Member Directory displays the profile picture and basic information for everyone whos registered with your website
    • Login. This is a page where visitors can log in to their account or navigate to your website’s registration form by clicking Create an account
    • Register. This is a page where visitors can create an account by entering their name and email address and creating a password. 

    Note that if a visitor tries to access any of the following pages without logging into their account, they’ll be redirected to your website’s Login page:

    • My Profile
    • Edit Profile
    • Followers
    • Following
    • Connections

    What Does This Mean for the People Who Visit My Site? 

    Let’s take a tour of UserPro’s default setup, so we can see how our social features currently function.

    To simulate the experience of registering as a new user, either log out of your WordPress account, launch an alternative browser, or open a new incognito tab. Next, navigate to either your website’s My Account or My Profile page. The process for navigating to these pages may vary, depending on how your website is set up, but I could access both pages by selecting them in my website’s footer.

    Since these pages were generated automatically, they may not be properly connected to the rest of your website yet. If you’re struggling to access My Account or My Profile, then: 

    • Log back in to your WordPress account.
    • Navigate to Pages > All Pages.
    • Find the My Account or My Profile item, and click its accompanying View link. This page will now launch in a new tab.
    • Copy the page’s URL.
    • Log out of your WordPress account, launch an alternative web browser, or open an incognito tab.
    • Paste the URL into the address bar, and then hit the Enter key on your keyboard.

    Since we’re not currently logged in to an account, we’ll be prompted to register as a new user; click the Create an account button. 

    Everyone who visits your website can create a profile by selecting Create an account

    You can now create your account by completing the subsequent form and clicking Register. By default, it’s possible to create a profile without verifying your email address, which makes it easier to test your website by creating multiple dummy accounts.

    After clicking the Register button, you’ll be redirected to the My Profile page, which is your publicly visible user profile. 

    To make some changes to your profile, click the Edit Profile button, which takes you to the Edit Profile page. From here, you can add extra information, upload a profile picture, or edit the information you’ve previously entered. When you’ve finished editing your profile, click Save Changes.

    If you want to test UserPro’s follow functionality, then you’ll need to create at least one additional user account. To create subsequent accounts, log out of your current account by selecting View Profile > Logout, and then repeat the above steps. 

    Once you have at least two user accounts, head over to the Member Directory and you should see a preview of all the accounts you’ve created. 

    To follow a user, simply click their View profile button and then hit the Follow button. 

    You can follow other users by selecting View profile  Follow

    Every time you follow a user, the follower count on their profile will increase. If you navigate back to your profile, then you’ll see that your following count has also increased. 

    If you select the Following tab, then it’ll display a list of all the users you're currently following. If you gain any followers, then they’ll appear in your Followers tab.

    Out of the box, this is pretty much everything you need to provide a functioning social network, but there are lots of ways that you can customize and enhance UserPro’s default setup.

    Troubleshooting: “Create an Account” Isn’t Working! 

    Have you fallen at the first hurdle? If you’re clicking the Create an Account button and nothing is happening, then don’t panic! There are several fixes that you can try:  

    1. Switch From Relative to Full Paths 

    UserPro seems to occasionally become confused when trying to resolve relative paths, so you may be able to resolve this issue by switching from relative to full paths: 

    • Select UserPro > UserPro from WordPress’s left-hand menu.
    • Make sure the Settings tab is selected.
    • Click to expand the Compatibility Settings section.
    You can edit UserPros settings by navigating to UserPro  UserPro  Settings
    • Open the Path Compatibility dropdown, and select Use Full Paths
    • Select Save Changes.
    • Check whether this has resolved your issue.

    2. Make Sure You’re Up to Date

    Before we move on to some more disruptive fixes, it’s worth checking that all of your plugins and themes are up to date and that you’re using the very latest version of WordPress. 

    If you’re behind on your updates, then it’s possible you’re encountering a bug or conflict that’s already been addressed in a subsequent update. 

    To start, select Dashboard > Updates from WordPress’s left-hand menu. From here, you can check for the following updates: 

    • WordPress. Even if WordPress’s Update list is empty, it’s still worth clicking the Check Again button, just to be certain no updates are available. 
    You can install WordPress plugin and theme updates by navigating to Dashboard  Updates
    • Plugins. It’s not uncommon to encounter conflicts between third-party plugins. Before you start deactivating plugins, you should make sure you have the latest versions installed. If Dashboard > Updates lists any available updates, then select all of them and then click Update plugins.
    • Themes. Some users have reported encountering issues when using this plugin alongside certain WordPress themes. Changing your website’s theme probably isn’t a step you want to take lightly (if at all!), so it’s always a good idea to check that you’re using the very latest version of your chosen theme.

    3. Disable Conflicting Plugins 

    If you have any other plugins installed, then it’s possible that UserPro may be conflicting with these existing plugins. To identify the culprit, deactivate each plugin in turn and then check whether this has resolved your problem. 

    To start deactivating your plugins: 

    • Select Plugins > Installed Plugins from WordPress’s left-hand menu.
    • Find the first plugin, and click its accompanying Deactivate button.
    • Check whether this has resolved your problem.
    • Rinse and repeat until you either identify the offending plugin or verify that none of your plugins are causing the problem. 

    4. Change Your Theme

    Some people have reported encountering UserPro’s “broken button” issue when using certain themes, so you may get positive results by switching your website’s theme. 

    To change your WordPress theme, select Appearance > Themes from the left-hand menu and then choose a replacement theme.  

    Getting More Out of UserPro: Google Maps, Facebook, Twitter, and More 

    At this point, we have everything we need to create an online community, but there are plenty of other UserPro features that you can enable, including Facebook and Twitter Connect and Google Maps integration. 

    In this section, we’re going to explore a number of optional added extras that you may want to add to your new online community. 

    Making Connections 

    UserPro has a “connections” feature that adds a Send Connect Request button to each user’s profile.

    Once youve enabled the connections feature a Send Connect Request button is added to each users profile

    Once you’ve sent a connection request to a user, they can review that request by opening their profile and selecting the Connections tab.

    From here, they can either accept or reject the connection request.

    If the user accepts a connection request, they can choose to revoke that connection at any point by navigating to their profile’s Connections tab, finding the connection in question, and then selecting its accompanying Remove connection icon. 

    You can break a connection by opening your profile and then selecting Connections  Remove connection

    To enable the connect feature:

    • Select UserPro > UserPro from WordPress’s left-hand menu.
    • Make sure the Settings tab is selected.
    • Click to expand the General section.
    • Open the Enable Connections dropdown, and select Yes.
    • Click Save Changes

    Keep Your Users Coming Back, With Email Notifications 

    To help drive user engagement, you may want to send an email notification every time the user gains a new follower or one of their existing followers makes a new post.

    To send an email notification about new followers: 

    • In WordPress’s left-hand menu, select UserPro > Social Extension.
    • Click to expand the E-mail notifications section.
    • Find the following dropdown: Send e-mail notification when someone follows another user, and set it to Yes.
    • Click to expand the New Follow E-mail Template section. 

    You should now see the template that UserPro will use to generate its “new follower” emails. By default, this template should look something like this:

    Hi there,
    
    {USERPRO_FOLLOWER_NAME} is now following you on {USERPRO_BLOG_NAME}! 
    You can click the following link to view his/her profile:
    
    {USERPRO_FOLLOWER_LINK}
    
    Or view your profile at:
    
    {USERPRO_MY_PROFILE}
    
    This is an automated notification that was sent to you by UserPro. No further action is needed.

    You can edit any of the plain text in this template, but make sure you don’t accidentally alter any of the code, or you may wind up addressing people as FOLLOWER_NAME

    When you’re happy with your changes, click Save Changes.

    You may also want to send an email to followers of a user every time they make a new post:

    • Navigate to UserPro > Social Extension > E-mail notifications, if you haven’t already. 
    • Find the following dropdown: Send e-mail notification to followers when user creates post. Open the dropdown, and select Yes.
    • Click to expand the following section: New Post E-mail Notification to Followers Template.

    By default, UserPro will use the following email template: 

    Hi there,
    
    {USERPRO_FROM_NAME} has created a new post - 
    
    Post Name : {VAR1}

    Make any changes, and then click Save Changes. Now whenever a user makes a new post, all their followers will be notified!

    Conclusion 

    In this tutorial, I showed you how to build a complete online community, using the UserPro plugin. Anyone who visits your website will now be able to create a profile and connect with other users. 

    In the next post, I'll show you how to let users display their location using Google Maps, and optionally connect their user account to Twitter and Facebook. For more information about UserPro, check out the UserPro website

  4. How to Use the WordPress Event Calendar Plugin

    For certain kinds of business, having a calendar on your WordPress website is an absolute necessity. Whether you need to share information about opening and closing times, special events that your business is running, or any event that is on a specific date, calendar plugins will help relay this information. 

    However, many of today's WordPress calendar plugins can be quite costly and are difficult to set up. 

    That's where the WordPress Event Calendar plugin comes in, bringing a cost-effective and easy-to-use solution for your calendar needs. 

    By the end of this tutorial, you will know how to create an event and calendar with EventOn's WordPress Event Calendar plugin and display this calendar of events to your website visitors.

    Creating an Event and Calendar

    For our example, we are going to be creating a WordPress calendar for a gym. 

    We will be using the calendar to schedule a spin class, so that visitors of our gym website can see what time this class begins and ends.

    Of course, the calendar and events that you create will be based on your particular business. 

    Creating a New Event

    Once you have installed the calendar plugin, head on over to the Events tab on the left-hand side of your WordPress dashboard and click Add New Event. This will bring up the event editor, where you can add your first event. 

    At the top of the event editor, we'll type in the name of the event. We are creating a spin class, so type in Spin Class as the title. 

    Next, we are going to set the event start and end time. Scroll on down to the Time and Date section of the calendar and enter the date for the spin class. The class starts on 1 August at 9 am and ends on 1 August at 11 am.

    Recurring Events

    The spin class that is offered at the gym is a recurring class that happens every Thursday. We would like the spin class to show up weekly on our calendar, but we don't want to have to create a new event each week. To make the event recurring, switch on the Repeating event tab and click the weekly button next to Event Repeat Type.

    This will set the event to repeat every week so we don't have to create a new event every week for our spin class.

    Featured Images

    Next, we are going to add a featured image to our event to make our calendar look visually appealing to our customers. On the right-hand side of the event editor, you will find a section called Event Image. Click Set Event Image and either upload an image or choose an existing photo for the event. 

    In my example, I choose a picture of people in a spin class.

    Event Organizer and Contact Info

    Another important piece of information that we want to add to the event is the event organizer and the contact information for the organizer. We want to add this information in case any website visitor has a question about the spin class. 

    Under the Organizer section, click Create A New Organizer. From there, we are going to add the organizer name and the organizer's email address, under the Organizer Contact Information field.

    Click Add New at the bottom of the editor to add the organizer to the event.

    User Interaction and Popups

    Finally, we are going to change the user interaction for every event click. We would like for the event to create a popup when the user clicks on an event.  

    To do this, we are going to head on down to the User Interaction for Event Click section and choose the icon that has a popup with a close symbol at the top right-hand corner.

    User Interaction for Event Click

    View the video below to watch the event creation process in action.

     

    Adding the Calendar to your Website

    Now that we have set up our event, we are now ready to add this to a calendar that will appear on our WordPress website.

    To add the event and calendar to your site, create a new page or post.  At the top of the WordPress default page or post editor, you will see a button that says Add EventOn. 

    Click on this button and then click Main Calendar. You will then be taken to the calendar editor, where we will make a couple of changes. 

    Our first change is to the featured image for our event. By default, the featured image that we added to the event only appears when we click the event. We would like the featured image to appear to the right of the event as well. 

    Scroll on down to the Display Design Options section of the calendar editor and turn on the Show Featured Image tab to do this. 

    Finally, we are going to change the design style for the calendar. 

    To do this, we are going to click the drop-down menu under Display Design Options and choose Colorful With Gap Between Events. This will color our calendar to make it more visually appealing to our customers. 

    Now we are ready to add the calendar to our page or post. 

    Scroll down to the bottom right-hand corner of the calendar editor and click the open and closed bracket symbol.

    Add Shortcode Wordpress Calendar Plugin

    This will insert the shortcode for your specific calendar into the WordPress text area. Click Publish and your calendar will then be on full display on your page or post.

    You can view the video below to watch how to add the calendar to your website.

     

    Conclusion

    The WordPress Event Calendar Plugin helps you create a professional-looking calendar in minutes, so your customers can stay up to date with your business's events.

    In this post, I showed you how to create an event, add it to a calendar, and display it on your WordPress website with the Event Calendar plugin. 

    If this plugin interests you, head on over to CodeCanyon to download it. Also, feel free to browse through all the other calendar plugins on CodeCanyon if this one does not suit your specific needs.

  5. Create a PHP Contact Form With ContactMe

    Today, we’re going to review the ContactMe tool, which allows you to create contact forms on your PHP site. It’s a very easy-to-use tool and allows you to set up different kinds of contact forms for any requirements.

    As a site owner, you might like to have feedback from your users and customers about your services—that helps you to serve them better. Thus, a contact form on your website is a must-have feature to collect feedback from your users.

    There are plenty of extensions and scripts available for creating contact forms on your PHP website. And of course, you’ll also find commercial options that provide ready-to-use features and extended support. In the case of commercial options, you can also expect quality code, bug fixes, and new enhancements.

    In this post, we’re going to discuss the ContactMe tool, available at CodeCanyon for purchase at a very reasonable price. It provides a variety of contact forms and themes out of the box, and as the script supports customization, you could create your own combination of forms as well.

    Let’s quickly go through the important features it provides:

    • ready-to-use forms in 28 combinations
    • built-in examples
    • support for themes
    • responsive and mobile-friendly
    • no database needed
    • SMTP support to send emails
    • spam protection
    • customizability
    • and much more

    The ContactMe tool provides a lot of useful features which allow you to set up contact forms quickly. Throughout the course of this tutorial, we’ll explore the different features provided by this script.

    To start with, we’ll see how to download and install the ContactMe script from the CodeCanyon marketplace.

    Installation and Configuration

    In this section, we’ll see how to install and configure the ContactMe tool once you’ve purchased and downloaded it from CodeCanyon.

    As soon as you purchase it, you’ll be able to download the zip file. Extract it, and you will find the directory with the main script code: contactme. Copy this directory to your PHP application. For example, if your project is configured at /web/demo-app/public_html, you should copy the contactme directory to /web/demo-app/public_html/contactme.

    The contactme directory contains the PHP code which handles the form validation and submission. Of course, it also sends an email containing the supplied information to the email address which is configured with the application.

    On the PHP side, you need to configure a few settings. Go ahead and open the contactme/configs.php file. There are three settings that you need to configure in that file, as shown in the following snippet.

    $configs['from_name'] = 'My Demo Site';
    $configs['from_address']  = 'noreply@mydemosite.com';
    $configs['to_addresses'] = array('info@mydemosite.com');
    

    The from_name and from_address configuration values indicate the source of the email. The to_addresses configuration value is used to specify the email address which receives all the form submissions.

    In the next section, we’ll discuss how to set up the necessary HTML code with the help of the ContactMe script to display a contact form on your site.

    How to Set Up the Contact Us Form

    When you extract the ContactMe zip file, you’ll find an index.html file which contains everything you need to get started setting up your contact form. In fact, it contains the HTML code for all the different types of contact forms supported by the script, along with all the different themes. So you could handpick the code of the form which you would like to use in your application.

    In the following example, we’ll set up the General form with the modern theme. If you want to display a form other than the General form, you just need to copy the HTML code of that specific form instead.

    Copy HTML Code

    From the contactme/index.html file, copy the code between the <!-- START copy section: General Contact Form --> and <!-- END copy section: General Contact Form --> comments and paste it in your HTML page in the <body> section.

    In our case, we want to use the modern theme instead of the default theme, so we just need to change the <form> tag class from contactMe small to contactMe small theme-modern.

    Copy the JavaScript and CSS Code

    Next, copy the CSS code between the <!-- START css copy section --> and <!-- END css copy section --> comments and put it in the <head> section. Similarly, copy the JavaScript code between the <!-- START js copy section --> and <!-- END js copy section --> comments and put it just before the </body> section in your HTML page.

    And with that, we’re almost done! Let’s see how it looks:

    Contact Us Form Demo

    As you can see, it displays a nice, complete contact form which is ready to use! With form validation support out of the box, you don’t need to worry about spam submissions. Go ahead and fill in the form and submit it. If everything is configured properly, you’ll receive an email containing all the information.

    In the next section, we’ll explore the different customization options supported by the ContactMe tool.

    Customization Options

    In the previous section, we discussed how to set up a basic contact form with the help of the ContactMe script. In this section, we’ll discuss a couple of important customization options supported by this script.

    reCAPTCHA Support

    The ContactMe tool supports the Google reCAPTCHA solution out of the box to prevent spam submissions. You can choose from two different versions: reCAPTCHA V2 or Invisible reCAPTCHA.

    Multilingual Support

    There are five different languages you could choose from for your contact form. At the moment, it supports English, Spanish, German, Italian, and Russian.

    Theme Support

    As we discussed earlier, the ContactMe Script provides different themes you can choose from to change the look and feel of your contact form. At the moment, it supports four different themes: Default, Modern, London, and Minimal.

    Email Customization

    When a user fills out and submits the contact form, the script sends two emails: the first one goes to the site owner, and the other goes to the user for confirmation. You can alter the email templates that are used to send emails to the site owner and user.

    Custom Contact Forms

    Although the ContactMe script provides several contact us form templates for you to choose from, sometimes you will need to add extra fields to the contact us form. And this is easily achieved by editing the form-specific PHP file.

    So as you can see, the ContactMe tool offers a lot more than just a simple contact form. With the built-in forms and theme support, you could create a contact form of your choice for your website.

    And with that, we’ve reached the end of this article!

    The Next Step: Other Contact Us Form Scripts

    If you're looking for more advanced contact us scripts that you could use right away, I recommend that you check out the following posts, which summarize some excellent scripts that are available for a low cost.

    Conclusion

    Today, we reviewed the ContactMe tool available at CodeCanyon. The sole purpose of this script is to allow you to create different types of contact us forms on your PHP website.

    I hope that you’re convinced that the ContactMe tool is useful enough to fulfill your requirements. Although it’s a commercial plugin, I believe it’s reasonably priced considering the plethora of features it provides.

    If you have any suggestions or comments, feel free to use the feed below and I’ll be happy to engage in a conversation!