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

June 13 2019

17:57

Easier Apps With Ionic Templates, Frameworks, and Tools

One of the biggest problems in development is the idea of “limitless” possibilities. How do you choose what app to build when you can create anything? Which choice to get from point A to point B is the right one, when there are so many combinations on how to get there?

This holds true when using the Ionic framework as much as anywhere else in development.

To help with this issue, this article will guide you through some of the most common uses for Ionic, and show you the path to accomplishing what you want.

What is Ionic?

Ionic is a framework for JavaScript that allows for the creation of mobile apps using web development languages. With this framework, you can push apps to Apple devices, Android devices, and more, all from a single codebase.

The framework builds on top of JavaScript, but also includes additional features, such as giving developers access to native functionalities.

Why should you be using Ionic for your projects?

  • single codebase for multiple native apps
  • support for continuous integration and continuous deployment
  • access to native functionality
  • open source, with free access to the framework
  • easy-to-use app builder that let’s you create front-end UI’s with ease
  • many of available templates, skeletons, and kits to build from

All of this together makes Ionic a strong framework, especially for small teams or those who want to get their app finished fast.

Let’s look more into the different tools available for your Ionic projects.

Using Ionic Mobile Templates for Your Project

Many developers make assumptions about using templates for projects, and the Ionic space is no different. Some think that templates are only for beginners, while others deem them too difficult to use for those starting out.

Despite these views, templates have their place in most projects, for many different developer experience levels.

For those brand new to the Ionic Framework, templates can provide a quick launching point for any project. Not only does it close the gap from beginning to learn to finished project, but having a complete app with good documentation will give you a grasp of how to work within a project—knowledge that can’t be found in the developer docs alone.

For those with some experience using Ionic, templates are a good way to see all of the pieces that go into an app in action. Junior developers working with Ionic are likely to have implemented some features, or work within an already existing app structure, so working at a different scale can give insights into the areas typically reserved for senior developers.

Experienced developers can utilize the pre-built infrastructure to reduce the cost and time associated with their project. Though templates often don’t give you a project that is completely ready to hand off to a client, getting a project to 70% completion for less than a dev hour in cost can be a godsend. Plus, you won’t have to program the same common features again and again.

Let’s take a deeper look at the different formats, tools, and variations of Ionic templates available.

  • App Templates
    15 Ready-Made Ionic 3 App Templates
    Kyle Sloka-Frey
  • Ionic
    10 Best Ionic 3 App Templates
    Nona Blackman

Low- and Zero-Code Ionic App Creation

Don’t have much experience in developing for Ionic, or any at all? There are solutions available to help build an app without coding at all.

While you shouldn’t expect to build highly sophisticated apps using these tools, they can help you create solid basic apps and proofs of concept.

One of the types of tools that allow for this are code generators, such as IMABuildeRz: Universal AppBuilder for Ionic. This generator lets you create code by using menus, drag and drop editors, and an admin system that make the code for your app without the need for programming. Those that have some experience with programming can use it as a jumping off point, giving you a solid code base to start from.

IMABuildeRz Universal AppBuilder for Ionic

Another popular way to build an app is to use the editor available in Ionic Studio. With drag and drop editors, component libraries, and more, this platform by Ionic let’s you put together fully-featured apps with minimal code.

  • Ionic
    Top 4 Ionic App Builders and Universal Ionic Templates
    Kyle Sloka-Frey

Get to Minimum Viable Product Faster with Ionic Skeletons

For those building something too complicated for a drag-and-drop editor or generator, there are plenty of skeletons and templates out there to give you a solid base.

These templates often are not complete apps, but rather provide all of the basic features found in all apps. Don’t want to program yet another login screen? Or setup another forgotten password user flow? These templates solve those issues at a reasonable cost.

Here’s some of the best boilerplate templates out there:

Barebone Ionic starter template

Build an eCommerce App Fast With Ionic

A common use for Ionic is to create shopping apps, where your users can browse your wares from any type of device. Building these types of apps can be difficult though, often exponentially harder than non-eCommerce apps.

Using a template though, you can quickly jump through the hurdles that come with setting up an eCommerce app from scratch. Payments, cart handling, products, and more can be done from the get-go, giving you more time to worry about your customers and your shop.

If you already have an online store, there are a number of app templates available that will integrate directly into them, helping to give your customers a consistent experience, no matter where they are viewing from. On top of that, this means that you will only have to update your products on one system, saving you a ton of time!

Here are some of the most popular eCommerce templates available:

Ionic eCommerce app template

Use Pre-Built Building Blocks with Ionic UI Kits

Even without using a full app template, there are often portions of apps that are easier to slot in, rather than programming them from scratch. These components act as building blocks that can be used to piece together screens and apps more quickly than if you were starting from nothing.

These types of kits can be a godsend for developers that have a hard time with design, giving your app a highly polished look without mastery of UX and UI.

Some of the best kits out there include:

Ionic3 UI Theme

Easily Make Business and Service Apps

The final type of Ionic template available is highly niche, but offers more value than the other types of templates for anyone whose needs fall within these niches. Specifically, we’re talking about full-fledged apps that are built for a specific purpose, and only need minor changes to customize them for your needs.

These templates typically come in the form of clones of popular apps, or app templates built for a specific business type, such as restaurants. Because of the specificity associated with their use, using one can cut down on development costs drastically, and in some cases, they might not require any coding at all.

Here’s some of the more popular niche app templates available:

How Will You Use Ionic?

With all of these options available for starting your Ionic app, which will you choose? What are your favorite tools and templates for Ionic?

Let me know by posting in the comments below!

  • Ionic
    Top 4 Ionic App Builders and Universal Ionic Templates
    Kyle Sloka-Frey
  • App Templates
    15 Ready-Made Ionic 3 App Templates
    Kyle Sloka-Frey
  • Ionic
    10 Best Ionic 3 App Templates
    Nona Blackman

13:28

Updated Course: Coding Blocks for WordPress Gutenberg

WordPress 5 saw the launch of the new Gutenberg editor, which aims to provide a true WYSIWYG experience by breaking up pieces of posts and pages into individual blocks of content. 

If you want to get the most out of Gutenberg as a WordPress developer, try our newly updated course, Coding Blocks for WordPress Gutenberg. Join Jeremy McPeak as he teaches you how to create blocks, specialized WordPress plugins that extend the functionality of the Gutenberg editor.

coding a custom WordPress Gutenberg block

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 more than 1.1 million creative assets. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.

 

June 12 2019

16:43

10 Best Directory Plugins for WordPress

Directories are a popular and profitable kind of website. Directory websites list products and services for users to browse. They are databases that deliver information based on location and categories. They can contain a large amount of data in form of listings under different categories. 

Directory websites come in all sizes and shapes: complex, simple, local, national, global, or niche. Some well-known examples of directory websites include: Yelp, Angie’s List, Craigslist, Trip Advisor, Amazon, and many more.

If you want to start a directory website, the best place to begin is identifying a niche your local area. You can make money by charging listings for normal or featured listings. You can also earn money by displaying advertisements or offering membership packages. 

However, keep in mind that creating a custom directory website can be massive undertaking that costs a ton of money. Directory plugins are the best and cheapest option. Their authors have thought of just about anything a directory website will need. 

In this post, I’ll show you some premium directory plugins available on Code Canyon

  • WordPress
    10 Best Restaurant WordPress Plugins
    Esther Vaati
  • WordPress
    5 Best Store Locator WordPress Plugins
    Esther Vaati
  • WordPress
    Best Affiliate WooCommerce Plugins Compared
    Eric Dye

Understanding Directories 

Suppose you’re on vacation in a city you’ve never been to before. You went to a popular website and read about the attractions the city offers. You read reviews of several hotels before booking one. Now you want to go out for dinner. You check that popular app on your mobile to see what restaurants are in the area. A few interesting places catch your eye. You read reviews by customers who’ve eaten there. You decide on one that has the best ratings based on reviews you’ve read. There is even a map to show you how to the restaurant from your hotel! 

Or another scenario: imagine pipes in your house are leaking and you have to find a plumber fast. You go to a website that lists plumbers in your area, see how they have been rated by other users, read some reviews and find the right one. 

Maybe you want to buy a car. You search through the massive online listings for cars available in your town.

When you rent an apartment or buy a house, you look on websites with local real estate listings. 

If you want to buy a blender, you go to Amazon and search for blenders that fit your budget.

If you're looking for a job, you search through job postings in job websites. 

Examples of directories are endless. They are the most popular kind of website. 

What is a Directory Website? 

Directory websites contain a massive amount of data in form of listings under different categories. They list products and services and even personal information for users to browse. Essentially, they are databases that deliver information based on location and categories. You can list just about anything. 

Directories are curated listings. Directories are community driven. Directories produce user generated content. Directories generate a lot of traffic! 

Directories provide tools like: robust search bars, search by filters, pictures, location information with maps, product information, contact details and more.

Some directories are public: to help customers find store or business locations, list names of doctors and their specialties, etc. On the other hand, some directories are private for the internal use of a business or organization. 

Types of Directory Websites

There are so many kinds of directory websites. If you’re looking to start your own, these niche examples should give you some ideas. 

  • classified ad listings 
  • coupons and deals lists—eg. Groupon
  • business listings—eg. Yellow Pages
  • job listings
  • event listings 
  • real estate listings
  • automotive guide 
  • hotel and restaurant guide
  • city guide or local directory
  • travel websites
  • video directory—eg. Youtube or Vimeo
  • web link directory

To start your own directory website you will require a WordPress directory plugin.      

What is a Directory Plugin?

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

A directory plugin is a piece of software you add to your WordPress website to help you create your own directory website. 

Why Should You Use a Directory Plugin

Building a directory website from scratch is a massive undertaking that will cost you a lot time and a lot of money. Fortunately, directory plugins have all the ground work covered and they are very affordable. 

Once you buy and install a directory plugin you get many out of the box features to get you started. Your main focus will be running your directory website. 

Ways to Make Money Through a Local Business Directory

  • displaying advertisement
  • charging listing fees—normal listing and featured listing
  • membership subscriptions 
  • booking & reservation—users trust directory and prefer to do booking and reservation through them

What to Look For in a Directory Plugin

  • Front-end submission: An efficient and manageable front-end submission system is a must. This will make it easy for you to maintain the listings and will let you crowd source listings.
  • Location-based searches with integrated maps: any directory that deals with physical locations, stores, or services will need location-based search and maps. 
  • Tools for customers to rate and review businesses. 
  • Ease of use: it needs to be easy to add listings and make changes to them.
  • Easy to customize: so it can integrate seamlessly with the design of your website. 
  • Compatibility across all browsers and devices—especially mobile devices, including touch responsiveness.
  • Integration with payment gateways. 
  • Integration with email marketing platforms like Mailchimp.
  • Ability to integrate with booking and reservation plugins so visitors can book and reserve without leaving the directory. 
  • SEO optimization.
  • Shortcodes to make it easy to add a directory anywhere on your website.
  • Back-end tools—for analytics, generating reports, etc.  

Finally, keep in mind directories generate a lot of activity. High activity has the potential to slow down your website. This can turn off visitors your website. Your hosting provider should have the capacity handle it. 

Now let’s take a look at some of the best directory plugins on CodeCanyon.

1. Web 2.0 Directories Plugin 

Web 20 Directories Plugin

Web 2.0 Directories Plugin is a multi-purpose WordPress directory plugin. You can use it to build classified ad websites, events directories, listings for cars, bikes, boats and other vehicles, restaurants directories, real estate listings, wedding directories, yellow pages, local directories, etc. 

That’s not all: Web 2.0 Directories Plugin can convert any existing website into a fully-featured directory. 

Some features of this multi-purpose directories plugin include:

  • fully compatible with WPBakery (Visual Composer) and SiteOrigin page builders
  • customizable search by content field and location-based search
  • CSV import/export/update with the ability to import images files
  • ability to include YouTube and Vimeo video attachments for listings
  • Google Maps and MapBox (OpenStreetMap) integrated
  • SEO friendly–fully compatible with Yoast WordPress SEO plugin

Check out the live preview and see for yourself why user stuffmartusa2 says:

They have done an incredible job putting this plugin together. It's loaded with features and for the price is an incredible value!   

2. Directory Pro 

Directory Pro

Directory Pro is a WordPress directory plugin that you can use to build all different kinds of directory websites. 

Features of Directory Pro include:

  •  robust front-end for submitting listings
  • integration with: WooCommerce, PayPal, Stripe, MailChimp, WPBakery (Visual Composer), and Yoast SEO 
  • 13 language files in language directory inside the plugin: Russian, German, Japanese, Spanish, French, Chinese, Portuguese, Italian, Turkish, Dutch, Persian, Arabic, Swedish

Using Directory Pro you can earn money by charging for any of the following: 

  • add a listing
  • claim a listing 
  • view a listing 
  • make a reservation
  • sell VIP badge 
  • book an appointment

User jordannktelco says

A very robust plugin that is functional. Excellent customer support when requested, couldn't ask for more.

3. Directories Pro for WordPress 

Directories Pro for WordPress

If you want to build any number of directories with a single install or to easily clone or migrate directories by exporting and importing directory settings, then Directories Pro has got you covered. 

Types of directories you can build with this versatile, feature-rich WordPress plugin include: website directories, property directories, or community-driven local business directories like Yelp.com or Yahoo! Local.

Features:

  • Allow users to submit and manage their content from the front-end without going to the back-end dashboard.
  • Display listings on custom styled maps with advanced features such as custom area search, geolocation, and full-screen map.
  • Let businesses or users claim their own listings. A verified listing will allow them to edit their data and keep it fresh and relevant.
  • Use popular contact form plugins to add a contact form to listings. Supports Contact Form 7, WPForms, and Gravity Forms.
Try the demo and discover why user crretreat says of Directories Pro

I tried other directory plugins in the past and this one is top of the line. Totally customizable, tons of features and support is remarkable. All at a great price.

4. Sabai Directory Plugin 

Sabai Directory Plugin

Sabai features the ability to build community-driven local business directories like Yelp or Yahoo! Local.

Some key features include: 

  • Search listings by keywords, category, distance, and location with user friendly auto-suggestion features.
  • Add any number of rating criteria such as price, quality, service, and food, with beautiful rating charts to help users visualize ratings.
  • Monetize your site with paid listings. Create multiple pricing plans. Process orders and track their progress with complete order history.
  • Support for PayPal, Authorize.net, 2Checkout, and Stripe payment gateways including recurring payment options.

User by simplifiedrs says:

Great product, tried different tools in the past but always come back to this one as it simply suits all my needs.

5. Real Estate Pro 

Real Estate Pro

This plugin is easy to use—once you install the plugin, it will create all necessary pages, email templates and settings.

You can also customize your own listing detail page using WPBakery (Visual Composer).

Features of the Real Estate Pro directory plugin include: 

  • Integration with WooCommerce, PayPal, Stripe, MailChimp, Visual Composer, and Yoast SEO.
  • New listings will display with a new badge icon. The website administrator can set the number of days the badge icon will appear. 
  • Create unlimited subscriptions and memberships including a free account tier.
  • Offer coupons for signup or coupon packages and set coupon limits and expiry dates.
  • Users can interact with each other: for example, users can see who is interested in their listings and contact them directly. 
  • Translatable with 13 language files in the language directory inside the plugin: Russian, German, Japanese, Spanish, French, Chinese, Portuguese, Italian, Turkish, Dutch, Persian, Arabic, and Swedish.

Check out live preview  and see why user DigitalAIMMedia says:

Fantastic plugin with amazing support! Perfect for my client's real estate website! Thank you for all your help!

6. Simple Link Directory Pro 

Simple Link Directory Pro

 Simple Link Directory Pro is your go-to plugin when you want to curate content. 

Using this WordPress plugin, you can create the following kinds of directories:  

  • link directories: eg. resource pages or listings
  • video galleries, like a Youtube video directory, or video database
  • and so much more  

Some features of this great plugin include:

  • Easy to use: creating lists is a breeze. Each list item needs only a title, link, and an image. The subtitle is optional. 
  • Highly customizable templates with fully-responsive modern designs.
  • Robust front-end user registration, login, and link submission forms.
  • SEO friendly.
  • You can monetize your directory by charging for paid listing and claim listing features.

Check out the live preview and see for yourself what makes this plugin great.

User drlitross says: 

Nice plugin, nice code and nice support. It has everything or almost everything you want in a directory of links... 100% recommended.

7. Business Directory Ionic 3 

Business Directory Ionic 3

Unlike the other items on this list, Business Directory Ionic is not a WordPress plugin. Instead it's a mobile app with a powerful included content back-end. Together, these make a complete store and business listing solution.

Users can easily browse through businesses and stores using filters like category, name, or distance. Store and business owners can display and promote their products, services, news, contact information, and more.

Here is why you should use Business Directory Ionic for your directory website: 

  • no code knowledge or tech development required
  • clean and user-friendly interface
  • highly customizable structure, with modular architecture
  • comes with carefully curated color themes
  • easy installation, detailed quick start guide
  • easily maintainable data, via the Firebase or Backendless GUI
  • free updates with new features being added constantly
  • works on Android and iOS with a single codebase
  • quick and efficient support

8. Hospital & Doctor Directory 

Hospital  Doctor Directory

Once you install this plugin, it will automatically create all necessary pages, email templates and settings. You can also customize your own listing detail page with WPBakery (Visual Composer).

Features of the Hospital and Doctors directory plugin include: 

  • integration with WooCommerce, PayPal, Stripe, MailChimp, Visual Composer, and Yoast SEO
  • robust front-end submission system
  • create unlimited subscription and membership types including free accounts, one-time payment, recurring payment, free trial, paid trial, variable payment packages
  • offer coupons with limits and expiry dates
  • users can see who is interested in their listings and contact each other directly
  • translatable with 13 language files in language directory inside the plugin: Russian, German, Japanese, Spanish, French, Chinese, Portuguese, Italian, Turkish, Dutch, Persian, Arabic, and Swedish

Check out a live preview and see if this is plugin is what you’re looking for.

User ccollett says:

Quality plugin, does exactly what it says. Excellent support, author is very responsive.

9. Hotel Listing

Hotel Listing

The Hotel Listing plugin is a perfect choice if you’re looking to set up a directory website for listing hotels, motels, hostels, bars, and restaurants. 

Once you install it, the plugin will create all necessary pages, email templates and settings. You can also customize your own listing detail page using WPBakery (Visual Composer). 

Some features of this plugin include: 

  • integration with WooCommerce, PayPal, Stripe, MailChimp, Visual Composer, and Yoast SEO
  • easy-to-use front-end submissions
  • unlimited membership types and plans
  • many options for creating and offering coupons
  • translatable with 13 included languages

Check out the live preview of this awesome plugin and see why user Ringdal says:

Lovely plugin which can be added to form a seamless feature on your website. Beautiful design and fantastic support. Thank you for designing something I had been looking for—for a very very long time.

10. Everest Business Directory

Everest Business Directory

The Everest Business Directory plugin is the easiest way to create and manage business directories. This advanced plugin is loaded with lots of powerful features that you need to create an outstanding business directory.

Some features of this plugin include: 

  • Front-end directory submission: users can easily submit their business or product to your directory right from the front-end, using the simple submission form. 
  • You can manage all your directory submission right from directory submission dashboard. You can label featured directories with a single a click.
  • Highly configurable submission form: you can ask your users to add any details that you need. For example, contact information or links to social accounts. 
  • Elegantly pre-designed form templates and advanced search with options to search by keyword, location, category and tags. 
  • Advanced Google Maps integration for directory listing and ability to pull addresses from Google Maps directly.

User Aurangzeb27 says this about Everest Business Directory

By far one of the best directory plugins. Easy to use, light weight, and comes with great customer service.

Conclusion

Directory websites are some of the most popular websites on the web. And they can be very profitable. If you’re looking to start one of your own, the plugins I have covered—and more—are available on Code Canyon

  • WordPress
    10 Best Restaurant WordPress Plugins
    Esther Vaati
  • WordPress
    5 Best Store Locator WordPress Plugins
    Esther Vaati
  • WordPress
    Best Affiliate WooCommerce Plugins Compared
    Eric Dye

June 11 2019

16:22

How to Embed and Protect PDF Files With a WordPress Plugin

PDF files are a very popular way of sharing formatted documents due to their flexibility and lightweight nature—they work on most devices and operating systems. In this post, I'll show you how to use a plugin to embed and protect PDF files in your WordPress posts and pages.

  • WordPress Plugins
    Best PDF Viewers for WordPress Compared
    Jane Baker
  • JavaScript
    How to Create a JavaScript PDF Viewer
    Ashraff Hathibelagal
  • JavaScript
    How to Use the WowBook jQuery Flipbook Plugin
    Ashraff Hathibelagal

Why Use PDFs?

PDFs can be used by all kinds of business, whether you want to display a catalog for your properties or show menu items for your restaurant.

Some of the advantages of using PDF files are:

They Provide a User-Friendly Experience

When displaying information on your web pages, you should also think about how your users will consume it. While they're not as accessible as including information directly in HTML, PDF files provide a more friendly experience than other file formats. For example, not everyone will be able to open a Word document!

Information Privacy and Copyright Protection

PDF files provide the ability to deny copying or printing. This is important when you need to protect intellectual property.

Content Can't Be Easily Changed

A PDF file provides a way for users to interact with a document without changing the content. For example, people can digitally sign the document without being able to change the content.

Universal Accessibility

You can read a PDF from any device and in any language. The original version is always the same regardless of the number of times it is shared. 

When Should Your Website Use PDF Files?

Below are some instances when you should use PDF files:

  • To provide access to content that already exists in printed form.
  • To reduce the size of a document. For example, you might have a presentation that requires compression
  • For printing content such as books, manuals, catalogs or similar publications 
  • For very long text or graphic content. People prefer to download a long document than read it on the browser
  • To restrict access to content. Restricted content is better delivered via a PDF since you can employ measures such as password protection or encryption.

Getting Started

PDF Viewer for WordPress is a fully responsive plugin that allows you to embed PDF files in your WordPress posts and pages. It also allows you to enable or disable printing, downloading, zooming and social sharing.

Let's start by downloading the plugin from CodeCanyon. If you have an account already, you can purchase the plugin from the product page. If you don't have an account, you can create one from the signup page.

Once you purchase the plugin, you will get a link to the files. Alternatively, you can find them in the download section of your account with your other purchased items.

You will then need to login to your WordPress site, go to Plugins > Add New and upload the provided zip files. After uploading, click Install Now, then wait a few seconds and click Activate. You can now start using the plugin.

Features of PDF Viewer for WordPress  

PDF Viewer for WordPress is the perfect way to display your PDF files on your WordPress site. It is fully responsive and compatible with major browsers. Other features include:

  • Tracking with Google Analytics: This feature allows you to track the number of visitors who have read your PDF using Google analytics
  • Personalization of the viewer your files with your logo or branding. You can also enable and disable tools such as Find, Download, Share, Email to Friend, Page Navigation, Zoom, Print, and others.
  • Unlimited PDFs and sizes: This plugin allows you to embed an unlimited number of PDF files of different sizes.
  • Supports up to 100 languages.
  • Support for sharing PDFs on social networks

How to Embed a PDF File in a Post or Page

Once you install the PDF viewer it will appear on the left side of your admin menu as shown below.

We will start by uploading the PDF file we want to display in our page. PDF Viewer for WordPress comes with an upload feature that lets you makes the upload process easy and seamless. You can upload a PDF file from your library or from an external source and then obtain a URL to the document on your server. 

Simply follow the following steps:

  • Go to the Upload PDF File option.
  • Click on the button labeled Click here to upload the PDF file.
  • An upload dialog will pop up where you will be prompted to choose your PDF file.
  • Once you choose or upload the file, you will see a Get Link button which you will be able to click on to obtain the URL for the PDF file.
  • You can copy this link and use it to embed the PDF anywhere you like in your posts or pages.

Paste this link into a post or page to embed your PDF, which should appear as shown below once embedded.

Embedded PDF

How to Import a PDF File to a Post or Page

PDF Viewer for WordPress also provides the ability to import a PDF file from any URL. The process is similar to the upload method we looked at above.

  • Go to the Import PDF File panel.
  • Paste the link to the external PDF in the space provided.
  • Click the Import button.
  • You will then get a URL which you can use to embed your PDF anywhere you wish.

Customize Viewer Look

PDF Viewer for WordPress also lets you customize the look of your PDFs and viewer. Click on Customize Look and choose a theme or use a custom color as your theme. You can also change the text color on the toolbar as well as style icons.

PDF Viewer for WordPress Customize Look


How to Protect PDF Files

If you want to protect your files from being downloaded by everyone, there are a few measures you can use to ensure that your content is only accessible to permitted persons.

In this post, I'll show you how to use password protection to protect your content.

Password Protection for PDF Files

Password protected pages allow you to hide information from users unless they have the password. It's easy to set up password protection on posts and pages.

To protect using a password, simply follow the following steps:

  • go to the post or page that you wish to protect
  • right under the Publish button, change the visibility to Password Protected
  • enter the password and hit Publish
password protecting a post

The post or page should now prompt you for a password when you view it.

Conclusion

PDFs are very popular on modern websites. Whether you want to display a product catalog, flyer, or invoice, PDFs are the most likely format to be used. They provide a seamless experience for your users, by ensuring every user can read your content regardless of which device, browser or language they are using.

  • WordPress Plugins
    Best PDF Viewers for WordPress Compared
    Jane Baker
  • JavaScript
    How to Create a JavaScript PDF Viewer
    Ashraff Hathibelagal
  • JavaScript
    How to Use the WowBook jQuery Flipbook Plugin
    Ashraff Hathibelagal

Also, if you want to use custom plugins but you're not comfortable tinkering with servers and prefer to have someone do it all for you, consider managed WordPress hosting. Thanks to Envato's partnership with SiteGround, you can get up to 60% off managed WordPress hosting.

15:14

How to Add a Slider to WordPress With a Free Plugin

When used properly, sliders can help make a website appear more dynamic and lively while at the same time providing more information in a limited space.

If you are looking to add a feature-packed yet free slider plugin to your WordPress website, this tutorial will show you how.Ii'll give you an easy to follow step-by-step guide on using the free Smart Slider 3 plugin.

Smart Slider 3 Overview

Before we dive deep into this tutorial, let me provide a brief overview of the plugin and its features so that you can decide if it has everything that you want in such a plugin.

  1. The sliders you create will be fully responsive, optimized for SEO and work with all WordPress themes.
  2. You can edit each slide using a user friendly interface and see the live preview in real-time.
  3. With a little creativity, you can create your own custom slides with unique design. You have full control over the appearance of all the headings, text, buttons etc. You can change everything from the typography to border-width and background color etc.
  4. The sliders are mobile-friendly. They will look good on devices of all screen sizes.
  5. People who don't want to start from scratch can simply use the provided templates and quickly set up their own slider by only changing the images.

It offers many more features which can be found on the plugin page. Smart Slider is not limited to just images and videos. You can use it to create sliders for posts among other things.

Editing Individual Slides

After you have installed and activated the plugin, the dashboard should look like the image below.

Smart Slider Welcome Screen

We will create our first slider using pre-built templates. To do that, click on Template Library and then choose Free on the next page. Now, go to the third template called Image Slider and click on Import. This will add the slider to your dashboard.

Importing the Image Slider

On the dashboard page, you can now hover over the imported template and click on the edit button to start editing the slider.

Editing the Slides

First we will edit the slides and change the images and captions. For this, hover on each slide and then click on the edit button that appears. You can also duplicate, delete or set a particular image as the first slide.

You should now see something similar to to the image below.

The background image can be changed by clicking on the Background button. This will show you a number of options. You can either make the background another image or set it to be a solid color or gradient.

Turning the overlay switch on in above image will overlay the image background with a semi-transparent color or gradient. If you only want to show a solid color or gradient on a specific slide without any images, simply click on the Color button and select the colors you want to use for the gradient.

Image Slides Background Options

Once you have changed the image, you can easily change the text White Brown Cow by clicking on it. This will give you a couple of options like adding a link, changing the background color or the font style, size and color etc.

Changing the Slide Text

Try playing around with different values and options to see how unique and different your results can be based on different settings.

Chaging the Caption Appearance

As you can see in the above image, you get full control over the appearance of the caption. You can even click on the More button to add custom CSS to further customize the look.

What if you want to add more elements on your slide?

For instance, let's say that we wanted to tell readers a little bit more about tigers. In this case, you could click on the green plus button in the top left corner to add more elements like headings, text and images over the slide.

Expanded captions

After making all the changes, you can instantly preview what the slide would look like on different devices by using the button available at the top. There are also undo and redo buttons in the top bar so that you can undo any changes you don't like.

Once you are satisfied with the results, simply click on the Save button to save them permanently. You can change the content and appearance of all other slides in a similar manner.

Slide preview and Save Button

Changing Slider Settings

After making changes to individual slides, you might also prefer to change the settings which affect the slider as a whole. To do so, simply click on the slider you want to edit on the dashboard page and scroll down to the edit section. Here is a screenshot of the page where you can edit all the slider options.

Slider Settings

Lets begin by changing the appearance and position of arrows. You can choose to either show no arrows at all or show them with a background or without any background. The first option will add a dark overlay under the arrows to make them stand out from the image background. You can choose from different icon shapes and only show them when users hover over the slide by turning on the Shows on hover option. You can also choose from 13 different pre-defined positions for the arrows.

Changing Arrows in Smart Slider

You can also show bullets with each slider so that users can jump directly to an image at a particular position. There are a couple of options that you can turn on like only showing the bullets on hover or showing the slide thumbnail with each bullet. In this case, I have turned them off because our slider will have thumbnails below each slide making bullets redundant.

Changing Slide Bullets in Smart Slider

You can show thumbnails permanently by turning off the Shows on hover option. The width and height of the thumbnails are set to 100 px by 60 px by default. This will generally look good—the thumbnails are not big enough to be distracting but are big enough to show a quick preview. You can also align the thumbnails to left, center or right.

Changing Thumbnails in Smart Slider

More Slider Settings

There are some other general settings that you can change like the name of the slider, its dimension and whether users can navigate through the slides using a keyboard. You can also set an animation for the transition between different slides and specify an animation duration.

Changing General Smart Slider Settings

There are a few other settings that you can change like setting the slider size and limiting its width on desktops, tablets, or mobile devices.

Changing the Slider Size

Finally, you can publish the slider using one of three different methods. 

The first is to directly add the shortcode to the in your posts and pages. The shortcode provided by the plugin already contains that right slider ID embedded into it. All you have to do is copy and paste it to the desired location. 

The plugin also adds an icon to the built-in WordPress editor that lets you easily add a slider to any page or post. 

Finally, you can integrate the slider in your theme using a PHP snippet to emit the slider shortcode.

Publishing the Slider

Final Thoughts

In this tutorial, we used the free Smart Slider 3 plugin to create an image slider. However, you can also use it to create sliders for WordPress posts based on a category or tag. Try playing around with all the features of this plugin to see if it fits your needs.

People who are looking for more features should consider taking a look at some of the popular WordPress Slider plugins available on CodeCanyon. 

Also, if you want to use custom plugins but you're not comfortable tinkering with code and prefer to have someone do it all for you, consider managed WordPress hosting. Thanks to Envato's partnership with SiteGround, you can get up to 60% off managed WordPress hosting.

00:20

All About WooCommerce Plugins: How They Can Make Your Store Successful

WooCommerce is built with store owners and developers in mind. The fact that it’s free, open source, and highly customizable makes it very popular and widely used. It powers 37% of all online stores. It has been downloaded over 13 million time. 

When you download WooCommerce you get a basic store that comes with basic functions of a store like product management, order processing, checkout and shopping cart. This allows you to sell physical goods, digital goods, affiliate transactions, subscription memberships. You can also sell consulting services and more.

You also get essential management features like customer management, inventory management, sales tax management, shipping cost calculations, and coupons.

However, not all businesses are the same. For some, the basic store with the basic core features is all they will ever. For other businesses, that want to do more with their online store, the basic features are not enough.

Fortunately, WooCommerce platform can be integrated with free or premium plugins that add additional features or extensions to make their online store do more. 

You can customize and make enhancements to all aspects of your store using free and premium WooCommerce plugins. You can even write custom code to create your own custom solution. CodeCanyon has over 1,500 premium WooCommerce plugins available to help you create an online store or business that can do whatever you have in mind. In this post, I'll introduce you to the variety of WooCommerce plugins you can find in the CodeCanyon marketplace.

Let’s dive in shall we? 

Introduction 

WooCommerce logo

What are WooCommerce Plugins? 

WooCommerce plugins are software packages that:

  • extend the functionality of existing core features 
  • add entirely new functionality to your WooCommerce store

In short, they introduce extra or missing functionality to make your WooCommerce store do what you want. 

Consider them as extensions that will allow you to do a lot more with your store.

Why Do You Need WooCommerce Plugins?

WooCommerce gives you the basics to get started. The basic store is a blank slate. But the rest is up to you—to create a great store, you need plugins. 

The basic WooCommerce store gives you basic functionality to get you started running your online business. This is your storefront. It comes with: 

  • virtual shelves to display your products 
  • space for you to keep track of your inventory 
  • a way for customers to browse and choose products they like 
  • a shopping cart for customers to gather items that they've chosen
  • a checkout where you can accept payments

Finally, WooCommerce makes it easier for you to ship the merchandise to customers, since you already collected their address during the checkout process. 

Now you’re up and running. And since the basic store is a blank slate, you can turn it into so much more. You can customize and enhance all aspects of your store using free and premium WooCommerce plugins.

  • WordPress
    Best Affiliate WooCommerce Plugins Compared
    Eric Dye
  • WooCommerce
    20 Best Shipping & Pricing WooCommerce Plugins
    Nona Blackman
  • WooCommerce
    10 Best Email & MailChimp WooCommerce Plugins
    Eric Dye
  • WooCommerce
    How to Install and Set Up a New WordPress WooCommerce Theme
    Eric Dye
  • WordPress
    20 Best WordPress eCommerce Plugins Available on CodeCanyon
    Daniel Strongin
WooThemes home page

How Can Enhancements Improve Your Bottom Line? 

Consider the following: online stores that are visually appealing have higher conversion rates because create more customer engagement. Visual appeal also drives purchasing decisions. 

This means it is a good idea to boost the aesthetic appeal of your store by giving it a signature look to distinguish it from others. Plugins for themes, template builders, multi-layout product display, and color swatches for images will enhance the visual appeal of your store. 

Also think of organizing your products in a pattern that is attractive to the eye by adding sliders of your best selling products, multi-layout displays, or color swatches to show variety. 

To make it easy for customers to navigate your store, product search and product filter plugins are your best bet. 

You may also want to consider increased visibility in search engines so you can attract traffic to you store. A WooCommerce SEO plugin would best for this task. 

You may want to send marketing emails and newsletters to your customers. In this case you should consider an email marketing application plugin or mailchimp integration plugin. 

Also as your store grows, its operations become more complex. You many need more than one supplier for products you sell. The functionality of your basic inventory management core feature will need to be extended so it can carry out complex inventory management tasks. You may also opt to ship items from multiple suppliers directly to customers. 

And don’t forget social media. Studies have shown having social media login creates trust. Make it easy for your customers to register, login, and make purchases on your store through their social media accounts then a social login plugin will be best for this purpose. 

To make all these changes you don’t need to build new functionality from scratch. CodeCanyon has over 1,500 premium plugins for WooCommerce available.

WooCommmerce login

WooCommerce Plugins on Code Canyon

Below I’ve listed some popular and best selling WooCommerce plugins on Code Canyon according to what they do for your online store. 

Plugins to Make Your Store Look Good 

Online stores that are visually appealing have higher conversion rates because create more customer engagement. Visual appeal also drives purchasing decisions. These WooCommerce plugins will help you increase the aesthetic appeal of your store: 

  • WooCommerce
    How to Install and Set Up a New WordPress WooCommerce Theme
    Eric Dye

Plugins for Products and Better Product Listings

The default product listing works fine, but if you want to give your customers extra features like product search or filtering, you'll need a product listing plugin. Other plugins can help you bulk edit product listings to save time, or create product variations.

Plugins to Improve Sales

There are a number of strategies you can use to improve sales to customers who come to your WooCommerce store. With these plugins you can add features such as dynamic discounts based on customer activity, gift cards and vouchers, or the ability to recover abandoned carts with follow-up emails.

  • WooCommerce
    Best Coupon Plugins for WooCommerce
    Daniel Strongin

Upselling & Cross-Selling Plugins

Another time-tested method to improve sales is with upselling or cross-selling. These plugins will let customers discover other products that they may wish to buy—connecting them with items they need and increasing your bottom line! 

Checkout Plugins

The checkout process is a very sensitive part of making an online sale. Any problems or confusion here can easily result in a lost sale and abandoned cart. These WooCommerce plugins will help you customize the checkout process—whether streamlining it for digital goods, breaking it into smaller steps, or allowing checkout with different currencies.

Customer Management Plugins

These plugins will make it easier for you to track your customers, view their order histories, and manage their address data. You can also make it easier for customers to register for your site with social login!

WooCommerce Marketing Plugins 

These plugins make it easier for you to craft emails for marketing to your customers by email.

  • WooCommerce
    10 Best Email & MailChimp WooCommerce Plugins
    Eric Dye

Shipping Plugins

Once you've made a sale, you need to get the product to your customer ASAP! These plugins will make shipping and fulfillment easier. You'll also find plugins that will allow you to set up a more accurate shipping price calculator for checkout, so customers can choose the shipping method they want and know exactly how much it will cost.

  • WordPress
    Create a Custom Shipping Method for WooCommerce
    Rachel McCollin
  • WooCommerce
    20 Best Shipping & Pricing WooCommerce Plugins
    Nona Blackman

Payments Plugins

The road to checkout should be free from obstacles. Using the following plugins will make it easy for customers to make payments on your WooCommerce store. 

  • WordPress
    Add Payment Gateways to Your WooCommerce Store
    Rachel McCollin
  • WordPress
    Connect Your Square POS and WooCommerce Store
    Rachel McCollin

Ticketing, Booking, and Calendar Plugins

If your business sells tickets to events or scheduled services like appointments, a ticketing or booking plugin can make life easier for both you and your customers.

  • WordPress
    8 Best WordPress Booking and Reservation Plugins
    Lorca Lokassa Sa

Subscription Plugins

If your business sells subscriptions, with recurring payments and different options for subscription periods, you'll need one of these plugins to optimize your store. You'll be amazed what you can do. 

Inventory Plugins

If you're going to offer products for sale on your WooCommerce store, you'd better be sure you can fulfill any orders. That means tracking inventory. With this plugin you can keep track of product inventory so you can show your customers what is available, and so you can know when it's time to order more stock. 

Reporting and Analytics Plugins 

An essential part of managing an online store—or any kind of web business—is tracking data on site traffic, sales, etc. These plugins will help you do just that.  

Auction Plugins

This is somewhat of a niche item, but if you want to offer goods for auction on your site, the Simple Auctions plugin can't be beat.

Conclusion

One of the strengths of WooCommerce is the rich ecosystem of plugins that you can find to extend and enhance every aspect of your online store. To learn more about WooCommerce plugins check out some of our other posts here on Envato Tuts+. Or visit CodeCanyon to see the great WooCommerce plugins available for sale there.

  • WooCommerce
    Best Coupon Plugins for WooCommerce
    Daniel Strongin
  • WooCommerce
    10 Best Email & MailChimp WooCommerce Plugins
    Eric Dye
  • WooCommerce
    20 Best Shipping & Pricing WooCommerce Plugins
    Nona Blackman
  • WordPress
    Create a Custom Shipping Method for WooCommerce
    Rachel McCollin

June 05 2019

21:26

How to Add a Free WordPress Music Player to Your Site

Any website which lets users discover, buy, share, or download music or other sound effects should always have an audio player. Every user would like to preview the audio or music to determine if they want to purchase or share it or not. Giving users the option to play this audio from the webpage itself without the need to download anything will result in a better user experience.

Luckily, WordPress offers both free and premium plugins to add audio players to any webpage. Most of the free plugin will do the job for you, but only a few of them allow you to adapt the look of the player to the overall design of the website.

In this tutorial, you will learn about a completely free-to-use plugin called Audio Album that will allow you to embed audio files in a webpage and design your own music player interface with full control over its appearance.

  • 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
    15 Best WordPress Audio Player and Video Player Plugins
    Jane Baker

Overview of Audio Album

This plugin is basically meant to group different audio files together. For example, let's say you have ten different songs from a single artist. Using this plugin, you could group them all together under a single heading as an album. A consistent styling could then be applied to the whole album in order to make it stand out. You can use the plugin to add multiple albums on the same page.

Here are some of its features:

  1. The plugin is fully responsive. By default, it will cover the full width of the enclosing element.
  2. You can use custom fonts for the music player. By default, the plugin will inherit the fonts from the theme itself but you can also specify other fonts.
  3. The plugin is easy to customize and allows you to change the color of the album, the player, the text and the time and volume bars.

The plugin is also very easy to use and set up. Now, let's get started and create a music player!

Creating the Music Player

The plugin offers two shortcodes: [audioalbum] and [audiotrack]. Both of them are required to create the player.

The [audioalbum] shortcode creates the header of the album. You can use the title, detail and date parameters inside it to provide relevant information about the album or the music list you are creating.

The title will appear in big letters and the detail or date will be shown below it. Here is an example to show how you can use this shortcode.

The [audiotrack] shortcode also has a couple of parameters to allow you to specify the audio source and properties like whether it should be played in a loop, autoplayed, or preloaded. The title and songwriter attributes can be used to provide information about the song title and it creator. Here are some examples:

Make sure that you specify the correct source for the song. Just these four lines will create a music player on your webpage that looks like the image below.

Audio Album Default Player

You could add the attributes autoplay="true" and loop="true" to one of these songs and it would keep playing endlessly without the user ever pressing the play button.

Customizing the Music Player

There are two different ways to customize the appearance of the music player that we just created.

The easiest way would be to simply go to Appearance > Customize > Audio Album. There, you will be able to change the album background, the player background and the color of all the text and buttons.

Audio Album Customization Page

If you want to make other changes to the appearance of the music player, you will have to write your own CSS to replace or override the styling provided by the plugin. You can remove the CSS applied by the plugin by checking the Manual CSS checkbox at the bottom.

Now, you can apply your own CSS to the player and customize its appearance exactly how you want. Instead of starting from scratch, though, it might be better if you simply take the CSS applied by the plugin as a starting point and put it into your own stylesheet to just make changes where necessary instead of rewriting the whole thing.

I created the following theme for the Audio Album music player by overwriting some CSS rules in the plugin stylesheet.

Audio Album CSS Customization

Here are the CSS rules that I changed in order to get the desired look for my music player:

The h2.audioalbum selector controls the appearance of the main heading in the music player. The CSS rules applied to p.audioalbum will control the appearance of the subheading. Strategic use of linear gradients and color-stop values creates the slant in the subheading title bars.

Try and experiment with different values for various CSS rules applied on all the music player elements to create your own unique theme.

Additional Music Player Options

There are four additional parameters that you can use with the [audiotrack] shortcode to create popups. These popups can be used to show users some extra information about the  song or music they are playing. For instance, you could provide a link with each track to open a purchase page, lyrics page or some other license information page.

These four parameters are: buttonlink, buttontext, width and height. The width and height parameter are used to specify the width and height of the popup window. The buttonlink parameter stores the page or post id of the target webpage that you want to open in the popup window. Finally, the buttontext parameter is used to specify the text for the link. If not specified, the link text is set to lyrics.

Here is an example using these parameters:

As you can see, each track can have its own value for the buttonlink and buttontext parameters. Here is the rendered output:

Audio Album Buttons and Links

Clicking on any of these Purchase buttons will open a popup window with a webpage or post determined by the id specified in the buttonlink parameter.

Final Thoughts

As you saw in this tutorial, the Audio Album plugin makes it easy to add an audio or music player to our website. All you need to do is add a couple of shortcodes to the webpage where you want the music player to appear. You are also allowed to show multiple players in the same webpage in order to create multiple groups for different kinds of music or songs. You can visit the plugin page to read the FAQ for Audio Album .

The color of the album, track or the buttons and control can also be changed very easily. Full customization is possible if you know a little bit of CSS. Feel free to show your own Audio Album plugin skins in the comments below!

  • 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
    15 Best WordPress Audio Player and Video Player Plugins
    Jane Baker

09:31

New Course: Build an App With GraphQL, Laravel, and Vue

If you want to learn about a useful new web API that offers a more dynamic and robust API for fetching and submitting data, try our new course, Build an App With GraphQL, Laravel, and Vue.

What You’ll Learn

Join Jeremy McPeak in this course as he teaches you how to create GraphQL APIs with PHP and consume them with JavaScript. You'll learn how to create a GraphQL server for your Eloquent data with minimum boilerplate, and then you'll learn how to consume the GraphQL API from Vue.js. 

GraphQL app to be built in the course

On the front end, you'll learn how to query GraphQL without any special client libraries as you understand how all the requests and responses work. Along the way, you'll build a complete single-page web app with this cutting-edge API technology. 

Here are some free lessons from this course, as a preview of what you can expect:

Understanding GraphQL

In this video, you'll get to learn what GraphQL is and how it differs from RESTful APIs.

 

Creating and Querying an API

In this video, you'll see how to create an API and query it. You'll create the GraphQL endpoint for your Laravel server, and you'll test it with some simple HTTP requests.

 

Assembling the UI

The first order of business in getting a client ready to query and display data is to assemble the basic UI. You'll learn how to do that in this video.

 

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 more than 1.1 million creative assets. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.

May 31 2019

22:57

Create a JavaScript Contact Form With the Smart Forms Framework

In our earlier posts, we listed some free plugins and tools that you can use to create your own forms. One major downside to using free tools to create forms is that the end product might not look as professional and polished as you expect. Similarly, using free libraries to code your own forms might not be possible for people who don't have a lot of coding experience.

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

In such cases, you can either use third party services—which can be a bit expensive—or you can purchase a premium framework, form builder, or plugin which offers free support for a certain period of time. In this tutorial, we will take a look at one of the most popular and feature-rich form frameworks available on CodeCanyon to create your own JavaScript forms.

Smart Forms Overview

The tool that we will use today to create our own forms is Smart Forms. This form framework has gained 3819 sales at the time of writing, and has an average rating of 4.5 based on 159 reviews. Most buyers who have used the framework in their website like its code quality, features, design, flexibility and active customer support.

Some of the features of this framework are:

  • responsive framework with over 40 starter templates
  • multi-step forms and modal forms
  • date picker, time picker, month picker and color picker widgets among others
  • drag-and-drop file uploads
  • AJAX and PHP based with support for Google reCAPTCHA
  • and the list goes on!

If you want to create a lot of professional looking forms, using the Smart Forms framework would be a good choice. Do checkout all the features and reviews on the framework home page.

Example Forms

To show what you can create with Smart Forms, here are a couple of examples with varying themes and layouts.You can choose to have a social media login button placed either at the top or side by side. There are a lot of coloring schemes and 3 different themes available.

Here's a login form.

Login Form Black Theme

And here's that same login form with a different colour and the social sign in buttons on the top:

Login Form Green

Similarly, here are two form related to placing orders. As you can see, it is possible to create entirely different layouts based on your needs.

Order Form Purple Theme

In the next form, you can see how Smart Forms can create attractive styling like large product option cards.

Order Form Green Theme

The download files contain hundreds of such template files so you will almost always be able to find a template that suits your needs and styling. Not only that, but the documentation in the download is easy to understand in case you want to create an entirely new layout for your forms.

File Structure and Other Basics

Once you purchase Smart Forms, you will get detailed documentation about the process of creating your own forms and adding them to your own website in the zip download. Here are some key points that you have to remember:

  1. The forms rely on a single main CSS file for most of the styling. Make sure that you load any CSS reset files before loading the CSS for the plugin.
  2. The forms support Font Awesome icons and JavaScript features like AJAX submission and form validation. However, you can disable these features if you don't need them.
  3. The framework loads an additional fallback stylesheet for IE8.

There are three folders inside the extracted archive called dark, flat and light. These are the three main themes for different forms. Each of the further contain three different folders. These are:

AJAX PHP: This folder contains working AJAX PHP forms like a contact form, order form and more.

JavaScript enhancements: This folder has all the samples for form validation, as well as the date picker and other widgets.

Template samples: This folder includes HTML- and CSS-based form templates to help you build your forms faster. These templates can also act as a basic guideline when you create your own forms.

When creating your own forms, the first step is to load the necessary CSS files using the following lines:

You'll have to wrap your forms in two div elements with classes smart-wrap and smart-forms.

Creating a Contact Form with Smart Forms

The documentation provides a detailed and easy-to-follow guide on creating different kinds of forms, explaining how to add text input elements, check boxes, radio buttons and file inputs with a theme of your choice applied to them.

In this tutorial, we will create a contact form with a blue theme and fields for name, email, subject and message. We will need to load one additional CSS file in order to apply the blue theme.

Here is our initial markup for creating the form with a basic skeletal structure:

The wrap-3 class is used to control the width of the form that you are creating. You can set it anywhere from wrap-0 to wrap-4. Unless you change any CSS rules, the class wrap-3 will create the narrowest form and wrap-4 will cover the full width of the body element. You can create your own CSS rules with additional classes like wrap-5, wrap-6, etc. to adjust the form width.

You have to apply a header-{colorname} class for the theme that you want to apply. The colorname will be the same as the additional CSS file that you loaded. The same goes for the theme-blue class on the body.

You can apply styling to your button elements by adding a class name like pushed, button-pointed, button-left etc. You can find more information about styling buttons in the Form Buttons section of the documentation.

Smart Forms Button Styling

Now, it's time to add the input elements to our form. All this markup will go inside the div element with the form-body class.

The wrapper div with the class frm-row is helpful when you want to add multiple form element on the same line. The width of individual form elements is controlled by the classes colm6. The total sum of the classes has to add up to 12 to fill the entire form width. This means that you can either set the width of two form elements to colm8 and colm4 or colm6 and colm6. In the first case, the left element would be twice as wide as the right one. In the latter case, both input elements will have the same width.

With the above markup, the final form will look this the image below:

Example Contact Us Form

Form Validation and Other Enhancements

The lframework provides quite a few JavaScript files for adding additional features to the form. For example, there are separate files for input masking and adding file drag-and-drop functionality. The use of each file is explained very clearly in the documentation so you only have to include those files whose functionality you are actually going to need.

In our case, we just want to validate the form input so we will load the main jQuery script and two other validation files. One is the core jQuery validate plugin and the other one provides additional validate methods.

You simply need to add the following script tags to your webpage in order to use JavaScript-based validation.

The last step to enable the validation is to include the following code after the above scripts:

The selector #contact-form above is the value of id attribute for our form. It will be different for your own forms if you changed that attribute. This line of code simply tells the webpage to validate the information supplied through the form.

Currently, the errors will be displayed without any change in font color or input highlighting. You can use the following code snippet to make the errors stand out better:

Once you add the above code to your webpage, the invalid fields will look like the image below:

Smart Forms - Error Highlighting

Form validation has been covered in great detail in the documentation so you won't get stuck when implementing it in your own forms.

Final Thoughts

In this tutorial, we created a very attractive contact form using the Smart Forms JavaScript forms framework available from CodeCanyon. One of the best things about using this framework is that all the JavaScript functionality has already been written for you. Also, the forms look very professional with their neat design. You can choose from a large number of options and choose the form layout that suits you best.

The documentation that comes with the framework explains everything really well so there is very little chance that you will get stuck. In the unlikely event that you do get stuck, the developer offers 6 months of free support so all your problems will be resolved quickly! You can check out the demos to see if you like the styling of the forms. Using this framework to create your forms will save you a lot of time and money in the long run, so you should definitely give it a try.

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

May 30 2019

03:01

How to Create a Mega Menu With a Free WordPress Plugin

In this post, we’ll explore the WP Mega Menu plugin which allows you to create content-rich navigation menus on your WordPress site. We’ll go through the different aspects of this plugin and we’ll also build a real-world example for demonstration purposes.

Why Use a Mega Menu?

Site navigation is one of the important aspects which you need to address during the development of your website. Based on the type of your website, there are a lot of different options available you could choose from. Navigation could vary from a simple streamlined bar menu to a multi-column drop-down menu that could contain a lot of information in the menu itself. Today, we’ll discuss one such menu type which is a very popular option nowadays: a mega menu. We’ll discuss it in the context of WordPress.

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. And when it comes to creating navigation menus, you will find plenty of plugins on the WordPress plugins store. Among them, I’ve chosen one of the best in this category—WP Mega Menu.

The WP Mega Menu plugin allows you to create rich navigation menus that could contain from simple links to images, videos and widgets. Throughout the course of this tutorial, we’ll go through the different aspects of this plugin.

For this post, I’ve used WordPress 5.1. To install the WP Mega Menu 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 Mega Menu plugin along with the setup process. We’ll build a real-world example for the demonstration purpose. Meanwhile, we’ll also go through a few important settings of this plugin that allow you to create different types of menus.

What Is the WP Mega Menu Plugin?

The free WP Mega Menu plugin allows you to create content-rich navigation menus in your WordPress site. It’s a very easy-to-use plugin which provides a drag-and-drop interface in the back-end to create navigation menus quickly.

Additionally, it provides a lot of customization options to style menus differently, and thus, you could customize the look and feel of your menus from the back-end itself. And no, you don’t need to be a CSS expert!

Let’s quickly look at the features it provides:

  • drag-and-drop menu builder panel
  • widgets support
  • support for different themes and skins
  • responsive and mobile-ready menu support
  • social icons, Dashicons and Font Awesome support
  • themes export and import
  • and more

As you can see, the WP Mega Menu plugin provides a lot of useful features which you could use to build beautiful and attractive multi-column navigation menus on your WordPress site. And with built-in widgets support, it allows you to include probably anything you could think of in the drop-down menu itself. If you are building a portal site and looking to build content-rich drop-down navigation menu, this is a must-have plugin!

In the next section, we’ll discuss a few basic settings of this plugin that are important to understand if you want to use this plugin effectively.

Exploreing the Plugin Settings

After installing the WP Mega Menu plugin, you should see the plugin related links in the left sidebar. In this section, we’ll go through the each section briefly.

Global Settings

In this section, you can configure settings that are globally applicable to all menus that are created using this plugin. Among the different settings, it allows you to configure certain JavaScript behaviors and global CSS settings.

Menu Themes

This section allows you to configure theme-specific settings. The default theme is built-in, and you could mostly live with that as it already comes with useful settings. Apart from that, you could create your own themes or duplicate existing themes. If you would like to create multiple themes, you can apply different styles to different menus on your site.

With each new theme, you can control different aspects of your menus—like background color, font settings, spacing, menu effects, and more. In fact, this is the section which you will use the most when you configure your menus.

Additionally, you can also export themes created in your site and import them to other sites. This is really useful, since it means you don’t have to create themes again if you want to copy themes from your other sites.

In the next section, we'll build an example of a real-world mega menu.

Build a Mega Menu for Your WordPress Site

In this section, we’ll build a real-world example to demonstrate how to use this plugin to create a mega menu on your WordPress site. In our example, we’re going to create a three column drop-down mega menu, and each column will contain a different type of content.

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

Create the Menu and Menu Items

First of all, we’ve got to create a regular menu and add menu items to it. And only after that, we can proceed with setting up the mega menu. Access the Appearances > Menu link in the admin sidebar to create a new menu. Follow the standard process to create a new menu and add a couple of items in that menu.

In my case, I’ll name it Demo Mega Menu. I’ve also added a couple of custom links as shown in the following screenshot. Also, it’s important that you have to assign this newly created menu the Display location where the menu will be displayed. Let’s select the Top Menu in the Display location field. It should look something like this.

Create a Menu

It’s important to note that there's already a Mega Menu Settings block on the left side as shown in the above screenshot. You can select the theme which you would like to use in this panel and click on the Save button to save it. I’ve selected the classic-blue theme in my case.

Configure the Menu Links

Now, it’s time to configure the mega menu settings for menu links. In our case, we’ll create a mega menu for the Home link, but of course, you could go ahead and repeat the same process to create mega menus for remaining links as well.

If you hover the Home link, you should be able to see the WP Mega Menu link as shown in the following screenshot.

Mega Menu Link

Click on that link, and it will open a pop up which allows you to configure mega menu settings for the Home link.

Blank Layout

Enable the Mega Menu option and that will present you a lot of configuration options. When you click on the Add Row button, it allows you to select the layout which you would like to use to build the mega menu as shown in the following screenshot.

Add Row

In my case, I’ve selected the three-column layout as shown in the above screenshot. And that will present you the following UI which we will use to add different types of content.

Column Layout

On the left hand side, you can see that there’s a widget section which lists out different types of widgets available for you to use. You could drag a widget that you would like to use and drop it to the columns that we’ve created.

I’ve used three widgets, Categories, Archive and Text, for my mega menu.

Layout With Widgets

Of course, you could select different widgets as per your needs. After selecting widgets, configure the each widget as you wish, and save everything once you’re done with the settings.

Now, let’s visit the front-end to see how it looks.

Front-End Preview of Mega Menu

As you can see, the WP Mega Menu plugin has converted a simple menu into a drop-down mega menu. And it displays everything that we’ve configured from the back-end.

In this way, you can enable the mega menu settings for each and every menu link of the menu. With the widgets support, you can display almost any type of content in the drop-down menu itself. Go ahead and experiment the different options and let me know if you have any doubts.

So that’s how you can create stunning mega menus for your site using this free plugin.

The Next Step: More Advanced Mega Menus

What we’ve discussed today is a free version of the WP Mega Menu. Although, I agree that it already provides a lot of useful features in the free version, but if you’ve really liked what you’ve seen so far, I would recommend you to look at it’s paid counterpart: WP Mega Menu Pro. It comes with a lot of built-in professional themes that can get you go right away. For a small cost, it’s really worth giving a try.

And while you're here, check out some of our other articles about WordPress menus!

Conclusion

Today, we discussed how you can create amazing mega menus by using the WP Mega Menu plugin in WordPress. I would love to hear from you if you want to share your experiences about other menu plugins that you have used on your website.

Feel free to share your thoughts and feedback using the feed below!

02:38

10 Best Restaurant WordPress Plugins

With the evolution of online shopping, more and more shoppers are buying food and groceries online. But in order for your restaurant website to stand out, you need the right plugins. In this tutorial, we are going to review some of the premium best restaurant plugins on CodeCanyon, and some great free plugins you can start with today.

WordPress Plugins for Restaurant Websites

As a restaurant owner, having a website is the best way to lure customers to your establishment. In this digital age, many diners order meals from restaurant websites, and an even larger percentage look up restaurant locations from their devices.

Other than having quality pictures and breathtaking design, your website should also make it possible for customers to:

  • find directions to your website
  • find hours of operation
  • view menus
  • make reservations
  • order meals from your website
  • review your restaurant

In this post, I'll review some of the best free and paid plugins in the following categories:

  • menu plugins
  • reservation plugins
  • map plugins
  • event calendar plugins
  • delivery plugins
  • page builders
  • marketing plugins

1. WPBakery Page Builder for WordPress

WPBakery

In order to have a fully responsive website without too much time invested, you will need a page builder to make the process quick and easy.

Page builders provide the opportunity for anyone to create websites even when they don't possess any programming experience. WPBakery is the ultimate page builder that will allow you to get your restaurant website running in no time.

It will not only save you time but also the cost of hiring a developer to build the site. It contains unlimited design options that will allow you to create stunning and beautiful pages with a simple drag and drop method.

Works With Any WordPress Theme

WPBakery is compatible with any theme hence allowing you to design or redesign any site without being tied to page builders that restrict you to specific themes.

Front-End and Back-End Editors

WPBakery comes with both back-end and front-end editors which allow you to choose whichever editor you are comfortable with.

Fully Responsive

WPBakery Page Builder is fully responsive, hence allowing you to create beautiful sites that work on all devices. This eliminates the hassle of having to create different sites for different devices. 

2. Slider Revolution

Slider Revolution

There is nothing better to welcome a customer to your site then some beautiful images of your products. That's where Slider Revolution comes in—it is a very advanced plugin with tons of features that make it easy to create beautiful image sliders and carousels for your site. 

Responsive Layouts

Slider Revolution allows you to display and showcase your content in sliders, carousels, hero image scenes or as a whole-page background. All this in a responsive way, no matter the device the user is using.

Multi-Media Integration

Slider Revolution allows you to showcase your content based on posts, pages or portfolio items. You can also create content from videos or just regular uploads.

Extensive Library of Templates

Slider Revolution features an extensive library of layouts and objects that allow you to bring your vision to life.

Try the live demo to see if this plugin is right for you.

3. Foodlify

Foodlify

Menu plugins are important for creating and maintaining online menus.

Foodlify is a responsive plugin that works with WooComerce and allows you to add different menu designs to your website. You can also include images of your food, ingredients and an Add to Cart button.

Other key features of this plugin include:

  • mobile-ready and responsive
  • ability to group menu items by category
  • visitors can search the menu

4. Bookly PRO

Bookly PRO

In today's digital age, people want to be able to book and make reservations at any time of the day. Having this option on your restaurant website will prove to be a great boost.

Bookly PRO is a booking and reservation plugin that can be used by any kind of business. It is the perfect restaurant reservation plugin that allows anyone to book a place online. An advantage of this plugin is that you use images and descriptions to give customers a feel for the ambiance of your restaurant.

Coupon System

Bookly pro features a coupon system to allow customers to make use of discounts at any time—provided they have a valid coupon.

A Powerful Event Manager

This is an advanced admin portal that allows the manager to perform certain functions such as creating places and setting prices.

You can try the Bookly plugin free of charge with the live preview.

5. Map Pro List

Map Pro List

The most important thing which every restaurant should have is a map. If customers cannot locate your restaurant on a map, your restaurant is as good as dead. With Map Pro List, you can add a map and a store locator on your website. With over 35 styles to choose from, you'll be sure to find one that matches your theme. 

Ability to add Featured images

As a restaurant owner, you will want to add mouthwatering images of your dishes so that when someone sees your location marker, they will be enticed.

Ability to add Multiple Locations

This feature is important if your restaurant has multiple branches. You want your customers to be able to find the nearest location from where they are located.

Different Styles to Choose from

Map Pro List gives you a lot of options for displaying your locations. You can display the map alone, the list of locations alone, or a combination of the map and the lists. You also have you the option of choosing where to display the map.

6. EventOn

EventOn

Having events in your establishment is one way to ensure that customers keep coming back and referring others. An event plugin is certainly one that should not miss in your website.

The EventOn plugin is the ultimate solution to ensure your restaurant is always lively. It allows you to create beautiful minimal calendar designs which feature images and locations as well as the event organizers.

EventOn comes with very many other features such as:

  • shortcode generator with easy-to-customize calendar options
  • repeating events
  • maps and directions—uses Google Maps to display event directions and locations
  • social share icons

7. Reviewer WordPress Plugin

Reviewer Plugin

Testimonials are a very powerful thing for helping people choose what to buy or where to go—thus having reviews from your customers is a very powerful marketing technique. The Reviewer WordPress Plugin is the best way to add customer reviews and customers into your posts and pages.

Full Customization

This plugin offers different customizable themes that fit your website needs. All themes have responsive layouts that adapt to mobile devices.

Review Boxes

This themes also features beautiful review boxes and comparison tables. 

User Reviews

This plugin also offers different rating modes such as 5 stars, bars, and single criteria. Customers can also upload their own images to reviews.

Advanced Admin Features

The admin system allows the admin to moderate user reviews, and manage reviews in a very efficient way.

8. WordPress SMS Marketing Plugin 

WordPress SMS Marketing Plugin

The WordPress SMS Marketing Plugin is another plugin that every restaurant needs to have. This plugin allows you to keep constant communication with your customers via SMS. You can send information such as promotions, notifications discounts or even newsletters via bulk SMS.

For example, as a restaurant owner, you can keep customers updated about new food items or any ongoing promotions or discounts.

9.Woo Product Table Pro

Woo Product Table Pro

Woo Product Table Pro is a plugin that will allow you to make an online ordering process fast and easy. It allows you to show your products in an easy to operate table. The easy of use is important, considering that customers are likely to abandon shopping carts if your website is hard to navigate!

Woo Products Table Pro comes with a shortcode generator so even if you have little or no programming experience, you can get started in minutes. This plugin is also responsive and mobile friendly.

10. WPPizza

WPPizza

WPPizza is a free plugin meant for pizza delivery, but it's flexible enough to accommodate any kind of business that delivers its products. WPPizza will allow you to perform functions such as setting categories and descriptions of items. It also comes with the ability to track your orders.

Other features include:

  • support for multiple currencies
  • customers can choose cash on delivery

You can get started with WPPizza today for free!

Conclusion

The plugins in this list will enable your website to take your restaurant business to the next level. Every business is unique and your needs may be different, but luckily CodeCanyon  features a lot of restaurant plugins that have been tried and tested for quality and performance. 

  • WordPress
    Create a Responsive Landing Page With WPBakery (Visual Composer)
    Ashraff Hathibelagal
  • WordPress
    What Makes Slider Revolution the Best WordPress Slider Plugin?
    Lorca Lokassa Sa
  • WooCommerce
    Choosing an eCommerce Platform: Shopify vs. WooCommerce
    Kyle Sloka-Frey
  • WordPress
    5 Best Store Locator WordPress Plugins
    Esther Vaati

May 28 2019

18:27

Top 4 Ionic App Builders and Universal Ionic Templates

The Ionic framework utilizes the capabilities of AngularJS and Apache Cordova to create a set of tools that simplify native app creation greatly.

By using Ionic, it's possible to create apps for Android, iOS, and more, with only a minor amount of coding or development experience. With hundreds of templates available, this gap closes even more, allowing individuals to create complex apps with ease, and for advanced developers to create increasingly complicated user experiences with less time and resource investment.

For those whose vision falls outside of a template, it can be difficult to put together all of the pieces necessary to complete your app. Luckily, that’s where Ionic app builders and frameworks come into play.

  • App Templates
    15 Ready-Made Ionic 3 App Templates
    Kyle Sloka-Frey
  • Ionic
    10 Best Ionic 3 App Templates
    Nona Blackman
  • Ionic
    Best Ionic App Templates of 2019
    Monty Shokeen
  • Ionic
    Ionic From Scratch: Getting Started With Ionic
    Tinashe Munyaka

What Is an Ionic App Builder?

When it comes to Ionic, there are actually a few levels to what can be considered an app builder.

On its own, Ionic provides a substantial app builder that allows for the creation of many apps and elements. Beyond the basics of the provided app builder, there are a variety of themes, templates, app builder extensions, and working skeletons.

While templates and themes help to create a specific type of app or provide a limited range of elements to work with, extensions and frameworks are a bit different.

These often expand the functionality of the app builder itself in some form, or create/add/modify a number of highly customizable elements. In some cases, these might also include utilities that prepare a different format of application (such as a web app) to be used within Ionic.

What Is an Ionic Framework App?

Since Ionic itself is a framework, it can be a bit confusing to have a “framework” app as an available tool. Framework apps can take a number of different names and forms, though, such as application skeletons, bootstrap kits, or universal app themes.

Each of these fits a similar role, providing a large number of screens and components that allow for maximum customization and integration. The key part here is that these skeletons typically go far beyond the features that can be found in an app theme alone.

These extensions of the capabilities of the app builder and the extent of customizability available are what differentiate these app builder themes from other templates for Ionic.

Ionic App Builders and Frameworks on CodeCanyon

Though they come in many forms, app builders and frameworks all have one thing in common: they expand the functionality of Ionic beyond that of just an app theme or template alone. This extension is what gives them their usefulness, customizability, and that extra bit of power when handling complex projects.

With all of this in mind, let’s take a look at some of the most popular kits available from Envato:

Ionic Framework App

We talked about frameworks extending beyond the features typically available in simpler app themes, and the Ionic Framework App does just that.

Following a modular architecture, this framework allows you to build your own screens easily, putting together elements and modules without the fuss of loading an entire screen before deleting the pieces you don’t need.

This modular system allows for the creation of thousands of screen variations, making it much simpler to put together the perfect user interface.

Here are some of the other standout features of the Ionic Framework App:

  • support for i18n and multi-language apps
  • 20+ modules following the official Angular 5 modularity patterns
  • includes 35+ components, properly declared and exported within modules
  • support for the WordPress REST API
  • Firebase 4 Integrations
  • support for Facebook Connect, Google Maps, YouTube, RSS feeds, and more

If you’re looking to build an app that falls outside of the niches present in most Ionic Mobile app templates, then this framework will help you to put together exactly the functionality that you need!

IMABuildeRz: Universal App Builder

Different than the drag-and-drop builder that is available with Ionic by default, IMABuildeRz is a stand-alone web tool that generates Ionic compatible code using its own interface.

By using this tool, you can use a simplified administrative dashboard to create HTML, TypeScript, SCSS, PHP, and MySQL code and files with little or no coding experience. This capability allows you to create more complex apps, or to stitch together the gaps left behind by other app templates.

Here are some of the features that come with IMABuildeRz:

  • no limit to the number of apps you can create
  • code can be both generated and directly edited
  • capability to create plugins to integrate with WordPress or your own app CMS
  • a number of add-ons allow for specific code pieces to be completely generated

If you need to create a complex back end for your app but don’t necessarily have a ton of experience in languages such as PHP, this tool can help you put together the app that you’re after.

Barebone Ionic—Full Application

Closer to the app template side of things, Barebone Ionic provides a base to build on, with a variety of architecture choices and features that make it versatile enough to be considered a framework.

Structured to be highly modular, this framework can be built, arranged, and rearranged to create most screens needed within any app you might be designing. Its well-documented code, paired with Grunt integrations, means that you can extend this framework to create any missing feature that you might need.

Barebone IonicFull Application

Here are some of the other features in Barebone Ionic:

  • support third-party APIs such as WordPress, Drupal, YouTube, Facebook, AdMob, Firebase, Play Store, and more
  • native integrations such as voice calls and local storage
  • content modules that can hook into JSON data

For those that need to build a variety of apps or one that is likely to have frequent updates, the Barebone Ionic framework will get your app together quickly, while providing the tools needed to maintain it.

Ion2FullApp—Full Ionic Template

An app skeleton with a wide range of features, Ion2FullApp lets you create a project outside of the standard niches that templates allow.

With uncommon features, more than a dozen integrations, and 35+ available screens, this app skeleton can be easily paired with Ionic’s own app builder to create complex projects with little or no coding necessary.

This app base comes in three versions, with the number of features and screens included increasing with each package.

Ion2FullApp

Some of Ion2FullApp’s more notable features are:

  • free tutorials and thorough documentation
  • Cordova plugins that make using native device features a breeze
  • uncommon and useful screens, such as onboarding walkthroughs, schedule listings, and advanced filtering
  • native login integrations, including Google, Facebook, and Twitter
  • multi-language support
  • pre-built forms with validations and custom validators
  • integrations for app ratings and advertising

If you want to build an app that leans heavily on native functionality, using this theme skeleton will help to close a gap that would otherwise require a more intensive usage of JavaScript.

Should You Use a Universal App for Your Ionic Project?

We’ve looked at some of the most popular app builders and framework extensions for Ionic. Do any of them seem like a good fit for your own project?

If you’ve used one of these kits or templates in your mobile app, let us know how it went in the comments below!

  • App Templates
    15 Ready-Made Ionic 3 App Templates
    Kyle Sloka-Frey
  • Ionic
    10 Best Ionic 3 App Templates
    Nona Blackman
  • Ionic
    Best Ionic App Templates of 2019
    Monty Shokeen
  • Ionic
    Ionic From Scratch: Getting Started With Ionic
    Tinashe Munyaka

08:00

Design Leadership for Introverts

How introverted designers and design leaders can operate successfully in a world where the extrovert ideal is desired.

Introduction

In Susan Cain’s 2012 Ted Talk, “ The Power of Introverts ,” she said that we live in a world where the extrovert ideal is desired. As a leader in design, this certainly feels true for me.

When people paint a picture of what a leader looks like, it often looks like this: A leader commands the center of attention. A leader is outgoing, talkative, and dominant. A leader is able to deliver charismatic speeches, rallying large audiences at a drop of a hat. A leader is the ultimate salesman; people hang onto their every word, waiting for their next one with bated breath.

A leader is, in essence, an extrovert. I’m not saying this is a BAD way to lead. I’m saying this is not the ONLY way to lead, and certainly not all the time.

Which begs the question: If we can accept that the world desires extroverts, how can we as introverted designers and design leaders operate successfully within it?

For years, I’ve grappled with my introversion and my desire to lead and thought the solution was an obvious one: Be more extroverted. Yet, every time I tried, it always felt unnatural; I was forcing myself to be someone I was not.

Little did I realize that all this time, the little workarounds, my ways of working I’ve used to achieve the desired outcome my way, were techniques that harnessed my introverted gifts. I was using my introverted ways as a superpower.

In this article, I’ll be sharing my techniques that have allowed me to operate successfully as an introverted designer and design leader while remaining my true authentic self.  

I’ll be sharing them around four areas and activities where I believe we do most of our designing and leading. They are meetings, team selection, social media, and networking.

Let’s start with everyone’s favorite workplace activity: meetings.

Meetings

50-60% of your meetings should be 1:1s

By far, my favorite type of meeting is a 1:1. As an introvert, you only have to focus on one person, not a group of people competing for attention. It’s really a conversation between two people: one person speaks, the other one listens (at least most of the time).

More importantly, it is away from the public eye. People are more open to being wrong when no one else is looking. They are also more open to tell you what they really think when nobody else is listening. If you have an alternate view, people are more willing to listen and consider it.

In my opinion, 50-60% of your meetings should be 1:1s.

Also, when it comes to 1:1s, context changes behavior. If you have a difficult subject to discuss with another person, for example, when they are having personal problems at home, changing where you have your meeting can change the person’s behavior and the outcome of the meeting.

You don’t have to be stuck in a meeting room to have a meeting. You can take a walk, sit on a sofa for a change, have a meeting over lunch or coffee. It’s an opportunity for you to engage on a personal level, away from the prying eyes of others, and away from business and behaviors as usual.

Changing where you have your 1:1s can change behaviors and outcomes.

Put yourself on the agenda

If you are going into a meeting and you have something to say but are concerned you may not have the chance to say it, put yourself on the agenda.

It can be your agenda, it can be someone else’s agenda. It does not matter. Put yourself on the agenda. That way, your turn will come as the meeting proceeds.

Tell others beforehand to pull you in

In meetings , you might notice that some people are better at “hogging the microphone” than others; they hold people’s attention. This comes naturally to them, but it may not come as naturally to you.

In contexts like this, tell these individuals beforehand to pull you in.

It might sound something like this:

Hey Joe. Sometimes, in meetings, I may appear quieter than usual. I may have a look on my face that says I want to say something, but I am not saying it. If you see me like that, don’t be afraid to say “Tim, what do you think?”

I’m not afraid of being put in a spot. If I have something to say, I will say it. If I don’t, we can move on.

It’s just that I don’t find it as easy getting the attention of others. Or I might be lost in my thoughts when I should be reacting and responding.

If you can pull me in, that would be great.

Be the moderator

If you find yourself in a workshop, offer to be the moderator. Facilitation is a superpower because, as a moderator, you control time, the agenda, the flow of conversation, and you have direct influence on the outcome of the session.

To facilitate well, you have to:

  • LISTEN more than speak
  • READ the body language of participants
  • OBSERVE the energy in the room
  • DIRECT the conversation toward others (rather than yourself)
  • PULL other introverts in and use the moderator’s power-to-pause people who “hog the microphone”

These traits are all strengths that come naturally to introverts.

Influence high stakes meetings

A high stakes meeting is one where an ultimate decision has to be made; it’s a go or no-go decision. It usually involves a lot of people. Your boss is there. Your boss’s boss might be too.

There’s a lot riding on the outcome of this one meeting, and usually it’s with people with strong opinions and loud voices. So as an introverted design leader, what do you do?

I’ve been to a few of these high stakes meetings and I think there’s a secret to them; and the secret is this:

People who attend these meetings have most likely made up their minds already before the meeting itself.

Think about the audience for a second: High-stakes meetings usually involve senior executives. Senior executives usually have more experience.

Senior executives also tend to have more things to focus on and less time to make decisions. Also, the reality is very few single decisions would truly break a company. It’s usually a series of poor decisions that will break a company.

Therefore, senior executives would lean onto their prior experience to help them make decisions quickly. Once these decisions are solidified in their minds, in my experience, it’s very hard to change them. That’s because revisiting decisions take even more of their time and energy.

Rather than change their minds, some executives would look only for evidence that proves their decision was right. Worse, some executives would look only for evidence that proves another person’s decision was wrong.

It takes a very enlightened leader to change their minds when presented with new information that suggests their decision was wrong.

So as an introverted design leader, the tactic is to influence the outcome before the meeting, not during.

Have 1:1s hours, days, weeks or even months before the meeting—how far in advance depends on how high the stakes are. The goal is to influence the thinking of senior executives before they make up their minds.

You get to explain your position, your rationale, all the pre-work and research that led to your conclusion.

You can also ask what they think. In a 1:1, people are more open to being wrong or admit to not having all the information. A monologue then turns into a conversation, and a conversation is more likely to arrive at an aligned conclusion.

Think of influencing high stakes meetings like steering a container ship. A container ship takes 20 minutes to come to a full stop. So, if you want to change the course of a container ship, you have to start steering early. Really early.

Team selection

Hire social butterflies

As an introverted design leader, you are going to need some team members who are social butterflies.

Work, after all, is a team sport, with teammates in product, engineering, operations, finance, etc. Having social butterflies on your team will help you build bridges, connections, and relationships across teams, across the company, and across our industry. These connections will help extend the circles of influence and impact we designers have on the work that we do.

It does not mean that every team member has to be an extrovert or social butterfly who thrives on social interaction. It also does not absolve you, the design leader, from the need to socialize and build relationships.

But it certainly wouldn’t hurt if this trait came very naturally to a few members on your team, people you can lean on when you’ve maxed out on social iterations.

Choosing an introvert or extrovert as a manager

In 2011, Wharton’s Professor Adam Grant and his co-authors published a paper titled Reversing the Extraverted Leadership Advantage . They wanted to answer this question: Do teams always operate more effectively under extroverted leadership?  

Their research concluded the following:

  • If your team is made up of proactive members, an introverted leader can get better results.
  • If your team is made up of passive members, an extroverted leader can get better results.

Proactive team members tend to bring constructive ideas on how to improve things, how to make things better. Extroverted leaders tend to be assertive, dominant, and have clear lines of authority and direction.

So, when you pair an extroverted leader with a proactive team, extroverted leaders can feel threatened, as if their top-down vision and authority is being questioned. They may be less receptive to proactive ideas and may lead proactive team members to become less proactive.

On the other hand, introverted leaders tend to be more receptive to bottom-up constructive ideas and be more willing to listen if a better idea emerges. This may lead proactive team members to become even more proactive.  

When choosing a manager, consider the members that make up the team and whether an introverted or extroverted leader would help you get the best results from your people.

Social media

Amplify your message using social media

In my opinion, social media is a gift from the introvert gods.

Before, in order to be heard, public speaking was one of the best ways for us to broadcast our thoughts and views. But introverts do not respond as well to public speaking as extroverts do.

With social media, all of a sudden we introverts can reach people across continents, across time zones, all on our own terms, from behind the safety of a screen.

It’s not just about having something special or unique to say that has never been said before. It’s about participating in a global conversation that pushes our craft and our own learning forward.

If you want to argue with Jared Spool about why everyone is NOT a designer, just tweet him . If you want Krystal Higgin ‘s advice on your onboarding journey, tweet her . If you want to speak to Andy Budd about the state of design and UX in London, Slack him.

All of a sudden, all of the people that you respect and want to talk to are right there at your fingertips. It doesn’t matter if we have not met before. We are all connected by our sense of community and care for our craft. We can skip the small talk and start as if we were old friends in the middle of a conversation.

If you are an introvert like me, a handful of deep meaningful conversations mean so much more than plenty of shallow forgettable ones.

Also, if these conversations happen in public channels, these conversations then represent your view of the world for others to see. It represents your thought leadership. You are what you write, share, and tweet. Your conversations on social media represent who you are. What you say and how you say it become your personal brand.

Use private channels for conversations best to have in private

Some conversations are better to have in private.

You might need advice on a delicate work situation with your boss. You might be looking for a new job (but want to keep it quiet) or have a difficult team member you are struggling to manage. These are not conversations to have in public.  

To this end, I can think of two Slack groups that are created by design leaders for design leaders:

Both groups are curated and invite only, bound by codes of conduct, and only open to leaders who work in design around the world. These Slack groups provide a safe haven for design leaders to have open honest conversations, knowing that the people listening are their peers and equals.

If you are not yet part of these groups, I encourage you to join.

Networking

Networking is one of those activities that somehow uniquely combines all the things that we introverts do not enjoy. It mostly happens like this.

You arrive in a room full of strangers. You grab a slice of pizza and a drink and stand awkwardly on the side, quietly scanning the room for people to make eye contact with you. The group over there is deep in conversation and you don’t see a way in.

You see individuals just like you, scattered around the perimeter, but you dread having to make small talk. Again. So you just stand there, with your pizza and drink in hand.

Clearly, networking does not come naturally to me, but I recognized it was important for me as a leader to extend my network. Why? Because the way I framed it in my mind is that the goal of networking is resourcefulness. It is to grow the pool of people I know who I can help and who can help me. It’s something I need to do to become a better leader.

Here are a few techniques.

Do your pre-work about attendees you’d like to meet

Some events like meetups and conferences will have a list of attendees. Scan through the list and pick out people you think are interesting. Stalk them online and reach out to them on Twitter or LinkedIn.

You could say “Hey, you’re attending the event too? Would love to catch up.”

That way, when you do meet in person at the event, it feels less awkward because you are no longer strangers. You’ve already introduced yourselves online.

Pretend it’s user research!

Another technique is to change your frame. It’s a bit of a Jedi mind trick.

What if, when you are networking, you pretended it’s user research?

Regardless if you are an introvert or extrovert, most of us have met a customer and done some form of 1:1 with a person using our product. By changing your frame and pretending it’s user research, a room full of strangers suddenly turns into a room full of opportunities to learn about people.

Through this lens, small talk questions come naturally:

Who are they?

What do they do?

Why are they here?

What’s their situation?

What do they want to get out of this event?

Maybe I can help them?

Maybe they can help me?

Just remember not to ask questions all of the time. It would feel like a interrogation rather than a conversation.

Have a measurable output

When networking, have some measurable output for your networking activity. It might be exchanging business cards, adding the person on LinkedIn, exchanging contact details, or following the person on Twitter.  

Remember: The goal of networking is to become more resourceful by growing the pool of people you know. You can’t do that if you don’t know how to reach the person again when you need them.

Have an exit script

Sometimes conversations come to a natural end. We’ve run out of things to talk about, and that’s totally OK. Rather than awkward silences, have an exit script so you can leave and start up another conversation with someone else.

Practice, practice, practice your exit script. Repeat it until it comes naturally. It could sound something like this:

Hey John. It was very nice to meet you. I’m gonna circulate and meet a few other people if that’s OK. Do you have a card or can I add you on LinkedIn or Twitter? I’ll make sure I send you that article we spoke about.

Who says networking has to be a group activity?

Reach out to people you’d like to meet and arrange for a catch up over coffee or lunch to talk shop. 1:1s are great to for getting to know someone better.

Conclusion

I’d like to bring our attention back to Susan Cain’s talk and the extrovert ideal. The world may continue to favor extroverts as leaders, but I hope I’ve convinced you that we introverts have our place as effective leaders as well.

This article was never intended to be introverts vs extroverts; we all have a role to play. I hope that the techniques I’ve shared can be put to good use by introverts and extroverts alike.

Introversion is not a flaw.

Introversion is not a disability.

It is a superpower.

And I hope you’ll let your superpower shine.

The post Design Leadership for Introverts appeared first on Boxes and Arrows.

May 27 2019

12:05

10 Best WordPress Gallery Plugins of 2019

In the age of visual culture, your website gets more views if it has images. Studies have shown that your content will be received more positively if it is accompanied by photos or videos. 

This makes a lot of sense because most people are visually oriented and our brains are wired to process and understand things visually faster than in text. Not only that, most people process and understand text better if it accompanied by images. 

This is the reason why the presence of photos or videos on a website is shown to increase engagement with content by over 70%.  It’s this same reason why visitors to your website will stay longer if you include images and video and they are more likely to buy or sign up for products and services you’re offering. 

And that's not all—images also improve your SEO ranking and make your website easier to find in search results. 

But the presence of photos or video to accompany your text is not enough. Presentation of your images matters. This means giving thought on how your images are presented—that is to say how they are arranged and framed and captioned within your website. 

You already know that no detail is too small. A beautiful gallery makes visitors to your website want to spend more time exploring your content. That's where gallery plugins come in—they are there to help with presentation.  

There are thousands of WordPress gallery plugins available on the market today, so choosing one that works for you can sometimes be confusing, time consuming, and frustrating. In this post, I have compiled a list of some popular outstanding plugins to make your decision easier. 

But before we look at them, let’s get a general idea about gallery plugins, why they are important and things you should consider before choosing one.

The Psychology of Visual Content

We already know that content with images creates more traffic and engagement with your website. In fact content with images creates more trust and leads to higher rate purchasing or sign up. 

There are a number of reasons why we respond and engage more with web content that contains photos and videos. 

Most people are wired to understand things visually and have a first encounter with the world around us that is visual. For normally-sighted people, it is natural to learn visually. We see and recognize objects first before learning their names. When we describe things or situations, we try to create a picture of it in the mind the person listening so he or she can also understand what we are talking about.  

Secondly, our physical world is full of colors. They are a big part in how we see the world. They influence our emotions and how we make decisions. An intelligent use of colors can influence visitors to respond to your web content in the best way.

About WordPress Gallery Plugins

A visual gallery plugin allows you to best present images or videos on your WordPress website. 

WordPress makes up 35% of all websites on web. It comes with a standard image gallery functionality as part of its core features. However, this built-in gallery is very basic and it has limited storage space to manage only up to a certain amount of images.

However, thanks to its high degree of flexibility and customizability, you can expand WordPress's image gallery capabilities by installing a WordPress gallery plugin in just a few clicks. 

What is a Gallery Plugin? 

A gallery plugin is a piece of software—built specifically for WordPress—that allows you to display photographs, illustrations, videos and other visual content on your WordPress websites.

Optimization of Images to Improve Discoverability

In a competitive online space a gallery should do more than just display images. It should help you optimize the images on your website to increase discoverability of your website. 

To optimize images on your website, the gallery plugin needs to provide functionality that allows it to label images with appropriate captions or keywords that users are likely to search. This will allow your content to show up in both web and images search results.

Types of Galleries

Some gallery plugins are built to showcase all kinds of media like images, photos and video while others specialize in only one medium. While searching for the a gallery plugin that suits your needs, you'll see a number of different gallery types. 

Image Management 

Many gallery plugins also provide a way to manage your images. You cab categorize them according to themes, sizes and more. You can aksi add, delete, arrange, sort and more. 

Many gallery plugins also allow you to batch upload tons of images in a short time.

Things to Consider When Choosing a Galleries Plugin

  • Speed—Having lots of images can slow down your website. You want a lightweight plugin that won’t slow down your website, even when you upload more photos.
  • Features—Does the gallery plugin also upload audio and videos? Is there integration to social networks, email marketing platforms and payment gateways? 
  • Responsiveness and Mobile-Friendliness—More that 70% of traffic to websites comes from mobile devices. Does your galleries plugin work on mobile websites?
  • Ease of Use—A galleries plugin should be easy to use even for those with no coding knowledge. 
  • Regular Updates—To keep up with changes to WordPress when they happen and to solve security vulnerabilities that may happen, your plugin should receive regular updates. For that reason, it's good to choose a plugin with a track record of updates and maintenance. 
  • Price—Is it affordable? Does it have pricing levels? What features are included with each level?

Like I said in the introduction, there are thousands of WordPress gallery plugins available on the market today and choosing one that works for you can sometimes be confusing, time consuming, and frustrating. In the rest of this post, I'll look at some of the best gallery plugins available on CodeCanyon

 1. Unite Gallery 

Unite Gallery

Unite Gallery makes creating beautiful image and video galleries for your WordPress website a breeze. 

  • It’s very easy to use plus all your galleries are fully responsive and mobile-friendly
  • It’s also touch enabled so that it can be controlled on touch-enabled devices.
  • It has 10 gallery layouts and over 120 options to choose from. This makes customization easy and fun.
  • Includes support for four types of videos: YouTubeVimeoHTML5 video, and Wistia.

User Lanx says

This is a clean, well-designed plugin. I have used it for years on several sites without issues. One of the all time classics! Highly recommended! 

2. WordPress YouTube Gallery Plugin

WordPress YouTube Gallery Plugin

When it comes to showing YouTube videos on your WordPress website, the YouTube WordPress Gallery Plugin is perfect: 

  • It supports the new WordPress Gutenberg editor—meaning it’s super up-to-date with changes in WordPress.
  • You can create a playlist for your website by selecting the YouTube channels and even single videos.
  • Control the width of the gallery with a simple setting.
  • Choose the number of columns and rows in the YouTube videos gallery.
  • Three preview layout modes are at your service: classic, cinema, and horizontal.

Finally, it’s fully responsive so that you will be able reach users with any type of device.

User amanda007  says this about YouTube WordPress Gallery Plugin

Love the quality of this plugin. The design is great, it's easy to use, and it works really well. It's also very flexible and allows a lot of customizability. 

3. InstaShow Instagram Feed

InstaShow Instagram Feed

If you want to create charming galleries of Instagram photos on your website, look no further. With this plugin, you can create a gallery from your own feed or from any other collection of Instagram images. InstaShow is the WordPress Instagram gallery feed plugin you need. 

Here’s why:

  • InstaShow works with popular WordPress themes including AvadaJupiter, and BeTheme
  • InstaShow let's you display photos by username, by hashtag, or by location. You can also combine these parameters into more sophisticated queries.
  • Set the grid by choosing the number of columns and rows. Gallery’s width and gutter between images are adjustable too.
  • Change the colors of all the gallery’s UI elements to find the most appropriate look for your site. 24 adjustable colors and 10 color schemes will definitely help you.
  • Use filters to exclude images based on profile, hashtag or location.
These are just some of the cool features of this awesome plugin. 
View a live preview  of this must-have WordPress plugin to see if it's right for you. 
User allenjoanis says

This plugin is super easy to use and integrates well into my website. And the customer support is top notch!

4. Global Gallery 

Global Gallery

With the Global Gallery plugin you will be able to create filterable, fully responsive and adaptive galleries on your website from unlimited image sources.

It also come with impressive features including: 

  • four gallery layouts
  • ten lightboxes 
  • slider and carousel mode 
  • protect your images with watermarks
  • integration with Visual ComposerElementor and Cornerstone

User  davidmfraser says:

Fantastic gallery addon, in my opinion it's the best one you can get (I've tried lots). It's very customisable and the support is good/quick to respond to queries. 

5. Essential Grid Gallery WordPress Plugin

Essential Grid Gallery

Essential Grid Gallery is a premium plugin for WordPress that allows you to build great looking images, video and audio galleries from various sources. 

  • You can display images from the big social media streams like Instagram, YouTube, Vimeo, Twitter, Flickr etc. 
  • You can build a complete custom gallery grid. 
  • You have at your disposal a template library with example grids that will look outstanding on mobile devices and are easy to configure and fill with your content. 
  • And if you’re a complete beginner don’t worry Essential Grid Gallery has a dedicated video tutorial channel for beginners. 

User aleph2u  says:

This plugin is a must have. Versatile, easy to use in any theme, and the support is superb. Thank you themepunch!

6. Justified Image Grid

Justified Image Grid Gallery

Showcase your images in the most beautiful and authentic way without changing their original size by using the Justified Image Grid Gallery. There is no random cropping—it maintains the integrity of your photos. 

It even organizes your images into a perfectly balanced horizontal photo grid that draws the eye from left to right, just as you would read a narrative. There is a natural flow to your photographic story, and the images work together as elements of a complete whole. 

Justified Image Grid for WordPress is easy to install and gives you full control over every aspect of your photo gallery–no coding skills required.

Combining Justified Image Grid gallery with Visual Composer makes it possible to live preview any change of your carefully crafted galleries.

User archedmandible says 

Love this plugin. I've used it for years because it's so solid. Loving the frequent updates and the endless choices available in the options.

7. Final Tiles WordPress Gallery

Final Tiles

Here is why Final Tiles WordPress Gallery is impressive: 

  • You can create a gallery that mixes landscape and portrait images.
  • You can embed video from YouTube or Vimeo to create a truly interactive gallery. 
  • You can use your own custom aspect ratios—no set squares, rows and columns.
  • Use infinite scroll to dynamically load many images.
  • Boost connections to your site using social sharing.

Find out if this gallery plugin is right for you by viewing the live preview

User by haraldpalma says:

A great and beautiful product—very clean and well-working gallery with absolutely fast and competent support! Thank you for everything!

8. The Grid—Responsive WordPress Grid Plugin

The Grid

The Grid is perfectly suited for displaying your blog, portfolio, e-commerce or any kind of Wordpress post type. This plugin supports images, video, audio, links, galleries, and quotes. 

  • The Grid can be used with any Wordpress theme
  • It comes equipped with a 100% responsive touch slider
  • It has filters that let developers add new skins and animations
  • It loads quickly thanks to a custom and lightweight jQuery script. 
  • It has a custom cache system in order to boost performance.

User tranmautritam  says

Nicely coded, easy to use, support gives fast reply.                       Recommend for everyone looking for a grid plugin.

9. Video Gallery WordPress Plugin

Video Gallery WordPress Plugin

Powerful features found in this gallery plugin include:

  • stream sources–stream from self-hosted media, YouTube or Vimeo
  • multiple galleries in one–stream from multiple sources in one gallery

User by julesco  says

Incredibly powerful plugin with the best support of any item on Envato Market!

10. UberGrid—Responsive Grid Builder

UberGrid

UberGrid is a powerful, responsive grid gallery builder for WordPress. It builds nice looking walls of square images, which you can either select manually or pull automatically from your WordPress posts. You can also source images from WooCommerce products and custom post types created by third party plugins or themes.

UberGrid is very easy to use, with no coding required. It comes with lots of features including:

  • filtering to represent departments, work types, product categories, etc.
  • powerful, responsive, built-in lightbox with image, Google Maps, Youtube, Vimeo and text support 
  • customizable–spacing, border, fonts, and colors. You name it, you can customize it. 
You can use UberGrid to present your portfolioteamproductsphotosblog posts, or anything else that can be presented with square cells. 
User silverz  says

Excellent plugin and customer support! 6 Stars if possible!

Conclusion

We’ve seen that in the age of visual culture websites with images get more views. A good image gallery plugin is a huge asset. It comes with features designed to help show images on your website and increase engagement with your content. The payoffs are huge.

For more WordPress gallery plugins, take a look at Envato Market. And if you found this article useful, here are a few posts that you might like to read next:

  • WordPress Plugins
    8 Best and Most Beautiful WordPress Gallery Plugins
    Nona Blackman
  • WordPress
    17 Best WordPress Gallery Plugins
    Jane Baker
  • WordPress Plugins
    7 Best WordPress Video Gallery Plugins
    Kyle Sloka-Frey
  • WordPress
    Best WordPress Flipbook Plugins Compared
    Jane Baker

May 23 2019

19:19

Create a Home Page With the Elements Plugin for WordPress

Without the right tools, creating professional-looking static pages for a WordPress site is hard, even for an experienced web developer. It involves tasks such as designing responsive layouts, finding appropriate creative assets, and acquiring the right licenses to use them. If you've ever tried doing all these tasks on your own, I'm sure you understand how time-consuming and expensive they can get.

With the Envato Elements WordPress Plugin, you'll be able to perform all the above tasks with just a few clicks. This unique plugin gives you immediate access to hundreds of free template kits and over 700,000 premium royalty-free photos right inside your WordPress admin panel. By using it alongside a page builder plugin such as BeaverBuilder or Elementor, you can create stunning pages for your site in minutes.

In this tutorial, I'll show you how to use the Envato Elements WordPress plugin and the Elementor page builder plugin to create a compelling, responsive home page for your site.

Prerequisites

To make the most of this tutorial, you'll need:

If you need help installing the plugins, refer to the following tutorial:

  • WordPress
    Create Websites Fast With the Elements Plugin for WordPress
    Ashraff Hathibelagal

1. Initialize a New Page

Log in to your WordPress admin dashboard and create a new page by going to the Pages section and pressing the Add New button.

If you see WordPress's default page editor open, click on the Edit with Elementor button to switch to the Elementor page builder user interface.

Elementor UI

Next, click on the gear icon near the bottom left corner of the screen to open the Page Settings tab. Here, change the layout of the page to Elementor Canvas.

At this point, you have a blank white page you can start adding blocks to.

2. Add the First Block

The Envato Elements plugin currently offers over 600 free block templates, all of them neatly organized into intuitively named block kits. Each block template is designed to not only blend seamlessly with several other block templates, but also to look good on all screen sizes.

To add a block to your blank page, all you need to do is click on the green Envato button.

In this tutorial, we'll be creating a home page for a fictional web-hosting business named "Purple Tech".

The first block kit we'll be working with is the Hero kit, which currently has 54 blocks. Open it, scroll down to find the following template, and press the Add Block to Page button:

Hero block preview

It's a good idea these days to follow a mobile-first approach. So I suggest you now switch to the mobile view by pressing Ctrl + Shift + M in your browser.

The template's first content box is a heading displaying the name of the business. Click on it and type in the name in its Title field. Optionally, you can make it clickable by filling in the Link field.

Modifying a heading

Similarly, change the Hero Heading content box so it displays some catchy slogan.

The template also contains two text boxes, which appear next to each other on wide screens. We can use them to briefly talk about what the company has to offer. When you click on them, you'll see that a text editor opens up.

In the first text box, use the intuitive rich-text editor to create a bulleted list that looks like this:

Using the rich-text editor

We'll use the second text box to talk about starting prices and special offers. By default, the text alignment here is set to Justified. I suggest you change it to Left by switching to the Style tab and modifying the Alignment field. In this tab, you can also change the text's font family, its size, and color.

Changing text alignment to left

If you press the Preview Changes button now, your page should look like this on a large screen:

Completed hero block

3. Change the Background Image

You don't have to limit yourself to changing only the text contents of the Envato Elements blocks you use. You can change details such background images and colors too.

To change the hero template's background image, open the Navigator and select the first Section it displays.

Next, in the Edit Section panel, switch to the Style tab and click on the current background image.

You'll now be taken automatically to the Envato Elements tab of the Insert Media dialog, which gives you easy access to over 700,000 premium royalty-free photos. Note that unlike the template and block kits, these photos are not free, so you need an active Envato Elements subscription to be able to use them.

Envato Elements tab

After selecting the photo you prefer, you may have to change the background overlay to make it more visible. To do so, switch to the Background Overlay tab and experiment with the Color and Opacity fields.

Modifying the background overlay

4. Add a Features Block

As the second block of our page, we'll be adding a block that can, in more detail, enumerate the services the website offers.

So click on the Envato button again, select the Features and Benefits block kit, find the following template, and press the Add Block to Page button:

Features and Benefits block

This template too starts with a heading. Leave its text unchanged, but change its color to a shade of purple by going to the Style tab and modifying the Text Color field.

Changing text color

In the text area that's below the heading, replace the placeholder text with something meaningful. For inspiration, you can try visiting a few popular web hosting services.

Next, this block has a new type of content box called Icon Box. As its name suggests, it displays an icon, along with a title and a description.

Let's say our fictional website offers managed WordPress hosting and we want to talk about this. So click on the icon box and change the Icon field to wordpress. By default, the icon is shown framed inside a circle. You can change this by modifying the View and Shape fields.

Once you're satisfied with the looks of the icon, add appropriate text to the Title and Description fields.

Editing the icon box

Lastly, we need to change the background color of the icon box. It's blue by default, and we want it to be purple. So open the Navigator, expand the second Section, and select Inner Section > Column. Then switch to the Style tab of the Edit Column panel and update the Color field.

Changing the color of a column

This template has three more icon boxes. After you update them all, your second block should look like this on a large screen:

Completed features and benefits block

5. Add a Pricing Block

The Envato Elements WordPress plugin has a Pricing Table block kit currently containing 15 free blocks. Using any of them, you can quickly display the packages a business offers and the services they include.

Let's say our example site offers three different hosting packages. To display them, we'll be using the following block:

Pricing table block

It's worth mentioning that the Envato Elements plugin also offers a Pricing Menu block kit. This is more suited for pages that need to display the prices of individual items or services. As such, it's ideal for websites of restaurants and grocery stores.

Our pricing block is very similar to the features block we added in the previous step. It has three icon boxes, which you're already familiar with. So we can start modifying their contents right away.

You may have noticed that the font this block uses is different. To fix this, switch to the Style tab and open the Typography dialog. Here, set the Family field to Quicksand, the font family the features block used.

Changing the font family

Below each icon box is a heading box. After changing its text, switch to the Advanced tab and open the Background section. Here, you'll be able to change the background color so it matches our color scheme.

Using the Navigator is a great way to understand the internal structure of the blocks you add to your page. With it, you'll see that our current block contains a new type of box called an Icon List box.

This box is meant to display a list of items, and allows you to edit each item inside it separately. Compared to a text box, which can only display lists with basic styles, an icon list box gives you much more control over the look and feel of your list items. For instance, it allows you to easily assign a different icon to each item of a list.

Editing the icon list

For now, click on the list items and change their text contents until you have a pricing table that looks like this:

Completed pricing table

6. Add a Footer

As the last block of our page, we'll be adding the following footer, which is available inside the Footer block kit.

Footer block template

The only new element in this block is the Social Icons box, which is almost identical to an icon list box, except that it limits the icons you can use to only the brand icons of popular social platforms, such as Facebook and Twitter.

Editing social icons box

After replacing the placeholder text in the About Us, and Pages sections, your footer should look like this:

Completed footer block

The page is ready. You can now go ahead and press the Publish button to make it available on your WordPress site.

Conclusion

In this step-by-step tutorial, you learned how to use the free block kits and premium stock photos offered by the Envato Elements WordPress plugin to create a polished, responsive home page for a web-hosting business. You now know enough to start using the Envato Elements and Elementor plugins productively.

  • WordPress
    Create Websites Fast With the Elements Plugin for WordPress
    Ashraff Hathibelagal

Envato Elements, is a massive repository of creative digital assets. By subscribing to it, you gain access—with unlimited downloads and commercial rights—to over a million premium themes, templates, plugins, stock images, videos, and other handy items that facilitate website development.

Visit Envato Elements to learn more about all the exciting digital assets it offers for a low cost monthly subscription!

19:03

Create a Google Login Page in PHP

In this article, I’m going to explain how to integrate Google Login in your PHP website. We’ll use the Google OAuth API which is an easy and powerful way to add Google Login to your site.

As a web user, you've probably experienced the hassle of managing different accounts for different sites. Specifically, when you have several passwords for the different services, and a website asks you to create yet another account on their site.

To deal with this, you could offer a single sign on feature to allow visitors to use their existing credentials to open an account on your site. A lot of websites nowadays let users login by using their existing accounts at Google, Facebook or some other popular service. This is a convenient way for new users to register with a third party site instead of signing up for a new account with yet another username and password.

In this post, we’ll use the Google OAuth Login API which allows users to login with their existing Google Accounts. Of course, users should still be able to register with the usual registration form on your site, but providing Google Login or something like it can help maintain a healthy user retaining ratio.

  • PHP
    15 Useful PHP Login Forms on CodeCanyon
    Eric Dye
  • PHP
    20 Best PHP Email Forms
    Monty Shokeen
  • PHP
    Create a Contact Form in PHP
    Monty Shokeen
  • PHP
    Comparing the 5 Best PHP Form Builders
    Nona Blackman

How Google Login Works

Firstly, let’s understand the overall flow of how Google :ogin works on your site.

On the login page of your site, there are two options users could choose from to login. The first one is to provide a username and password if they already have an account with your site. And the other is to login on your site by their existing Google account.

When they click on the Login With Google button, it initiates the Google login flow and that takes users to the Google site for login. Once there, they login with their Google credentials, and after that they will be redirected to the consent page.

On the consent page, users will be asked for permission to share their Google account information with the third party site. In this case, the third party site is a site where they want to use their Google account for login. They will be presented with two options: they can either allow or deny.

Once they allow to share their information with the third party site, they will be taken back to the third party site from where they initiated the Google login flow.

At this point, a user is logged in with Google, and a third party site has access to the user profile information which can be used to create an account and do user login. 

So that’s the basic flow of integrating Google login on your site. In the rest of the post,  we’ll implement this login flow in a working example in PHP.

Setting Up the Project for Google Login

In this section, we’ll go through the basic setup which is required to integrate Google Login with your PHP website.

Create Google API Project

Firstly, you need to create an application with Google which will allow you to register your site with Google. It allows you to set up basic information about your website and a couple of technical details as well.

Once you’re logged in with Google, open the Google Developers console. That should open up the Google Dashboard page as shown in the following screenshot.

Google Dashboard

From the top left menu, click on the Select a project link. That should open up a pop up as shown in the following screenshot.

Select a project pop up

Click on the New Project link and it will ask you to enter the Project Name and other details. Fill in the necessary details as shown in the following example.

New Project page in Google Dashboard

Click on the Create button to save your new project. You will be redirected you to the Dashboard page. Click on the Credentials from the left side bar, and go to the OAuth consent screen tab.

OAuth Consent Screen

On this page, you need to enter the details about your application like application name,  logo and a few other details. Fill in the necessary details and save them. For testing purposes, just entering the application name should do it.

Next, click on the Credentials from the left side bar. That should show you the API Credentials box under the Credentials tab as shown in the following screenshot.

API Credentials selection in Google Dashboar

Click Client credentials > OAuth client ID to create a new set of credentials for our application. That should present you a screen which asks you to choose an appropriate option. In our case, select the Web application option and click on the Create button. You will be asked to provide a few further details about your application.

Create OAuth Client ID

Enter the details as shown in the above screenshot and save it! Of course, you need to set the Redirect URI as per your application settings. It is the URL where the user will be redirected after login.

At this point, we’ve created the Google OAuth2 client application and now we should be able to use this application to integrate the Google login on our site. Please note down the Client ID and Client Secret values that will be required during the application configuration on our end. You can always find Client ID and Client Secret when you edit your application.

Install the Google PHP SDK Client Library

In this section, we’ll see how to install the Google PHP API client library. There are two options you could choose from to install it: using Composer or by downloading and installing the library files manually.

The Composer Way

If you prefer to install it using composer, you just need to run the following command.

And that's it!

Download the Release

If you don’t want to use composer, you could also download the latest stable release from the official API page.

In my example, I just used Composer.

If you’re following along, by now you should have configured your Google application and also installed the Google PHP API client library. In the next and final section, we’ll see how to use this library in your PHP site.

Client Library Integration

Recall that while configuring the Google application, we had to provide the redirect URI in the application configuration. And we set it to redirect to http://localhost/redirect.php. Now it’s time to create the redirect.php file.

Go ahead and create the redirect.php with the following contents.

Let’s go through the key parts of the code.

The first thing we need to do is to include the autoload.php file. This is part of Composer and ensures that the classes we use in our script are autoloaded.

Next, there’s a configuration section which initializes application configuration by setting up the necessary settings. Of course, you need to replace placeholders with your corresponding values.

The next section instantiates the Google_Client object which will be used to perform a various actions. Along with that, we’ve also initialized our application settings.

Next, we’ve added email and profile scopes, so after login we have access to the basic profile information.

Finally, we have a piece of code which does the login flow magic.

Firstly, let’s go through the else part which will be triggered when you access the script directly. It displays a link which takes the user to Google for login. It’s important to note that we’ve used the createAuthUrl method of the Google_Client to build the OAuth URL.

After clicking on the Google Login link, users will be taken to the Google site for login. Once they login, Google redirects users back to our site by passing the code query string variable. And that’s when the PHP code in the if block will be triggered. We’ll use the code to exchange the access token.

Once we have the access token, we can use the Google_Service_Oauth2 service to fetch the profile information of the logged in user.

So in this way, you’ll have access to the profile information once the user logs into the Google account. You can use this information to create accounts on your site or you could store it in a session. Basically, it’s up to you how you use this information and respond to the fact that the user is logged in your site.

Useful PHP Form Scripts

Today, we discussed how you could integrate Google Login with your PHP website. It allows users to sign in with their existing Google accounts if they don’t want to create yet another account for your service.

If you're looking for PHP scripts that you could use right away, I recommend you visit the following posts which summarize a some excellent scripts for that are available for a low cost.

  • PHP
    15 Useful PHP Login Forms on CodeCanyon
    Eric Dye
  • PHP
    20 Best PHP Email Forms
    Monty Shokeen
  • PHP
    Create a Contact Form in PHP
    Monty Shokeen
  • PHP
    Comparing the 5 Best PHP Form Builders
    Nona Blackman

Let me know in the comments below if you have any questions!

19:03

How to Create a WordPress Child Theme

If you're using a theme you downloaded from the free WordPress theme repository, or maybe one you've bought from ThemeForest, you may want to make some tweaks to it.

Maybe you want to register a new font. Or add a new template file. Maybe you want to add some code from one of the tutorials or courses here on Envato Tuts+. Or perhaps you want to use the theme as the basis for a theme of your own design.

You might be tempted to just go and edit the source code for a third-party theme (ie. a theme you didn't write yourself), but don't! The next time you update that theme, new files will be downloaded and you'll lose all the changes you made.

Frustrating, to say the least.

But what can you do, if you do need to edit the theme?

Luckily there is a way to edit the code in a theme, and still have the ability to download the latest updates: that's by creating a child theme using the original theme as a parent theme.

This means that you'll activate the child theme in the WordPress admin, but within that theme's code are instructions to WordPress telling it that this is a child theme, and what the parent theme is. You keep the parent theme installed on your site, but you don't activate it. (It's essential to keep it installed, as without it, the child theme will break.)

In this tutorial I'm going to show you how to create a child theme in WordPress. I'll also give you some tips on how child and parent themes work, so you know which set of code is being used to display the content in your site.

Creating The Child Theme

The first thing to do is to create the child theme in your wp-content/themes folder. The child theme must have two files to work: a stylesheet and a functions file. You can also add optional files, such as template files or include files.

Create a folder for your child theme in the themes folder and give it a suitable name. I'm calling mine tutsplus-child-theme.

Inside that folder, create a file called style.css.

At the top of that file, add the following commented out code:

This tells WordPress that this is a theme, and provides the same information about the theme as you'd find in any theme—with one addition. The Template: twentynineteen line tells WordPress that this is a child of the Twenty Nineteen theme.

You can use any theme as a parent theme, by using the name of the folder where it's stored. Don't use the title of the theme: instead, use the folder name.

Now save the stylesheet and create another file in your child theme, called functions.php.

In this file, you need to enqueue the stylesheet from the parent theme. It used to be that you did this by using an @import line in the stylesheet, but this is no longer the recommended way to do it.

Instead, in your functions file, add this code:

This correctly enqueues the stylesheet from the parent theme, using get_tempate_directory_uri() to find that theme (the template directory is the folder where the parent theme is stored, while the stylesheet directory is the folder where the current theme is stored).

If you want to add any styling to your child theme to override or augment the styling in the parent theme, you go back to the stylesheet for your child theme and add it there. Don't add in in the functions file or try enqueuing any more stylesheets.

You can also add functions to the child theme's functions file, and template files to the theme folder, which will override the same template files in the parent theme.

So now you have your child theme set up—it's that easy! However, it's worth understanding exactly how child and parent theme template files interact.

Creating Template Files

Now let’s take a look at theme template files. Which template file WordPress uses to display a page on your site will depend on two things: the template hierarchy and the files you add to your child theme.

Imagine you’re viewing the Travel category archive page in your site. WordPress will use the template hierarchy to find the most relevant file:

  1. a category archive template file for that specific category, using the slug: category-travel.php
  2. a category archive template file for that specific category, using the ID: category-23.php
  3. a general category archive file: category.php
  4. a general archive file: archive.php
  5. the catch-all: index.php

WordPress will look for these in both your parent and child theme. WordPress will use the first file in the hierarchy that it finds, whether it’s in the parent theme or the child theme.

There’s one exception. When the most relevant template file has a version in both the parent and child themes, WordPres will use the file from the child theme, and ignore the one from the parent theme. This is one of the most common uses for child themes—to override a specific file in the parent theme.

Here are a few examples, using the category example above:

  • If your child theme has archive.php and index.php, and your parent theme has category.php and index.php, then WordPress will use category.php from the parent theme because it’s highest in the hierarchy.
  • If your child theme has category.php and index.php and your parent theme has archive.php and index.php, WordPress will use the category.php file from the child theme, as this is highest in the hierarchy.
  • If your child theme has archive.php and index.php and your parent theme has archive.php and index.php, WordPress will use the archive.php file from your child theme. This is because there are two copies of the file highest in the hierarchy, and the child theme overrides the parent theme.

So if you want to override a template file in your parent theme, create a duplicate of that file in the child theme with the code you want. Or create a file that's higher in the template hierarchy and add that to your child theme.

Adding Functions to the Child Theme

Functions work differently than template files, and are a little less straightforward.

If you add a function to your child theme with the same name as one in your parent theme, WordPress will throw an error, because it's trying to call the same function twice.

But this won't happen if the function in the parent theme is pluggable.

A pluggable file is enclosed in a conditional check for another function with the same name, which looks like this:

Here, WordPress will check that no function has already been called that has the same name. If so, it will run this function. This is because functions from the child theme are called before functions from the parent theme. If you write a function in your child theme with the same name, that will run instead.

But what if the parent theme function isn't pluggable and you want to override it?

Well, you can do that by writing a new function that essentially cancels out the function in the parent theme, and giving it a higher priority than the function in the parent theme, so that it runs after it the parent theme funciton. Alternately, you can unhook the function from the parent theme and write a new function in the child theme, hooked to that same hook.

Imagine the function in the parent theme looks like this:

If your function in your child theme could undo the parent theme's function without you having to actually stop the parent theme function from running, you'd write it like this:

But if you had to prevent the parent theme's function from running, you'd unhook it first, like this:

Note that you still have to put the remove_action() function inside another function, hooked to the wp_head() hook in this case.

Then you could write the function for the child theme as if the one from the parent theme never existed—remembering not to give it the same name, though!

Child Themes Are a Useful Tool for Editing Themes

Child themes have two main uses: 

  • With a theme that's been designed for use as a parent theme (often refered to as a framework). The framework isn't designed for use on its own: instead, you add styling and extra template files with a child theme.
  • To allow you to edit the parent theme without actually directly editing it, or to add extra template files. This means that when the parent theme is updated in the future, you won't lose your work.

So next time you read a tutorial telling you to use a child theme instead of editing a third-party theme, you'll know what to do!

  • WordPress Themes
    Twenty Nineteen Teardown: Using the New WordPress Default Theme
    David Gwyer

May 21 2019

15:21

Create a PHP Login Form

A user login and registration system is super helpful when we want to store information about users of our website. This applies to everything from educational websites which might store course progress and marks to e-commerce website which will store information about customers' past purchases.

In tutorial I'll teach you how to create your own PHP login and registration forms from scratch.

Creating the Login and Registration Forms

Our first step will be the creation of a login form and a registration form. The forms will actually be pretty simple. The registration form will only ask for a username, email and password. The username and email will be unique for everyone who registers. If any one tries to create two accounts using the same email address we will show them an error message letting them know that the email is already in use.

Coding the Registration Form

Here is the HTML for creating the registration form. You have to put it in a file named register.php.:

The form is very basic but we do use HTML5 in order to do some very basic input validation. For instance, the use of type="email" will alert users when the email address that they entered is not in proper format. Similarly, the use of the pattern attribute on the username will make sure that the username only consists of alphanumeric characters.

You can read the tutorial titled form input validation using only HTML5 and regex if you want to learn more about the topic. You can also take client-side form validation to the next level with jQuery by getting you more power over the error messages that are shown and their placement as well as appearance. If you want to learn more about client-side validation, check out those posts.

Coding the Login Form

Here is the HTML for the login form. You can to put it in a file named login.php.

Style the Forms With CSS

Here is some CSS that you can apply to these forms:

This contains some additional styling rules for error messages and headings. The HTML and CSS from this section can be used as the basis of your project when you create your own forms which might require different styling and input fields.

Creating the User Table and Connecting to the Database

The next step is creation of a user table that will store all the information about the registered users. In our case, the table simply consists of four columns: an auto-incrementing id, a unique username, an email, and a password.

You can use the following SQL to create the table quickly.

Now, create a file called config.php and write the following code in it to connect to the database.

Change the database name to whatever the name of your database is. This file will be used to establish a connection to the database.

Code the User Registration

It is finally time to implement the registration functionality. The main function of this code would be to check if the supplied email is already registered. If it is not, we enter the username, email and password into the database.

Place the following code at the top of registration.php.

The first step is to include of config.php and start the session. This helps us store any information that we want to preserve across the pages.

Next, we check if the user has clicked on the Register button to submit the form by checking if $_POST['register'] has been set. Always remember that it is not a good idea to store passwords as plain text. For this reason, we use the password_hash() function and then store that hash in our database. This particular function creates a 60 character hash using a randomly generated salt.

Finally, we execute the query and check if a non-zero number of rows exist for a given email address. If they do, users will get a message saying the email address is already registered.

If no row exists with given email address we enter the supplied information into our database and let the users know that the registration was successful.

Implementing Login Functionality

In our last step, we write the code for logging users in. This time we simply check the information in the database to see if the username and password combination entered into the form is correct.

Here is the code that goes at the top of login.php.

One important thing to note here is that we don't compare the usernames and password in a single step. Because the password is actually stored in a hashed form, we first need to fetch the hash with the help of the supplied username. Once we have the hash, we can use the password_verify() function to compare the password and the hash.

Once we successfully confirm the password, we set the $_SESSION['user_id'] variable to the ID of that user in the database. You can also set the value of other variables here.

Restricting Access to Pages

Most websites where users are asked to register generally have some other pages where users access and store private data. You can use session variables to protect these pages. If the session variable is not set, simply redirect the users to login page. Otherwise, show them the contents of the page.

The only thing that you have to do is to ensure the script contains session_start() at the beginning.

Final Thoughts

In this tutorial, we learned how to create a basic user registration and login system using PHP. Once you grasp the basics of login and registration systems, you can create more complicated logic that allow users to reset their password or verify their email address, etc.

You can also add more front-end validation with HTML5 attributes or jQuery to make the form more user-friendly. 

  • HTML5
    Form Input Validation Using Only HTML5 and Regex
    Monty Shokeen
  • JavaScript
    Easy Form Validation With jQuery
    Monty Shokeen

If you want to speed up your web development, you can check out some of the premium PHP form scripts available from CodeCanyon.

  • PHP
    20 Best PHP Email Forms
    Monty Shokeen
  • PHP
    12 Best Contact Form PHP Scripts
    Nona Blackman
  • PHP
    Comparing the 5 Best PHP Form Builders
    Nona Blackman
  • PHP
    15 Useful PHP Login Forms on CodeCanyon
    Eric Dye

If have have any questions related to this post, please let me know in the comments.

08:00

The Lessons Learned Running User Research Interviews

In the world of user research, no idea is a bad idea.

If you have an idea for a great piece of research, act on it. In fact, your first epiphany is the seed from which all great things will grow. Your idea will eventually shape your hypothesis—your very best idea. This is your proposed explanation based on your current and limited evidence, paving the way from your starting point.

The investigation to follow is where your user research comes in.

For far too long, concepts such as Agile and Minimum Viable Product have been used by companies as a way of accelerating their strategy through design and development process. The problem with such concepts is that they allow a team to collect the maximum amount of validated customer research with the least amount of effort. Simply put, customer insight isn’t established until much later in the research piece, if it all. But, if you’re like me, you’ll fall into the camp that believe that at the heart of each and every methodology is learning. Learning should always involve your users.

Thankfully, the industry as a whole is now taking user research more seriously. Companies such as Amazon, which has had enormous success with its customer-first focus, can attribute their success to this newfound recognition.

Here at Space Between, our team dedicates a lot of time to researching how best to achieve truly unbiased results from our candidates. This was especially so when we first started out. Since then, we have run hundreds of groups and sometimes learned the hard way. Instead of making other potential researchers reinvent the wheel, we’re sharing what we have learned so that others can avoid the pitfalls that we experienced.

In this article, I focus on three areas: candidates, running the session, and post-session.

“The most important single thing is to focus obsessively on the customer. Our goal is to be earth’s most customer-centric company.”

Jeff Bezos, Chief Executive Officer of Amazon

Plan

Let’s start as we mean to go on. I want to outline the three main points of what your strategy should aim to cover before we get to the candidate stuff:

  • Objective: What are you hoping to get out of running the user research piece?
  • Hypotheses: What do you expect to happen?
  • Method: How many people will you need, and what type of research will you run?

Once you have established what it is you hope to achieve from your user research interviews, your starting point and research focus becomes clear. It also helps you define what your measures and outcome applications from the research could be.

Candidates

Count your candidates

A common question for newbies in user research is “how many candidates should we use?” And the answer is, it depends.

Jakob Nielsen argues that “the best results come from testing no more than five users and running as many small tests as you can afford.” Although this sample set sounds small, it’s based on finding the majority of issues with the least amount of waste. Nielsen points to the fact that after running five user sessions, you will find 85% of the issues experienced.

Graph showing number of candidates (X axis) and % problems found (Y axis). Once reaching 5 candidates, approximately 85% of the issues have been uncovered. Source: Nielsen Norman Group

The above graph estimates that if we then went on to test 15 users we should be able to uncover 100% of the problems in the design. So, why wouldn’t we just test with 15 candidates from the get-go and be done with it?

The theory behind user research is that we should run tests more frequently, with fewer candidates. We can run more sessions after implementing the improvements we found in all previous testing. It allows us to continually validate customers’ thinking and iterate our previous designs.

The caveat: Nielsen’s study is, unfortunately, outdated, and there hasn’t been much further research on the subject in recent years.

In marketing, we often categorize our customers into user types, known as user personas. Ensure that the candidates you recruit reflect and do not dilute your user personas. To test and compare five different personas, always have the same number of candidates for each character set to ensure equality in diversity.

Another consideration is the return on investment of the overall project. If it is a multi-million-pound rebuild of an existing, already successful product, you’ll have an easier time finding additional candidates that will enable you to get better, more complete data.

Get the correct candidates

We feel that pre-qualifying the quality of the candidates is more important to the study than getting the number of candidates right. Always look to get customers that suit your company brand and who have a genuine interest in the product (while also ensuring a diverse split across your group).

The ideal situation is to get a sample of candidates that represent each of the goals and behaviors being tested. If your personas don’t have a common link, best practice would dictate increasing your sample size to avoid diluting a specific user type.

Some additional considerations include:

  • Where do your ideal candidates live, and how can you get to them?
  • Do you want your current customers? Or would you have better results looking at people who you’ve not used you before?
  • If your customers are high earners, or very specific personas, could you find them at a specific event?

Keep your client anonymous

Unless you’re doing user research on a specific brand, you should try and keep the conduct of your research anonymous. You don’t want your customers’ preconceptions to influence them.

I once ran a user research project for a large, luxury, holiday brand. When looking at the competitor products, candidates made assumptions based on their knowledge of the competitor. Although this outcome was still really interesting—we gained insight into a brand’s core customer set—we also want to build a product that works for people who have zero prior knowledge of the product in question. First-time users are not likely to make such assumptions.

Get a waiver

Law and ethics mandate that you collect a waiver from your candidates before the start of your user research sessions. As a starting point, the waiver needs to cover a few basics:

  • Confirmation that you can collect personal data.
  • If you’re filming the session, confirmation you’re allowed to film.
  • An agreement that the data can be shared with people involved in the project.
  • Explanation as to how you intend to protect their privacy.

In addition, you may have other areas to consider that are specific to your research. For example, if you’re comparing your own site to a competitor’s, let the candidates know that their data may be collected by a third party (because you have no control over this data). Allow the candidate to invent data if data is required.

Running the session

Relax your user

If you’ve ever been on the receiving end of user research, you will know that it can be a pretty daunting experience, especially your first time. Some people can feel that they’re the one being tested, not the product or solution. Others don’t want to hurt your feelings, assuming you may have a personal affiliation with the product.

We believe the most important requirement when you first meet a new candidate is to put them at ease as much as possible. Ask their name, what they do, what they’ve been doing in the day, any questions that may help them to relax and break the ice. Get to know them with questions. Ask about hobbies… sports? Do you dance? Do you enjoy music?

A little ice-breaker will allow the candidate to hopefully feel comfortable enough to be able to ignore your presence once the testing has started. Keep in mind that the candidates are in a room, likely with cameras, a two-way mirror, and with somebody they’ve never met. All of this small talk will aid in moving their minds away from that concern and to focus on the task at hand.

As well, inform the candidates that you’re not testing them—you’re testing the prototype. Make them aware that your job is to simply understand it better and to see the prototype through their eyes. Their valuable input helps us to understand how they feel about it and lead to potential improvements. It’s vital to stress again that they themselves are not being tested, and they can’t do anything wrong.

Set a clearly-defined task

The most commonly overlooked part of user research is having a clearly defined task that puts the user in the correct mindset. Simply asking the user to “do something” is not enough.

Let’s take a fast-fashion brand as an example. If the task you describe is to find and purchase a green shirt and jeans, then that is what the user will search for, regardless of their own taste. They’re likely to pick the first one they find, make their purchase, and the task will be completed.

You will achieve better results if the task is defined but not too defined. Keep the task simple, but highlight some key areas for your users. Let’s look at these step-by-step using some examples for you could adopt in this scenario and the effects that each can have.

Task 1. “You’re going on a night out with friends, and you’re looking for a new outfit.”

This phrasing allows customers to get into the mindset of the story. It helps conjure questions: Who they might go out with? What they might do? What will their friends be wearing? But all the time they’re focusing on their own opinion, and they’re not being influenced.

Task 2. “Find something for the evening, say, next Friday.”

This is an important nudge for our user. In this example, you may be curious to understand what the customer thinks about the delivery options available, so you give them something to work toward but without specifically telling them to look into a type of delivery.

Task 3. “Research and purchase something that would be appropriate for you on that night.”

This phrasing reiterates that the decision is down to the candidate’s own taste and gives them the freedom to make their own choice. It also leads them to the final goal of making a purchase.

Task 4. “As you progress through the purchase, speak aloud.”

You want your users to tell you their thoughts as they move through the website, and you want this to be as natural as possible.

Task 5. “If you have any questions, please ask your chaperone.”

You don’t want the user to feel unsure at this point, you want to give them time to feel completely comfortable with the task. Inviting them to ask any additional questions of the team member in the room—and not limiting their questions—will make the candidate feel relaxed in their task.

Speak aloud

Asking your users to speak aloud is not only a cost-effective way to get incredibly valuable insights from your users, but it’s also very powerful when taking these insights back to key stakeholders. Stakeholders can be very quick to dismiss an internal idea, but dismissing ideas is much harder to do when they are watching one of your customers come up with an issue or problem.

The adaptive nature of speak aloud prototyping means that it is also useful to use at any part of the development lifecycle (from very high-level design to very complex prototypes). It is also important to understand some of the downsides that come with the ‘speak aloud’ tool.

Speaking aloud is not a natural environment for your users. Articulating every thought that enters your mind is challenging, especially when learning a new product or user interface at the same time. Even interrupting the candidate’s train of thought (to ask them a question) and allowing them to open up to you in that moment with their thoughts can drastically change the way the user might perform a specific task.

This leads us to the more critical issue with ‘speak aloud’—the ability to add bias to the study. As I mentioned previously, asking questions is often required to encourage a candidate to speak their thoughts. However, asking them the wrong question can influence their performance.

Make sure that your chaperone is aware and capable of managing this issue—‘opening’ conversational doors when required but not influencing the study by doing so. Most critically, if any influence has been given, the data set for that particular contamination should be disregarded.

Avoid influencing the candidate

There is a scientific theory called the observer effect, which introduces the idea that observing a phenomenon can change that phenomenon. This is very true in the case of user research. Not only are we changing the state of play by taking notes, conducting research in an unknown location for the user, using a product your users probably aren’t familiar with, but we’re also in the room with them, observing. All have the potential to influence a candidate.

Cartoon panel showing the chaperone saying "Just verbalize whatever comes to mind." The candidate thinks "I hope I say the right thing to get my $100 and pizza slice!" Source: You Should Test That

The observer effect is hard to remove, but it can be mitigated by helping to relax the user prior to testing. Reducing researcher influence, though, is critical for your research. Some of the common pitfalls that even the most experienced user researchers should look out for are:

  • Asking leading questions. “I like this. What do you think?”
  • Asking a question that changes the user’s behavior. “Let’s go back to that. What do you think?” Try and save these questions until the end of all the required tasks to minimize the potential for observer effects.
  • Incorrect task wording (if your task is too linear and doesn’t allow the candidate to think as a real user would).
  • Body language (not paying attention or looking frustrated/happy).
  • Environmental variables (background noise, temperature, lack of a drink, etc).

One common influencer is feeling the need to fill a pause. Dr. Salma Patel
(user researcher in the Civil Service and associate lecturer at The Open University) says: “Don’t be afraid of pauses. Don’t try to fill them in when the participant goes quiet. Give the participant time to think and hesitate if need be (that may end up being a finding in itself).”

Take notes

Taking notes during the session is incredibly important and will drastically influence your analysis time, but note-taking is only as effective as you make it.

If at all possible, the person who’s sitting with the candidate should not be taking notes. An ideal situation would be that the session is streamed and recorded into a separate room where the note-taker sits. The candidate will feel less anxious about the situation, and observers can talk about the session more freely as it is happening.

The key to good note taking is standardization among everybody involved. We would actively encourage you to supply your team with a template to follow, but more importantly, make sure you’re taking note of facts and not opinions. You want your focus to be on what people are actually doing. What steps are they taking? Do they encounter any issues or likewise? Do they find anything incredibly simple? What emotions are they feeling? Do they mention any frustration, elation, or anything in between?

What goals are they looking to achieve? Do they feel content about the intended goal? At the end of the session, give yourself time to review your notes. If possible, review with the team and candidates. At the very least, have confirmed contact details with which to get in touch after the fact if clarification is required from a candidate after departure.

As hard as it can be to do, restrain yourself and your team from problem solving at this point. It’s easy to move into a mindset of fixing—rather than learning—and this has the potential to bias your future thinking.

Teena Singha, HCM Experience Design Professional, when we asked her for her tips on note-taking, said: “If you have the time, spend 10-15 minutes and jot down or elaborate on the key things you learned immediately after the session. You will be surprised at the accuracy of top-of-mind insights, noted right after the interview. If you wrote a couple of notes in ‘chicken scratch,’ immediately after the session is the best time to elaborate on these ideas, so they are not forgotten. You will find that your high-level notes or a summary of the session can be formulated in that short time frame.”

After the session

Translate your notes

The very first thing you should do after you’ve said farewell to your final candidate is take another look through your notes and work on translating them. You’ll have lots of chicken scratch style notes from the day, some of which you may not have even written yourself if you are conducting your research as part of a team.

Take this from somebody who’s made this mistake: The note you jot down in a flash of “the candidate really liked the first product” will not seem so obvious once you’ve sat through 15 more candidate tests and had two nights sleep! So, this moment is the best time to look through these; you’ll have the best memory of what you meant.

Protect the data

There are two areas to focus on here: keeping hold of your data and candidate privacy.

In keeping hold of your data, back up all assets created from the day… any candidate waivers, videos, audio, notes. Put everything in a secure space online so you don’t lose any data due to corruption, misplacement, or anything else.

Secondly, privacy. The data we collect will more often than not be personal data for your users, which they’ve approved in your waiver. Back up all notes and remove them from personal devices. The proper protection of your data is not only a legal requirement from a data handling point of view, but it will also help you with your upcoming analyses.

Report and distribute

Your job when researching is to help pass as much information and knowledge as possible on to the next stages. As we know, this is often overlooked and under-appreciated.

“If I had an hour to solve a problem and my life depended on the solution, I would spend the first 55 minutes determining the proper question to ask, for once I know the proper question, I could solve the problem in less than five minutes.”

Albert Einstein

With the right information, we’re able to solve more challenging problems and are able to be more confident in our choices.

So, you want to make sure that the results are seen and accessible going forward? An easy way to make them seen is to run a ‘wash-up session’ to deliver the results of your research. Include facts about your findings that will allow the team to make better decisions going forward. There is likely to be a lot of energy in this session, and the team should go away feeling incredibly excited to make changes.

But, as with anything, people will start to forget this information. Make sure the results are easily accessible; if the results are where your team can find them, decisions can be made based on the research completed rather than gut feeling. Better decisions will come.

Prove the value

Attributing value back to your research is incredibly important; many people within your company might not understand the work you’ve undertaken or the impact it’s made on the project.

Where possible, try to make sense and define the value you’ve added. If your work is ongoing and a change is made on a live product because of your research, it’s an easier method to measure because you’ll see the difference after the change or after it was tested.

However, prototype researching (and other areas where you’ll impact the final product) can be harder.

“If you think good design is expensive, you should look at the cost of bad design.”

Dr. Ralph Speth, Land Rover

A great way to explain the value of the work you’ve completed is to highlight the number of areas that are different due to your research. Was the product redesigned? Did the goals change? Do the designers and developers keep referring to the research piece you’ve put together? All of these can be seen as a value and a positive impact on the project. Never building something wrong is considerably cheaper than finding something wrong and then correcting it.

Summary

This article isn’t an exhaustive list of tips. It’s my way of sharing some of the more common factors that have come up during my time as a researcher.

If I had to pinpoint the most important takeaway, I’d say it is to watch your own sessions afterwards and look for your own pitfalls. Much like public speaking, we’re looking for the habits that we ultimately want to iron out.

User research isn’t as hard as people may presume it to be, but it can be easy to get wrong. My aim in this article is to help direct you toward better, more fool-proofed research going forward based on my own experience.

The post The Lessons Learned Running User Research Interviews appeared first on Boxes and Arrows.

May 20 2019

23:35

Create Beautiful Forms With PHP Form Builder

If you are a PHP developer, creating forms, validating form submissions, and managing PHP sessions are probably tasks that are part and parcel of your job. All these tasks, although rather repetitive, require lots of time and attention, especially if you care about best practices relating to design and security.

By using a well-tested form builder library, you can significantly improve not only your own efficiency, but also the robustness of your PHP applications. CodeCanyon has a large variety of premium form builder libraries for you to choose from. PHP Form Builder, developed by Envato author migli, is one of them.

PHP Form Builder supports modern CSS frameworks such as Materialize, Foundation, and Bootstrap 4, and both client-side and server-side form validation. It also includes several pre-built form templates, jQuery plugins, and database utilities.

In this tutorial, I'll show you how to perform common form-related operations using PHP Form Builder.

Prerequisites

To make the most of this tutorial, you'll need:

  • PHP 7.0 or higher, with the cURL extension enabled
  • an Envato account

1. Installing the Library

PHP Form Builder is premium PHP library available on CodeCanyon. So log in to your Envato account and purchase a license for it.

PHP Form Builder on CodeCanyon

You'll now be able to download a file named codecanyon-8790160-php-form-builder.zip. Make sure this file is available on your development server.

I suggest you create a new project directory to store all the files you'll be creating and using in this tutorial.

Next, extract the ZIP file you downloaded. Inside the parent directory named phpformbuilder, in addition to the source code, you'll find various templates, assets, and help files.

Usually you'll only need the phpformbuilder sub-directory. So move it to the project directory.

2. Registering the Library

If you purchased a regular license, you'll be able to use the library locally on your development server and on one domain in production. For now, let's register the library only from the development server.

Start by launching a PHP development server. Here's how you can start one to listen on port 8000:

Alternatively, feel free to use the Apache web server instead.

You must now open a browser and visit the local registration URL, which looks like this: http://localhost:8000/phpformbuilder/register.php

In the form shown, enter your purchase code, which you'll find in the purchase confirmation email sent by CodeCanyon, and press the Register button.

PHP Form Builder registration page

Once the registration is successful, you can start using the library.

It's important to note that if you want to use this library in production, you'll have to complete this registration process from your production server too.

3. Creating a Simple Form

Create a new file named index.php and open it using a text editor. We'll be writing all our code inside this file.

PHP Form Builder's Form class has most of the method's you'll need to create your forms. Here's how you import it:

It's usually a good idea to use a PHP session while handling form data. So now would be a good time to start a new session:

To create a new form, you must create an instance of the Form class, whose constructor expects the name of the form as an argument. For now, let's create a simple user registration form:

To add input fields to the form, you can use the addInput() method, which expects the type of the field, its name, its default value, and its label. Except for the name and type, all other arguments are optional.

The following code shows you how to create a few different types of fields:

To add a submit button to the form, use the addBtn() method, which is very similar to the addInput() method.

4. Rendering the Form

Our form is now complete. But we're going to need some HTML boilerplate before we can render it. So, after closing the PHP tag, add the following code, which creates an empty HTML document:

At this point, by calling the render() method of the Form object inside the <body> of the document, you can render your form. It will, however, be very plain looking.

Form without any styles

Therefore, before calling the render() method, you must remember to add a few stylesheets and JavaScript files to the document.

PHP Form Builder supports many popular CSS frameworks. It's your responsibility to include the latest CSS and JS files of the framework you wish to use. In this tutorial, we'll be using the Twitter Bootstrap 4.3 framework.

So, inside the <head> of the document, add a <link> tag that points to Bootstrap's stylesheet. If you don't have it locally, you can always use a CDN. Here's how:

PHP Form Builder has its own styles too, which you must add to the document. You can do so by calling the printIncludes() utility method.

Furthermore, for best results, I suggest you add some padding and margins to the form by enclosing it in a div.

Towards the end of the <body>, you must also include jQuery and Bootstrap 4's JavaScript files.

Lastly, you must include PHP Form Builder's own JavaScript files and code by calling the printIncludes() and printJsCode() methods.

If you open index.php in a browser now, you'll be able to see that the form looks like this:

Form with styles applied

In case you were wondering, here's what the form looks like with Materialize as the CSS framework:

Same form but with MaterializeCSS

4. Validating Inputs

PHP Form Builder has a Validator class you can use to simplify server-side form validation. Here's how you import it:

For the sake of another example, let us now create a simple form whose inputs we can validate. Because we'll be validating the inputs on the server-side, we must pass novalidate as an argument to the constructor of the Form class. This turns off the browser's default, client-side validation logic, allowing users to submit the form regardless of validation errors.

Our new form is going to accept a name, an age, and an email address with the following conditions: the name must be at least eight characters long, the age must be an integer that's less than 45, and the email address must be a valid one.

Here's how to use the addInput() and addBtn() methods, which you are already familiar with, to create the three fields and a submit button:

As you can see in the code above, PHP Form Builder supports method chaining. The startFieldSet() and endFieldSet() methods, as you may have guessed, allow you to group your inputs and add a header to them.

The form validation process should run only after the user has submitted the form. To detect this event, all you need to do is check if the page was accessed using the HTTP POST method.

Inside the if statement, you can go ahead and create an instance of the Validator class by calling the validate() method, which expects the name of the form you want to validate.

The Validator object has several intuitively-named methods to validate input fields. For instance, you can use the minLength() method to check if the value of the name field is at least eight characters long. Similarly, you can use the integer() and max() methods to check if the age is an integer that's less than 45.

All the validation methods automatically generate meaningful error messages when necessary. If you're not satisfied with them, however, you are free to provide your own custom messages.

After you've added all the checks, you must remember to call the hasErrors() method to check if any of them failed.

In case of failed checks, the getAllErrors() method returns all the error messages. To display them, you must update the $_SESSION variable. The following code shows you how:

If you try submitting the form with invalid values now, you'll be able to see the validator in action.

Form showing error message

5. Adding Styles

PHP Form Builder allows you to manually assign CSS classes to your form fields. Both the addInput() and the addBtn() methods accept a fifth parameter, which you can use to customize the associated field.

The following code shows you how to add the btn and btn-primary CSS classes to the submit button:

With the above change, the button will look like this:

Submit button using a different style

One of the best things about using PHP Form Builder is that it supports most Bootstrap themes right out of the box. This means, switching from one Bootstrap theme to another is extremely easy.

All this while, we were using the default Bootstrap theme. To switch to one of the free themes available on Bootswatch, all you need to do is change the <link> tag you added earlier. Here's how you can use the Slate theme:

With this new theme, as you can see in the screenshot below, the form's look and feel is very different.

Form with Slate theme

Conclusion

You now know how to create good-looking forms and handle form submissions using PHP Form Builder. In this tutorial, you also saw how easy it is to use custom CSS styles and themes to beautify your forms.

To learn more, do refer to the extensive documentation present in the ZIP file you downloaded.

  • PHP
    Comparing the 5 Best PHP Form Builders
    Nona Blackman
  • PHP
    Create a Contact Form in PHP
    Monty Shokeen
  • PHP
    12 Best Contact Form PHP Scripts
    Nona Blackman
  • PHP
    Create a PHP Email Script and Form
    Monty Shokeen

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