Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

May 17 2019

14:50

An Easy Way to Code a Mega Menu in WordPress

Final product image What You'll Be Creating

In a previous post, I looked at how to decide when a mega menu is right for your website and how to use a plugin to create one.

  • WordPress
    When to Use (and Not Use) a Mega Menu for Navigation
    Rachel McCollin

But if you’re feeling more ambitious, you might prefer to code your own mega menu into your theme. This gives you the benefit of being able to design the menu how you want it, and make sure it’s consistent with your theme.

In this tutorial, I’ll show you how to code a mega menu and add it to your theme.

What You’ll Need

To follow along with this tutorial, you’ll need the following:

  • A development installation of WordPress (don’t add this to your live site until it’s all working correctly).
  • Your own theme that you can edit, or if you’re using a third-party theme, a child theme for that theme.
  • A code editor.

I’m using a third-party theme (ColorMag), so I’m going to create a child theme of that and add my styling to that.

How the Mega Menu Works

Our mega menu will take the code output by the menus system in WordPress and display it as a mega menu. I won’t be adding an additional menu to the site: you could do this if you wanted to, but as this mega menu won’t work on smaller screens, I prefer to stick to the same menu. This is because I like to give users on mobile and on desktop access to the same navigation.

The mega menu will be styled to only work on larger screens. For smaller screens, I recommend using a burger menu, which is invisible until the user taps on a burger (three horizontal lines) icon. You can find out how to code a burger menu in our tutorial on coding a burger menu.

  • WordPress
    Code a Burger Menu for Mobile Users in WordPress
    Rachel McCollin

Getting Started

The first step is to add plenty of menu items to your menu. This means you will have lots of content to fill your mega menu with.

I’ve added lots of links to my menu, with three levels of navigation. When the user hovers over a top-level menu item, the items below that will appear in a mega menu. Right now, they appear in the standard layout:

a menu in WordPress with three levels of links Each level appears when the user hovers over the link above it in the structure

Let’s start by identifying the code that’s output by this menu in the front end of the site. Here’s the (edited) code for my menu. I've taken out some of the li elements and removed most of the CSS classes so you can see the structure of the HTML:

There's a lot of code there, but I recommend taking a moment to study it as it helps us identify the classes and elements (and sub-elements) we'll need to target with CSS in order to create our mega menu.

We can use the CSS classes generated by WordPress to style our mega menu and to ensure it’s laid out correctly. We’ll use a media query to ensure that the menu appears only on screens that are large enough. 

The specific elements we'll be targeting are:

  • .main-navigation
  • ul elements beneath that (including ul ul and ul ul ul)
  • li and a elements inside the ul elements.

On smaller screens, I’ll make the default menu visible, although I recommend using a mobile alternative such as a burger menu on very small screens. My theme already has a burger menu coded into it for small screens, so I don't need to worry about that.

Note: the HTML output by your theme will be similar to mine as it's generated by WordPress. But there will be differences, such as the class or ID of the main navigation element. It pays to check it first, just to be sure.

Setting Up the Media Query

The first step is to add a media query for the mega menu styling (if you need it). In your theme’s stylesheet, add this:

You can change the min-width value to whatever works on your theme and corresponds to the media queries already present for any burger menu.

Styling the Layout

My existing menu is styled so that third-level items are only displayed when I hover over the second-level item immediately above them. I want to change this so that all menu items appear. I’ll then style them so that they’re laid out correctly.

Let’s start by making second- and third-level menu items visible when the user hovers over the top-level item.

Add this to your stylesheet, inside the media query:

Now, when you refresh the page and hover over a menu item, it looks a bit like this:

second and third level items are visible but a mess

The second- and third-level items are visible, but they look very messy, to put it mildly. Let's fix that. 

We'll do that firstly by making the li element under each top-level item full width. To make this work, we'll have to remove any relative or absolute positioning for elements above those by making them static. We'll also add display:inherit to ensure lower-level menu items are visible when the top-level item is hovered over.

Add this to your stylesheet:

The menu now looks like this:

It's full width, but we need to do something to improve the layout. Let's add a float to the second-level lists so that they appear next to each other.

Add this to your stylesheet:

Now the menu is looking better:

menu with second level lists floated to the left

The float is working, but the background color is off. Edit your styling for the .main-navigation ul li:hover ul element to add background styling. The specific color you use will depend on what your theme is using.

Now the menu looks better:

the mega menu with a gray background

Let's add some color and layout styling to the individual lists, to make the second-level items more prominent. Add this to your stylesheet:

This makes the lists look better, with second-level items being underlined and red. Feel free to amend these colors to fit with your theme.

second level items are now red and underlined

Finally, let's remove the top margin on third-level items so they are bunched together more closely. Edit the code for them as follows:

Now the menu looks much tidier:

the final mega menu with lists neatly laid out next to each otther

We now have a functioning mega menu, using the main navigation menu from our theme.

You Don't Need a Plugin to Create a Simple Mega Menu

If you want to create a simple mega menu using the contents of the WordPress navigation menu, this technique will let you add one to your theme without too much extra code.

However, if you want to add extra features such as custom styling and images, using a plugin will probably be quicker. You're sure to find one that meets your needs in our list of the top mega menu plugins.

  • WordPress
    UberMenu and 7 Other Best Mega Menu Plugins
    Jane Baker
  • WordPress
    How to Make a Sticky Menu in WordPress
    Rachel McCollin
  • WordPress
    When to Use (and Not Use) a Mega Menu for Navigation
    Rachel McCollin
  • WordPress
    How to Make a Drop-Down Menu in WordPress
    Rachel McCollin

May 16 2019

19:41

10 Best WordPress Menu Plugins for 2019

Roads signs let us know where we are and point us to where we want to go. Similarly, website menus help users to navigate your website. Menus tell users their current location on the website an points them to information they’re looking for.  

A good menu organizes, arranges, and displays content to users in a way that is easy to follow. Menus can be simple or complex depending on the purpose of your website. A well thought-out menu significantly enhances the experience of visitors to your website. 

There are many different kinds of menu plugins available for your WordPress website. What type of menu plugin you choose depends on what purpose your website will serve. In this post, I'll show you some of the best WordPress menu plugins for 2019. 

A Brief Look at Website Menus 

A website menu is made up of a collection of links. These links are road signs that make it possible to navigate and interact with a website. They guide you from one page to another and they lead you to information contained within the website. 

An organized and easy-to-follow menu arranges and displays content in a way that is easy to follow. It leaves a positive impression on those visiting your website. It makes them want to spend more time in order to find out more about your business, what you offer, and even helps buy products you’re selling or sign up for services you provide. 

Menu Structure

A menu is divided into navigation bars. Each bar represents a particular category. 

How you name these categories is very important. Navigation bars with concise, clear, descriptive categories allow user to quickly and easily get information about your business, services, products etc. 

Menu placement on your website should be consistent—in the same position on all pages. This makes it easy for users to pay attention and visually process the information you provide. 

Finally, a menu should be uncluttered. 

A Menu Should Be Responsive

Websites are not static entities. As your business grows, your website grows, your audience grows and so does your reach. It goes without saying your website should be responsive and available on all devices. Each device has particular technical requirements. A menu that works on desktops may not work on mobiles. The menu should work well on all devices. Responsive website design makes is possible. 

Technology is constantly evolving to create better experiences for its users. Navigation menus too have come a long way. They have evolved with time and adapted to changes in technology. 

Types of Website Menus 

Here are just some of the many types of website menus:

  • mega menus 
  • hamburger menus 
  • sticky menus
  • dropdown menus 
  • sidebar menus
  • vertical menus
  • horizontal menus
  • one page menus
  • sub menus
  • icon menus
  • fixed menus

Each of these has specific situations where it is useful. 

What Kind of Menu Should You Use? 

Good navigation is critical to success of your business. The question of what menu is suitable for your needs comes down to the simplicity or complexity your website.

You will need to decide what specific purpose your website will serve and how you want to organize content on your website in order to reach users and the kind audience you want to reach. 

For example, if you’re running an online business that sells thousands of products that are organized into hundreds of categories and sub-categories, your menu will be complex. In this case, a mega menu might be more suited to your needs.

  • WordPress
    When to Use (and Not Use) a Mega Menu for Navigation
    Rachel McCollin
  • WordPress
    UberMenu and 7 Other Best Mega Menu Plugins
    Jane Baker

If you’re running a subscriptions-based website with multiple levels of membership, where access to content depends on what level of membership users pay for then your choice of menu will have to be able to adapt to the different membership levels of each user. 

But no matter how simple or complex of your website is, ultimately your goal should be to make navigation super easy for your visitors so they can find information they need without jumping hoops otherwise you lose them and they’re never coming back.

  • WordPress
    How to Make a Sticky Menu in WordPress
    Rachel McCollin
  • WordPress
    How to Make a Drop-Down Menu in WordPress
    Rachel McCollin

You Need a Proper Menu 

But building a website navigation menu is an undertaking that requires a lot of thought, time, and planning. Even if you have no coding skills, you don’t have to lose sleep. The same applies if you know how to code but don't have time to create your own menu from scratch.

You don’t have to build a website menu from scratch! CodeCanyon has many WordPress menu plugins to help you out.  

What is a WordPress Menu Plugin? 

A WordPress menu plugin allows you to create menus—whether simple or complex—for your website quickly and easily, without any specialized coding knowledge.

Choosing a Menu Plugin

Let’s take a look at things you should consider while choosing a menu plugin. These should be non-negotiable: 

  • Ease of use: Easy for you to set up and use. Also easy for your members to use.
  • Easy Customization: No coding knowledge should be required to change layout, change colors, add images, upload logo etc. You should be able to do everything from your dashboard without coding knowledge. 
  • Responsiveness: Keep in mind, 70% of traffic now comes from mobile phones and tablets. The ability scale to all devices desktop, laptop, tablets, and mobile phones is a no-brainer. 
  • Cross Browser Compatibility: Not all visitors to your website use Google Chrome or Firefox.
  • Security: How are system vulnerabilities that occur when using the plugin addressed? Are there regular updates?

Best WordPress Menu Plugins of 2019

On CodeCanyon, there are many great options for menu plugins for WordPress websites. 

Let’s take a look: 

1. UberMenu: WordPress Mega Menu Plugin

UberMenu WordPress Mega Menu Plugin

UberMenu is the most popular Mega menu plugin on Code Canyon. Here’s why: 

  • You can rapidly develop Mega Menus from your pages, posts, custom links, or any content! 
  • It’s highly customizable. You can tweak menu colors, sizes, and fonts with the Customizer’s Live Preview
  • You can customize individual menu items’ styles right from the Menu Item Settings
  • You can choose from multiple layouts, configure click and hover behaviour, as well as show or hide content for different screen sizes

Finally, UberMenu is fully responsive and provides its own mobile menu. And if you’d like to separate your mobile menu from UberMenu, they offer a free solution which complements your UberMenu installation. 

Customer cvcreation says:

Fantastically engineered plugin. Easy to use and implement.

View a live preview  of this must-have WordPress plugin to see if it's right for you. 

2. TapTap: Super Customizable WordPress Mobile Menu

TapTap Super Customizable WordPress Mobile Menu

Forget pre-determined layouts and build the mobile menu you want. 

Customizing your mobile menu is faster and easier than ever, thanks to TapTap!

TapTap is a versatile, easy-to-customize, mobile-first menu plugin for WordPress that you can literally use on any WordPress site. It blends seamlessly to any WordPress website, but also allows you to quickly create menus that are uniquely yours. You can preview any changes you make in real-time. 

TapTap uses the built-in WordPress customization tools and menu builder. This means the plugin is lightweight and allows you to use tools you’re already familiar with. No need to learn a new interface! 

Also, TapTap is WordPress Multisite compatible. 

Flawless navigations is an absolute necessity and TapTap is the best tool for the job. 

Customer breturick says this about TapTap

An absolutely awesome, customizable menu plugin that allows you to design beyond the typical nav system standard on most WP themes. It really adds a nice design pop to any website...

Find out if this menu plugin is right for you by viewing the live preview here. 

3. Touchy WordPress Mobile Menu

Touchy WordPress Mobile Menu

If you want to offer your mobile website visitors a flawless experience that’s tailored specifically for the small screen then Touchy WordPress Mobile Menu is your plugin of choice. Everything in Touchy is designed and built with smartphone usability in mind. 

Touchy is tremendously customizable. With just a few clicks you can change the color of any element, alter positioning options, hide any of the menu bar buttons, override button functions, change transparencies etc., all through the ridiculously easy-to-use real-time Customizer integration

Here are additional features that make Touchy serve as a complete mobile navigation and header solution on any WordPress theme:

  • a logo location
  • call and e-mail buttons
  • an integrated search function
  • a back button and a multi-level drop-down menu

Finally, Touchy also works great on desktop browsers, so if you wish, you can even use it on a full-blown desktop site. 

A very satisfied customer, AlexT-WebDesign, says: 

Super amazing plugin, very flexible. A good move in modern UI design. Super fast great support. Will be looking at more of your plugins now. Thanks again for awesome plugin.

Check out this live preview to see what this WordPress mobile menu plugin is capable of.

4. WP Floating Menu Pro

WP Floating Menu Pro

The best plugins enhance has usability of your WordPress website on a webpage level. WP Floating Menu Pro does just that. It is a 2 in 1 menu for WordPress comprising a page navigator and sticky navigation menu.

With this plugin you can add a smart looking page scrolling navigation bar to any WordPress theme or website in just minutes. All you need to do is define the sections on your website and create the one page navigation menu. 

Even more interesting, you can configure the navigation menu on the page level.

In fact you can:

  • create unlimited navigation menus for different pages
  • create multi page or external links navigation as well 
  • customize the menu design or select from 13 beautiful pre-designed templates 

Explore all the features of  WP Floating Menu Pro in the live preview  and see why customer MilanMedia says:

This plugin is nice piece of work. It is perfectly functional. I like how it works also on mobile devices.

5. Superfly Responsive Menu

Superfly Responsive Menu Plugin

Superfly is a responsive WordPress menu plugin that generates many different possibilities for space-efficient menus. It can create:

  • vertical menus 
  • push menus
  • sliding menus
  • static navigation menus
  • icon toolbars 
  • fullscreen menus 

It can be used as standalone navigation or as a compliment for your main menu.

 Superfly makes navigation much easier and user-friendly both on desktops and mobiles. 

Customer upperlabel says: 

If you're looking for a cool menu, this plugin is perfect and best of all very responsive. 

Find out if this WordPress menu plugin is right for you by checking out the live preview.

6. Mega Main Menu

Mega Main Menu

Mega Main Menu is loaded with tons of features to help you build mega menus. For example:

  • 1600+ vector Icons to use in your menu and website. Vector icons are sharp graphics which will look great on any devices with any resolution.
  • 600+ Google Fonts to choose for your menu. Change font very easy from your admin dashboard.
  • Unlimited color variations. You can change color for any menu element to match colors used on your website. You can use flat colors, gradients and background images.
  • Customizing dropdown menus is so easy. You can place any content in dropdowns: menu links, text, images, widgets and shortcodes.

Find out if this WordPress menu plugin is right for you with the live demo.

7. Hero Menu: Responsive WordPress Mega Menu 

Hero Menu Responsive WordPress Mega Menu

Whether you are a long time Wordpress guru or a complete newbie, Hero Menu allows you to easily and intuitively create a slick and professional WordPress menu. 

It has great UX and UI. It’s easy to use. In a few easy steps, you will have any desired menu up and running within minutes—whether it's a complex Mega Menu rich with features, or a simple drop-down menu. 

What’s even more interesting, with the Mega Menu builder you can:

  • create a mega menu in 3 easy steps
  • choose your column layout
  • select from 6 types of content to show
  • support shortcodes for custom content
Customer Greatsl1ders says this about Hero Menu:

This is a powerful, excellent plugin that is easy to use. The back-end is intuitive. Support for this plugin is excellent with quick response times.

8. WP Mega Menu Pro

WP Mega Menu Pro Responsive WordPress Mega Menu

What makes WP Mega Menu Pro one of the best plugins to create and configure mega menus in your WordPress website?

  • It has 100+ customization options so you can restyle your menu using the custom theme settings to customize the style of your menus in the most effective way.
  • It supports tabbed submenus. 
  • It can display menus as a flyout or megamenu type, with either horizontal or vertical format.

It’s also:

  • translation ready & fully responsive
  • tested on all modern browsers
  • touch-friendly and search engine optimized
Customer sykes_cz says:

Great menu, helped me to make complex navigation nice and clear. Also the support team is great.

9. Groovy Mega Menu

Groovy Mega Menu Responsive Mega Menu Plugin for WordPress

Groovy is a fully responsive mega menu plugin built exclusively for WordPress. 

It’s very easy to use. It has an online library with plenty of presets to help you set and create different types of a menu on your site. Customization is easy as you can add colors, fonts, change sizes effects and use presets.

Groovy Mega Menu is also compatible with popular page builders like: 

  • WPBakey Page Builder (formerly Visual Composer)
  • WordPress Gutenberg 
  • Elementor Page Builder 
  • SiteOrigin Page Builder 
  • Beaver Builder

User by designlab9898  says this about Groovy Menu:

The developer is one of the best and most helpful people who  supports the plugin and puts in extra effort to assist in your website configuration. Highly recommended!

10. QuadMenu: Theme Developer Menu

QuadMenu - Theme Developer Menu

QuadMenu is a WordPress menu designed for both regular users and developers. 

The menu has a drag and drop interface dashboard that allows you and your users to create and customize an unlimited amount of mega menus and tab menus without any programming skills.

Some useful features for regular users with no coding skills include:

  • responsive to all devices
  • touch interface that significantly improves user experience
  • unlimited skins so you can create unlimited number of themes
  • show or hide items depending on the screen size

Features for developers include:

  • load .less files from the folder of your own theme
  • define default options that the user will see
  • define developer options that the user can’t change 
  • add filters to modify the contents of the menu 

User connexionsturre says this about QuadMenu:

I tried many different menu addons, but this is the first that worked straight away with no technical problems.

Conclusion

Website menus are road signs that take us from one place to another on a website. They can be simple or complex. A lot of thought goes into building a menu for a website. The good news is you don’t have to build one from scratch. There are many menu plugins available on Code Canyon. 

To learn more about menus in WordPress, check out some of our other posts here on Envato Tuts+.

  • WordPress
    UberMenu and 7 Other Best Mega Menu Plugins
    Jane Baker
  • WordPress
    When to Use (and Not Use) a Mega Menu for Navigation
    Rachel McCollin
  • WordPress
    How to Make a Drop-Down Menu in WordPress
    Rachel McCollin
  • WordPress
    Navigation Bar Best Practices in WordPress
    Rachel McCollin
  • WordPress
    How to Make a Sticky Menu in WordPress
    Rachel McCollin

18:55

Create JavaScript and HTML5 Forms for Free

Forms are needed for almost every website. Therefore, it makes sense that a lot of free and paid services, plugins, and libraries are available to make it easy to create forms. In this post, we will list some tools, plugins and libraries which can be used to create free forms online without any knowledge of JavaScript. Some of these tools are completely free to use while others are free up to a certain usage limit.

We will also list some useful libraries that can facilitate creation of JavaScript based forms if you have basic knowledge of the language. The libraries are free to use so you can use them to create as many forms as you like.

Lets get started with the tools available online to create your own forms.

Free Tools to Create Forms

Bootsnip: Bootstrap CSS Form Builder and Generator

Bootsnip is a tool that is completely free to use for everyone. You can use it to create as many forms as you want. It generates HTML that you can copy and paste to your own webpage.

The drag-and-drop form builder lets you drag the form components from the left side and drop them on the right side to create the form. Once you have dropped an input component, you can click on it to see a small form and fill out the id, label text, placeholder text and other element-specific information based on the component.

Bootsnip Form Generator

Once you have created your form, it is easy to get the generated HTML by clicking on the "View HTML button. Give this tool a try if you want to create Bootstrap-based forms.

The Bootsnip website actually also offers a few other tools that you might find useful like a button builder and a page builder.

jQuery formBuilder

This jQuery-based form builder is also completely free and offers a very user friendly drag-and-drop method for building forms. You just have to drag different form components from the list on the right and place them on the left side. Once you have done that, you will be able to click on the edit button in the top right corner of the form component to edit all its attributes like placeholder text, whether it's required, and much more.

jQuery Form Builder

Another great thing about this tool is that you can create your forms in any of 27 different languages. 

Any forms or form templates that you create with this tool can be rendered easily using the formRender plugin. You can find more information about the form creation and render process on the official website.

pForm: Free HTML Form Builder

pForm is yet another free HTML-based form builder which allows you to create your own forms by following three simple steps.

You begin by choosing a color scheme for your form and then add some input fields. Once you add the input elements to your form, you will be able to set the value of various attributes like the label text, field type and other attributes.

pForm Free HTML Form Builder

After adding all the desired fields to your form, simply click the Save Form button to download the generated HTML. At this point, you'll also have the option to preview the form before either downloading or going back to edit the form input fields again.

Go ahead and create a form with pForm, it is incredibly easy and you also get to choose your own color scheme for the form.

More Advanced Form Builder Tools

The two services below in the list offer an easy way to create complex forms but their free plans offer only very limited features. If you want to create complicated forms these tools are one way to do it. However, if you have a basic knowledge of HTML and JavaScript, it might be cheaper and better for you to use one of the form plugins from CodeCanyon to create your forms.

  • JavaScript
    Best JavaScript Forms of 2019
    Monty Shokeen

JotForm

JotForm has a free starter plan which allows you to create up to 5 forms and have 100 Monthly submissions. You also get about 1000 Monthly form views. The forms you generate will contain JotForm branding if you use the free starter pack.

JotForm

If you don't mind the JotForm branding and your usage stays within the limits, this tool is actually very easy to use. Once you have signed up, you can start using the templates to create your own forms. The templates address all kinds of needs from payment and hotel booking forms to course and event registration.

Cognito Forms

Cognito forms also offers a form builder with limited features in its free plan. You will get a Cognito forms branding in the forms you create but you can create as many forms as you like. Form submissions are however limited to 500 per month in the fee plan. This is still five times the cap put in place by JotForm.

Cognito Forms

The form builder tool allows you to either create a form from scratch or use built-in templates. In either case, you will probably find it to be the most feature-rich and user-friendly of all the form builder tools listed so far.

Try creating a form using one of the Cognito form templates and see if it addresses all your needs.

Free Plugins and Libraries to Create Forms

If you don't mind writing a little code yourself to create your forms, you can take advantage of all the free JavaScript or jQuery plugins and libraries to create your own forms with the exact feature set you need for a particular project.

Here are some libraries to help you get started.

jQuery Validation Plugin

You can use the jQuery Validation Plugin to write your own custom validation rules and error messages, which can be easily integrated within existing forms. In fact, we also have a tutorial for jQuery based form validation that uses this particular plugin. This should help you jump start the form creation process.

  • JavaScript
    Easy Form Validation With jQuery
    Monty Shokeen

Even if you have already created a basic HTML5 form, you can still use the plugin to add validation with a single line of code. It will greatly improve the user experience for people visiting your website. You have full control over the placement and styling of error messages and the library makes sure that they are displayed in a non-intrusive manner.

Parsley

This library also allows you to integrate input validation in all your forms but unlike the jQuery validation plugin it relies on use of HTML data attributes instead of JavaScript for validation. Adding validation to a form is as simple as including the data-parsley-validate attribute in the <form> tag.

You should take a look at some of the examples mentioned on the official website to get a good understanding of the working and features of the library.

Pickadate

Anyone who wants to add an easy to use mobile-friendly, responsive and lightweight jQuery-based date and time input picker would find Pickadate to be very useful.

It is both touch- and keyboard-friendly. The picker supports over 40 different languages so you will probably be able to let people choose the dates in their native language.

The plugin offers a lot of customization options for both the date picker and the time picker.

Zxcvbn

This weirdly named password strength estimator is actually a great tool to let users know the relative strength of passwords that they want to use when signing up using a form that you created.

It relies on pattern matching and weighs around 30k common passwords, common names, surnames and patterns like dates or keyboard sequences like qwertyuiop etc. to determine if a password is strong enough. It is definitely worth checking out if you want to give your users a friendly way to determine their password strength.

FilePond

FilePond is a JavaScript library that allows you to implement file upload functionality in your forms with an impressive set of features. One of the things that you will instantly like about this plugin is its user-friendliness.

It will accept directories, files, blobs and much more as input. Any uploaded images are optimized, resized and cropped on the client side to dramatically improve upload speed and reduce srver load at the same time.

The list of features does not end here! I strongly suggest that you check this library out if you are looking for a JavaScript library to facilitate user-friendly file upload in your forms.

Final Thoughts

In this post, we took a look at some of the popular form building tools, plugins and libraries that can be used to create feature-rich HTML forms in no time.

If you don't want to write any code, the free form builder tools mentioned in the first half of the article will generate the HTML for you. All you have to do is just drag and drop the components that you want to include in your forms. Some dedicated form building services will also give you a lot of other features but they are generally paid and the free version will give you access to limited functionality.

The plugins and libraries mentioned later in the article will be helpful for those people who want to create their own forms with the exact functionality they need. These libraries will just make it easier for them to add the required functionality while giving them a lot of control over the way the forms look and behave.

You can also take a look at different plugins and scripts available on CodeCanyon to help you create all kinds of forms with ease. They are a good option for people who don't want to code everything from scratch but still want control over the forms compared to third party services.

  • JavaScript
    Best JavaScript Forms of 2019
    Monty Shokeen
  • HTML5
    Form Input Validation Using Only HTML5 and Regex
    Monty Shokeen
  • JavaScript
    Easy Form Validation With jQuery
    Monty Shokeen

May 15 2019

18:45
5 Essentials To Create Your Own Website Presence
03:06

How to Set Up a Quiz on Your WordPress Website

Today, we’re going to explore the WP Quiz plugin which allows you to set up quizzes on your WordPress site. We’ll go through the details of this plugin and we’ll end the post with a real-world example.

Setting up online quizzes is one of the best way to engage your visitors and it’s always fun for them as well! If you can present the quizzes in an interesting way and make them shareable, it might have potential to bring a lot of traffic to your site. With instant quiz results, users would love to take on multiple quizzes out of curiosity, and it’s an opportunity for you to strengthen your branding.

As a site owner or a seasoned WordPress developer, you already know that WordPress provides a lot of plugins for almost every feature one could think of, and it can be hard to choose which one to use. For the quiz category, I’ve chosen one of the best free plugins in this category—WP Quiz. It allows you to create different types of quizzes very easily. 

For this post, I’ve used WordPress 5.1 and the WP Quiz plugin version is 2.0.1. I would recommend that you install it if you want to follow along with this post. To install the WP Quiz plugin, you need to follow the standard plugin installation process in WordPress.

In the upcoming sections, we’ll explore the basic settings of the WP Quiz plugin along with the setup process. Next, we’ll build a real-world quiz example for the demonstration purposes. Meanwhile, we’ll also go through a few important aspects of this plugin that allow you to create different types of quizzes.

What Is the WP Quiz Plugin?

The WP Quiz plugin is a WordPress plugin which allows you to create quizzes on your site. It’s a very easy-to-use and flexible plugin which provides a various options to create a quiz. The plugin is set up to create three different types of quizzes: a trivia game, a personality test, or a flip quiz. 

With each quiz type, there’s an option to add text, image or video. Additionally, it comes with features like a restart quiz button, a quiz progress bar, and animation effects to keep users engaged.

Let’s have a quick look at the important features it provides:

  • responsive
  • compatible with any WordPress theme
  • text, image and video content
  • social sharing
  • animation effects
  • shortcode support
  • and more

As you can see, this plugin provides a lot of useful features that you could use to create quizzes on your WordPress site. With built-in responsive design, users can even take part in the quiz from their mobile devices. And social sharing makes it easy for quizes to reach a lot of users and increase traffic on your site.

In the next section, we’ll discuss a couple of the core elements of this plugin that are important to understand if you want to use it effectively.

Explore Plugin Settings

Once you install the WP Quiz plugin, it will add a number of admin links to the left sidebar. In this section, we’ll go through the each section briefly.

Quizzes

This takes you to a quiz listing page with all the quizzes created so far. 

Add New Quiz

This is a shortcut that allows you to create a new quiz straight away. You can choose to create one of three different types of quizzes: Trivia, Personality and Flip.

Trivia is a type of quiz in which users have to choose the the correct option for each question. In this type of quiz, users try to get as many correct answers as possible. At the end of the quiz, they will be shown their score, sometimes in the form of chart.

In the Personality quiz, you can ask questions that may reveal the personality of the user. In this type of quiz, there is no right or wrong answer, but each choice influences the answer the user receives at the end. For example, you could ask questions that may decide if the user is an introvert or extrovert.

Finally, there is the Flip quiz which is used to create educational content in the form of flip card quizzes. In fact, it’s one of the most interesting of all the quiz types we’ve discussed so far. In this type of quiz, users will be presented with the flip cards. On the front of the card, there’s a question or puzzle, and on the other side, there’s the answer. Users get a chance to guess the answer, then they click on the card to see if they were right!

Settings

In this section, you can configure settings that are globally applicable. You can configure different aspects of this plugin like subscription settings, quiz types, and Google Analytics settings.

Import/Export

This section allows you to export and import quizzes should you wish to move them between different sites. In fact, the plugin already provides three demo quizzes that you could import to your site for the demonstration purposes.

That was a brief introduction to the features provided by this plugin. In the next section, we'll build a real-world example as a demo.

Build a Quiz for Your WordPress Site

In this section, we’ll build a real-world example to demonstrate how to use this plugin to create quizzes on your WordPress site. We’ll create a trivia quiz in this example since it’s the most popular quiz type. In our example, we’ll build a quiz with four questions related to WordPress. (Let me know in the discussion below if you have any questions about other quiz types, I'd be happy to answer any queries!)

Before we proceed, make sure that you’ve installed the WP Quiz plugin in your WordPress site if you want to follow along.

Go ahead and access the WP Quiz > Add New Quiz link in the left sidebar in the back-end. It will ask you to choose a quiz type:

Add New Quiz

Click on the Create Quiz button for the Trivia type and you'll get taken to the Add New Quiz dialog, where you can set up the quiz title and its content.

Add New Quiz UI

Click on the Add Question button and you'll get to the following screen to add question details.

Add a Question

If you want, you can upload an image or a video related to the question. Then, you have to enter the question text itself.

In the Answer Explanation field, you can enter the description which will be displayed when the user selects the correct answer. In the Question Hint field, you could optionally provide a hint about the answer!

Finally, you  add answers by clicking on the Add Answer button. You could present answers either in the form of images or text.

For our example, let’s start adding questions. Let’s add the details for the first question about WordPress: "What is WordPress?".

First Question

In the same way, let’s add a few more questions about WordPress. I used the following ones:

  • Which Programming Language is Used by WordPress?
  • Which Database is Used by WordPress?
  • What is the Latest Major Version of WordPress?

Next, let’s add results text by clicking on the Add Result button as shown in the following screenshot.

Add Results

The Min field indicates that the result will be only displayed if a user gives the number of correct answers specified. In our case, user must at least give 3 correct answers out of 4.

Put whatever you want in here to congratulate the user on their knowledge of WordPress.

Finally, save the quiz and it will take you to the quiz listing page. You should be able to access the quiz using the Permalink already. Of course, you could also use the shortcode of the quiz if you want to display the quiz in a post or page.

In the front-end, the quiz looks like this.

Front-End View

And the result will look like this.

Display Results

So that’s how you can create quizzes using this plugin. Go ahead and try the other types of quizzes, and post me your feedback using the feed below!

Conclusion

Today, we discussed how to create quizzes by using the WP Quiz plugin for WordPress. We went through an in-depth overview of this plugin and implemented a real-world example for demonstration purposes.

  • WordPress
    Create a Contact Form in WordPress Using a Free Plugin
    Sajal Soni
  • WordPress
    Choose a Form Builder: The 7 Best WordPress Form Builders Compared
    Nona Blackman
  • WordPress Plugins
    Best WordPress Form Builder Plugins for 2019
    Lorca Lokassa Sa
  • WordPress
    Quform vs. FormCraft: Top WordPress Form Builder Plugins Compared
    Nona Blackman

May 14 2019

08:00

How to Improve the User Journey on Your Website

From the moment a user lands on your website until they either leave or convert into a customer, a series of steps lead them from one point to another. Buyer personas represent your typical customer and help address pain points your customers have as well as predicting actions specific audiences might take. About 63 percent of marketers use buyer personas when creating content.

From my experience, here are some steps to help improve your user’s journey once you develop your target audience’s unique buyer persona.

Build a user journey map

The key to any good trip is knowing where you’re starting and where you’ll end up. To write an accurate user journey map, think through the path you want your users to take from the minute they land on your page through conversion and even after for follow-up. Write out each step of the journey so that you don’t miss a single point. The final destination should align with your goal for visitors who land on your page, such as signing up for a newsletter or making a purchase.

The buyer’s journey starts with the awareness stage where the prospect has a problem or sees an opportunity. It then moves to the consideration stage, where the person better understands some possible solutions to the problem. The final step is the decision stage where the consumer decides what their solution is.
The journey may be a bit different for different types of websites. For example, on an e-commerce site, the journey might start with an informational video, move to an FAQ about the product, go to a call to action (CTA), and end with the person buying the product.

A user journey map is a schematic that shows the user's starting point; arrows point to the next possible step in the user's journey through your site. Example of a user journey map, including potential paths a buyer might take. Source: https://www.optimizely.com/optimization-glossary/user-journey-map/

One of my clients found customers had some very specific questions when they landed on the homepage of the site. Answering these questions quickly and above the fold allowed me to design a journey map where the client moved quickly from the first stage to the consideration stage. Conversions increased, and the website’s sticky factor improved.

However, an advocacy site may use different steps to qualify volunteers and make sure they align with the organization’s values rather than sell a product. Another thing to consider is when part of the journey occurs non-digitally, such as an initial connection made at a trade show and final sale through the website. The steps will vary depending on the first contact with users and how much information must be provided through your landing page.

Create focus on the landing page

The first step in the user journey is your landing page. You may have more than a single landing page on your site, too.

For example, if your analytics show that most of your search engine traffic comes because of a specific piece of content, use the content as part of your landing page and include a CTA at the end of the article.

Another example: If your analytics show that 90 percent of your traffic arrives on a specific page, treat that page like any other landing page.

Figure out the audience members and create a buyer persona for that specific group of site visitors. You must also decide where these visitors are in the journey—if they are already in the consideration stage, your content will present the solution to the problem rather than just defining the problem.

Only 39 percent of marketers create a custom landing page for a specific marketing offer. However, unique pages for each of your offers allows for specific content which drives the buyer through the journey and ignores content not related to solving the user’s problem.

Graphic shows that pages with 5+ links had a conversion rate of 10.5%; pages with 1 link had a conversion rate of 13.5%. Unbounce Marketing found that fewer links lead to higher conversion rates. Source: https://medium.com/unbounce-marketing/infographic-the-data-behind-landing-page-trends-in-2018-b4b6787a40dd

One of the best ways to make your landing page highly attractive from the minute users land on your site is by creating a singular focus that drives the buyer down the path you want them to take. Allow a strong balance of positive and negative space so that attention is drawn where you want it to go. Show users next steps with arrows and clear calls to action. No matter what type of website you manage, you must conduct A/B testing to figure out what changes garner the highest conversion rates from your specific users.

Determine your end goal

Before you add any content, you need to know the final purpose of the buyer’s journey. By the time your users get to the final leg of the journey, you’ve narrowed down their buying experience and know exactly what they’re looking for, but what is your goal for their actions? The micro-interactions on your site might only have a single purpose, but they should all point toward the final goal or larger purpose of your website, even from the first moment the user finds you.

Infographic showing conversions based on number of links. Caption: Fewer links earn more conversions. A page with only one link gains two percent in conversions. Source: https://medium.com/unbounce-marketing/infographic-the-data-behind-landing-page-trends-in-2018-b4b6787a40dd

Place your focus on the final call to action and perfect it as much as possible. What’s the one concern you haven’t yet answered through the micro-interactions that might make the user reluctant to take that final step? How can you effectively answer any concerns the buyer might have? Put yourself in the buyer’s shoes and think about what might keep you from buying or signing up. Then, offer a guarantee or additional information that puts the user at ease.

Educate the consumer

If your site visitor makes it midway through the journey, they’re definitely interested in what you have to offer. You must now convince them that your product, service, organization, or information is exactly what they’re seeking. Clearly answer any questions the user has.

You can figure out typical questions based on what others have asked via telephone, email, or in forums such as Yelp, the Google Play Store, or the Apple App Store. Study Google’s “People also ask” questions for more ideas. Answer the most popular questions upfront and provide additional options if the user has additional questions. Add live chat for any out-of-the-ordinary questions that need an immediate answer. There are many effective ways of educating site visitors, including video, articles, and guides.

Screenshot of Google’s “People Also Ask” Type a question into the Google browser and then look near the top for “People Also Ask” results to find typical questions about a topic. Source: Screen grab by author

Plot touchpoints

List the places where customers engage on your website and match them to where the buyer is in their journey. Someone who connected with you in a local store might arrive right on the shopping page on your site. If you’ve already vetted a volunteer for your organization, they may just need to go directly to the signup form.

behavior flow report A behavior flow report provides details about where users enter your site, how long they stay on pages, and where they exit. Source: https://www.socialmediaexaminer.com/google-analytics-behavior-reports/

This image from optinmonster.com shows potential results for A/B/n testing, illustrating how it’s possible to see what site contents perform best.

A behavior flow report allows you to address the needs of different types of users and where they came from. Build a map based on the information users expect to see and the typical behavior of each user, but also be aware that 49 percent of users expect instant access to information at all times. As more people buy smartphones and get online with them, people grow more accustomed to searching for an answer and getting immediate results. Devices such as Alexa and Google Home also make it easier than ever to pull up information with little effort. Make the details easy to locate within your navigation and add voice search functions to your site.

Each touchpoint on the journey should have a goal. For example, the goal for the landing page may simply be to get the user to read the information and click on a video link. The goal for the video might be to direct them to a signup form. The signup form has a call to action to fill in and submit the form. Knowing the purpose of each touchpoint allows you to create a singular focus and drive conversions. Remember non-digital experiences as well. If a user sees an advertisement at a bus stop at a time when they need a solution to a problem, do you help them solve that problem as soon as they navigate to your website?

One of my clients placed advertising in local theaters but wasn’t getting the hoped-for results. Simply by adding a specific website address that took moviegoers to a page geared specifically toward that buyer persona, the client saw an increase in site visitors. She also had the advantage of knowing exactly how many moviegoers saw the ad and visited her site because the landing page was specific to that campaign.

Test everything, then retest

Map of multivariate testing Multivariate testing allows you to make more than one change and test the options at the same time. Source: https://optinmonster.com/how-to-create-a-split-test-and-why-you-should/

A design that’s user-centered drives the buyer smoothly from Point A to Point B to Point C. Test each step along the way and make any tweaks needed to gain the highest conversion rate possible. You may need to change the color or wording of a CTA button, remove or add information, or complete any number of other tasks.

Split testing allows you to make sure each and every point of contact is the best it can be. Track your conversion rates and test frequently to ensure ongoing success.

The path isn’t always straight

You might spend countless hours mapping the buyer’s journey and planning out each point along the way. However, users don’t always enter your website where you think they should, nor do they use a straight path in their journey. Allow some room for users who bounce around in a different pattern than you expected. With a little attention to the journey, the buyer is likely to take alternate routes, you’ll get a better return on your investment than you ever expected.

The post How to Improve the User Journey on Your Website appeared first on Boxes and Arrows.

May 13 2019

11:26

New Course: Code a REST API With Koa and TypeScript

Koa is a new framework created by the same people that created Express. The difference is that it has been created from the ground up to use the latest features in JavaScript (aka ECMAScript 2015+), including the latest way to handle asynchronous programming: async and await. 

In our new course, Code a REST API With Koa and TypeScript, you'll learn how to get up and running by building a fully functioning REST API from scratch. Derek Jensen will take you through the whole process, showing you how to structure your app with flexibility and maintainability in mind by incorporating services and repository layers.

You can take our new course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+. 

Plus you can download unlimited items from the huge Envato Elements library of over a million creative assets. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.

Watch Derek's quick intro video to get a feel for what you'll learn.

 

May 11 2019

06:22

How to Create an Online Store With WordPress and BigCommerce

In this tutorial I’m going to show you how to make a WordPress shopping cart, using the BigCommerce WordPress plugin. We’ll go over the following things (in both video and written format, choose whichever you prefer!):

  • What is BigCommerce (and the concept of “headless”)?
  • How to download the plugin and create an account
  • Setting up the WordPress store
  • How to create a menu for the store
  • Products on the BigCommerce platform

Watch the Screencast

Read the Tutorial

Let’s begin by answering this question:

1. What is BigCommerce?

BigCommerce is an eCommerce platform which powers over fifty thousand small and medium sized businesses, and over thirty thousand Fortune 1,000 companies (like Ford, Toyota, and Sony). BigCommerce is a SaaS product (software as a service) so is licensed and accessed via entirely online.

What makes BigCommerce different is its “headless” commerce approach. Being headless means that the presentation layer (what is seen by the user) is decoupled from the ecommerce layer. A traditional online store will usually be run on a system where the frontend is directly linked with the backend; everything is served from the same place. A headless system means that the frontend can be located wherever, and talks to the remote commerce layer via an API.

BigCommerce offer a “frontend” just like any other eCommerce service, but thanks to their headless approach you can also choose whichever CMS you’d like to plug your BigCommerce store into. And that gives you the WordPress shopping cart option.

2. How to Download the Plugin and Create an Account

The coupling of BigCommerce and WordPress is made much easier thanks to the plugin, BigCommerce For WordPress, developed by the BigCommerce team. You can download the plugin from wordpress.org and upload it to your WordPress installation, or access and install it from within the plugin page in WP Admin.

Once installed and activated you’ll need to either connect your site to an existing BigCommerce account, or a new one.

BigCommerce For WordPress

For the sake of demonstration, let’s set up a new account. Click Create New Account and the store will guide you through the whole process.

3. Setting up the WordPress Store

To begin with you’ll be asked to enter some standard details; your name, the store’s name, location, that sort of thing. Once done, the store will be created behind the scenes and you’ll be emailed when it’s done.

Setting up the WordPress Store

Then you’ll be asked to set up a “channel”. Channels define where your products are sold, so if you’re selling on a WordPress website that’s a channel. If you’re selling products via a Facebook page, that’s another channel. We’ll therefore set our channel name to something like “WordPress Website”. 

You’re then given the choice to automatically add new products, when they’re added to your BigCommerce account, to your channel. We’ll select Yes.

3. How to Create a Menu for the Store

At this point you’ll be asked to create a navigation menu for the store. You can give it a name, then select (or not) any of the options you see in the screenshot below:

How to Create a Menu for the Store

That’s all there is to setting up a navigation menu. If you visit Appearance > Menus in your WordPress Admin you’ll find your new menu setup and waiting for you, complete with its name and the various endpoints/menu items you chose to include.

You then need to make sure your navigation menu is associated with a location in your WordPress theme. This can be done under the Manage Locations tab and the options available to you will depend entirely on your WordPress theme. 

With that done, check your frontend and you’ll see the menu in the desired location, all the required store pages, and some demo products to show you how it will work.

4. Products on the BigCommerce Platform

Let’s now add some products of our own.

Having set up your BigCommerce account via the WordPress backend you’ll have received a confirmation email, plus some login details. After you confirm your email address you’ll be asked to set a password, which you can then use to login to the BigCommerce platform.

Once in, you can add products, edit them, delete them, and apply any number of customizations you might want. If you navigate to Products in the sidebar, you’ll see all the demo products you’ll have seen appear in your WordPress website.

Adding Products on the BigCommerce Platform

This is a great opportunity to play around with what’s been installed, to learn how products are managed. Click on one and you’ll see all its basic information, its description, categories, and so on. Make any change you want, then click Save. The change is automatically reflected on your WordPress site; to check, go back to your WordPress Admin, then BigCommerce > Products. You’ll see that the plugin is constantly syncing and keeping the product catalogue up to date (hit Sync Products if you want to trigger the synchronization process):

product sync

Find your product on the frontend, refresh (if the page was already open for some reason) and you’ll see the changes automatically reflected.

Adding products is as simple as you might imagine: add them to the BigCommerce account and they’ll automatically be synced with your WordPress site, making them available for purchase by your customers. Watch the video to see adding products in action.

Conclusion

This tutorial has shown you how easy it is to set up a BigCommerce store, coupled with a WordPress website.

The headless approach to BigCommerce makes it a really flexible choice for selling online. Keeping your eCommerce functionality separate from your frontend presentation can give you brilliant performance and workflow wins. And by running a single store backend, and distributing across multiple channels (including your WordPress shopping cart) you’ll have the freedom to sell how you want.

Related links:

May 10 2019

22:05

20 Best HTML5 and JavaScript Game Engines and Templates

With Flash end-of-life announced for the end of 2020, HTML5 and JavaScript games have quickly taken over, becoming a major source of gaming on the web.

With this major shift in the landscape though came a move from largely using one tool to create online games, to using dozens (maybe hundreds!) of different engines, libraries, and variants of common web languages.

That’s where HTML5 and JavaScript game templates come in.

Why Use a HTML5 Game Template?

Building a game is difficult. With several distinct skill sets nestled into a complex package, it can difficult to just jump into a project from scratch.

For those new to game programming, using a template can help to fill in those gaps in skills, such as User Interface or graphic design, giving insight into the workings behind a completed game. This is a great learning experience, and helps to get your first couple of projects done without becoming too overwhelming.

Experienced game programmers can find plenty of use from these game templates too. They can help to build the skeleton for a larger game, or act as the base for a new project, cutting down on creating repetitive code for each new game you make.

If you’re looking for more advanced game engines or systems, check out our favorite JavaScript Game Engines for your next project.

  • Game Engines
    Best JavaScript Game Engines and Games to Download
    Kyle Sloka-Frey

For now, let’s take a look at the top 20 of these templates available on CodeCanyon.

1. Canvas Puzzle

Canvas Puzzle was the first HTML5 game on Envato Market, so this seems like a good place to start.

The concept is simple, but can easily be built on to create a fully fledged game.

Canvas Puzzle

Compatible with all modern browsers, this HTML5 game template has an Internet Explorer 9 or less fallback while also working great on the most current iPads.

Users can use any image—just drag and drop with Firefox and Chrome—and the game generates any number of different pieces.

Canvas Puzzle is lightweight, simple, clean, and ready for you to customize to your liking.

2. Boy vs Zombies

Will your boy make it past the zombies in Boy vs Zombies?

Give it a try or make it your own version.

Boy vs Zombies

Feature include:

  • playable on all platforms
  • easy to customize using Construct 2
  • mouse, keyboard, and touch control support
  • and more

Check out this zombie-themed endless runner in action:

Boy vs Zombies is ready for you to reskin and modify—without any coding knowledge.

3. Indiara and the Skull Gold

Just like many of the other HTML5 and JavaScript game templates, Indiara and the Skull Gold works on all platforms.

Are you ready to go on an adventure collecting ancient artifacts in caves full of traps?

Indiara and the Skull Gold

This fantastic HTML game template includes:

  • 8 levels
  • Construct 2 files
  • layered Photoshop and Illustrator files
  • and more

Indiara and the Skull Gold is fully touch and mouse supported, includes social media share buttons, and can be visually customized by swapping out the image files or completely modified with Construct 2.

4. Slot Machine: The Fruits

The Slot Machine: The Fruits is optimized for both mobile and desktop and includes high-quality images that support up to 1500x640 resolution.

Slot Machine The Fruits HTML5 casino game

This colorful game was developed with:

The Slot Machine The Fruits can even be installed using the CTL Arcade WordPress plugin.

5. Jumper Frog

Based loosely on the classic arcade game, this HTML5 game template is ready to be innovated and turned into a brand new game.

Built on HTML5, JavaScript, and CreateJS, this title includes full source code and is ready to be customized.

This combination makes it great for learning all of the pieces that go into a game, for building your own games from, or as a headstart for an app project.

PSD and Adobe Illustrator files are also available sepearately for easier customization.

6. The Sorcerer

Enjoy the magic of HTML5 game templates with The Sorcerer.

The Sorcerer - HTML5 Game

This game build was inspired by Zuma gameplay and includes three different progressive levels.

It has been developed with:

The 960x540 resolution scales to fit and can be used with the CTL Arcade WordPress plugin.

Customize The Sorcerer and start making some puzzle magic!

7. Game Christmas Furious

'Tis the season for some fun!

The Game Christmas Furious HTML5 game template brings touch and mouse supported fun to all platforms.

Game Christmas Furious

Includes:

  • 6 levels
  • Construct 2 files
  • layered Photoshop and Illustrator files
  • and more

Balloons invade the North Pole—can Santa catch all the gifts and avoid the balloons? The Game Christmas Furious HTML5 game template is ready to play or transform into your own creation.

8. HTML5 3D BlackJack

The HTML5 3D BlackJack has:

  • split hand
  • double bet
  • insurance

But the best part is the hi-res 3D graphic style.

3D Roulette - HTML5 Casino Game

This game has been developed with HTML5, JavaScript and CreateJS, and is both ready to play and very customizable.

You can even ante up the HTML5 3D BlackJack with the CTL Arcade WordPress plugin.

9. Game FlapCat Steampunk

Game FlapCat Steampunk is based on similar blockbuster games with its simple design and playability.

Enjoy this touch and mouse compatible game in full 1280x720 resolution.

Game FlapCat Steampunk

This cool cat includes:

  • infinite levels
  • Construct 2 files
  • layered Photoshop and Illustrator files
  • and more

Game FlapCat Steampunk has a great art style and is ready to play or customize.

10. 3D Roulette

Like the HTML5 3D BlackJack, the 3D Roulette HTML5 casino game has a great 3D hi-res look.

3D Roulette - HTML5 Casino Game

It has also been developed using:

Easily modify 3D Roulette by downloading and editing the Photoshop and Illustrator files. It can also be installed directly into WordPress using CTL Arcade WordPress plugin.

11. Bubble Shooter

Bubble Shooter reminds me a lot of Snood and other games like it.

This simple and addictive game can be installed as-is or modified to your liking.

Bubble Shooter - HTML5 Games

This HTML5 game template comes in 870x1504 resolution, is fully responsive, and can be easily modified using the Photoshop and Illustrator files.

It has been developed with HTML5, JavaScript and CreateJS, and is both ready to play and can be installed directly into WordPress using the CTL Arcade WordPress plugin.

12. Woblox

Woblox is probably the most addictive game in this roundup of HTML5 game templates.

Add your own logo and this puzzler is ready to go.

Woblox

This game will play on all platforms, but it feels best using a touch screen as you will intuitively slide the blocks into place to set the green block free.

Game includes:

  • 384x600 resolution
  • 45 progressive levels
  • uses less than 100 Construct 2 events
  • more

Easily customizable and equally addictive, Woblox is an excellent HTML5 game template.

13. treze-Edges

treze-Edges sounds easy—until you try it!

Simply touch the screen to create edges, but don't let the ball escape.

treze-Edges

Features include:

  • includes Construct 2 and Construct 3 source files
  • works with all HTML5 compatible browsers
  • keyboard and touch controls
  • and more

Enjoy treze-Edges or make it your own—what twist will you add?

14. Don't Crash

Don't Crash.

That's it.

It sounds easy, but this mesmerizing HTML5 game template will keep you guessing.

Dont Crash

Features include:

  • touch support
  • fully responsive
  • 1280x720 resolution
  • includes Construct 2 files
  • more

And never forget—Don't Crash!

15. Arrows 2D Platform Action Engine

The Arrows 2D Platform Action Engine is ready and waiting for you to create something amazing.

Arrows 2D Platform Action Engine

This includes:

  • mobile, keyboard, and gamepad support
  • full Construct 2 files to build your own 2D side-scrolling action game
  • the Arrows Action Engine also includes an Enemy AI with Boss AI
  • and more

The Arrows 2D Platform Action Engine is good enough to stand on its own, but it's true heart and soul is in offering you the tools to build your own game.

16. Katana Fruits

Become the next fruit ninja with the highly customizable Katana Fruits template.

Katana Fruits - HTML5 Game

This HTML5 game template was developed with the following code chops:

You can edit the look and feel with the included Photoshop and Illustrator files and install it directly into WordPress using the CTL Arcade WordPress plugin.

17. Panda Love

Ready, set, run!

This fast-running panda needs to be guided over obstacles to collect prizes and finish each of the over 20 levels.

Panda Love

This template includes the Construct 2 files and features:

  • autosave
  • ad support
  • one touch control
  • and more

Show some pixel love with Panda Love.

18. Ultimate Swish

Want to add some jumpshots to your upcoming project? Ultimate Swish gives you the framework to do just that.

Ultimate Swish provides a short, addicting game cycle that could be expanded into its own full game, or customized to fit within your current project.

The game is based off of HTML5, JavaScript, and CreateJS, with all source code included, so its easy to see how it works and start customizing in no time!

19. Formula Racing

If you have a need for speed, Formula Racing is what you want.

Fully responsive and ready for any screen size, this game has been built with Construct 2.

Formula Racing

Features include:

  • rival car AI
  • easily modify existing tracks or create your own
  • PNG and PSD graphic files included
  • supports AdMob Advertising
  • and more

Formula Racing is fully customizable and ready for you to race away with something new.

20. Balloon Fight

Balloon Fight is a charming and addicting retro style game built with Construct 2.

Pop the balloons of the other cats—and you win!

Balloon Fight

Features include:

  • all sounds and music included
  • PNG graphic files included
  • supports AdMob Advertising
  • unlimited levels
  • and more

Balloon Fight is easy to control, but difficult to master.

Conclusion

Some of these templates are just that—templates—while others border on complete game concepts or flexible game engines. Whether you're finding something for your website or learning how to flesh out your own idea, you can clearly see how diverse HTML5 game templates can be.

You might also find an Envato Tuts+ code tutorial on game design or game mechanics helpful, or even an HTML5 tutorial to get you started on coding your own game.

  • Game Engines
    Best JavaScript Game Engines and Games to Download
    Kyle Sloka-Frey
  • HTML5
    20 Best HTML5 Game Templates of 2018 With Source Code
    Eric Dye

Have you used one of these templates to build your own game? Let us know how it went, and drop us a line in the comments below!

21:34

Create a Booking System With a WordPress Booking Plugin

Final product image What You'll Be Creating

If you run any sort of business that involves appointments or meetings with clients or between staff members, then your life will be made much simpler if you enable bookings on your website.

This doesn't just apply to meetings—hotels, spas and other leisure businesses can also benefit from using online bookings. Allowing people to book online will encourage more bookings, give your customers more control, and free up your time.

In this tutorial, I'll show you how to use a plugin to add bookings to your website. 

I'm going to imagine my site is for a real estate agent, and add agents and appointment types accordingly. But the steps I follow should apply with some tweaks to whatever kind of business you're running.

I'll be using the Bookly Pro plugin for this tutorial, which is one of the premium booking plugins on CodeCanyon. I've chosen this plugin because it has a wide range of features, and even some add-ons should you need more. It's also compatible with Gutenberg, so it will let you use blocks to add your booking form to your site.

There is a free version of this plugin available in the WordPress plugin directory with fewer features; I've chosen to use the premium version so I can add unlimited staff members and Google Calendar integration.

Installing and Activating the Plugin

The first step is to install and activate the plugin. When you download the plugin and unpack the zip file, you'll find two more zip files inside it. The one you need to upload to the plugins screen in your admin is called bookly-addon-pro.zip.

Installing the plugin will install two plugins to your site: the core (free) Bookly plugin and the add-on plugin with the premium features.

Configuring Settings

The first step is to configure settings for the plugin.

Go to Bookly > Settings to access the settings screen.

The bookly setting screen

The main settings screen is concerned with timings for bookings and the settings for cancellation and booking. Work through these, setting them up as you want them to run for your business. It's sensible to find a balance between what will make your customers happy and what your staff can work around, especially when it comes to things like the notice period for cancellations.

Work through the other settings screens, editing these as necessary:

  • URL Settings: Here you can add links to the screens customers and staff will see after appointments are rejected, approved or cancelled. To do this, you'll need to create those pages in your site and then add the link to them in the relevant fields. Bookly provides blocks you can use to populate these screens.
  • Calendar: Add, re-order or delete fields in the calendar that will be visible to customers and staff. A full list of fields is provided.
  • Company: Add your company details and logo.
  • Customers: Use this screen to define what data will be collected for customers and what type of account will be created on your site when a customer signs up for an appointment. Customers will then be able to log in to book additional appointments in future, or to see information about their appointment.
  • Google Calendar: Use this screen to connect your appointment booking system to your company's Google calendar. This will enable syncing between appointment bookings and your staff members' calendars, helping them to keep track of what they've got booked in. You'll need to set up a project in the Google Developer's console: follow the instructions on the settings screen in Bookly to do this.
  • WooCommerce: If customers pay for appointments, you can create an appointment product and link it to the booking system here.
  • Facebook: To allow customers to sign in with Facebook, you'll need to set up Facebook integration using the instructions on this screen.
  • Payments: Configure the currency you accept and integration with PayPal.
  • Business Hours: Configure the hours your business is open and that people can book appointments within. It's important to do this before you start taking appointments, so that people don't book outside your operating hours. You can also configure hours for staff members in their individual screens.
  • Holidays: Use the calendar to set dates during which the business can't take appointments. If individual staff members have different holidays, you set this via their screens.
  • Purchase Code: Add your purchase code here when you buy the plugin, so you can install updates.

Once you've configured the plugin settings, it's time to start adding staff.

Adding Staff Members

The next step is to add staff members.

You can access this either by clicking Bookly in your admin menu and clicking the Add Staff Members button, or by going to Bookly > Staff Members in the admin menu.

The Bookly welcome screen

This takes you to the Staff Members screen. Add a new staff member by clicking the icon at the top right of the (currently empty) list of staff members. If you want, you can add categories for staff members, which you can later use to make certain appointment types available for certain staff categories.

When adding users, you can either select them from existing users of your site, or add them. People don't have to be users of your site to be set up as staff members in Bookly, but if you do give them a WordPress account, they can then log in to manage their staff profile and things like holidays.

Once you've added a staff member, you can add a photo, contact information and Google calendar sync (which we'll come to shortly). Make sure to add an email address at the very least so the staff member is notified when an appointment's made for them.

You can also list the number of hours the individual has available for appointments each day, if this is different from their working hours.

Adding a staff member

Once you've added your staff member, scroll down and click Save. Each staff member also has a tab for the services they provide, their schedule and their days off. Configure these so you know appointments won't be booked for staff members at the wrong times.

Adding Services

Once you've added all your staff members to the system, it's time to add services. Services allow customers to choose the appointment type they need. 

Here you provide more information about the service, set its price and define how long it takes.

There are three ways to define which services are provided by which staff:

  1. In the staff member's settings screen, go to the Services tab and add services.
  2. In the settings for the service, select the staff members who provide it.
  3. In the settings for the service, select the category of staff members who provide it.

Which of these works for you will depend on the nature of your business. In my real estate agency, valuations are provided by Valuers and viewings are provided by Viewings Agents, so I'll use the categories method when setting up my services.

The Services screen

Configuring the Appearance of the Booking Form

One of my favorite features of Bookly is the way you can edit almost every aspect of the booking form, and preview it before you publish it on your site. To do this, go to Bookly > Appearance.

Here you can edit the fields in the various sections of the form and you can also change the color. I'm going to amend the color and make a few tweaks to the text.

To amend the text, click on the underlined text and type what you want to replace it with. Then click the tick to save it.

Amending text in the booking form

Once you've made all the changes you want to, click the Save button at the bottom of the form to save your changes.

Other Settings

The Bookly Pro plugin is a complex plugin with lots of additional settings I haven't needed to use for my site. Here's an overview of some that you might need to use:

  • Email notifications: edit the content of the email notifications sent to staff and customers by the system.
  • SMS notifications: if you want to send out SMS notifications, you can sign up to the Bookly SMS service here. There is a charge for this so beware of adding this if you offer a virtual service to customers around the world.
  • Add-ons: Use this screen to install add-ons and add extra features such as custom fields and group bookings.

There are also a number of screens for managing your bookings which we'll explore shortly.

Publishing Your Booking Form

Once you're happy with the look of your form, it's time to publish it to your site. To do this, you create a page then add a Bookly block to it.

Create your page for bookings, then add a new block and select Bookly when choosing the block type. Choose the Bookly - Booking Form block.

adding a Bookly block to a page

In the block settings, you can configure default values for category, service and staff member, and specify which fields you want to include. Configure this how you want it then click Publish to publish your page.

Now you can view your page to see your booking form in place:

the booking form page with our Bookly booking form

Customers can now use your form to make appointments with your team members.

Managing Appointments

Once you've got your booking form set up on your site, it's important to be able to manage appointments.

Bookly gives you a number of screens to do this:

  • Calendar: Shows you the appointments for all team members in brief.
  • Appointments: Gives you a list of appointments with more information such as the customer details and the services booked. You can export this screen to CSV or print it.
  • Customers: Here you can see contact details for your customers as well as information about the appointments they've booked. 
  • Payments: Track payments related to appointments and see who they've come from and what service they relate to.
  • Messages: View any messages sent by the system.

The way you use these screens will depend on the way you manage your business. So for example in my real estate agency, I might print off a list of last week's and this week's appointments before each team meeting so I can get progress updates on appointments that have taken place and plan for appointments still to come. An individual team member might access their own calendar each day to check their appointments, and everyone will be able to see message start the system has sent them. These will also be sent by email as long as you add staff email addresses.

And of course with Google calendar integration, my staff members can view their appointments in their calendar alongside other events.

Conclusion

However you manage your appointments, the Bookly Pro plugin has a range of features that you can use to create an effective bookings system. You can use it for meetings that you don't charge for or those that you do, you can categorize your services and your staff members, and there are powerful options for customizing availability and calendar sync that will help you integrate the booking system in the way you run your business.

Try installing this plugin to your site and save yourself time making appointments over the phone or by email!


  • WordPress Plugins
    Choose the Best WordPress Event Calendar Plugins
    Nona Blackman
  • WordPress
    How to Create a Google Calendar Plugin for WordPress
    Ashraff Hathibelagal
  • WordPress
    8 Best WordPress Booking and Reservation Plugins
    Lorca Lokassa Sa
  • WordPress
    Get Started With a Free Booking Calendar Plugin in WordPress
    Sajal Soni
  • WordPress
    How to Add a Calendar to Your WordPress Site With the Events Schedule Plugin
    Jessica Thornsby

20:59

7 Best WordPress Community Plugins for 2019

Whether you’re an online freelancer or running a brick and mortar store, having a website is no longer enough to get and retain customers. You also have to provide value through engaging content. Engagement drives traffic to your website. It provides new leads that you can convert to customers. Engagement is also key to retaining customers. 

So, along with your website you need to create a community of customers and engage with them. This is the best strategy to grow your business. Online communities have created and continue to create enormous value for businesses. 

In this post, I'll show you some of the best WordPress community plugins available on CodeCanyon. But before we do, let’s talk a bit about online communities. 

What is an Online Community?

An online community is 

a network of people who communicate with one another and with an organization through interactive tools such as e-mail, discussion boards and chat systems. — Business Dictionary

Online communities come in different forms:

  • online forums
  • social networks
  • community blogs 
  • email groups 
  • subscription newsletters 

Communities are hosted on variety of platforms. Each community serves a specific purpose. Before you decide what platform you will use to start and host your community, here are things you should consider:

  • What specific purpose is your online community going to serve?
  • What value are you going to provide for your members and how will you provide it?
  • What type of community do you want to create?
  • What kind of content do you want to share with members?
  • Finally, how you will keep the community going?

Importance of Online Communities

Because they are integral to the success of your business, here’s why it makes sense to create an online community as part of your business growth strategy: 

Reach

You will be able to reach a very large number of people, which means you will have access to high quality leads that you can market to cheaply and convert to reliable repeat customers. You won’t have to rely on expensive traditional advertising. 

Longevity

Having an online community mean that you will be challenged to provide information that is of value to your users. This will help you build a loyal following, which means longevity. 

Engagement

Through the community, you'll be able to constantly engage with your customers. You can post questions about what changes your customers want to see and get immediate feedback about what they think of a new product or service. This level of engagement keeps them coming back. 

What Does an Online Community Need?

Online communities need tools to facilitate direct engagement between users and your content, between users and the business, and between the users themselves. 

Some tools needed to facilitate engagement in your online community are: 

  • membership tools for users to sign up, create profiles, and log in 
  • mean to engage with content through commenting, posting, or liking
  • ways to for members to communicate with each other
  • the ability to join groups and have private conversations

Ultimately, the kinds of tools you need depend on the purpose you want the online community to serve.

Why is WordPress the Perfect Choice for Building an Online Community?

Millions of websites are now powered by WordPress. 

WordPress is built specifically for content. It started as a blogging tool, but was later revamped into a fully-fledged content management system. It is highly adaptable and customizable and can be customized by adding themes and plugins to get desired results. 

The fact that it’s easy to customize makes it ideal choice for building your online community. 

Building an Online Community With WordPress

WordPress is a content management system that has user management built into it. This takes care of your user registration and login tools. 

WordPress also comes with a built-in posting and commenting mechanism. This lets users engage with content you make available, questions you have for them regarding your product and service, and each other.

The basics of hosting online community are already there with WordPress. And thanks to WordPress' flexibility, any other feature you could want for an online community are available as plugins, either in free plugins from WordPress.org or more full-featured premium plugins from CodeCanyon.  

Now that you understand the importance of having your online community, I’m sure you can’t wait to get started creating your online community so you can grow your website and engage your users. 

What are Community Plugins?

You don’t need to create a community platform from scratch. There are plugins for that. 

A plugin is a piece of software that allows you to add a specific function on your website.     It saves you the time and headache of creating that particular functionality from scratch. 

A community plugin is a pieces of software you add to your WordPress website to help you create your own social network or online community. 

There are plenty of community plugins available to help you out. When choosing a plugin to start and host your online community, here are some things to consider: 

  • It must be easy to use, flexible, and adaptable to fast changing technology.
  • It must be fast: as your community grows, loading speeds become important.
  • It must be fully responsive and compatible with all devices—desktops, laptops, and mobile. 
  • It must seamlessly integrate with other WordPress plugins that you’re using.

Now that we know what to look for, let's review some of the best community plugins on CodeCanyon  

1. UserPro: Community and User Profile WordPress Plugin

UserPro Community and User Profile WordPress Plugin

With UserPro, you can do just about anything you need to build your WordPress Community website.  Here are some things you can do: 

  • Build your own community with searchable members directory.
  • Give each user a custom and elegant profile.
  • Customize registration and login.
  • Restrict access to content based on membership level.
  • Enable social connect and instant profile sync via Facebook, Twitter, Google+, Bkontakt, LinkedIn and Instagram.

User ACleverCat says this about UserPro

I've been using this plugin for years. Works great and looks professional on the front-end. Plus, really good customer support...

2. Youzer: Buddypress Community & Wordpress User Profile Plugin

Youzer BuddyPress Community  WordPress User Profile

Youzer focuses on creating beautiful community and user profiles. It offers a lot of tools to enable users to customize their profile and community pages. 

Some of its features include: 

  • social login 
  • extremely customizable, with many different header styles, profile widgets, and color schemes
  • fully responsive design
  • lots of social features: likes, follows, points, reviews, ratings, badges, mentions, comments and more... 

It’s also fully compatible with the Buddypress platform.

User cmh2010  says 

It's fast, lightweight and beautiful, with excellent support. Great plugin.

3. Ultimate Membership Pro

Ultimate Membership Pro

For subscription-based communities that give access to content and other services depending on membership level, Ultimate Membership Pro is your plugin of choice. 

Ultimate Membership Pro allows you to:

  1. Create your subscription-based online community with different membership fees levels. 
  2. Provide different levels of access to content and other services based on the type of membership each user has paid for. 

Here’s a look at some of its features:

  • manage your membership forms, membership pages and content lockers directly from WP Page Builder (Visual Composer)
  • drip content: release content at regular intervals, with settings for when each item becomes available based on subscription time or level
  • content locker: lock content based on subscription level 
  • sell subscriptions using WooCommerce
  • integrated payment gateways: PayPal, Authorize.net, Stripe, and more
  • integrated with popular email marketing platforms
Customer BreoganGal has this to say:

An excellent plugin, it adapts perfectly thanks to all its editing possibilities... as well as editing the fields I need. Keep in that way!

4. Private Content: Multilevel Content Plugin

Private Content Multilevel Content Plugin

Private Content is a powerful yet easy way to turn your WordPress site into a true multilevel membership platform.

It comes with complete users management, a modern form framework, and a unique engine to restrict any part of your website. All this without needing coding skills!

Some features that make Private Content awesome include: 

  • 5 different ways to incorporate the login form into your custom WordPress theme
  • use third-party forms to register users and edit their data
  • WooCommerce checkout to create PrivateContent users
  • locked posts can be searchable and indexable but have hidden contents

Private Content is also integrated with Google Analytics to provide precise reports: each page view, each login, logout, registration will be registered. You will be able to know exactly what users see. All in real time!

Private Content is a developer-friendly plugin and can be easily extended and customized by developers.

Customer Fibeus says this PrivateContent : 

Amazing! The ease of use. The flexibility. The attention to detail. Thank you for the amazing plugin, making my life just so much easier. Great work. An absolute steal at this price for user specific content!

5. ARMember: WordPress Membership Plugin

ARMember WordPress Membership Plugin

Make membership building process as simple as possible with the ARMember plugin. 

ARMember is a one stop solution to all your membership needs, including member management, payment tracking, drip content and more. It is so easy to set up that within minutes you will have your own membership site up and running! 

You can do so much more, for example: 

  • set up custom grace periods for late or failed membership payments
  • upgrade or downgrade membership levels
  • invite-only membership signup
  • choose from a wide selection of striking and customizable templates for member profiles and directory listings
  • track member statistics and payment histories 

Members are more comfortable signing up if they are being offered convenient and popular payment gateways. ARMember membership plugin for WordPress comes with some of the most popular gateways like Stripe, PayPal, Bank Transfer, 2Checkout, and Authorize.net.

User Lynn_HCM  says this:

If you are looking for an all-in-one membership plugin for your WordPress website with amazing and fast customer support then I highly recommend AR Membership.

6. WP Membership

WP Membership

Let’s face it, sometimes plugins can overwhelm you with too many features that you’ll never use. WP Membership strips this down to the basics and provides you with few beautiful, well-made templates for your membership site. 

Some templates you can choose from include: 

  • 5 user profile templates
  • 2 sign up templates
  • 7 stylish pricing table templates 

Simplicity is another great feature of WP Membership. You don’t need to configuring a lot of stuff on your website, just install it and use it. The plugin will create all necessary pages, email templates and settings on installation.

Other great features include:

  • MailChimp support
  • PayPal and Stripe payment gateways
  • free and paid trial memberships
  • fully translatable into 12 languages 

User djanastasios says:

I'm very happy with this plugin. It works perfectly, is easy to install, and the support is responsive and fast!!!

7. User Profiles Made Easy

The User Profiles Made Easy plugin does just what it says—it makes user profiles easy. It offers a front-end profile, login, and registration plugin for your membership-based WordPress site.

User Profiles Made Easy - WordPress Plugin

Features include:

  • fully searchable membership directory
  • beautiful custom profile pages
  • customizable and searchable members list
  • private content module that restricts parts of the site based on user roles and guests.
  • private content restriction messages with predefined design templates

The User Profiles Made Easy WordPress plugin is one of the best ways to build an online membership directory.

User RomeoLab says 

A great plugin, but greater support!! Very fast in answering emails and fixing problems...

Conclusion

Endless customization possibilities built into WordPress have made it easier than ever to build and host your own online community. You don’t need to build your community platform from scratch. There are many WordPress community plugins to help you get started. Once you have established what purpose you want your online community to serve, you will find community plugins for every need on CodeCanyon

  • WordPress Plugins
    20 Best Social Plugins for WordPress
    Nona Blackman
  • WordPress
    Protect Paid Content on Your WordPress Site Using a Free Membership Plugin
    Sajal Soni
  • WordPress Plugins
    Best WordPress Membership Plugins of 2019
    Daniel Strongin

May 08 2019

16:22

9 Best CRM & Project Management PHP Scripts

Here is a nightmare customer service situation. You have written notes down in different computer files, napkins, and notebooks, and you don’t have all the details in one place. You forget an important follow-up appointment. You don’t call at the time you promised. Not good for the longevity of your business, right? 

As a freelancer or a small business, your growth and continuity depend on the way you build trust with customers and potential customers. Boosting customer satisfaction requires you to be on top of small details. CRM and project management systems help you do just that.  

Understanding CRM

Think of a neighborhood corner store. The store serves local needs. The owner knows the customers who shop there and what they frequently buy. She knows what kind of tools they like, and if they’re out of stock, she suggests something similar. How’s that for personalized customer experience? She even knows about the personal life of her customers—family, work, sports teams they like. This is an example of customer relationship management on a very neighborhood brick-and-mortar scale. 

You may not have that kind of interaction with your online customers, but you can still build and maintain personalized business relationships with them. You can know their names, phone numbers, and addresses. You can track products and services they’ve purchased. You can see what products and services they’re interested in based on their search history. You can suggest more products and services based on their inquiries, searches, or purchases. You can prioritize business leads. You can automate repetitive processes. 

But how does a business build and maintain relationships with its customers? How does it identify and fulfill their needs? How does it identify and follow up on business leads? Don’t forget that in this day and age, customers want a personalized experience. 

Here is where a CRM system comes in: to help you with the day-to-day management of your customer relationships, sales, and marketing. 

What Is a CRM? 

CRM stands for Customer Relationship Management. A CRM system can help you:

  • interact effectively with your customers or potential customers
  • manage day-to-day aspects of your customer relationships, sales, and marketing
  • automate repetitive processes for efficiency and productivity
  • track and make sense of customer data

The end result of this is customer satisfaction! 

Types of CRM

  1. Operational CRMs: the most common and popular type. They help with managing the day-to-day details of your business. They automate sales, marketing, and customer service operations. 
  2. Analytical CRMs: analyze customer data that has been gathered from different sources. 
  3. Collaborative CRMs: share company data across different departments within a business.  

What Does a CRM System Do?

  • Manage Contacts: stores and organizes data about customers, clients, and leads, including preferred method of contact.
  • Track Communications: records detailed notes on interaction with customers, clients and leads like emails exchanged, what products they’re interested in, orders, frequency of purchases, returns, complaints, etc.
  • Automate Workflow: creates task lists, reminders for appointments, calendars, alerts and templates that will help streamline your dealings with customers.
  • Generate Reports: tracks and analyzes data, giving you the information necessary to grow your business—for example, how to focus your marketing efforts.

Why Should You Use a CRM?

A CRM allows you to prioritize your leads and get started with turning them into customers—that way, you maximize your business opportunities. By automating day-to-day tasks, you are freed up to focus on the most important business functions, making you efficient and productive. Finally, happy customers means return customers.

Even if your business is small, it could be worthwhile starting with a CRM. As your business grows, a CRM system grows with you.

So let’s have a look at some of the best CRM and project management plugins available on CodeCanyon. 

1. Freelance Cockpit 3: Project Management and CRM

Freelancers and small businesses can streamline their project management, from the first estimate to the final billing and everything in between, with Freelance Cockpit 3.

This CRM and project management PHP script is a small investment with huge payoffs.

Freelance Cockpit 3 - Project Management and CRM

Here's a quick look at some of the included features:

  • several invoice payment options, including PayPal, Stripe, and others
  • project timer and optional Google Calendar integration
  • track expenses and send estimates
  • set up recurring invoices
  • private messaging
  • and much, much more

As a freelancer, this is top of my list of possible solutions to organize and execute projects.

Freelance Cockpit 3 brings all the important information together, so you can focus more on what you do best.

2. Perfex: Powerful Open Source CRM

This CRM and project management solution is more than just a way to organize your tasks and easily send out invoices. Perfex is about customer relationships.

Provide your client with more than just a good product; offer them the kind of customer relationship they won't be able to find anywhere else.

Perfex - Powerful Open Source CRM

You'll find lots of helpful features in this system:

  • see your invoices, contracts, tasks, and more in the built-in calendar
  • create a customer knowledge base
  • goal tracking and reporting
  • full-featured customer area
  • lead management tool 

I found the project proposal creation tool and helpful customer service toolset to be one of the best you'll find. This isn't just something to make your business run better, it's a new service you can offer your clients.

Every CRM and project management system has its own angle, and Perfex's niche is to offer top-notch tools for your customers.

3. Ekushey Project Manager CRM

While this CRM and project management app serves freelancers well, it adds another layer that small businesses with multiple team members will find extremely helpful. Ekushey Project Manager CRM introduces a full-featured project space that makes collaborating much more efficient:

  • discuss the project with clients on a "wall"
  • organize and share your tasks, notes, and files
  • use the timesheet and accept payments
Ekushey Project Manager CRM

Additional features include:

  • multi-language and currency support
  • Dropbox integration
  • sidebar to-do lists
  • and much more

I especially like the intuitive client and profile overviews and the ease of adding people to projects.

Ekushey is a robust CRM and project management tool that's useful for freelancers and powerful enough for businesses with many team members.

4. RISE: Ultimate Project Manager

RISE Ultimate Project Manager

Here is why I like RISE: its clean and easy-to-navigate dashboard. This simplifies management of clients, projects, and team members.

Its features include the ability to:

  • share notes, documents, and project progress with team members
  • track time each member spends on the project
  • view stats related to each project on one screen
  • track project expenses
  • send invoices as PDF copy via email

Not only that, but clients can pay you directly through RISE via PayPal or Stripe.

Installation is very simple, and you can install the updates from within the app. But don’t take my word for how great it is—go to the demo and try for yourself

Customer jlamping has this to say about RISE:

"This is a very well thought out app and works great. Awesome setup and well documented. 5 stars!!!"

5. Ora School Suite: Ultimate School Management System

ORA School Suite Ultimate School Management System

Managing a school is a Herculean project, with many staff and constantly changing students. Luckily, there is the Ora School Suite. This is school management at your fingertips, 24/7 on the web and on mobile devices. Literally everything to do with managing a school is included.  

From the dashboard, you can manage:

  • employees, teachers, and students 
  • schedules, including calendars of events and vacations 
  • communication with students, parents, or potential customers
  • sending SMS notifications
  • invoices and payments 

Just take a look at some of the screens from the dashboard. In this screen, you can see the invoices panel of the dashboard, with other panels showing news and messages to be answered. 

Invoices dashboar

And here is a look at the enquiries dashboard, which lets you manage and respond to any incoming leads or questions.

enquiries dashboard

Give it a try for yourself in the live demo!

Here is what customer  haroldnicky says:

"... it deserves 5 stars. Honest this the best school management web application I have today, everything is well done. The pages open quickly. In short, a great job."

6. Ciuis CRM

Ciuis CRM

Ciuis makes CRM and project management easy. It has a very simple, accessible design that makes it a breeze to use. 

You can easily:

  • create and send proposals
  • track project progress and expenses
  • add and follow-up on leads 

Customer WaldiePienaar says this about Ciuis CRM

"Being a coder myself I have build my own CRM before, but this is just on another level. If you are thinking of getting a CRM you have come to the right place."

7. TITAN Project Management System

TITAN - Project Management System

TITAN has many powerful features designed to allow you to manage unlimited projects, teams of users, important tasks, and so much more.

Some features include:

  • live chat with your team
  • assign tasks for individual team members and receive alerts when they're done
  • plan the progression of your project 
  • use templates to set up recurring invoices and invoices for one-off payments  
  • ticket system where clients can request customer support 

Converting leads to clients has never been easier, since Titan lets you build custom forms to send to clients and receive valuable feedback. Their responses will then be stored in the Titan Project Management System

8. Ultimate Project Manager CRM Pro

Ultimate Project Manager CRM Pro

If you need a comprehensive, all-in-one solution that brings together CRM, human resources management, and project management, the Ultimate Project Manager CRM Pro is the best choice. 

Project components include:

  • proposals
  • estimates
  • expenses
  • time tracking
  • invoicing
  • project reporting 

Human resources management components include:

  • recruitment
  • payroll
  • salary template
  • leave management

All this comes with a very complete client management package!

Other great features include a powerful file manager and a knowledge base section where you can curate articles that are useful to your clients. 

In addition, it supports eight different payment gateways, including PayPal, Stripe, Authorize, Mollie, Braintree, CCAvenue, and more.

Customer BuckyMadrox has this to say:

"Powerful CRM is a mostly all-in-one solution for managing our firm and projects. This product is specifically designed to support the complete project lifecycle of professional services firms."

9. WORKSUITE Project Management System

WORKSUITE - Project Management System

WORKSUITE can be accessed on laptop, mobile, or tablet. Its responsive design ensures clear data visibility on all types of devices.

Some features of this system include:

  • teams and departments can share knowledge and keep organized
  • real-time messaging helps team members to communicate
  • reports to analyze what's working and what's not
  • integrated with Slack, Google Drive, Dropbox, AWS, and PayPal 
  • can be accessed on laptop, mobile, or tablet

Customer parys has this to say: 

"A very well-made application. High level of functionality and very professionally written code. Definitely too low price for such a powerful tool. I highly recommend it!!!"

Conclusion

A good CRM and project management system is a huge asset. It comes with features designed to help you keep your customers happy and coming back. It increases your efficiency and productivity by automating day-to-day tasks. It helps you build confidence in your customers. The payoffs are huge. You keep your customers happy and coming back.

For more CRM and project management PHP scripts, take a look at Envato Market or at our other posts here on Envato Tuts+.

  • PHP
    AngularJS and Laravel: Begin Building a CRM
    Maciej Sopyło
  • PHP
    8 Best Project Management Systems and CRMs on CodeCanyon
    Esther Vaati
  • WordPress
    Create a Simple CRM in WordPress: Extending WordPress Search
    Tim Carr

May 07 2019

08:00

No! We’re Not All Just the Same

In May and November of 2018, I traveled to Norway to do user research. I don’t have any depth of experience with Norwegian culture. What follows is my outsider’s view and interpretation. I doubt it’s the whole story.

I tried hard to understand my surprising findings by chatting with Scandinavian friends and by researching cultural norms, but there are always limitations in how much an outsider can truly understand.

I still have more questions than answers.

“You should never assume. You know what happens when you assume. It makes an ass of you and me. Because that’s how it’s spelled.”

Ellen DeGeneris said that, but I’ve heard it all of my life. I’m sure you have too.

I’m going to tell you a story about making assumptions in some design thinking sessions in Norway.

Help desk agent work is currently evaluated by KPIs, such as how many tickets agents resolve or how fast they resolve them. There is an industry trend toward broadening collaboration between agents, because it will help customers get their issues resolved more quickly. But if an agent is taking time to help another agent or multiple agents are working on the same problem, the metrics that enterprises use to judge help desk agents will all get worse.

So, changing the way agents work requires changing the way their work is evaluated. I went to Norway to run three design thinking sessions to do generative research, looking to discover how work could be evaluated when collaboration increased.

I met with a defense contracting company, a police department, and an information technology company.

With all three, I ran into unexpected cultural issues that had a profound impact both on the sessions themselves and on my findings.

Asking people to think outside the box or come up with wild ideas conflicted with two Norwegian cultural norms: selvbeherskelse and janteloven.

Let me explain.

Lots of people told me that it’s hard to get Norwegians to “defrost.” Design thinking sessions need people to feel free to come up with weird ideas and be creative. Selvbeherskelse, or self control, is highly valued, and I was asking people to step outside of their comfort zones. Acquaintances joked that the only thing that would help would be if I brought booze to my sessions!

The second cultural speed bump, janteloven, not only impacted the session itself, it also showed me that everything I thought about how work is evaluated and judged is actually dependent on my own cultural frame of reference.

Norwegians are taught to not stand out and to not to single anyone else out either. Imagine an annual work review where everyone is told the same thing: “Your work is fine.”

There are no superstars. There are no under-performers. Everyone is good enough. It is also culturally unacceptable to call attention to your own good work.

Norwegians call this janteloven, or the “Law of Jante… a code of conduct known in Nordic countries that portrays doing things out of the ordinary, being personally ambitious, or not conforming, as unworthy and inappropriate.”

The law was originally formulated in a satirical novel, A Fugitive Crosses His Tracks, by Aksel Sandemose, and can be summed up with “You are not to think you’re anyone special or that you’re better than us.”

Workers who are obviously trying to get ahead or appear better than others are breaking societal norms. It is uncommon to acknowledge that anyone is better than anyone else. Subsequently, layoffs and firing people are almost non-existent in Scandinavian corporations, and it sounded like annual work reviews don’t happen as they do in the United States.

This cultural norm also impacted the session. No one wanted to contribute an idea that might stand out in our session. But, more importantly, it called into question the entire premise for my visit.

Remember, I was there to find out how work could be evaluated in the future.

But I’m in a culture where…everyone is just good enough.

Curiously, despite this cultural norm, participants wanted to be superstars or wanted their poor performing peers to be called out. They felt it was unfair that they worked so hard and got no more reward than their “lazy” peers.

What they longed for was societal pressure to make people feel they had to contribute. Sloppy work from peers creates rework. Solving the same problems over and over again because the knowledge wasn’t being captured in reusable form was irritating to every single person in the room. Some fantasized creative punishments and social shaming for those not pulling their own weight.

Further, individual after individual mentioned that others did not want to collaborate because these other people wanted to be “special superheroes.” (But of course, no one in the workshop admitted to being that guy!)

There is pressure to conform, but emotionally, people still want to be better than others and want to be recognized for their work. They know some of their peers are cutting corners or are only picking up the easiest tasks and leaving the hard tickets for other people.

As a UX designer, it was humbling to see, first hand, how much my own cultural blinders limit my thinking about what people need and want in our software. If I could do it all again, I’d have taken more heed of the warnings about defrosting! And I will never again think that monocultural discovery work tells the whole story.

When I returned to the United States, I spent a lot of time trying to unpack my experiences and figure out how I could do things differently. I happened to speak about it with a friend who is involved in the acting improv community. Improv is a form of theater where the plot and how characters interact with each other are made up in the moment. Good improv requires people to loosen up and get out of their comfort zone. My experience sounded familiar to her, and she told me about improv warmup techniques.

Although I could not bring booze in, next time, I’ll draw from improv techniques to get people to warm up and have a warm-up exercise in my pocket. I would hope that even the ‘frosty’ Norwegians would likely be drawn in by some of these techniques.

As for not figuring out how work should be evaluated in the future….well…that’s part of why we do research. When we don’t get the results we expect, it’s an opportunity for creative solutions to problems we didn’t even know we had. Isn’t that why we go out into the field in the first place?

The post No! We’re Not All Just the Same appeared first on Boxes and Arrows.

May 06 2019

16:09

Code a Burger Menu for Mobile Users in WordPress

Final product image What You'll Be Creating

If you want your site to be responsive (and who doesn't?), then it's important to make sure that your main navigation menu works well on small screens.

Large navigation menus can take up too much space on a mobile phone, or if they don't, they can be too small to read or to reliably tap the correct link.

A burger menu is one way to get around this. It's a menu that's hidden until the user taps on it. The reason it's called a burger menu is because the symbol that represents it is three horizontal lines one above the other, which looks a bit like a hamburger.

There are plugins that will turn your main navigation menu into a burger menu in WordPress (including those on Code Canyon), but what if you want to code one into your own theme?

In this tutorial, you'll learn how.

What You'll Need

To follow along with this tutorial, you'll need:

  • a development installation of WordPress
  • a code editor
  • a theme you can edit (if you're using a third-party theme, you'll need to create a child theme)

The Starting Menu

The code we'll write will apply to the menu generated by WordPress using the navigation menu system. You don't need to code a new or different menu for mobile. (It's one of my pet peeves when sites have different navigation on desktop and mobile as it's normally to the detriment of user experience on mobile.)

I'm going to demonstrate this technique with reference to the menu in my own site and add the code to the header.php file as well as the stylesheet and a new JavaScript file. 

Here's the menu on desktop:

horizontal navigation menu centered below a banner image

It's a horizontal menu beneath the banner image and header and above the content.

On mobile, the banner image isn't visible. I want to remove the menu and replace it with a burger symbol. When the user clicks on that symbol, the menu will appear.

Here's the code for the menu:

It's all wrapped in a div with the class of .menu.main. There's a skip link for screen readers and then the wp_nav_menu() function which includes 'container_class' => 'main-nav', which adds an extra CSS class to the menu itself. We can use those classes to style the menu on mobile later.

So let's get started.

Adding the Burger Symbol

The first step is to code the burger symbol into the header.php file and style it so it's only visible on mobile.

In your header.php file, add this code inside the header element (not inside the navigation):

In my case, it means the code for the header and navigation are like this (note that I've omitted the banner in the code below, although it is in my file):

So the burger symbol (which is shown using the &#9776; HTML code) is in the header, and the navigation menu is below it.

Now to add some styling for the toggle-nav element.

Styling the Burger Symbol

First up, we need to hide the burger symbol on desktop.

In your stylesheet, add this to hide the burger symbol:

But you do need to ensure it displays on mobile. So add a media query, using whatever maximum width you're using for your media query generally. Here's mine:

That will make the burger icon visible on smaller screens. I've used !important to ensure it isn't overridden by any other link styling in my theme.

Now let's add some additional styling for it. Edit the media query so it looks like this:

This adds color and sizing to the icon and also overrides any styling for links, whatever state they're in.

Here's what the burger icon looks like on mobile now:

mobile site with no menu and a burger icon in the top right of the header

That's the burger icon styled. Now for the navigation menu.

Styling the Navigation Menu

The navigation menu itself needs to be styled on mobile. Inside your media query, add this CSS:

Here are some key aspects of what that code does:

  • It changes the colors and positioning of the main menu and aligns text left.
  • It hides the list inside the menu, so that when the user first visits the site on mobile, the menu isn't displayed.
  • It changes floats and colors for the list items within the list.
  • It gives relative positioning to the menu and absolute positioning to the list, so that it can sit on top of the content of the page and not push it down.
  • It removes any elements after the list items which are in my theme on desktop.

Note that the tweaks you'll need to do to your menu may be different, and will depend on how it's styled on desktop. The important bits are hiding the menu and the positioning.

Adding JavaScript

To get it all to work, we need to add some JavaScript. This will make the menu slide down when the user taps on the burger icon.

Add a new file called burger-menu.js to your theme (I like to put mine inside a scripts folder).

Add this script to it:

This script will slide the ul within the .menu.main element down when the user clicks on the .toggle-nav element (i.e. the burger icon). Save the file and close it.

But it won't work unless you enqueue the script. Open your theme's functions.php file and add this:

This will enqueue your script, which will make it work. Save and close your functions file.

Now if you visit your site on mobile (or in a desktop browser with responsive mode enabled) and click on that burger, the menu will slide down.

mobile website with menu on top of content

It's sitting on top of the content, and not pushing it down, and it appears with a nice JavaScript-powered sliding action. Just what we wanted.

A Burger Menu Will Enhance UX for Mobile Visitors

A bulky, desktop-first navigation menu will take up too much space on a small screen and keep people from reading the content they came to your site for.

But you don't want to prevent mobile visitors from accessing the same navigation as desktop visitors have.

By adding a burger menu like this, you can get the best of both worlds: a clean mobile layout with access to the same navigation as on desktop.

Other Posts About WordPress Menus

To learn more about WordPress menus, check out some of our other posts:

  • WordPress
    How to Make a Drop-Down Menu in WordPress
    Rachel McCollin
  • WordPress
    UberMenu and 7 Other Best Mega Menu Plugins
    Jane Baker
  • WordPress
    How to Make a Sticky Menu in WordPress
    Rachel McCollin
  • WordPress
    When to Use (and Not Use) a Mega Menu for Navigation
    Rachel McCollin

12:23

New Course: Complete Guide to WordPress Multisite

WordPress Multisite is a powerful tool for developers who need to host multiple WordPress sites on the same server. Learn how to get the most out of it in our new course, Complete Guide to WordPress Multisite.

What You’ll Learn

WordPress Multisite makes it easier and more secure to host a number of WordPress sites on a single server. Because you only need one install of WordPress to host multiple sites, you can manage all your sites from the same place and easily keep plugins and themes up to date across your entire network.

WordPress Multisite

In this course, Rachel McCollin will show you how WordPress Multisite can help you create a network of sites. You'll first learn how to activate Multisite and add sites to your network, then you'll go in-depth with important settings, best practices, and key plugins.

Watch the Introduction

 

Take the Course

You can take our new course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+. 

Plus you can download unlimited items from the huge Envato Elements library of over a million creative assets. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.

May 02 2019

02:04
Illustrator Tutorial: How to Create a Folder Icon

April 30 2019

01:55

Best WordPress Membership Plugins of 2019

Adding a membership system is a great way to bring in revenue for your business. But turning your WordPress site into a membership site can be quite complex. Thankfully, CodeCanyon has a library full of membership plugins that let you add this membership functionality to your site without you having to do any coding. 

To help guide you to the perfect membership plugin for your website, I compiled a list of the most feature-rich membership plugins on the market. 

1. User Profiles Made Easy

Starting off the list of the best WordPress membership plugins is one of the most powerful and feature-rich plugins on the market. User Profiles Made Easy offers a fully featured front-end profile, login, and registration plugin for your site. With the custom fields that you can create and the fully customizable registration form, you can give your website members a more enjoyable experience.

User Profiles Made Easy

Features include:

  • compatible with all themes
  • fully customizable front-end profile
  • shortcode generator
  • SEO friendly
  • support for sharing profiles on social networks

Also, this membership plugin will allow you to restrict any content on your website for guests by the type of post, page, URL, or for the entire site.   

Try the live preview of this plugin to see if it is right for you.

2. WP Membership

With WP Membership, you can easily turn any website into a membership website. Not only does this WordPress membership plugin come with the most popular payment gateways, but it also integrates with the popular email service provider MailChimp. Another feature that is incredibly valuable is the collection of seven different pricing tables. WP Membership allows you to create stylish pricing tables that will help you sell more memberships. 

WP Membership

Notable features include:

  • MailChimp support
  • PayPal and Stripe payment gateways
  • pricing table templates
  • public profile template
  • free and paid trial memberships

You can quickly test the functionality of this membership plugin and see if it's right for you with the live demo.

3. Private Content

If you are looking for a WordPress membership plugin that gives you complete protection over your website, then Private Content is the right plugin for you. Private Content offers the most advanced and intuitive restrictions engine on the market, allowing you to easily restrict any part of your website without any coding. 

Private Content

This WordPress membership plugin features: 

  • unlimited user levels
  • advanced content restriction system
  • unlimited registration forms
  • advanced users management and tracking

Other notable features of Private Content include customizable themes, unlimited lightboxes, and multi-language support. 

See how this membership plugin can work for you by viewing the l ive preview.

4. Ultimate Membership Pro

Ultimate Membership Pro serves 10,000+ websites, and for good reason. With an intuitive dashboard that allows you to set up the plugin in minutes, any part of your website can be protected. What makes this plugin so special is its flexibility with pricing and payments. You can set recurring payments, offer free and paid trials, accept multiple payments, and offer coupons to your customers. This flexibility allows you to set up a more profitable membership site. 

Ultimate Membership Pro

Here are some of the main features:

  • unlimited paid and free membership levels
  • support for popular payment gateways
  • content drip feeds
  • subscription plans
  • login and registration forms 

5. ARMember

This WordPress membership plugin is an all-in-one solution for your membership site. The comprehensive content locking settings alone make this plugin worth it. Not only can you restrict all your posts and pages, but you can restrict content based on IP addresses and keywords, and restrict any content with the use of shortcodes.

ARMember

Here are a few of the notable features offered by the membership plugin:

  • all-in-one membership plugin
  • multi payment cycles
  • unique profile editor
  • one-click social signup
  • WooCommerce content restriction

ARMember uses the most popular payment gateways on the web, so your customers will feel safe signing up on your membership site.

This WordPress membership plugin has many other features that were not mentioned here, so make sure to try the live preview to find out everything the plugin has to offer

6. UserPro 

UserPro is a membership plugin focused on helping you build a community. The stylish front-end user profiles, customizable login and registration forms, and user badge and achievement features help you create a unique community experience that your users will love.  

UserPro

Here is what you can expect to see from the plugin:

  • registration forms
  • user badges
  • intuitive drag-and-drop admin panel  
  • 350+ Font Awesome icons and unlimited Google Fonts
  • 5 ready-to-use skins

User Imtovi says:

"It is the most useful and powerful WordPress user profile solution I have seen! Support is so great! Markus has just resolved my issue in a few minutes! Thank you!"

Find out how this membership WordPress plugin can help build your community by viewing the live preview.

7. Ultimate Learning Pro 

The final membership plugin on our "best of" list is a unique one. It is a learning management system plugin that allows you to create a learning platform for students and instructions. You can easily create courses, sell courses, and have your instructors manage your students, all from within this platform. 

Ultimate Learning Pro

Here are a few of the many features that this plugin has:

  • intuitive course builder
  • course reviews
  • course certificates
  • grade book
  • Stripe and PayPal payment gateways

With no hidden costs and access to all of its features from the one-time purchase, you will have the most feature-rich learning management system plugin at your fingertips to help you build your business.

To gain a better understanding of how this plugin functions, view the live preview.

Conclusion

If none of these plugins quite meet your needs, be sure to check out some of the many other WordPress membership plugins available on CodeCanyon. If you purchased any of the above plugins, please let us know which one you decided to go with!

  • WordPress
    Protect Paid Content on Your WordPress Site Using a Free Membership Plugin
    Sajal Soni
  • WordPress
    20 Best WordPress Login Forms on CodeCanyon
    Eric Dye
  • WordPress
    15 Best Membership Plugins for Your WordPress Site
    Eric Dye
00:00

How to Use Firebase Firestore in an iOS App

In this tutorial, you'll learn how to manage data in a Firebase Firestore database.

For some background on Firebase and instructions on how to get your Firestore database set up, please read my earlier Introduction to Firebase post.

Data, Documents, and Collections

Working with Firestore, data, documents and collections are the key concepts which we need to understand.

Data

Data can be any of the following types: 

  • String
  • Number
  • Boolean
  • Map
  • Array
  • Null
  • Timestamp
  • Geopoint
  • Reference

Documents

Documents contain data items in a set of key-value pairs. Firebase Firestore is optimised for storing large collections of documents. A document is a lightweight record with fields which map to values. Each document is identified by a name.

For example, we could describe a Country document as follows:

Here, Country is the document which contains two fields: Name and Capital.

Collections

Collections contain sets of documents. Documents live in collections, which are simply containers for documents. For example, you could have a Countries collection to contain your various countries, each represented by a document:

In short, data is part of a document, which belongs to a collection.

We'll learn more about data, documents and collections by building a sample app.

Creating a New Firebase App

To start, you'll need to create a new Xcode project and set it up in the Firebase Firestore portal. 

First, create a project in Xcode and name it ToDoApp. Then, create a corresponding project in Firebase and also name it ToDoApp.

Create a project in Firebase and name it ToDoApp

Next, register your app with a bundle identifier.

Register the app

Firebase will create a config file for you to include in your project. Download the config file and add it to the root of your Xcode project as shown.

Download the GoogleService config file

Here's a screenshot of my project folder structure with the GoogleService config file highlighted.

The GoogleService config file in the project folder

Next, you need to install CocoaPods for Firebase. CocoaPods make it easy to install and manage external dependencies such as third-party libraries or frameworks in your Xcode projects. If you don't have a Podfile already, follow the instructions to create one. Then add the Firebase core services to your Podfile and run pod install.

Initialize and add the required pods

Next, the Firebase setup wizard will give you some code to add to your AppDelegate. Copy the highlighted lines below into your AppDelegate file.

Add initialization code to your AppDelegate file

When you've completed all these steps, the project setup screen in Firebase will look like this:

Firebase project setup screen awaiting verification

To complete the installation, you need to get your app to communicate with the Firebase server. Simply run your Xcode project and go back to the project setup screen in Firebase, and you should see something like this:

Successfully verified installation

Handling Data in a Firebase App

Now that we are done with the initial setup, let's start handling data in our app.

In this section of the tutorial, we'll create an app to edit, delete and read data about tasks. But before we start adding or creating tasks, we need to think about the fields we would require for a task. Since this is a simple app, we'll stick with a single field:

  • task_details: text describing the task

We also need a collection, which we'll name tasks, and it will contain these Task documents. This is how the structure will look:

To represent this data, let's create a simple task model class in TaskModel.swift with the code below:

Reading Tasks From the Collection

We will be displaying our tasks in a simple table view.

First, let's create a ToDoListViewController.swift class. Then, add ToDoListViewController in Main.storyboard and connect it to ToDoListViewController.swift. Add a UITableView to ToDoListViewController in the storyboard and implement delegates. 

Now we'll create ListService.swift to hold the code to retrieve task data. Start by importing FirebaseFirestore. Then create a Firestore instance withFirestore.firestore(). ListService.swift should look as follows:

Next, we'll add the completeList method in the ListService class. We'll get all the data and documents from the tasks collection by using the getDocuments() method from Firebase. This will return either data or an error.

In this code, querySnapshot contains the returned data. It will be nil if there is no collection with the name tasks

Here is the rest of the completeList function: it retrieves the task data and calls the completion callback with any retrieved data.

Let's try it out! Use the code below to call completeList from ToDoListViewController

There should be no errors, but querySnapshot will be nil since we do not have any documents in our collection yet. In the next section, we'll add some data and then try calling the completeList method again.

Adding Tasks to the Collection

Let's create an addToList method in ListService().

We'll use the passed-in task description to create a taskData instance and add it to the tasks collection. To do this, we will use the addDocument method from Firestore Firebase. 

If there is no error, we'll print the document id and return true in our completion block. task_id will be the document id. For now, we'll just send the empty string, but eventually we'll update the task_id with the correct document id.

Let's add some test data by calling addToList from ViewController. After running the below code, go back to the console and you'll see that an entry was added. Now, running getAllTasks() should return true and a tasks count of 1.

Of course, in a real app, you'd want to create a user interface for adding tasks!

Deleting a Task Document in Firestore

Finally, let's see how we can delete a document in Firestore. Go back to the Firebase Firestore console and make a note of the document id value for "Buy Groceries". We will be deleting the document based on the document id.

Now, add a deleteFromList method to our ListService as shown below.

Let's call deleteFromList from ToDoListViewController. We'll pass it the document id of "Buy Groceries", which we copied from the Firebase console. 

Running the above code, you should see status as true. If we go to the Firebase Firestore console, we should see that the "Buy Groceries" task has been deleted.

Conclusion

With that, you've learned how to create, read and delete data from a Firebase Firestore database. In this tutorial, we built an app to manage tasks using Xcode and Firebase. Hopefully, this has given you some new skills which you’ll be able to put into practice in your upcoming projects. 

To make this app more functional, you could implement table view delegate methods to display the tasks in your database, a UITextField to add new tasks, and a swipe gesture to delete tasks. Try it out!

If you have any questions, let me know in the comments below.

April 29 2019

02:01

Top WordPress Audio and Video Plugins of 2019

WordPress audio and video plugins are essential if you are looking to add video and audio players to your website. In this post, I'll share some of my favorites for 2019—I've picked plugins that have features that are missing from many of the other plugins available. 

WordPress Audio Player Plugins

1. MP3 Sticky Player

This MP3 player is incredibly powerful. The plugin contains a customizable and responsive MP3 player that can be added to any webpage and that runs on all major browsers. 

Most web players only allow you to listen to audio when you are on a specific page, but MP3 sticky player is a pop-up player that opens in a separate window, allowing you to browse the web while listening. 

And it's not just for MP3s—this player can display images and YouTube videos. 

MP3 Sticky Player

Here are a few of this plugin's great features:

  • uninterrupted audio playback
  • custom post types support
  • unlimited playlists and unlimited number of tracks per playlist
  • load playlists via XML, HTML, YouTube, and podcasts

User sely says:

"This is by far the most powerful MP3 player available on CodeCanyon or elsewhere. Great support too. Had multiple questions and was quickly helped. Highly recommended!"

View the video tutorial of this powerhouse video and audio player to see if it is a fit for your site.

2. Audio Player PRO

This audio player will make a great addition to your website if you need to present audio to your users. Not only does it play .mp3 files, but it plays .ogg files as well. With the customizable design, you will be able to fit this WordPress audio player into any theme.

Audio Player PRO

Here are some of the notable features of this plugin:

  • responsive design
  • customizable color scheme
  • integrates with Google Analytics
  • playlist search
  • compatible with all major browsers and mobile devices

Here is what user tampatechllc has to say about the Audio Player PRO:

Great support team! They checked on my issue very quickly. Also great music player plugin! After trying at least 4 or 5 others, this was the only one that had more features than the other plugin features combined. Keep up the great work!"

Check out this video of the WordPress audio player plugin in action:

3. WavePlayer

This HTML5 audio player is a must-have. The modern interface of this audio plugin is built around the audio waveform of the audio file, giving users a visually pleasing experience. Unlike many other cloud-based music player services, WavePlayer allows you to host your own tracks for free!

WavePlayer

Here is what you can expect from this audio player plugin:

  • modern design
  • audio waveform display
  • HTML5 support
  • full integration with WooCommerce
  • free hosting of audio tracks

User herringla has this to say about the WavePlayer:

"There are just too many good things about this plugin. Basically, if you're using anything else to play your music files on your WordPress website you're missing out!"

View the audio waveform integration in the live demo.

WordPress Video Player Plugins

4. Responsive YouTube Playlist Video Player

If you are looking to add YouTube videos to your website, this WordPress video plugin must be taken into consideration. With a fully responsive and automatically resizing video player, viewers with any screen size or device type will be able to comfortably view the videos that you add. The plugin also allows you to replace the default user interface with a custom designed interface, and the entire player can be added to your website with a shortcode. 

Responsive Youtube Playlist Video Player

Here are the main features of this WordPress video player:

  • add a YouTube playlist, channel playlist, or single video
  • fullscreen support for major browsers
  • custom player controls
  • intuitive admin panel 
  • social sharing buttons

Satisfied customer ADWheeler has this to say about the video plugin:

"All the way around this is a perfect plugin. Rik is GREAT with support as well. Got back to me within the hour. The world needs more of this! Do yourself a favor, get this one. This IS the plugin you've been looking for!"

Try it for yourself with the live preview.

5. Easy Video Player WordPress Plugin

Easy Video Player is the number one WordPress video player plugin on CodeCanyon. This player comes packed with features that are sure to enhance your website viewers' video experience. One feature that adds a lot of value to this plugin is the configurable pop-up ads that you can place on each video to convey any message you want to your audience. 

Easy Video Player Wordpress Plugin

Here are a few of the most notable features of this plugin:

  • video quality selector
  • real-time spectrum visualizer
  • optional subtitles selector
  • playback speed options

Here is what user TheWebFix has to say about the plugin.

"Very customizable, and the author is always willing to assist with any issues or questions. Love the flexibility and work put into this plugin!"

To try the plugin for yourself, check out the live preview!

6. Universal Video Player

Whether you want to add videos from YouTube, Vimeo, or self-hosted videos, Universal Video Player has the capability to display these videos by just dropping in the video ID. With all the standard customizable features of a video player, plus lightweight design, this video player is an all-in-one solution. 

Universal Video Player

Universal Video Player features include:

  • YouTube, Vimeo, and self-hosted support
  • customizable color scheme
  • playlist search
  • automatically generate video thumbnail, title, and description of YouTube video 

User Dohmtee has this to say about the plugin:

"Customer service was able to help me configure and provide me guidance to what I wanted the player to function. My clients are very satisfied!  Thumbs up to all at LambertGroup."

View the Universal Video Player in action by trying the live demo.

7. YouTubeR

YouTubeR not only allows you to upload videos on YouTube from your website, but it also allows you to create video galleries. The modern interface of this plugin, playlist templates, and infinite scroll for playlists make this a plugin worth purchasing.

YouTubeR

Here is what you can expect from YouTubeR:

  • upload and embed YouTube videos
  • create video galleries
  • lightbox included
  • optimized for WordPress caching
  • light and dark themes

Here is what user StudioPassionlab has to say about the plugin:

"I want to express my appreciation for the YouTubeR plugin by Maxiolab for the versatility of the plugin. Especially for the excellent support received from the author to help me solve problems with the themes used. Thanks Maxiolab!"

Find out what this WordPress video plugin can add to your website by trying out the live preview.

Conclusion

The WordPress plugins described above are some of the best-selling video and audio plugins on CodeCanyon. To know which plugins you should consider purchasing, take a look at all the live demos and features to see which ones will fit in with your site. 

If none of these video and audio WordPress plugins seem right for your website's needs, be sure to check out some of the many others available on CodeCanyon

  • WordPress
    15 Best WordPress Audio Player and Video Player Plugins
    Jane Baker
  • WordPress
    Adding a Music Player to Your WordPress Site
    Kyle Sloka-Frey
  • WordPress
    How to Add the Stellar Video Player to Your WordPress Site
    Ashraff Hathibelagal
  • WordPress
    20 WordPress Video Plugins and Players to Add Engagement
    Rachel McCollin

April 25 2019

21:52

How to Make a Newsletter Email Subscription Popup With the ConvertPlus WordPress Plugin

A newsletter is a report sent by an organization or business containing any recent news. In an e-commerce business, it might contain news or sales on products which might interest the subscriber.

Newsletters allow you to encourage website visitors to return to your site and can be a powerful tool for boosting sales and viewership. You can leverage newsletter advertising to increase awareness for your brand as well as your new and old products. 

But before you can send a newsletter, you need users to subscribe to it! A key tool for collecting newsletter subscriptions is a newsletter popup.

In this tutorial, we will make a newsletter popup using the ConvertPlus plugin for WordPress, available on CodeCanyon. With MailChimp support, this is a great plugin for collecting email subscriptions and doing email marketing with WordPress.

Before we get started, let's look at some things to consider before designing a newsletter popup.

Provide an Easy Signup Process

It's important to make the signup process as seamless as possible. Customers will likely shy away from a popup that contains many fields. 

Match Popup Design With Your Brand

Be sure to match your popup with the theme of your site. This will help build credibility and trust in your brand.

Offer Incentives

A popup that offers an incentive such as free shipping, promo discount or free content is more likely to convert as opposed to a popup that has no offer.

Keep Subscribers Engaged

Ensure you plan the content you provide to your subscribers once you have them on board. It's also important to give timely and interesting information. Don't over-focus on selling to your subscribers.

Experiment With Different Popups

The first popup you make will not likely be the jackpot that gets you the subscribers you want. Be prepared to experiment with different popups to determine which popup is converting the most.

Getting Started With the ConvertPlus Plugin

We'll start by downloading the plugin from CodeCanyon. If you don't have an account, head over to the signup page and create one. Once logged in, you can purchase the plugin from its product page.

You will then get a link to the files, or you can simply go to the downloads section of your account and download the zipped files.

Now log in to your WordPress account. Go to Plugins > Add New and upload the zip files. Then click Install Now and, after it finishes installing, click on Activate Now. You are now ready to create your popups.

Features of the ConvertPlus Plugin

So what makes ConvertPlus the best option for creating newsletters in WordPress?

Professional, Ready-Made Templates

ConvertPlus comes with over 100 ready-made templates which allow you to create your popups in minutes. 

Inline Forms

You can embed opt-in forms anywhere on the website with just a simple shortcode. This can be inside a post, outside a post, or just below your header.

Mobile-Friendly 

ConvertPlus allows you to set the kind of device on which each popup will appear. This will ensure your popups are mobile-friendly by letting you create mobile-specific versions.

Fast Loading

ConvertPlus is structured to deliver speed and high performance. This has a positive effect on the conversion rate.

Form Builder

ConvertPlus comes with a powerful, easy-to-use form builder which allows you to design high-quality popups in minutes. It also supports unlimited fields, analytics graphs, and third-party sync.

A/B Testing

The ConvertPlus newsletter popup plugin allows you to do unlimited real-time tests to find which kinds of popup work best for your audience.

Conversion Statistics

ConvertPlus also gives you a detailed graphical analysis of how your popups are performing. This includes the number of clicks, unique views, and conversion metrics. This will enable you to make informed decisions.

Integration With Marketing Platforms

ConvertPlus integrates with most of the major email marketing providers. It also comes with export functionality that allows you to download email data collected from subscribers. Integrations include MailChimp, HubSpot, and others.

Getting Started With ConvertPlus

There are several steps required to make your popups live:

  • create a campaign
  • select the display position
  • select and customize the popup template
  • set a popup trigger

Let's look at each of these steps in more detail.

Create a Campaign

Creating a campaign has never been this easy. ConvertPlus comes with a built-in lead collector that can integrate with most popular email marketing tools. Integration is possible via the ConvertPlus Addons tool.

With Addons, you can integrate with third-party software such as AWeber, SendGrid, Constant Contact, Contact Form 7, ConvertFox, iContact, and many other email marketing tools.

Integration With MailChimp

Although there are a number of email marketing providers which you can integrate with ConvertPlus, we will use MailChimp. MailChimp is a very popular email marketing platform that has a free plan for small businesses that allows them to send up to 12,000 emails per month to up to 2,000 subscribers. 

To use MailChimp, you will first need to install it. To do that, go to Addons under the ConvertPlus menu. 

Choose Addons under the ConvertPlus menu

Next, scroll to the bottom until you see MailChimp and click on Install.

Choose MailChimp and click Install

You will then need to obtain the MailChimp API for authentication purposes. If you don't have a MailChimp account, simply go to the MailChimp website and create an account. It just takes a few minutes.

You can now create your campaign with the help of MailChimp. Simply go to Connects and click on Create New Campaign.

Go to Connects and click on Create New Campaign

Next, add the name of the campaign, select MailChimp as the email marketing tool, and click Next.

select MailChimp as the email marketing tool

In the next step, you will need the MailChimp API Key, which will allow you to authenticate your MailChimp account. You can find instructions on how to get the key from the MailChimp documentation. Enter the key and click on the Authenticate MailChimp button and finish creating your campaign.

Authenticate MailChimp

Select the Popup Position

ConvertPlus provides various ways to build popups. These include:

  • Modal popup: This popup appears on top of the main content of the website. It is very effective for grabbing users' attention, hence leading to more conversions.
  • Info bar: An infobar is a popup that appears at the top or bottom of the screen with toggle and sticky options. This is an effective way to amplify your call to action.
  • Slide in: this is a popup that slides into the main screen from the corners of the screen in an animation.

You can also choose before postafter postwithin a post, or widget box placements.

Create and Optimize the Popup

We are going to use one of the already available popup designs and tweak it. Under the ConvertPlus menu, click on Modal Popup and next click on Create New Modal.

Create New Modal

There are different types of templates to choose from, as shown below. Since we are interested in opt-ins, we will select that tab and choose a template.

 choose a template

After you've selected your desired template, you will be directed to the page below, which contains a live editor where you can change any attribute of a popup, such as the name, design, background, or submission details.

Live editor screen

I've customized my popup to look like this:

Final popup with customizations

Set the Trigger

The last part of the newsletter is to handle the behavior of the popup. We achieve this by setting triggers. Some triggers include:

  • exit intent trigger
  • well-timed trigger
  • after scroll trigger
  • cookie control
  • referrer detection
  • user inactivity trigger
  • after post trigger
  • two-step popup
  • device detection
  • page-level targeting

These triggers give you a lot of control over when and how your popup will pop up. I won't go into details here, but you can learn all about them in the ConvertPlus documentation.

We want to show our popup when the user tries to exit the screen, so we'll use the exit intent trigger. We'll set it up to target only new users and to display anywhere on the site.

Submission

ConvertPlus manages leads in its own database, but you can also send leads to the campaign we integrated with MailChimp. To do that, click on Submissions and select the desired campaign from the dropdown list. After users have successfully submitted their details, you will want to redirect them or issue a message for any other instructions.

select the desired campaign from the dropdown list

Ensure you save your changes after every step. Our popup is now complete, and it collects leads via MailChimp. You can also view a graphical analysis of how your campaign is performing via the campaigns menu.

Conclusion

Email marketing is crucial for running a successful online business. If used properly, popups can make this process seamless. If used poorly, popups can drive visitors or potential customers away from your site!

So follow these guidelines, and consider using a professional lead generation or popup plugin from CodeCanyon. And while you're here, check out some of our other posts on creating WordPress popups and newsletters.

  • WordPress
    Best Exit Popups for WordPress Compared
    Esther Vaati
  • WordPress Plugins
    Best WordPress Newsletter Plugins of 2019
    Jane Baker
  • WordPress Plugins
    20+ Best Popup & Opt-In WordPress Plugins
    Nona Blackman
  • WordPress
    How to Create an Exit Popup With the Layered Popup Plugin for WordPress
    Esther Vaati

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl