Are you looking for a way to backup your website files in the cloud where you can easily access them if anything goes wrong?

How about displaying your documents and files and making them easily accessible to visitors to your website?

A WordPress Google Drive plugin serves multiple purposes. You can use it to backup your files or you can use it to display selected files to visitors on your website..

If you have a WordPress website, Google Drive plugins are the fastest and most reliable solution.They are user-friendly, easy to install, and highly customizable.

On CodeCanyon you will find some of the best Google Drive plugins for WordPress.

Bestselling Google Drive Plugins for WordPress on CodeCanyon

If you sell digital products then grab one of these Google Drive plugins and save all your files in one accessible location.

1. Bestselling: Use-your-Drive: Google Drive Plugin for WordPress

If you're looking for a comprehensive, all-round backup solution for your document files, photos, images, and media that can also display your files beautifully, then you should consider Use-Your-Drive.

This innovative, user-friendly Google Drive plugin for WordPress comes with tons of features including a file browser, audio player, video player, the ability to search files by name and content, and also integration with WooCommerce.

It has an organized admin panel with easy one-click set up and updates.

It also comes with a powerful shortcode builder that allows you to integrate Google Drive into your pages and posts without coding skills. The shortcode builder has preconfigured modes for easy setup.

2. FileTrip

FileTrip is a WordPress plugin that is flexible, scalable, and very easy to use. It lets you upload and forward files instantly to Dropbox, WordPress FTP, and Google Drive.

This Google Drive plugin for WordPress is responsive and can work in multiple browsers elegantly. Users can use it to upload their files from mobile devices including Android, iPhone, and iPad.

FileTrip easily integrates with most famous file builders including Caldera forms, Ninja forms, Gravity forms, Contact form 7 and more. It makes building custom forms to collect information bonded with digital files a lot easier.

In addition, FileTrip can use Dropbox channel to automatically create Dropbox sub-folders corresponding to the uploaders.

And one cool detail, you can send media files concurrently to any cloud destination: Google Drive, Dropbox, and FTP.

3. WordPress Cloud Manager

With WordPress Cloud Manager you can access your cloud drives like Google Drive, Dropbox and S3 directly from your WordPress dashboard and share the folders to your users in the front-end.

You can allow your users to upload files, set file size restrictions and file type restrictions, and assign different users to have different permissions.

It lets your users edit files and image, view documents, images, video and audio files. It also comes with a built in text editor, image editor and office document viewer.

You can also choose to get notified via email when a user uploads a file to their folder.

4. CloudFiles: WordPress Media Library Folders Cloud

CloudFiles is an advanced WordPress library management plugin that allows you to create, rename, delete, and move folders to neatly organize thousands of uploaded files into folders. It has an embedder and viewer that works with .pdf, .ppt, .pptx, .doc, .docx, .xls, .xlsx and more.

It works well with list mode and you can even upload directly to cloud subdirectories. It also works with Elementor, WPBakery (Visual Composer), and Gutenberg.

There are also features to synchronize photos, videos, documents from Google Drive, One Drive, and Dropbox to save hosting storage space.

It is translation ready and compatible with WooCommerce and other third-party plugins.

5. Share-one-Drive: OneDrive plugin for WordPress

If you use OneDrive or OneDrive Business to share documents with your clients, you won't go wrong with Share-one-Drive. It provides OneDrive integration for WordPress and displays all your files in a beautiful way.

It is user-friendly, highly customizable, innovative and doesn't require coding skills. It displays great on every device: smartphone, tablets, or desktop. Your clients can preview, download and even create their own private folders.

Adding Share-one-Drive has never been easier. Its powerful shortcode builder that allows you to rapidly and effortlessly integrate your Google Drive into your pages and posts. It loads lightning fast!

6. Super Backup & Clone: Migrate for WordPress

Super Backup & Clone plugin is a trustworthy backup solution that allows you to back up all your WordPress, as well as non-WP files, immediately to your own cloud, or on the same server, for safe keeping and easy restoration.

You can choose your backup schedule—hourly, daily, weekly—and it will do everything automatically. You have access to backup logs so you can keep track of what's going on.

In addition, you can run straight cloud migration from multisite to multisite, multisite to single site, and single site to multisite.

Among cloud destinations this versatile plugin links to include: Google Drive, Amazon S3, OneDrive, DropBox, Rackspace and more.

7. Out-of-the-Box: Dropbox Plugin for WordPress

If you primarily use Dropbox, the Out-of-the-Box plugin is your best choice. This Dropbox integration plugin is user-friendly, highly customizable, innovative and displays your Dropbox files in an attractive format.

No coding skills are required to set it up. You can link your Dropbox account with just one click. From there you can start adding shortcodes on your pages and posts.

8. Lets-Box: Box Plugin for WordPress

Lets-Box is a Box integration plugin for WordPress that displays your Box files in a beautiful way. Your content will look great on both desktop and mobile sites whether it is a file browser, gallery, upload box or a media player.

The plugin perfectly integrates into the WordPress user system allowing you to select which user roles should have the permission to view, download, upload, rename, delete files or folders.

You can easily and securely share documents via Box with your clients. The user folders feature allows your clients to preview, download and upload documents to their own private folder. You can link your WordPress users manually to their own folder or let the plugin handle this for you.

Lets-Box integrates nicely into WooCommerce and it allows you to select your digital products from Box.

9. BeDrive: File Sharing and Cloud Storage

Let's say you're interested in creating your own self-hosted file sharing and hosting website. You can earn money with a built-in premium subscription system, create different plans for users to subscribe to, and control how much storage space each plan has.

You can do this in minutes without any knowledge of coding or server management. You just need BeDrive. BeDrive is lightweight with lighting fast performance and page load time out of the box. It is fully responsive and will work on desktop, mobile, tablet and other devices.

You can easily store user upload files on many different cloud services and providers including Amazon S3, DigitalOcean, Dropbox storage.

BeDrive is fully translation ready and can be easily translated to any language from admin area.

3 Free Google Drive Plugins for WordPress

It's difficult to find completely free versions of Google Drive plugins. Free versions have enough functionality to get you started and going up to a certain point. Then as your needs expand you have to switch to premium versions.

The plugins below hold back some features for their premium versions, but the free versions of the plugins have enough to get you started.

1. Google Drive Embedder

Through a popup box, the author can access their Google drive and select documents to embed directly into their posts or page. In addition, you can easily display native Google docs and other file types such as PDFs, Word docs, videos, images, and zip files.

2. UpdraftPlus WordPress Backup Plugin

The free version of UpdraftPlus is fully functional. You can backup your WordPress files and database, restore from backup, schedule backups, backup to remote storage, get basic email reporting, and browse backup content in WordPress.

You can also backup to Dropbox, Google Drive, FTP, S3, Rackspace, and email.

3. Image & Video Gallery from Google Drive

Using this plugin is very straightforward. Once the plugin is installed and configured, you can add a Google Drive gallery to any page or post. You can select any folder in your drive or a shared drive and the plugin will convert that into a gallery, displaying any photos or videos in a page or a post on your website.

Any folders and their subfolders will also be displayed in the gallery as nested galleries.

Get Your Google Drive Plugin Now!

Google Drive plugins make it easy to backup and display your website content. CodeCanyon offers some of the best Google Drive plugins available that will help your business succeed.

Free Course on Essential WordPress Plugins

Essential WordPress Plugins is a free online course here on Envato Tuts+ that has invaluable information on the best free plugins for WordPress. These are the plugins you'll find yourself installing over and over on every site you create.

One of the great things about using WordPress is the vibrant plugin ecosystem. There are many thousands of WordPress plugins that promise to improve every aspect of your site. With the right plugins, your WordPress site will run more smoothly, get more visitors, and be less likely to face problems.

In this free course, Envato Tuts+ instructor Rachel McCollin will teach you how to install and configure free WordPress plugins for backup, security, caching, and SEO. You'll see how WordPress can be made far more powerful and secure by the addition of a few key plugins.

FREE
WordPress
Essential WordPress Plugins
Rachel McCollin

WordPress utility plugins let you make enhancements to all aspects of your WordPress website: performance, design, and security.

With thousands of options available, however, it can be quite difficult sorting the good from the not so good.

In addition, you need to be very selective when deciding on what kinds of plugins you want to use because each plugin added to your site can decrease the load speed of your pages. More plugins also increase the likelihood of scripting conflicts.

With all these issues in mind, I’ve compiled a list of 20 essential WordPress utility plugins available at CodeCanyon to help take your site from good to great.

There is still a lot of room to improve basic and critical functionality of your WordPress website, and the best way to do so is with utility plugins. Grab some of these best selling WordPress utility plugins and take your website to the next level!

The Best-Selling WordPress Utilities of 2020

Let's look at the WordPress utility plugins available at CodeCanyon that will help take your site to the next level.

1. WPBakery Page Builder for WordPress

WPBakery Page Builder for WordPress, formerly Visual Composer, is an easy-to-use page builder that will help you create any layout you desire quickly and easily.

This visual page builder allows you to use simple drag-and-drop widgets or building blocks that allow you to create eye-catching websites without having to understand any coding. This allows you to build out your ideas visually and build out your website quickly and easily.

This page builder not only allows you to visually construct any page on your website in the WordPress admin back-end, but it allows you to construct any page in the front-end as well.

WordPress Plugins
The Ultimate WordPress Page Builder: WPBakery
Daniel Strongin

2. Yellow Pencil

Yellow Pencil is a WordPress CSS editor plugin which allows you to customise any theme quickly and easily by editing it in real time. All you need to do is click on an element you want to modify, start changing its features visually, and Yellow Pencil will create the required CSS style codes in the background for you. The plugin provides over 50 style properties, 500 fonts, 300 background colors, and a live color picker to help you modify your site.

3. Hide My WP

Hide My WP is a security plugin that hides the fact you’re using WordPress on your site, which allows you to fly under the radar of attackers that target WordPress sites.

In addition, their Intrusion Detection system automatically monitors the site and finds potentially dangerous requests. It then provides you with all details of the attacker like who they are, where they’re located, and how they’re trying to hack your site, and suggests whether they should be blocked or not.

Other great features include:

easily replace any words in your HTML output file
easily change or hide any URL
notify you when someone is poking around your WordPress site
change default WordPress email sender

4. Interactive World Maps

Using maps on your website is a great way to integrate content with location, and the Interactive World Maps plugin is an ideal utility plugin for doing so. The plugin allows you to include maps in posts, pages, and even in the sidebar of your site.

You can choose to use a map of the entire world, a continent, a country, a region, or a city. You can also add active colour regions to the map and display them in two different ways, as regions and as markers.

Other great features include:

ability to add interactivity
change background colour
change the width and height of the map
and much more

5. Advanced Google Maps Plugin for WordPress

If the Interactive World Maps above isn’t quite what you were looking for, then Advanced Google Maps Plugin for WordPress offers another viable option. This is a great plugin for displaying multiple posts, pages or custom posts on a single Google map. You can assign a location to your post easily using the meta box or your own custom fields.

Other great features include:

display posts information like title, content, featured image, categories, etc.
display post listing below the map and show post information in the listing
possible to customise HTML easily to integrate your own design
display posts or locations below the map in grid or list format

6. Video Gallery Plugin

Video galleries are a great way to keep your visitors engaged. Here is where Video Gallery plugin comes in, to help you create a compelling WordPress video gallery. This plugin allows you to feature single videos, or mix-and-match video sources, streams, galleries, and playlists to curate the exact content you desire.

It's fully responsive, with subtitle support and AdSense compatibility, making it a solid choice for a dedicated WordPress video gallery. You can completely customize the look and function of your player with a user-friendly, drag-and-drop admin panel. You can also use the Design Centre to generate a brand-compatible skin for your video gallery.

7. Essential Grid Gallery

And if you want a plugin that builds video galleries and more, then the Essential WordPress gallery plugin allows you to build grid-style galleries using images, video, and audio files from a wide variety of sources, both self-hosted and social. Use the template library to create a fully-responsive and mobile-optimized gallery, or connect with Instagram, YouTube, Twitter, and more to stream social media content. Dozens of fully customizable skins and animation options give you total control of the look and feel of your gallery.

8. White Label Branding for WordPress

White Label Branding for WordPress allows developers more latitude in customising WordPress menus. The plugin allows you to customise the WordPress admin and the login screen and add a Role and Capability Manager, which allows you to create new user roles and assign capabilities and decide who has access to what features of the site.

Other great features include:

ability to add your own favicon easily
hide certain screen options
add a private dashboard metabox for editors or administrators eyes only
and much more

9. Reviewer WordPress Plugin

Reviewer WordPress Plugin offers you a great way for visitors, customers and clients to leave reviews on your site. What’s more, the plugin also allows you to add comparison tables inside your WordPress blog posts, pages, and custom posts.

Reviewer WordPress plugin offers a good range of customisable themes so that you can adapt your reviews and comparison tables to fit your site, and each theme has a responsive layout to adapt to any devices.

Other great features include:

review box and user review widgets
three different rating modes
ability to collect visitor name and email
Google ReCaptcha for preventing spamming
and much more

10. Ajax Search Pro

If you’re looking for a better search function than the native one WordPress provides, check out Ajax Search Pro. It's a live search engine plugin for WordPress that provides users with customisable front-end settings.

For example, by checking different boxes, the user can change the behaviour of the plugin to look for exact matches, include or exclude certain post types, categories, etc.

Other great features include:

four built-in layouts
image support
custom field filters
keyword highlighting
and much more

11. Blog Designer PRO for WordPress

If you’ve ever dreamed of designing your own blog but don’t have the necessary coding skills, Blog Designer PRO for WordPress may be the answer. Unlike the average blog template, the plugin comes with 36 templates, all of which you can customise extensively to suit your own design aesthetic.

Other great features include:

fully responsive blog templates
support of custom post type
preview of blog layout
and much more

12. Super Store Finder for WordPress

Super Store Finder for WordPress is a great plugin for businesses who want to help their website visitors and potential customers find their stores easily and quickly. The plugin is integrated with Google Maps API v3 and has a fully responsive design for smartphones, tablets, and touch-screen devices.

Other great features include:

multiple store locator layouts to choose from
manages unlimited store locations
full-screen street view feature
extensive map settings to show all stores, specific location, or geo location
and much more

13. Ajax Translator Revolution WordPress Plugin

Ajax Translator Revolution WordPress Plugin is quite simply an automatic WordPress translation plugin that allows your visitors to view your website in their preferred language in a matter of seconds.

The translation bar sits at the top of the website by default, but you can use the custom positioning settings to place it wherever you want. The plugin can translate as many as 91 languages and remembers a visitor’s selected language.

Other great features include:

over 80 settings for customisation available
display languages, flags with names, just names, or just flags
translate everything or selected sections of a web page
can exclude entire pages, posts, and categories
and much more

14. Cornerstone

Cornerstone is a front-end WordPress page builder that allows you to see the changes you make to your site in real time as you build it. One of the great features of this plugin is Skeleton Mode, which allows you to see the underlying structure of your entire page without leaving the front-end interface.

Other great features include:

huge library of ready-made and customisable elements
text editing on the fly
compatible with any WordPress theme
and much more

15. Filetrip

The Filetrip plugin makes it easy to distribute files directly from your WordPress site as it allows your website visitors and clients to easily download any digital file from your website to Dropbox, Google Drive, or another cloud service.

You can also program the plugin to automatically send copies of files uploaded by users to multiple destinations.

Other great features include:

automatic email notification for uploads and backups
ability to schedule full backup for your website
convert media files into transferable files
and much more

16. Ultimate Author Box

The Ultimate Author Box plugin is a great way to celebrate the authors who write for your blog. The plugin allows you to add an author box to each post to identify the author and provide additional information about them.

You can add extra tabs to highlight the author’s other posts, social feeds, or other custom content like a contact form. The plugin comes with over 19 predesigned author box templates.

Other great features include:

ability to set role restrictions for author boxes
over 20 social media profiles
author summary in pop-up display
unlimited custom colour scheme customisation options
and much more

17. WP Contacts

Use WP Contacts to manage, log, track and share your contacts on any page of your site you choose. This responsive drag-and-drop plugin facilitates front-end login, and the contact database is highly customisable.

18. Custom Page Templates

Custom Page Templates allows you to override your theme design and create a unique page template for your WordPress website. The plugin has an enormous amount of flexibility and gives you complete freedom to control precisely where and when your changes will be applied.

Other great features include:

over 30 shortcodes
ability to work with any plugin
support for popular plugins like Visual Composer, WooCommerce, etc.
and much more

19. Out-of-the-Box

Want to share photos, videos, or other files with your customers, clients, friends, and fans directly from your website without eating up your bandwidth? Say hello to Out-of-the-Box, a Dropbox integration plugin for WordPress that allows you to display your Dropbox files on your website. This responsive plugin is also multilingual ready.

Other great features include:

audio and video players
smart loading to save time and bandwidth
ability to search files by name or contents
and much more

20. Diamond Flipbook

The Diamond WordPress flipbook plugin allows you to create flipbooks from a variety of source files. Automatically convert PDFs, or upload multiple JPGs at the same time to create a flipbook. You can also manually add pages, or simply enter text directly into the WYSIWYG editor. Then, either add a shortcode for the generated flipbook to your website or post an image link that will launch a lightbox with one click.

This WordPress gallery plugin also offers YouTube support. Fully responsive and with no Flash needed, this plugin works reliably on both mobile and desktop.

Add a Premium WordPress Plugin to Your Website Now!

Check out these thousands of premium WordPress plugins , as well as the best-selling, trending WordPress plugins, available on CodeCanyon that will vastly improve how your WordPress website functions and offer visitors an excellent user-experience.

Best selling WordPress Utilities

Discover More Awesome WordPress Plugins

In the following articles and tutorials you will find more useful plugins for your WordPress website:

Learn More About WordPress Plugins

What makes WordPress an awesome platform is the wealth of unlimited resources available to help you succeed with your WordPress website. We are some selections from Envato Tuts+!

FREE
WordPress
Essential WordPress Plugins
Rachel McCollin

Discover the best WordPress plugins to use for backup, security, caching, and SEO. Learn how to install and configure key WordPress plugins in this free course.

Learn How to Use WordPress

If you're just getting started, learn how to use WordPress in our complete guide or check out our free Beginner's Guide to WordPress course.

In the earlier parts of this series, you've learned how WP_Query is structured and what its properties and methods are. The next stage is to understand the various arguments you can use with it and how best to do so.

WP_Query has a large number of possible arguments, which makes it extremely flexible. As you can use it to query just about anything held in your wp_posts table, it has arguments for every permutation of query you might want to run on your content.

In this tutorial I'll look at two types of argument for categories and tags:

The arguments for these two taxonomies are similar but do have some differences you need to know about if you're going to use them effectively.

A Recap on How Arguments Work in `WP_Query`

Before we start, let's have a quick recap on how arguments work in WP_Query. When you code WP_Query in your themes or plugins, you need to include four main elements:

the arguments for the query, using parameters which will be covered in this tutorial
the query itself
the loop
finishing off: resetting post data

In practice this will look something like the following:

<?php
 
$args = array(
    // Arguments for your query.
);
 
// Custom query.
$query = new WP_Query( $args );
 
// Check that we have query results.
if ( $query->have_posts() ) {
 
    // Start looping over the query results.
    while ( $query->have_posts() ) {
 
        $query->the_post();
 
        // Contents of the queried post results go here.
 
    }
 
}
 
// Restore original post data.
wp_reset_postdata();
 
?>

The arguments are what tells WordPress what data to fetch from the database and it's those that I'll cover here. So all we're focusing on here is the first part of the code:

$args = array(
    // Arguments for your query.
);

As you can see, the arguments are contained in an array. You'll learn how to code them as you work through this tutorial.

Coding Your Arguments

There is a specific way to code the arguments in the array, which is as follows:

$args = array(
    'parameter1' => 'value',
    'parameter2' => 'value',
    'parameter3' => 'value'
);

You must enclose the parameters and their values in single quotation marks, use => between them, and separate them with a comma. If you get this wrong, WordPress may not add all of your arguments to the query or you may get a white screen.

Category Parameters

Let's start with category parameters. The options you have here are as follows:

cat (int): use category id.
category_name (string): use category slug (NOT name).
category__and (array): use category id.
category__in (array): use category id.
category__not_in (array): use category id.

Note that for none of these do you use the name of your category. Even the category_name parameter takes the slug as its value, not its name. I tend to use this one rather than the ID as when I come back to my code at a later date, slugs are easier to identify than IDs. However if you think your site users might change the slug for one or more categories, I recommend using the ID to avoid any problems.

Let's take a look at how you use each of these.

The `cat` Parameter

The cat parameter is straightforward: just use a single category ID or a string of category IDs.

Querying for one category looks like this:

$args = array(
    'cat' => '12'
);

Querying for multiple categories looks like this:

$args = array(
    'cat' => '12, 13, 14'
);

The above will tell WordPress to fetch posts that are in any of the categories listed. If you want to find posts in every one of an array of categories, you use the category_and parameter, of which more shortly.

You can also use the cat parameter to find posts that are in one category but not another, by using a minus sign before the category ID as follows:

$args = array(
    'cat' => '12, -13'
);

The above would query posts in category 12 but not in category 13.

The `category_name` Parameter

The category_name parameter uses the category slug, not the name (confusing, I know!). Again you can use it with a single category or with a string of categories to find posts that are in any of the categories.

To query posts in a single category you add:

$args = array(
    'category_name' => 'my-slug'
);

And to find posts in one or more of a number of categories, use this:

$args = array(
    'category_name' => 'my-slug, your-slug, another-slug'
);

As with the cat parameter, this won't find posts that are in all of the categories, but it will find posts in any of the categories.

The `category__and` Parameter

If you want to find posts that are in all of an array of categories, this is the parameter you use. It takes the category IDs for its value. So to find posts in all of three categories, you would use:

$args = array(
    'category__and' => array(
        '12',
        '13',
        '14'
    )
);

Note that this uses an array not a string, so you code it differently. The parameter has two underscores in its name: use just one and it won't work.

The `category__in` Parameter

The next parameter looks for posts in one or more of an array of categories. It actually works in the same way as the cat parameter, and also takes the category ID as its value.

So to query posts in one or more of an array of categories, you would use:

$args = array(
    'category__in' => array(
        '12',
        '13',
        '14'
    )
);

The above would fetch posts from one or more of these categories.

The `category__not_in` Parameter

The category__not_in parameter does as you would expect: it queries posts which are not in a category or an array of categories.

To exclude posts from one category, you would use the following:

$args = array(
    'category__not_in' => '12'
);

And to exclude posts from an array of categories:

$args = array(
    'category__not_in' => array(
        '12',
        '13',
        '14'
    )
);

This would exclude posts from any of these categories.

Tag Parameters

Tags have slightly different parameters from categories: you can't work out what they might be based on your knowledge of category parameters, I'm afraid!

The tag parameters are:

tag (string): use tag slug.
tag_id (int): use tag id.
tag__and (array): use tag ids.
tag__in (array): use tag ids.
tag__not_in (array): use tag ids.
tag_slug__and (array): use tag slugs.
tag_slug__in (array): use tag slugs.

Let's look at each of these.

The `tag` Parameter

The tag parameter takes the tag slug for its value and can be used to find posts with one tag or with any of a string of tags.

So to find posts with one tag you use:

$args = array(
    'tag' => 'my-tag'
);

And to find posts with tags from an array of tags:

$args = array(
    'tag' => 'my-tag, your-tag, another-tag'
);

Note that the above queries posts with any of the tags in the array, not all of them.

The `tag_id` Parameter

The tag_id parameter works in a similar way to the cat parameter: it takes the tag ID and can be used with a single tag or multiple tags.

To find posts with a single tag you use this:

$args = array(
    'tag_id' => '21'
);

To find posts with one or more tags from a string of tag IDs:

$args = array(
    'tag_id' => '21, 22, 23'
);

You can also use tag_id to exclude tags, either when using it for single tags or multiple tags.

So to query posts except those with a given tag, you'd use:

$args = array(
    'tag_id' => '-21'
);

While to find posts with one of two tags but without another tag, you'd use this:

$args = array(
    'tag_id' => '21, -22, 23'
);

So the above will query posts with either or both of tags 21 or 23 but not tag 22.

The `tag__in` Parameter

This parameter lets you find posts with one or more of an array of tags. It works in the same way as tag when used with an array:

$args = array(
    'tag_in' =>  array(
        '21',
        '22',
        '23'
    )
);

This will query posts with any or all of the tags listed. If you want to find posts with all of the tags, you use tag__and, which I'll cover in a moment.

The `tag__not_in` Parameter

The tag__not_in parameter lets you query posts which don't have a given tag or array of tags.

Use it like this to exclude one tag:

$args = array(
    'tag__not_in' => array( '21' )
);

Note that you still need to use an array even though you're only using one tag. For more tags, use:

$args = array(
    'tag__not_in' => array(
        '21',
        '22',
        '23'
    )
);

This will query posts that don't have any of the above tags.

The `tag_slug__and` and `tag_slug__in` Parameters

These two parameters behave in exactly the same way as the tag__and and tag__in parameters, except that you use that tag slug in your arrays instead of the tag ID.

So for example to find posts which have both of a pair of tags, you use tag__slug_in:

$args = array(
    'tag_slug__in' => array(
        'my-tag',
        'your-tag',
        'another-tag'
    )
);

This finds posts with any of these tags. You could also use the tag parameter with a string of tag slugs to achieve the same result.

To include posts with all of a set of tags, use tag_slug__and:

$args = array(
    'tag_slug__and' => array(
        'my-tag',
        'your-tag',
        'another-tag'
    )
);

Instead of querying posts with any of the tags, this only queries posts that have all of the tags.

Advanced Use of Categories and Tags with `WP_Query`

Let’s take a look at some advanced uses of category and tag arguments with WP_Query, based on questions raised in the comments to this article.

List Subcategories of a Category

To list the subcategories of a given category (with a link to the subcategory archives for each), you wouldn’t use WP_Query. Instead you’d use wp_list_categories(), which outputs a list of categories with links to their archives. To output the subcategories of a specific category, use the ‘child_of' argument.

Here’s the code:

<?php

$args = array (
    ‘child_of’ => 5
);

 wp_list_categories( $args );

?>

Substitute the 5 in the code above for the ID of the category whose subcategories you want to list.

Display The First Post from a Category in One Element Then More Posts in Another Element

This is a useful technique if you want to highlight the most recent post from a category, maybe including the excerpt and featured image for that post, and then show a list of the next few posts from the category.

You do this by using the 'posts_per_page' and 'offset' arguments.

The simplest way to do this is to write two separate queries. The first uses 'posts_per_page' => 1 to just fetch the first post. The second query uses'offset' => 1 to fetch posts after the first post, and also uses 'posts_per_page' to define how many posts to output.

Here’s the code:

<?php
 
// first query - one post
$args = array(
    'cat'     			=> 	2,
	'posts_per_page' 	=>	1
);
 
// Custom query.
$query = new WP_Query( $args );
 
// Check that we have query results.
if ( $query->have_posts() ) {
    // Start looping over the query results.
    while ( $query->have_posts() ) {
        $query->the_post();
        // Contents of the queried post results go here.
    }
}
 
// Restore original post data.
wp_reset_postdata();

// second query - three posts
$args = array(
    'cat' 				=> 	2,
	'posts_per_page' 	=>	3,
	'offset' 			=> 	1
);
 
// Custom query.
$query = new WP_Query( $args );
 
// Check that we have query results.
if ( $query->have_posts() ) {
    // Start looping over the query results.
    while ( $query->have_posts() ) {
        $query->the_post();
        // Contents of the queried post results go here.
    }
}
 
// Rewind the query.
rewind_posts();

?>

An alternative method, which involves fewer calls to the database, is to write one query and then loop back through that query a second time, rewinding the query and using a variable to make sure the post output by the first loop isn’t repeated.

You can find more about using one query for multiple loops in our tutorial on the subject.

Display Posts From Multiple Categories

If you want to display posts that are in a given category and also in one or more of your other categories, you use the cat and category__in arguments. For each of these you use the category ID.

Imagine you want your posts to be category 1 and also in one or more of categories 2, 3 and 5.

Here are the arguments you would use for this:

$args = array(
    'cat'           => 	'1',
    'category__in' 	=> 	array ( '2', '3', '5' )
);

Summary

Querying your posts by category and/or tag is something there's a good chance you'll have occasion to do with WP_Query. By using the arguments above, and combining them where necessary, you can create powerful arguments to extract exactly the data you need from the database.

If you want to learn more about WP_Query, check out some of my other posts in the Mastering WP_Query series.

If you've had any experience working with parent and child themes in WordPress, you'll know that the template files in your child theme override those in your parent theme. So for example if your parent theme has a page.php file and you create a new one in your child theme, WordPress will use the one in the child theme when displaying pages.

You might think that functions would work in the same way: create a new function in your child theme's functions.php file with the same name as one in the parent theme, and it'll take precedence. Unfortunately it isn't as simple as this.

In this tutorial I'll show you three methods you can use to override functions from the parent theme in your child theme:

pluggable functions
function priority
removing functions from the hook they're attached to

How Functions in Parent and Child Themes Work

Before examining the methods for overriding functions in your child themes, it helps to understand how functions work in parent and child themes.

Firstly, you need to know that all of the functions in your parent theme will be run when you're using a child theme. You don't have to add anything to your child theme's functions file to make this happen. This is different from CSS, where you have to manually include the parent theme's stylesheet in the child theme's stylesheet.

Another thing to know is that if your parent and child themes have functions with the same name, this will break your site—unless the function in the parent theme is a pluggable function (more on this shortly). This is why it’s important to use prefixes for all your functions, and to use a different prefix in parent and child themes—just in case.

However you can change the order in which functions are fired, and you can prevent functions from being fired altogether, as we'll see shortly.

Pluggable Functions

Pluggable functions are something you code into your parent theme, so they won't be any use to you if you're working with an existing parent theme that doesn't have them.

But if you're writing your own parent theme, maybe as a starting point for future projects, or if you're creating your own theme framework, it's good practice to make your functions pluggable so that you can easily override them in child themes. It's also a good idea to look through the functions that are written into the parent theme you're using, as many of them, including the WordPress default theme, will have pluggable functions.

To write a pluggable function, you simply enclose it in a conditional tag to check if a function with that name has already been run:

<?php
if ( ! function_exists ( 'my_function' ) ) {
    function my_function() {
        // Contents of your function here.
    }
}
?>

So if you enclose the functions in your parent theme in a conditional tag like this, WordPress will check if there is a function with the same name in your child theme that's already been run, and if that's the case it won't run the function from the parent theme.

Then when you come to write a function in your child theme which you want to override the one in the parent theme, you just give it the same name as the one in the parent theme:

<?php
function my_function() {
    // Contents for your function override here.
}
?>

WordPress will run the function in the child theme first, and when it comes to the one in the parent theme, it'll check if it already exists and because it does, it won't run it.

Function Priority

If you're not using your own parent theme, or you're using a third party one without pluggable functions, you'll need another method.

When you write functions you can assign them a priority, which tells WordPress when to run them. You do this when adding your function to an action or filter hook. WordPress will then run the functions attached to a given hook in ascending order of priority, so those with higher numbers will run last.

Let's imagine the function in the parent theme isn't pluggable, and looks like this:

<?php
function parent_function() {
    // Contents for your function here.
}
add_action( 'init', 'parent_function' );
?>

This function is attached to the init hook and hasn't been given a priority. By default WordPress assigns a priority of 10 to functions which haven't had a priority added, so to fire your function after it you use a number larger than 10. I tend to use 15 so I've got some breathing room in case I want to add another function between the two later on.

This means the function in your child theme would look like this:

<?php
function child_function() {
    // Contents for your function here.
}
add_action( 'init', 'child_function', 15 );
?>

Alternatively, the function in your parent theme may have had a priority assigned to it:

<?php
function parent_function() {
    // Contents for your function here.
}
add_action( 'init', 'parent_function', 20 );
?>

So you just need to make sure the priority you give the function in your child theme is higher:

<?php
function child_function() {
    // Contents for your function here.
}
add_action( 'init', 'child_function', 25 );
?>

Removing Functions From Hooks

Sometimes running another function after the first one isn't enough to override it—you need to make sure the function in the parent theme doesn't run at all. In this case, you can remove the parent theme function from the hook it's attached to, using the remove_action() or remove_filter() functions. The one you use will depend on whether the function is attached to an action hook or filter hook in the parent theme.

So let's return to our previous function in the parent theme:

<?php
function parent_function() {
    // Contents for your function here.
}
add_action( 'init', 'parent_function' );
?>

To remove this function from its action hook and therefore prevent it from firing, you create a function in your child theme to remove it using remove_action():

<?php
remove_action( 'init', 'parent_function' );
?>

However, this won't work on its own—you need to attach this function to a hook which will fire after the hook which the parent theme function is attached to. This is because you can't remove the action before it's been fired. You can find details of the order in which actions are fired in the Codex.

<?php
function child_remove_parent_function() {
    remove_action( 'init', 'parent_function' );
}
add_action( 'wp_loaded', 'child_remove_parent_function' );
?>

Once you've done this, you can simply write an alternative function to replace the parent theme function in your child theme's functions file, or you can do nothing if all you wanted to do was remove the functionality from the parent theme.

A Note on Priorities

Note that if you're trying to remove a function using remove_action() or remove_filter() and the function has had a priority assigned to it, you must include the priority when removing it, or it won't work.

So if the function in the parent theme looks like this:

<?php
function parent_function() {
    // Contents for your function here.
}
add_action( 'init', 'parent_function', 15 );
?>

... you'll need to include the same priority value when removing it:

<?php
function child_remove_parent_function() {
    remove_action( 'widgets_init', 'parent_function', 15 );
}
add_action( 'wp_loaded', 'child_remove_parent_function' );
?>

Advanced Parent and Child Theme Functions: Plugable Functions and Extending Functions

As well as the above, there are some specific scenarios in which you might want to take things further. The following tips are in response to questions that have been asked in the comments below.

How to Partially Override a Function in the Parent Theme

Strictly speaking, you can’t partially override a function. You can only let it run, or disable it. But there are workarounds.

The first is if the function you want to partially override itself contains functions that are pluggable. You might find that the function includes a call to another pluggable function from within the parent theme.

If this is the case, you can override any functions within the main function, if that’s the code you want to change. Do it by writing a new version of the pluggable function that either contains just a return statement or contains alternative code. Note that this will only work if the function is pluggable—if it isn’t, your site will break.

However this method only works if you’re lucky enough to need to override functionality within a function that’s provided by another contained and pluggable function.

In the vast majority of cases, this won't be an option. In which case, you'll need to deactivate the function and replace it with a function of your own, with a different name. To create your new function, you can copy and paste the function from the parent theme into the child themes functions.php file, and then edit it to remove the code you don’t want.

You’d use two of your own functions: one to remove the original one, and the second to provide new code, like this example overriding a parent theme called on the init hook:

<?php
function remove_parent_function(
    remove_action( 'init', 'parent_theme_function');
)
add_action( 'wp_loaded', 'remove_parent_function');

function child_theme_function(
    // contents of child theme function based on original parent theme function
)
add_action( 'init', 'child_theme_function');
?>

How to Override Non-Pluggable Functions

Functions in the parent theme that aren’t pluggable can’t be overridden in any special way. So you’d have to use the method above, removing the function from its action hook and then writing a new function on the same action hook that provides the new code.

Don’t give the function in your child theme the same name as the function from the parent theme as this will break your site!

How to Extend Parent Theme Functions

Functions are generally not designed to be extendable. However there may be an exception if your function includes calls to other pluggable functions.

If this is the case, you can extend the function by overriding the functions within the main function, without having to replace the whole of the main function.

In most cases, you can only extend a parent theme function in one of three ways:

If the function you want to extend is pluggable, copy it into your child theme and add extra code to extend it.
If the function isn't pluggable, remove it from its hook using remove_action() and write a new function (with a different name) on the same hook with extra code. You might want to copy code from the original function into your new function and edit that.
Write a second function which is called on the same hook as the first function and adds extra code that will run before or after the first function. Use the priority parameter in add_action() to specify whether your second function will run before or after the original function.

Summary

Overriding functions in a parent theme is more complicated than overriding template files or styling, but it can be done. Here I've shown you three methods for doing this:

If you're writing your own parent theme, or using one which has them, use pluggable functions so that a function in the child theme with the same name as one in the parent theme will replace it.
Assign higher priorities to functions in your child themes to ensure they're run after those in your parent theme.
Use remove_action() or remove_filter() to remove functions in the parent theme altogether.

Which method you use will depend on the way your parent theme is coded and whether you need to remove the parent theme function altogether or just run another function after it to override it.

Today, we're going to discuss control structures and loops in PHP. I'll show you how to use all the main control structures that are supported in PHP, like if, else, for, foreach, while, and more.

What Is a Control Structure?

In simple terms, a control structure allows you to control the flow of code execution in your application. Generally, a program is executed sequentially, line by line, and a control structure allows you to alter that flow, usually depending on certain conditions.

Control structures are core features of the PHP language that allow your script to respond differently to different inputs or situations. This could allow your script to give different responses based on user input, file contents, or some other data.

The following flowchart explains how a control structure works in PHP.

PHP Control Structures and Loops if Condition Flow

As you can see in the above diagram, first a condition is checked. If the condition is true, the conditional code will be executed. The important thing to note here is that code execution continues normally after conditional code execution.

Let's consider the following example.

PHP Control Structures and Loops elseif Condition Flow

In the above example, the program checks whether or not the user is logged in. Based on the user's login status, they will be redirected to either the Login page or the My Account page. In this case, a control structure ends code execution by redirecting users to a different page. This is a crucial ability of the PHP language.

PHP supports a number of different control structures:

if
else
elseif
switch
while
do-while
for
foreach
and more

Let's take a look at a few of these control structures with examples.

Learning PHP Control Structures

In the previous section, we learned the basics of control structures in PHP and their usefulness in application development. In this section, we'll go through a couple of important control structures that you'll end up using frequently in your day-to-day application development.

PHP If Statement

The if construct allows you to execute a piece of code if the expression provided along with it evaluates to true.

Let's have a look at the following example to understand how it actually works.

<?php
$age = 50;

if ($age > 30)
{
  echo "Your age is greater than 30!";
}
?>

The above example should output the Your age is greater than 30! message since the expression evaluates to true. In fact, if you want to execute only a single statement, the above example can be rewritten as shown in the following snippet without brackets.

<?php
$age = 50;

if ($age > 30)
  echo "Your age is greater than 30!";
?>

On the other hand, if you have more than one statements to execute, you must use brackets, as shown in the following snippet.

<?php
if (is_array($user))
{
  $user_id = isset($user['user_id']) ? $user['user_id'] : '';
  $username = isset($user['username']) ? $user['username'] : '';
  // and more statements...
}
?>

PHP Else Statement

In the previous section, we discussed the if construct, which allows you to execute a piece of code if the expression evaluates to true. On the other hand, if the expression evaluates to false, it won't do anything. More often than not, you also want to execute a different code snippet if the expression evaluates to false. That's where the else statement comes into the picture.

You always use the else statement in conjunction with an if statement. Basically, you can define it as shown in the following pseudo code.

if (expression)
{
  // code is executed if the expression evaluates to TRUE
}
else
{
  // code is executed if the expression evaluates to FALSE
}

Let's revise the previous example to understand how it works.

<?php
$age = 50;

if ($age < 30)
{
  echo "Your age is less than 30!";
}
else
{
  echo "Your age is greater than or equal 30!";
}
?>

So when you have two choices, and one of them must be executed, you can use the if-else construct.

PHP Else If Statement

We can consider the elseif statement as an extension to the if-else construct. If you've got more than two choices to choose from, you can use the elseif statement.

Let's study the basic structure of the elseif statement, as shown in the following pseudo code.

if (expression1)
{
  // code is executed if the expression1 evaluates to TRUE
}
elseif (expression2)
{
  // code is executed if the expression2 evaluates to TRUE
}
elseif (expression3)
{
  // code is executed if the expression3 evaluates to TRUE
}
else
{
  // code is executed if the expression1, expression2 and expression3 evaluates to FALSE, a default choice
}

Again, let's try to understand it using a real-world example.

<?php
$age = 50;

if ($age < 30)
{
  echo "Your age is less than 30!";
}
elseif ($age > 30 && $age < 40)
{
  echo "Your age is between 30 and 40!";
}
elseif ($age > 40 && $age < 50)
{
  echo "Your age is between 40 and 50!";
}
else
{
  echo "Your age is greater than 50!";
}
?>

As you can see in the above example, we have multiple conditions, so we've used a series of elseif statements. In the event that all if conditions evaluate to false, it executes the code provided in the last else statement.

PHP Switch Statement

The switch statement is somewhat similar to the elseif statement which we've just discussed in the previous section. The only difference is the expression which is being checked.

In the case of the elseif statement, you have a set of different conditions, and an appropriate action will be executed based on a condition. On the other hand, if you want to compare a variable with different values, you can use the switch statement.

As usual, an example is the best way to understand the switch statement.

<?php
$favourite_site = 'Code';

switch ($favourite_site) {
  case 'Business':
    echo "My favourite site is business.tutsplus.com!";
    break;
  case 'Code':
    echo "My favourite site is code.tutsplus.com!";
    break;
  case 'Web Design':
    echo "My favourite site is webdesign.tutsplus.com!";
    break;
  case 'Music':
    echo "My favourite site is music.tutsplus.com!";
    break;
  case 'Photography':
    echo "My favourite site is photography.tutsplus.com!";
    break;
  default:
    echo "I like everything at tutsplus.com!";
}
?>

As you can see in the above example, we want to check the value of the $favourite_site variable, and based on the value of the $favourite_site variable we want to print a message.

For each value you want to check with the $favourite_site variable, you have to define the case block. If the value is matched with a case, the code associated with that case block will be executed. After that, you need to use the break statement to end code execution. If you don't use the break statement, script execution will be continued up to the last block in the switch statement.

Finally, if you want to execute a piece of code if the variable's value doesn't match any case, you can define it under the default block. Of course, it's not mandatory—it's just a way to provide a default case.

So that's the story of conditional control structures. We'll discuss loops in PHP in the next section.

Loops in PHP

Loops in PHP are useful when you want to execute a piece of code repeatedly until a condition evaluates to false. So code is executed repeatedly as long as a condition evaluates to true, and as soon as the condition evaluates to false, the script continues executing the code after the loop.

The following flowchart explains how loops work in PHP.

As you can see in the above screenshot, a loop contains a condition. If the condition evaluates to true, the conditional code is executed. After execution of the conditional code, control goes back to the loop condition, and the flow continues until the condition evaluates to false.

In this section, we'll go through the different types of loops supported in PHP.

While Loop in PHP

The while loop is used when you want to execute a piece of code repeatedly until the while condition evaluates to false.

You can define it as shown in the following pseudo code.

while (expression)
{
  // code to execute as long as expression evaluates to TRUE
}

Let's have a look at a real-world example to understand how the while loop works in PHP.

<?php  
$max = 0;  
echo $i = 0;
echo ",";
echo $j = 1;  
echo ",";
$result=0;

while ($max < 10 )  
{  
    $result = $i + $j;  

    $i = $j;  
    $j = $result;  

    $max = $max + 1;  
    echo $result;
    echo ",";
}
?>

If you're familiar with the Fibonacci series, you might recognize what the above program does—it outputs the Fibonacci series for the first ten numbers. The while loop is generally used when you don't know the number of iterations that are going to take place in a loop.

Do-While Loop in PHP

The do-while loop is very similar to the while loop, with the only difference being that the while condition is checked at the end of the first iteration. Thus, we can guarantee that the loop code is executed at least once, irrespective of the result of the while expression.

Let's have a look at the syntax of the do-while loop.

do
{
  // code to execute
} while (expression);

Let's go through a real-world to understand possible use-cases where you can use the do-while loop.

<?php
$handle = fopen("file.txt", "r");
if ($handle)
{
    do
    {
        $line = fgets($handle);

        // process the line content

    } while($line !== false);
}
fclose($handle);
?>

In the above example, we're trying to read a file line by line. Firstly, we've opened a file for reading. In our case, we're not sure if the file contains any content at all. Thus, we need to execute the fgets function at least once to check if a file contains any content. So we can use the do-while loop here. do-while evaluates the condition after the first iteration of the loop.

For Loop in PHP

Generally, the for loop is used to execute a piece of code for a specific number of times. In other words, if you already know the number of times you want to execute a block of code, it's the for loop which is the best choice.

Let's have a look at the syntax of the for loop.

for (expr1; expr2; expr3)
{
  // code to execute
}

The expr1 expression is used to initialize variables, and it's always executed. The expr2 expression is also executed in the beginning of a loop, and if it evaluates to true, the loop code is executed. After execution of the loop code, the expr3 is executed. Generally, the expr3 is used to alter the value of a variable which is used in the expr2 expression.

Let's go through the following example to see how it works.

<?php
for ($i=1; $i<=10; ++$i)
{
  echo sprintf("The square of %d is %d.</br>", $i, $i*$i);
}
?>

The above program outputs the square of the first ten numbers. It initializes $i to 1, repeats as long as $i is less than or equal to 10, and adds 1 to $i at each iteration.

For Each in PHP

The foreach loop is used to iterate over array variables. If you have an array variable, and you want to go through each element of that array, the foreach loop is the best choice.

Let's have a look at a couple of examples.

<?php
$fruits = array('apple', 'banana', 'orange', 'grapes');
foreach ($fruits as $fruit)
{
  echo $fruit;
  echo "<br/>";
}

$employee = array('name' => 'John Smith', 'age' => 30, 'profession' => 'Software Engineer');
foreach ($employee as $key => $value)
{
  echo sprintf("%s: %s</br>", $key, $value);
  echo "<br/>";
}
?>

If you want to access array values, you can use the first version of the foreach loop as shown in the above example. On the other hand, if you want to access both a key and a value, you can do it as shown in the $employee example above.

Breaking Out of the Loop

There are times when you might want to break out of a loop before it runs it course. This can be achieved easily using the break keyword. It will get you out of the current for, foreach, while, do-while or switch structure.

You can also use break to get out of multiple nested loops by supplying a numeric argument. For example, using break 3 will break you out of 3 nested loops. However, you cannot pass a variable as the numeric argument if you are using a PHP version greater than or equal to 5.4.

<?php

echo 'Simple Break';
for($i = 1; $i <= 2; $i++) {
    echo "\n".'$i = '.$i.' ';
    for($j = 1; $j <= 5; $j++) {
        if($j == 2) {
            break;
        }
        echo '$j = '.$j.' ';
    }
}

/*
Simple Break
i = 1 j = 1 
i = 2 j = 1 
*/

echo 'Multi-level Break';
for($i = 1; $i <= 2; $i++) {
    echo "\n".'$i = '.$i.' ';
    for($j = 1; $j <= 5; $j++) {
        if($j == 2) {
            break 2;
        }
        echo '$j = '.$j.' ';
    }
}

/*
Multi-level Break
i = 1 j = 1 
*/

?>

Another keyword that can interrupt loops in PHP is continue. However this only skips the rest of the current loop iteration instead of breaking out of the loop altogether. Just like break, you can also use a numerical value with continue to specify how many nested loops should it skip for current iteration.

<?php

echo 'Simple Continue';
for($i = 1; $i <= 2; $i++) {
    echo "\n".'$i = '.$i.' ';
    for($j = 1; $j <= 5; $j++) {
        if($j == 2) {
            continue;
        }
        echo '$j = '.$j.' ';
    }
}

/*
Simple Continue
i = 1 j = 1 j = 3 j = 4 j = 5 
i = 2 j = 1 j = 3 j = 4 j = 5 
*/

echo 'Multi-level Continue';
for($i = 1; $i <= 2; $i++) {
    echo "\n".'$i = '.$i.' ';
    for($j = 1; $j <= 5; $j++) {
        if($j == 2) {
            continue 2;
        }
        echo '$j = '.$j.' ';
    }
}

/*
Multi-level Continue
i = 1 j = 1 
i = 2 j = 1 
*/

?>

Conclusion

In this article, we discussed different control structures and loops in PHP. They are an essential part of PHP—or any programming language for that matter.

Learn PHP With a Free Online Course

If you want to learn PHP, check out our free online course on PHP fundamentals!

In this course, you'll learn the fundamentals of PHP programming. You'll start with the basics, learning how PHP works and writing simple PHP loops and functions. Then you'll build up to coding classes for simple object-oriented programming (OOP). Along the way, you'll learn all the most important skills for writing apps for the web: you'll get a chance to practice responding to GET and POST requests, parsing JSON, authenticating users, and using a MySQL database.

FREE
PHP
PHP Fundamentals
Jeremy McPeak

In this tutorial, I am going to make a list of common PHP array functions, with examples of usage and best practices. Every PHP developer must know how to use them and how to combine array functions to make code readable and short.

Also, there is a presentation with given code examples, so you can download it from the related links and show it to your colleagues to build a stronger team.

The Basics

There are two different ways of creating arrays. One is to use array() to specify the elements as key-value pairs. The other method is to put all elements inside []. There are two important points that you should remember when creating associate arrays with key pairs.

First, the key always has to be unique. If you try to use the same key multiple times in an array, PHP will ignore all other key-value pairs except the last one. Second, if a key is created as floats, bools, and valid string representations of integers, then it will be cast to integers.

Here are a few examples of creating arrays in PHP:

$first = array(10, "Apple", 20, -18, "Monkey");
print_r($first);
/* Array
(
    [0] => 10
    [1] => Apple
    [2] => 20
    [3] => -18
    [4] => Monkey
) */

$second = [10, "Apple", 20, -18, "Monkey"];
print_r($second);
/* Array
(
    [0] => 10
    [1] => Apple
    [2] => 20
    [3] => -18
    [4] => Monkey
) */

$third = [10, 5 => "Apple", 2 => 20, -18, "Monkey"];
print_r($third);
/* Array
(
    [0] => 10
    [5] => Apple
    [2] => 20
    [6] => -18
    [7] => Monkey
) */

As you can see, using either array() or [] is equivalent when creating arrays. The shorthand notation has been available starting from PHP 5.4.

You also don't need to specify a key for every array value. When left out, PHP sets the key to one more than the largest specified integer key. All automatically assigned keys will be greater than or equal to 0.

Working With Keys and Values

Let's start with the basic functions that work with array keys and values. One of them is array_combine(), which creates an array using one array for keys and another for its values:

$keys = ['sky', 'grass', 'orange'];
$values = ['blue', 'green', 'orange'];

$array = array_combine($keys, $values);
print_r($array);

// Array
// (
//     [sky] => blue
//     [grass] => green
//     [orange] => orange
// )

You should know that the array_values() function returns an indexed array of values, array_keys() returns an array of keys of a given array, and array_flip() exchanges keys with values:

print_r(array_keys($array)); // ['sky', 'grass', 'orange']
print_r(array_values($array)); // ['blue', 'green', 'orange']
print_r(array_flip($array));

// Array
// (
//     [blue] => sky
//     [green] => grass
//     [orange] => orange
// )

You can check if an array contains a specific value and get its first corresponding key using the array_search() function. You can also use in_array() if you just want to know whether an array contains a specific element and are not interested in its position. Consider using the array_key_exists() function when you want to check if the array uses a given key.

$values = ["Apples", "Bananas", "Mangoes", "100", "200"];

if(in_array(100, $values)) {
    echo '100 is one of the values';
}
// 100 is one of the values

if(in_array(200, $values) !== false) {
    echo '200 is not one of the values';
}
// 200 is not one of the values

$values = ["Apples", "Bananas", "Mangoes", "100", "200", 100];

echo array_search(100, $values);
// 3

echo array_search(100, $values, true);
// 5

$values = ["Apples" => 100, "Bananas" => 10, "Mangoes" => 45];

if(array_key_exists("Apples", $values)) {
    echo 'We have apples.';
}
// We have apples.

As the example above shows, make sure you use strict type checking if you don't want any unexpected results.

If you want to look up multiple elements in an array, it's usually faster to check if it contains a particular value by first flipping the array with array_flip() and then using array_key_exists().

Make Your Code Shorter

The list() function, which is not really a function but a language construction, is designed to assign variables in a short way. For example, here's a basic example of using the list() function:

// define array
$array = ['a', 'b', 'c'];

// without list()
$a = $array[0];
$b = $array[1];
$c = $array[2];

// with list()
list($a, $b, $c) = $array;

This construction works perfectly with functions like preg_slit() or explode() . Also, you can skip some parameters if you don't need them to be defined:

$string = 'hello|wild|world';
list($hello, , $world) = explode('|', $string);
echo("$hello, $world"); // hello, world

Also, list() can be used with foreach, which makes this construction even better:

$arrays = [[1, 2], [3, 4], [5, 6]];

foreach ($arrays as list($a, $b)) {
    $c = $a + $b;
    echo($c . ', '); // 3, 7, 11, 
}

With the extract() function, you can export an associative array to variables. For every element of an array, a variable will be created with the name of a key and value as a value of the element:

$array = [
    'clothes' => 't-shirt',
    'size'    => 'medium',
    'color'   => 'blue',
];

extract($array);

echo("$clothes $size $color"); // t-shirt medium blue

Be aware that extract() is not safe if you are working with user data (like results of requests), so it's better to use this function with the flags EXTR_IF_EXISTS and EXTR_PREFIX_ALL.

The opposite of the previous function is the compact() function, which makes an associative array from variables:

$clothes = 't-shirt';
$size = 'medium';
$color = 'blue';

$array = compact('clothes', 'size', 'color');
print_r($array);

// Array
// (
//     [clothes] => t-shirt
//     [size] => medium
//     [color] => blue
// )

Filtering Functions

There is a great function for array filtering, and it is called array_filter(). Pass the array as the first param and an anonymous function as the second param. Return true in a callback function if you want to leave this element in the array, and false if you don't:

$numbers = [20, -3, 50, -99, 55];

$positive = array_filter($numbers, function($number) {
    return $number > 0;
});

print_r($positive); // [0 => 20, 2 => 50, 4 => 55]

There is a way to filter not only by the values. You can use ARRAY_FILTER_USE_KEY or ARRAY_FILTER_USE_BOTH as a third parameter to pass the key or both value and key to the callback function.

Also, you can call array_filter() without a callback to remove all empty values:

$numbers = [-1, 0, 1];

$not_empty = array_filter($numbers);

print_r($not_empty); // [0 => -1, 2 => 1]

You can get only unique values from an array using the array_unique() function. Notice that the function will preserve the keys of the first unique elements:

$array = [1, 1, 1, 1, 2, 2, 2, 3, 4, 5, 5];
$uniques = array_unique($array);

print_r($uniques);

// Array
// (
//     [0] => 1
//     [4] => 2
//     [7] => 3
//     [8] => 4
//     [9] => 5
// )

With array_column(), you can get a list of column values from a multi-dimensional array, like an answer from a SQL database or an import from a CSV file. Just pass an array and column name:

$array = [
    ['id' => 1, 'title' => 'tree'],
    ['id' => 2, 'title' => 'sun'],
    ['id' => 3, 'title' => 'cloud'],
];

$ids = array_column($array, 'id');

print_r($ids); // [1, 2, 3]

Starting from PHP 7, array_column() becomes even more powerful, because it is now allowed to work with an array of objects. So working with an array of models just became easier:

$cinemas = Cinema::find()->all();
$cinema_ids = array_column($cinemas, 'id'); // php7 forever!

Walking Through the Arrays

Using array_map(), you can apply a callback to every element of an array. You can pass a function name or anonymous function to get a new array based on the given array:

$cities = ['Berlin', 'KYIV', 'Amsterdam', 'Riga'];
$aliases = array_map('strtolower', $cities);

print_r($aliases); // ['berlin', 'kyiv, 'amsterdam', 'riga']

$numbers = [1, -2, 3, -4, 5];
$squares = array_map(function($number) {
    return $number ** 2;
}, $numbers);

print_r($squares);  // [1, 4, 9, 16, 25]

There is a myth that there is no way to pass values and keys of an array to a callback, but we can bust it:

$model = ['id' => 7, 'name'=>'James'];

$callback = function($key, $value) {
    return "$key is $value";
};

$res = array_map($callback, array_keys($model), $model);
print_r($res);

// Array
// (
//     [0] => id is 7
//     [1] => name is James
// )

But this looks dirty. It is better to use array_walk() instead. This function looks the same as array_map(), but it works differently. First of all, an array is passed using a reference, so array_walk() doesn't create a new array, but changes a given array. So as a source array, you can pass the array value using a reference in a callback. Array keys can also be passed easily:

$fruits = [
    'banana' => 'yellow',
    'apple' => 'green',
    'orange' => 'orange',
];

array_walk($fruits, function(&$value, $key) {
    $value = "$key is $value";
});

print_r($fruits);

// Array
// (
//     [banana] => banana is yellow
//     [apple] => apple is green
//     [orange] => orange is orange
// )

Joining the Arrays

The best way to merge two or more arrays in PHP is to use the array_merge() function. Items of arrays will be merged together, and values with the same string keys will be overwritten with the last value:

$array1 = ['a' => 'a', 'b' => 'b', 'c' => 'c'];
$array2 = ['a' => 'A', 'b' => 'B', 'D' => 'D'];

$merge = array_merge($array1, $array2);
print_r($merge);
// Array
// (
//     [a] => A
//     [b] => B
//     [c] => c
//     [D] => D
// )

To remove array values from another array (or arrays), use array_diff(). To get values which are present in given arrays, use array_intersect(). The next examples will show how it works:

$array1 = [1, 2, 3, 4];
$array2 =       [3, 4, 5, 6];

$diff = array_diff($array1, $array2);
print_r($diff); // [0 => 1, 1 => 2]

$intersect = array_intersect($array1, $array2);
print_r($intersect);  // [2 => 3, 3 => 4]

Do the Math With Array Values

Use array_sum() to get a sum of array values, array_product() to multiply them, or create your own formula with array_reduce():

$numbers = [1, 2, 3, 4, 5];

echo(array_sum($numbers)); // 15
echo(array_product($numbers)); // 120

echo(array_reduce($numbers, function($carry, $item) {
    return $carry ? $carry / $item : 1;
})); // 0.0083 = 1/2/3/4/5

To count all the values of an array, use array_count_values(). It will give all unique values of a given array as keys and a count of these values as a value:

$things = ['apple', 'apple', 'banana', 'tree', 'tree', 'tree'];
$values = array_count_values($things);

print_r($values);

// Array
// (
//     [apple] => 2
//     [banana] => 1
//     [tree] => 3
// )

Generating Arrays

To generate an array with a given size and the same value, use array_fill():

$bind = array_fill(0, 5, '?');
print_r($bind); // ['?', '?', '?', '?', '?']

To generate an array with a range of keys and values, like hours in the day or letters, use range():

$letters = range('a', 'z');
print_r($letters); // ['a', 'b', ..., 'z']

$hours = range(0, 23);
print_r($hours); // [0, 1, 2, ..., 23]

To get a part of an array—for example, just the first three elements—use array_slice():

$numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
$top = array_slice($numbers, 0, 3);
print_r($top); // [1, 2, 3]

If you ever want to generate an associative array with different keys and the same value assigned to each key, you can simply use the array_fill_keys() function.

$keys = ["Apples", "Bananas", "Mangoes"];
$fruit_count = array_fill_keys($keys, 100);

print_r($fruit_count);

/* Array
(
    [Apples] => 100
    [Bananas] => 100
    [Mangoes] => 100
) */

Sorting Arrays

It is good to remember that every sorting function in PHP works with arrays by a reference and returns true on success or false on failure. There's a basic sorting function called sort(), and it sorts values in ascending order without preserving keys. The sorting function can be prepended by the following letters:

a, sort preserving keys
k, sort by keys
r, sort in reverse/descending order
u, sort with a user function

You can see the combinations of these letters in the following table:

	a	k	r	u
a	`asort()`		`arsort()`	`uasort()`
k		`ksort()`	`krsort()`
r	`arsort()`	`krsort()`	`rsort()`
u	`uasort()`			`usort()`

Combining Array Functions Like a Boss

The real magic begins when you start to combine array functions. Here is how you can trim and remove empty values in just a single line of code with array_filter() and array_map():

$values = ['say  ', '  bye', ' ', ' to', ' spaces ', '   '];

$words = array_filter(array_map('trim', $values));
print_r($words); // ['say', 'bye', 'to', 'spaces']

To create an id to a title map from an array of models, we can use a combination of array_combine() and array_column():

$models = [$model1, $model2, $model3];

$id_to_title = array_combine(
    array_column($models, 'id'),
    array_column($models, 'title')
);

To get the top three values of an array, we can use array_count_values(), arsort(), and array_slice():

$letters = ['a', 'a', 'a', 'a', 'b', 'b', 'c', 'd', 'd', 'd', 'd', 'd'];

$values = array_count_values($letters); // get key to count array
arsort($values); // sort descending preserving key
$top = array_slice($values, 0, 3); // get top 3

print_r($top);
// Array
// (
//     [d] => 5
//     [a] => 4
//     [b] => 2
// )

It's easy to use array_sum() and array_map() to calculate the sum of order in a few rows:

$order = [
    ['product_id' => 1, 'price' => 99, 'count' => 1],
    ['product_id' => 2, 'price' => 50, 'count' => 2],
    ['product_id' => 2, 'price' => 17, 'count' => 3],
];

$sum = array_sum(array_map(function($product_row) {
    return $product_row['price'] * $product_row['count'];
}, $order));

print_r($sum); // 250

Conclusion

As you can see, knowledge of the main array functions can make your code much shorter and more readable. Of course, PHP has many more array functions, and even the given functions have many variations to use with extra parameters and flags, but I think that in this tutorial we've covered the basics that every PHP developer should know.

Learn PHP With a Free Online Course

If you want to learn PHP, check out our free online course on PHP fundamentals!

FREE
PHP
PHP Fundamentals
Jeremy McPeak

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

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

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

What Is an Online Community?

An online community is:

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

Online communities come in different forms:

online forums
social networks
community blogs
email groups
subscription newsletters

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

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

Importance of Online Communities

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

Reach

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

Longevity

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

Engagement

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

What Does an Online Community Need?

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

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

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

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

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

Millions of websites are now powered by WordPress.

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

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

Building an Online Community With WordPress

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

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

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

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

What Are Community Plugins?

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

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

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

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

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

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

WordPress Community Plugins on CodeCanyon

There are currently over a 100 premium community plugins for WordPress on CodeCanyon. You can use them to add all kinds of community based functionality to your websites. This include things like user profiles, user testimonials, team member pages, forums and much more.

Using a premium community plugin gives you access to free updates for lifetime and 6 months of support.

Top WordPress Community Plugins

We have created this list of top WordPress community plugins to help you save some time.

1. UserPro: Community and User Profile WordPress Plugin

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

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

User ACleverCat says this about UserPro:

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

2. Youzer: BuddyPress Community & WordPress User Profile Plugin

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

Some of its features include:

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

It’s also fully compatible with the BuddyPress platform.

User cmh2010 says:

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

3. Ultimate Membership Pro

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

Ultimate Membership Pro allows you to:

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

Here’s a look at some of its features:

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

Customer BreoganGal has this to say:

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

4. PrivateContent

Private Content Multilevel Content Plugin

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

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

Some features that make PrivateContent awesome include:

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

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

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

Customer Fibeus says this about PrivateContent :

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

5. ARMember

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

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

You can do so much more, for example:

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

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

User Lynn_HCM says this:

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

6. User Profiles Made Easy

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

Features include:

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

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

User RomeoLab says:

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

7. Chat Support Board

This Chat support board plugin is a great way to automate basic interactions with customers using artificial intelligence. The UI is similar to popular chat services making it easier for everyone to use it.

Here are some of its features:

rich messages and surveys
registration and login
multilingual and RTL support
email and desktop notifications with sound
and more

The plugin also offers a lot of great tools to admins to help them manage different conversations and users. Admins are also able to save replies and find, sort or filter users.

8. Team Showcase

This WordPress plugin allows you to showcase different members of your team or company in a variety of layouts. You can provide some basic information like their title and social media links along with their profile picture.

Here are some interesting features of this plugin:

filter team members by categories
reorder members using drag-drop
single pages for each entry
can be used inside widgets
user friendly shortcode generator
and more

Consider using Team Showcase if you want your team members to be easily accessible for your readers. This could potentially increase their engagement with your website and give team members more recognition at the same time.

9. Sabai Discuss Plugin

You can use the Sabai Discuss plugin in your WordPress website to create a questions and answers forum. The plugins allows users to ask and answer questions similar to websites such as Stack Overflow.

You get a lot of features with this plugin, such as:

filter questions and answers
post comments on both questions and answers
tag questions with auto-suggest
profile pages
close and reopen questions
and more

You should definitely check out this plugin if you want to build a solid community of users based around the content of your website.

Free WordPress Community Plugins

You can also find quite a few free WordPress community plugins out there. We are listing three good ones here that have decent reviews. Before going ahead with free plugins, keep in mind that you might not always get regular updates and support.

ProfileGrid

This is a custom user profile plugin that aims to bring all kind of user data from a variety of plugins together. It is basically an all encompassing user profile builder that makes managing user data easier.

BuddyPress

This plugin allows you to create a community similar to popular social networks. Members of your website will be able to create their profiles, have private conversations and interact in groups.

wpForo

The wpForo plugin allows you to integrate a full-fledged forum into your website. It comes with a variety of layouts with in-built SEO and cache system.

Important Tips to Keep in Mind

Here are a few tips that will help you in choosing the best community plugin for your own website:

Make sure that the plugin looks great on mobile devices. More and more people are now using the internet on their mobiles instead of their desktop computer. This makes it important to choose a plugin that loads quickly and looks great on mobile devices.
Forum and social networking plugins will require comparatively more server resources. Be aware of the resources that might be needed by a plugin to work properly. The most feature rich plugin will do you no good if the website starts showing 503 errors with only 10 users!
Spam can be a big issue for community based websites. Any plugin that you use should come with tools to help you easily moderate content and prevent spam.

Conclusion

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

If you've had any experience working with parent and child themes in WordPress, you'll know that the template files in your child theme override those in your parent theme. For example, if your parent theme has a page.php file and you create a new one in your child theme, WordPress will use the one in the child theme when displaying pages.

In this tutorial, I'll show you three methods you can use to override functions from the parent theme in your child theme:

pluggable functions
function priority
removing functions from the hook they're attached to

How Functions in Parent and Child Themes Work

Before examining the methods for overriding functions in your child themes, it helps to understand how functions work in parent and child themes.

However you can change the order in which functions are fired, and you can prevent functions from being fired altogether, as we'll see shortly.

Pluggable Functions

Pluggable functions are something you code into your parent theme, so they won't be any use to you if you're working with an existing parent theme that doesn't have them.

To write a pluggable function, you simply enclose it in a conditional tag to check if a function with that name has already been run:

<?php
if ( ! function_exists ( 'my_function' ) ) {
    function my_function() {
        // Contents of your function here.
    }
}
?>

Then, when you come to write a function in your child theme which you want to override the one in the parent theme, you just give it the same name as the one in the parent theme:

<?php
function my_function() {
    // Contents for your function override here.
}
?>

WordPress will run the function in the child theme first, and when it comes to the one in the parent theme, it'll check if it already exists and because it does, it won't run it.

Function Priority

If you're not using your own parent theme, or you're using a third-party one without pluggable functions, you'll need another method.

When you write functions, you can assign them a priority, which tells WordPress when to run them. You do this when adding your function to an action or filter hook. WordPress will then run the functions attached to a given hook in ascending order of priority, so those with higher numbers will run last.

Let's imagine the function in the parent theme isn't pluggable, and looks like this:

<?php
function parent_function() {
    // Contents for your function here.
}
add_action( 'init', 'parent_function' );
?>

This function is attached to the init hook and hasn't been given a priority. By default, WordPress assigns a priority of 10 to functions which haven't had a priority added, so to fire your function after it, you use a number larger than 10. I tend to use 15 so that I've got some breathing room in case I want to add another function between the two later on.

This means the function in your child theme would look like this:

<?php
function child_function() {
    // Contents for your function here.
}
add_action( 'init', 'child_function', 15 );
?>

Alternatively, the function in your parent theme may have had a priority assigned to it:

<?php
function parent_function() {
    // Contents for your function here.
}
add_action( 'init', 'parent_function', 20 );
?>

So you just need to make sure the priority you give the function in your child theme is higher:

<?php
function child_function() {
    // Contents for your function here.
}
add_action( 'init', 'child_function', 25 );
?>

Removing Functions From Hooks

Sometimes, running another function after the first one isn't enough to override it—you need to make sure the function in the parent theme doesn't run at all. In this case, you can remove the parent theme function from the hook it's attached to, using the remove_action() or remove_filter() functions. The one you use will depend on whether the function is attached to an action hook or filter hook in the parent theme.

So let's return to our previous function in the parent theme:

<?php
function parent_function() {
    // Contents for your function here.
}
add_action( 'init', 'parent_function' );
?>

To remove this function from its action hook and therefore prevent it from firing, you create a function in your child theme to remove it using remove_action():

<?php
remove_action( 'init', 'parent_function' );
?>

<?php
function child_remove_parent_function() {
    remove_action( 'init', 'parent_function' );
}
add_action( 'wp_loaded', 'child_remove_parent_function' );
?>

A Note on Priorities

So if the function in the parent theme looks like this:

<?php
function parent_function() {
    // Contents for your function here.
}
add_action( 'init', 'parent_function', 15 );
?>

... you'll need to include the same priority value when removing it:

<?php
function child_remove_parent_function() {
    remove_action( 'widgets_init', 'parent_function', 15 );
}
add_action( 'wp_loaded', 'child_remove_parent_function' );
?>

Advanced Parent and Child Theme Functions: Plugable Functions and Extending Functions

As well as the above, there are some specific scenarios in which you might want to take things further. The following tips are in response to questions that have been asked in the comments below.

How to Partially Override a Function in the Parent Theme

Strictly speaking, you can’t partially override a function. You can only let it run or disable it. But there are workarounds.

However, this method only works if you’re lucky enough to need to override functionality within a function that’s provided by another contained and pluggable function.

In the vast majority of cases, this won't be an option. In these cases, you'll need to deactivate the function and replace it with a function of your own, with a different name. To create your new function, you can copy and paste the function from the parent theme into the child theme's functions.php file, and then edit it to remove the code you don’t want.

You’d use two of your own functions: one to remove the original one, and the second to provide new code, like this example overriding a parent theme called on the init hook:

<?php
function remove_parent_function(
    remove_action( 'init', 'parent_theme_function');
)
add_action( 'wp_loaded', 'remove_parent_function');

function child_theme_function(
    // contents of child theme function based on original parent theme function
)
add_action( 'init', 'child_theme_function');
?>

How to Override Non-Pluggable Functions

Don’t give the function in your child theme the same name as the function from the parent theme as this will break your site!

How to Extend Parent Theme Functions

Functions are generally not designed to be extendable. However, there may be an exception if your function includes calls to other pluggable functions.

If this is the case, you can extend the function by overriding the functions within the main function, without having to replace the whole of the main function.

In most cases, you can only extend a parent theme function in one of three ways:

If the function you want to extend is pluggable, copy it into your child theme and add extra code to extend it.
If the function isn't pluggable, remove it from its hook using remove_action() and write a new function (with a different name) on the same hook with extra code. You might want to copy code from the original function into your new function and edit that.
Write a second function which is called on the same hook as the first function and adds extra code that will run before or after the first function. Use the priority parameter in add_action() to specify whether your second function will run before or after the original function.

Summary

Overriding functions in a parent theme is more complicated than overriding template files or styling, but it can be done. Here I've shown you three methods for doing this:

If you're writing your own parent theme, or using one which has them, use pluggable functions so that a function in the child theme with the same name as one in the parent theme will replace it.
Assign higher priorities to functions in your child themes to ensure they're run after those in your parent theme.
Use remove_action() or remove_filter() to remove functions in the parent theme altogether.

Which method you use will depend on the way your parent theme is coded and whether you need to remove the parent theme function altogether or just run another function after it to override it.

Final product image — What You'll Be Creating

WooCommerce comes bundled with archive pages and loops that do a great job, but sometimes you might need to display a bit more information on your main shop and other archive pages.

In this tutorial, I'll show you how you can add the product short description to your archive pages and display it below the product title.

If you want to learn how to use WooCommerce from start to finish, check out my free beginner's course.

FREE
WordPress
A Beginner's Guide to Using WooCommerce
Rachel McCollin

What You'll Need

To follow along, you'll need:

A development installation of WordPress.
A code editor.
WooCommerce installed and activated.
Products added—I've imported the dummy product data that comes with WooCommerce; for details of how to do this, see this guide.
A WooCommerce-compatible theme activated—I'm using Storefront.

Before you start, make sure you've got WooCommerce set up. To add the product short descriptions, you'll follow three steps:

Create a plugin for the function and activate the plugin.
Add a function that outputs the product short description.
Identify the hook in WooCommerce that we need to hook the function to, and attach the function to that hook.

So let's start!

Creating the Plugin

In your wp-content/plugins directory, create a new PHP file. I'm calling mine tutsplus-product-archive-short-descriptions.php.

Open the file in your code editor. At the top of the file, add this:

<?php
/**
 * Plugin Name: Tutsplus Display Product Short Descriptions in WooCommerce Archive pages
 * Plugin URI: https://code.tutsplus.com/tutorials/woocommerce-adding-the-product-short-description-to-archive-pages--cms-25435
 * Description: Add product short descriptions to the loop in product archive pages (requires WooCommerce to be activated)
 * Version: 1.0
 * Author: Rachel McCollin
 * Author URI: https://rachelmccollin.co.uk
 *
 */

This sets up the plugin and gives WordPress everything it needs to activate it.

Now go to the Plugins screen in your WordPress admin and find the plugin:

Now activate it.

At first it won't make any difference as you haven't populated it. Here's what the main shop page looks like right now:

Writing a Function to Output the Short Description

The short description for products in WooCommerce uses the excerpt that you'd find in normal posts, so to display it all you need to do is display the excerpt for the post.

In your plugin file, add the code below:

function tutsplus_excerpt_in_product_archives() {
    the_excerpt();
}

It's as simple as that! But now you need to hook your function to the right action, so that it's output in the correct place in your archive pages.

Hooking the Function to the Correct Action

Let's take a look at the file in WooCommerce that outputs the content of the loop on archive pages. This file is content-product.php, and you'll find it in the templates folder in the WooCommerce plugin.

The file includes a number of action hooks, all of which are used by WooCommerce to output different content.

As we want to display our excerpt below the title of the product, the hook we need to use is woocommerce_after_shop_loop_item_title. As you can see from the content-product.php file, it's already got two functions attached to it, woocommerce_template_loop_rating() and woocommerce_template_loop_price(), which have priorities of 5 and 10 respectively. So we need to hook our function with a higher priority number, to ensure it fires after those. I'll leave some leeway and use 40 as the priority.

Beneath your function, add this:

add_action( 'woocommerce_after_shop_loop_item_title', 'tutsplus_excerpt_in_product_archives', 40 );

Now save your plugin file and refresh the shop page in your browser. You'll now see the product short descriptions below the product names:

Restricting the Length of the Product Descriptions

If your product short descriptions are long, they could mess up the layout of your shop page. Here’s how it looks with a longer description:

Personally I'd use shorter descriptions on a live site, and keep the more detailed information for the long description. But what if you want to use a longer short description on your product pages but restrict their length on the main shop page?

You can do this by using the wp_trim_words() function in your function to display the excerpt. Edit the function so it looks like this:

function tutsplus_excerpt_in_product_archives() {
    echo wp_trim_words( get_the_excerpt(), 10 );
}
add_action( 'woocommerce_after_shop_loop_item_title', 'tutsplus_excerpt_in_product_archives', 40 );

Your product short description will be displayed limited to the number of words you specified in your function:

Hiding the Short Description on the Product Page

Another thing you might want to do is use the short description for the shop and archive pages, and use just the long description on the individual product pages.

By default, WooCommerce displays the short description at the top of the product page and the long description lower down:

To remove the short description from the product page and add the long description in its place, you need to unhook the function that outputs the short description and replace it with one outputting the content, which is the long description.

Add this to your plugin file:

function tutsplus_remove_short_desc_product() {
	remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
	add_action( 'woocommerce_single_product_summary', 'the_content', 20 );
}
add_action( 'init', 'tutsplus_remove_short_desc_product' );

This will remove the short description form the top of the product page and replace it with the long description. But the long description is now duplicated at the bottom of the page, so you need to remove it from the product tabs. Do it with another function, hooked to the woocommerce_product_tabs hook:

function tutsplus_remove_product_long_desc( $tabs ) {

    unset( $tabs['description'] );
    return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'tutsplus_remove_product_long_desc', 98 );

Now you’ll find that your individual product pages have the long description at the top instead of the short one:

Summary

Because WooCommerce outputs nearly all of its content using action hooks, it's straightforward to add more content by writing functions and attaching them to those hooks. In this tutorial you've learned how to add product short descriptions to your product archives. If you wanted to take this further, you could include one or more conditional tags in your function to do this on specific archive pages.

Add the best WPBakery add-ons and extensions ever developed to your page builder and add give your website visitors the experience they need. From carousel add-ons to extra WooCommerce product extensions, these WPBakery add-ons and extensions will provide endless new possibilities.

The WPBakery add-ons and extensions available on CodeCanyon will allow you to add extra features not only for your website visitors but for you in the back end of your site, making it much easier to manage your WordPress website.

Create a more powerful website by adding an extension or add-on to your WPBakery page builder today!

The Best WordPress WPBakery Page Builder Add-Ons & Extensions on CodeCanyon

Discover over 7,000 of the best WordPress plugins ever created on Envato Market's CodeCanyon. With a cheap one-time payment, you can purchase one of these high-quality WordPress plugins, extensions, and add-ons.

Here are a few of the best WPBakery (Visual Composer) add-ons and extensions available on CodeCanyon for 2020.

Best-Selling WordPress WPBakery Page Builder Addons Plugins on CodeCanyon — WordPress WPBakery page builder addons and plugins available for sale at CodeCanyon

These versatile and unique WPBakery add-ons and extensions will help you get the most out of your website. While WPBakery is a complete page builder, the feature-rich add-ons and extensions will allow you to add a wide variety of features to your website, such as:

carousels
extra WooCommerce features
audio players
content boxes
and much more

These extra features and functionality are a must-have for your WordPress website, so don't miss out! Head on over to CodeCanyon and choose from the premium add-ons and extensions available.

18 Best WPBakery Page Builder Addons & Plugins

Here are 18 of the top-rated WPBakery (Visual Composer) add-ons and extensions that are available for you to download on CodeCanyon:

1. Ultimate Addons for Visual Composer

It’s no surprise that Ultimate Addons for Visual Composer is one of the highest-rated and best-selling addons for WPBakery Page Builder. With 20 updates since its inception, this is an addon that works consistently to stay ahead of the competition and deliver a product that meets the needs of a wide range of designers. Notable features:

parallax and video backgrounds
video tutorials
over 40 unique elements
15 demo pages for inspiration
and more

2. Visual Composer All In One Addons

One of our most popular WPBakery (Visual Composer) plugins, Visual Composer All In One Addons combines 64 different functions in one powerful tool that extends WPBakery Page Builder wonderfully. Notable features:

carousel and gallery
to-do list and price table
draggable timeline
iHover with 35 transitions
and more

3. Unlimited Addons for WPBakery Page Builder

With over 700 addons and 30 predefined templates, Unlimited Addons for WPBakery Page Builder is the largest add-on bundle available for WPBakery Page Builder (Visual Composer). This mega-pack will help you build website headers and footers or create pages or sections for team member profiles, testimonials and reviews, design simple sliders, carousels and banners, etc. Notable features:

one-click import layout from any WPBakery Page Builder page
import only the addons you want to use
lifetime updates
24/7 support
well-documented

4. Kaswara Modern Visual Composer Addons

Kaswara Modern Visual Composer Addons offers 45 fabulous elements and over 550 shortcode options, and in just two years it has become a powerful contender in the WPBakery Page Builder add-ons and extensions market. Notable features:

contact form designer
shortcode manager
replica section
icon and Google font managers
and more

5. WooCommerce Extra Product Options

WooCommerce Extra Product Options helps you extend the functionality of your WooCommerce store by creating more product options, add conditional logic (within the form builder), and build a wide variety of forms. Notable features:

control the placement of your new fields
full support for checkboxes, radio buttons, and select boxes
prices can change depending on the selected product variation
enable different options for certain roles
and more

6. Composium WPBakery WordPress Plugin

One of the top sellers at CodeCanyon, Composium WPBakery WordPress plugin is packed with a dizzying amount of features, including a Google Font Manager with more than 810 fonts, over 70 CSS3 animations, and the option to use any WPBakery Page Builder element in a sidebar. In addition, when you download this extension, you also get a built-in downtime/maintenance manager for your site, which allows you to create a custom maintenance page. Notable features:

over 150 different elements
icon and Google Font managers
custom premium lightbox
template and widget builder
and more

7. Massive Addons WPBakery WordPress plugin

Massive Addons for WPBakery Page Builder

Massive Addons WPBakery WordPress plugin is an all-in-one extension that's packed with enough features to make even the most demanding web designer happy. The latest version has incorporated a ton of user-suggested improvements. Most notably, it has integrated a feature called "container presets", allowing users to preset entire rows or columns.

Notable features:

over 70 customisable shortcodes and addons
31 page templates
supports WooCommerce
over 15 training videos
and more

8. Super Bundle WPBakery WordPress plugin

If you’re looking for a whole host of great effects all in one place, check out this bundle of over 20 fabulous plugins in a single add-on called Super Bundle WPBakery WordPress plugin. Notable features:

hover animation
animated text effects
carousel
background gradient
and more

9. WPBakery Page Builder Add-on Image Hotspot with Tooltip

The Image Hotspot with Tooltip comes bundled with another best-selling CodeCanyon addon, All In One Addons, but for those who don’t own that plugin, this standalone enables you to add a hotspot icon with a popup tooltip to any image on your site. The plugin may not be for everyone but will be of great value to photographers and e-commerce or educational sites. Notable features:

the tooltip feature supports text, images, video, and other kinds of content
hotspot icon’s position easily customisable
hotspot icons come in a variety of colours
and more

10. VCKit WPBakery (Visual Composer) Plugin

VCKit WPBakery (Visual Composer) plugin is a feature-rich collection of over 45 beautifully designed elements with highly customisable features. This handy addon continues to go from strength to strength every year. Notable features:

five pre-designed demo homepage templates
over 45 animation effects
30 gorgeous effects
one-click installation
and more

11. Calendarize it! WPBakery (Visual Composer) Plugin

Calendarize it! WPBakery (Visual Composer) plugin is a feature-rich calendar for your WordPress site that can be used as a standalone plugin or as an addon for WPBakery Page Builder. Notable features:

events countdown
events year view
payment options
social share panel
and more

12. WP Post Modules

WP Post Modules is ideal for creating online magazine layouts, newspaper blocks, creative portfolio showcases, and regular blog feeds using a drag-and-drop interface. Notable features:

seven display styles
20 pre-built home page layouts
grid and list modes
100% responsive design, optimised for retina display
and more

13. Templatera WPBakery WordPress Plugin

Created by the authors of WPBakery Page Builder, Templatera is a WordPress template manager that allows users to create, manage and set access to templates based on user roles or content type. Notable features:

easy content reuse across templates
edit content across templates from one central place
ability to import or export templates in XML format
and more

14. Cost Calculator WPBakery WordPress Plugin

If you’re looking for a WPBakery Page Builder addon that will enable you to create price estimates that give clients an idea of the costs involved in your service or product, Cost Calculator might be the perfect plugin for you. Cost Calculator allows you to easily create quote or price estimation forms for your WordPress site. Notable features:

dropdown menus with image icons
numeric slider
on/off switch
reCAPTCHA
and more

15. FullPage for WPBakery Page Builder

This trending WPBakery WordPress plugin is the perfect addition to your website. This Full Page WPBakery (Visual Composer) add-on allows you to create full-page scrolling websites in WordPress in no time.

It's a great WPBakery plugin to download: it's fully responsive, easy to customize and has a clean code.

16. WooCommerce Page Builder

If you have an online store supported by WooCommerce, this WPBakery WordPress plugin is great for you. This WPBakery (Visual Composer) WooCommerce Page Builder provides a full set of easy-to-use WooCommerce shortcodes.

Use this trending WPBakery WordPress plugin to create fresh and unique WooCommerce stores thanks to its customized Single Product and Product Archive pages.

17. WPBakery Page Builder Clipboard

Clipboard is a best-selling WPBakery WordPress plugin. This WPBakery (Visual Composer) add-on allows you to copy/cut and paste single elements to a stack of elements across pages without leaving the WPBakery interface.

Not only that, you can also export and import content and also, save it in the cloud. A five-star rating proves this is one of the most loved plugins for Visual Composer. User ugurterzi said:

If you have heavy use of the WPBakery page builder, it's such a lifesaver.

18. Mega Addons For WPBakery Page Builder (Visual Composer)

This is a great WPBakery WordPress plugin to have. Mega Addons is a superb WPBakery (Visual Composer) plugin bundle. See what you'll get in this fully responsive plugin with 32+ unique elements like:

Team profile
Info banner
Advanced carousel
Flip box
Timeline
Countdown
Modal popup
Testimonial
And More

It's one of our best-rated plugins for Visual Composer. User-LC said:

It's creative, visually inspiring and very easy to use. The pack is everything I have hoped for and more. They are very useful for non-coders.

Free WPBakery Page Builder Addons & Extensions for Download in 2020

The premium plugins for Visual Composer available on CodeCanyon will offer you the most comprehensive set of features. If your current budget will not allow for the purchase of these high-quality add-ons and extensions, there are free alternatives that you can take advantage of.

Below is a collection of the four best WPBakery templates for free available to download.

1. Livemesh Visual Composer WordPress Free Plugin

Livemesh is a great tool to add to your arsenal if you don't have the budget for a premium WPBakery (Visual Composer) plugin. It features many different website building items such as post grids, bar charts, testimonial cards, and much more. Each element can easily be added to your website by dragging and dropping.

2. Mega Addons Visual Composer WordPress Free Plugin

This add-on collection includes a whopping 28 add-ons that can help enhance your WordPress website. You can expect features such as member profiles, pricing tables, timelines, and countdowns.

3. Ultimate Carousel Visual Composer WordPress Free Plugin

Ultimate Carousel is a versatile extension for your WPBakery Page Builder that allows you to create carousels for any kind of content. Ultimate Carousel is responsive and touch-enabled and is compatible with mobile devices.

4. Image Hover Effects Visual Composer WordPress Free Plugin

This extension gives you the option to add over 80 hover effects for your images with captions. Most of the transitions have thumbnail support, lightboxes, or custom links. This gives your images an interactive component that your users will love.

More Great WPBakery Resources on Envato Tuts+

In this article, we have gone over some of the best premium WPBakery (Visual Composer) addons and free WPBakery plugins available. However, just owning the WPBakery page builder and the add-ons and extensions will not be enough to create a feature-rich website that your users will love. You need to know how to use these tools in order to build a successful website.

Check out the articles below on how you can get the most out of WPBakery and its extensions and add-ons.

Learn More About WordPress

We know WordPress can seem intimidating if you're just starting to use this awesome platform. But don't worry, here I have some resources that might help you with your WordPress website.

Additionally, you can check our fantastic course: A Beginner’s Guide to Using WordPress and our Tuts+ YouTube channel, where you'll find awesome videos like these:

Install a WPBakery Page Builder Addon or Extension Now!

In order to give your website visitors the best possible experience on your WordPress website, you will need to have a feature-rich website.

The premium WPBakery add-ons and extensions available on CodeCanyon will help you add these extra features to your website so that you can gain more traffic and run your business more effectively.

This list of WPBakery Page Builder add-ons and extensions just scratches the surface of the products available at CodeCanyon. So if none of the add-ons and extensions seem to suit your website's needs, there are plenty of other great options to choose from.

In addition to the WPBakery extensions and add-ons, there are thousands of other high-quality WordPress plugins on CodeCanyon that can help you improve your website. The large library of plugins contains everything from marketing to eCommerce and social media plugins.

Find a WordPress plugin that helps your business succeed today!

Do you need to create an Android app for your online store quickly and easily? Did you know that 90% of mobile users spend most of their time online in apps?

By purchasing an eCommerce Android app template on CodeCanyon, you will be able to create a mobile app for your online store without having to hire an app developer.

Android Woocommerce — Android WooCommerce is one of the many high-quality eCommerce Android app templates available on CodeCanyon.

Developing apps is a lengthy and complex process that includes finding the right developer and then designing, developing, and testing the app. Most businesses are not going to have the time or money to get an app developed for their eCommerce store from scratch.

At CodeCanyon, you will be able to choose from all the premium eCommerce Android app templates available and find the perfect template that will help turn your online store into an app.

What Is an App Template?

An app template is a pre-built application with a lot of the core functionality already implemented for you. It allows you to easily customize and add to the template's code to create the kind of app you want.

Why Do You Need an eCommerce App Template?

Developing an app is a costly and time-consuming process. An eCommerce app template is the best way to build your mobile app without breaking your budget. Besides, it comes with all the functional features you need. You just need to customize it to reflect your vision. App templates also come with documentation—all you need to do is follow the instructions.

The Best eCommerce Android App Templates on CodeCanyon

Discover over 4,000 of the best Android app templates ever created on Envato Market's CodeCanyon. For a low-cost, one-time payment, you can purchase one of these quality eCommerce Android app templates.

Here are a few of the best eCommerce Android app templates available on CodeCanyon for 2020.

Best-Selling eCommerce Android App Templates

These fully functional and feature-rich eCommerce Android app templates help you get your online store into an Android app as quickly as possible. With the premium templates offered on CodeCanyon, you will have access to these features and many more:

in-app coupons
package tracking
dynamic layouts
product reviews
full customizable designs

The templates available on CodeCanyon fit a wide range of eCommerce stores, so you can edit the templates accordingly.

Let's now have a look and a hand collection of high-quality Android app templates that you can download and use right now!

Top 15 eCommerce Android App Templates (From CodeCanyon for 2020)

Here are 15 of the best-selling eCommerce Android App templates that are available for you to download on CodeCanyon:

1. MStore Pro

The MStore Pro eCommerce app template for Android is an easy favorite among developers. For those with an existing online shop, it enables easy conversion to a mobile store app, and for those who own a physical shop but don’t yet have an online store, MStore provides a variety of ready-to-use ecommerce mobile app templates to create a mobile store app from scratch.

The template requires no coding skills and is very easy to customize.

2. CiyaShop

The CiyaShop native Android app template allows you to create an eCommerce app without coding. One of the best-rated eCommerce apps for android at CodeCanyon, CiyaShop is perfect for a wide variety of retail stores. There are over 30 demo templates that will give you ideas on how to use the template to suit your specific needs. The app synchronises easily with your WooCommerce site.

Some other great features are:

in-app coupons
delivery tracking
reward points
multi-currency conversions

3. Ionic 3 App for WooCommerce

The Ionic 3 App for WooCommerce android shopping application template for Android allows you to build an app that will connect to your WooCommerce store and sync categories and products in real time. It supports almost all payment methods, allows customers to search products globally on the home page and filter products within categories, allows customers to review items, leave feedback and read the reviews posted by others, supports automatic login, and much more.

4. Electromerce—Flutter based eCommerce UI

This high-quality eCommerce app UI template uses Flutter technology and is compatible with not only Android but also iOS. The template features a social login, detailed product descriptions, and a quick and easy way to check out on the store. The spacious and modern design gives you a starting point to create a professional eCommerce Androp app. You can view a live preview of the app template to see if it's right for you!

5. Markeet

Markeet is an eCommerce app template developed using native languages which ensures that your apps will run smoothly and quickly. It also uses Google Material Design for a great UI experience. Some of its best features are its simple drawer menu, list category view, product and category details view, and slider feature.

6. Android eCommerce

Android eCommerce is a great app template for store owners and developers alike. It provides a variety of ready-made eCommerce pages to help you create your own personalised Android shopping app quickly and easily.

It includes a number of useful features like coupon support, social share, wish lists, product filters, product sorting, ability to manage and track orders, and more. Apart from the usual support, the developer provides customisation and installation services at a reasonable price.

7. WooCommerce Mobile App

WooCommerce Mobile App allows clients to connect to their WooCommerce store and sync categories and products in real time.

Once customers register and log in, they can shop, pay for items, view order status and order history, and manage their account. Useful features include a featured products page, categories, a powerful search and filter, list and grid views, ratings, and reviews.

8. Ecommerce Online Shop App

Ecommerce Online Shop App is an Android app that follows the Material Design guidelines to ensure a great UI experience. It comes with a powerful admin panel to manage every aspect of your store’s setup and operation. You can create, update, or change product menus and categories. You can configure tax rates and currencies. Additional features of this template include a bottom navigation menu, cart and checkout menu, and the ability for buyers to build profiles and see their purchase histories.

9. Ionic 5 App for WooCommerce

Ionic 5 App for WooCommerce is an app template that can be used to build hybrid apps that function on multiple platforms. It is easy to use, with no coding skills required. It comes with highly customizable account layouts, login layouts, category layouts, product layouts, 150 prebuilt colors, and more. It supports WooCommerce reward points and rewards. Customers can view their reward points balance and redeem them for a discount at checkout. It also comes with a robust push notification system for both the customer and seller.

New eCommerce Android App Templates on CodeCanyon

The following newest additions to the Android eCommerce app templates category on CodeCanyon are already making waves, and they promise to be popular templates for developing Android apps for your online stores.

Some are based on the Flutter framework developed by Google. Flutter makes it easy to develop applications for Android and iOS. Development in Flutter is faster than native, and the performance of apps is as good as that of those developed natively.

10. E-Commerce Flutter App UI Kit

This eCommerce UI kit saves you time when it comes to coding your front-end layouts for Android and iOS. The layouts in this UI kit have clean code, are easy to customize, and are easy to connect with your back-end. They are also fully responsive and support multiple languages, and you can use the animation controller to animate images and so on.

11. Fluxstore Pro—Flutter Ecommerce Full App

Fluxstore Pro will save you thousands of hours of designing, developing and testing a mobile app. It is made using the Flutter framework from Google. It comes with impressive UX designs and all the basic eCommerce functionalities needed for your app to function smoothly. Other impressive features include Google Analytics, easy customization, white-labeling, deep linking, and offline image caching to speed up the loading performance.

And if your business already has a website built on WooCommerce, Magento, or OpenCart, you can integrate with FluxStore Pro in just a few steps and quickly release the final app to both the App Store and Google Play.

The download package comes with full documentation that includes the full source code, designs, documents, and videos that help you install in the smoothest way.

12. Fluxstore WooCommerce—Flutter Ecommerce App

Fluxstore WooCommerce has the same features as Fluxstore Pro but is built specifically for the WooCommerce platform. So if you have a store built on WooCommerce, you can transform it into an Android or iOS app in just a few steps.

Fluxstore WooCommerce also has a dynamic blog with a robust set of built-in components that allow users to engage with your content and products. Components include a banner slider, banner grouping, multi-column product view, tinder animate layout, and a stack animate layout.

In addition, you can do deep linking, enable sell affiliate products, and more.

13. PS Store

Store owners can now build an app for their store using the PS Store template. The front-end comes with features like user registration, user login, and user logout. Users can also log in using their Facebook accounts. They can leave comments or rate and review the store. The back-end comes with features like most popular product, most purchased categories, coupon discounts, and push notifications.

14. Multi-Store

If you want to create multiple stores for the same business that use different payment gateways, then the Multi-Store Android app template is perfect for you! It will save you over a thousand hours of app and back-end development time. You can create unlimited shops, unlimited products, unlimited categories, and unlimited subcategories. It also comes with all the necessary features: shopping cart and basket, checkout options, multiple shipping methods, payment by PayPal and Stripe, support for multiple languages, and RTL layouts.

15. ESHOP Native Android eCommerce App

The ESHOP Native Android eCommerce App has already received high ratings by users on CodeCanyon. You don't require coding skills to customize and configure this easy-to-use app. You can easily set up your eCommerce store by following the instructions provided in the clear documentation. The app uses WooCommerce as the back-end, and it comes integrated with PayPal. The admin also can push simple messages and product and website promo images using the Firebase push notification console.

Now that we have gone over the best premium templates available, let's take a look at five of the best free eCommerce Android apps.

5 Free eCommerce Android App Templates for Download in 2020

The premium Android app templates available on CodeCanyon will undoubtedly give you the most advanced features for your eCommerce app. But if you're on a tight budget, you might not be able to afford to purchase these premium app templates. Don't worry—you can still create an eCommerce app for your business.

To help you with the creation of your app if you are on a strict budget, I have collected five of the best free eCommerce Android app design kits for you to download below. These aren't complete working apps like the ones you can find on CodeCanyon, but they have all the graphic design and assets that you need to create a great-looking app.

1. Fashion E-Commerce Mobile App

Fashion E-Commerce Mobile App Sketch Resource

This free Android app design is ideal for eCommerce stores that sell clothes. The layout and design are modern and spacious and give your users a quality app experience. All the standard features of an online store are in this template.

2. Shopper UI Kit Sketch Resource

Shopper UI Kit is a complete web e-commerce resource. It contains everything you need for your next e-commerce website, and it features a clean and effective UI kit. The flexible UI allows you to put up any type of product you are selling in a visually appealing way.

3. DeWalt Concept Ecommerce Website Sketch Resource

With this diverse template, you can choose your fonts, colors, and the spacing of elements. The template allows you to display your products in a standard product viewing design for mobile devices. Download this app design now!

4. eCommerce App Template

No matter the type of eCommerce business you are running, this free template will help kick-start your app development. The template has a visually appealing design that will stand up to other 2020 app designs.

5. E-Commerce UI Kit Sketch Resource

This UI kit makes it easy to customize the views by updating symbols and text styles. In this UI kit, you will have the following features: product search, product details, shopping cart, checkout, shipping details, and much more.

Discover More Great eCommerce Android App Templates for 2020

While the eCommerce Android app templates detailed above are some of the best available for 2020, they may not be the best fit for your online store. If none of the designs mentioned work for your current business or you need even more templates with different designs and functionality, then check out our other articles that contain plenty more high-quality Android app templates:

Best Practices for Building Your eCommerce App

The best practice is to analyze the needs of customers in order to anticipate common customer issues. This means you should put yourself in the place of your customers.

When you take the position of the customer and test the experience of using your own eCommerce website and app, you will see what works for the customer and what doesn't. This will help you come up with user-centered solutions that will in turn guarantee a smooth shopping experience, high conversions, and high customer retention.

So when building your eCommerce web store and eCommerce app, these best practices should be your guiding points:

Understand the end user.
The store design should be beautiful.
Products should be displayed in a clean and uncluttered manner.
Clear and straightforward menus make for painless navigation.
Use call to action (CTA) buttons like Buy Now.
Provide convenient payment and shipment methods.
Use clear but creative descriptions of products.
Use clear language with regards to the shipping, returns, and refund policy.
Make it easy for users to reach you with any questions and concerns.
Have a Frequently Asked Questions section.

Clear Communication All the Way

A great user experience continues after users have bought and paid for their product. Customers will expect to be informed:

when you receive their order and their payment
when the product will ship and when they will receive it
when the product has shipped

Set up an email communication system that does not leave the user in the dark during any stage of the process. In addition, make it easy for users to reach you through a robust contact form and online chat system.

In a very competitive eCommerce market, another facet of communication that should not be overlooked is creating great content for your eCommerce blog and newsletter.

Tips for Creating Great Content for Your Online Store

Be creative with your product photos so they stand out. Stock photos don't set you apart.
Don't forget video, audio, icons, and other media.
Create stories around your products, and don't reproduce manufacturers' descriptions.
Use short paragraphs and bullet points—embrace white space.
Divide content into sections with descriptive sub-headers.
Hyperlink certain words to lead visitors to more content or products.
Don't forget to guide visitors to the next step using call-to-action phrases.

What Every eCommerce App Should Offer

Every eCommerce app should have basic functionalities that allow customers to:

sign up, register, log in, verify and manage their accounts
log in through their social media accounts
search by categories and shop product list
add items to a shopping cart
edit their shopping cart list
pay using methods like PayPal, Stripe, and more
view their order status and order history
receive automated email responses
contact the seller through email
leave comments and feedback, and give reviews and ratings

Take Advantage of the eCommerce Android App Templates Available on CodeCanyon Now!

Developing an app is a costly and time-consuming process. Using an eCommerce app template is the best way to build your mobile app on a budget. An app template is a pre-built application that has the core functionality implemented. This allows you to easily customize and add to the template's code.

The professionally created eCommerce templates available on CodeCanyon come fully featured and can be customized to fit your online store app's needs. These templates come full of features that will be required for an enjoyable user experience.

Whether you are selling clothes, electronics, or books, the best-selling eCommerce Android app templates on CodeCanyon will help you get through the app development in no time and let you focus on running your business.

What are you waiting for? Start developing your eCommerce Android App and start expanding your business!

Building an app used to be the domain of hardcore developers only, but with over 2,500 iOS app templates for sale at CodeCanyon, even complete beginners to coding can build an app. That's because an app template gives you the complete source code to a working iPhone app, with key functions already implemented. Just add features to create the product you want!

Many beginners use app templates as a learning tool to improve their coding skills, while others choose to upload their new app creations to iTunes for approval and inclusion in the app store.

CiyaShop eCommerce iOS Template — CiyaShop is one of the many high-quality iOS mobile app templates available on CodeCanyon.

Integrating an app template into the development process will allow you to start with a professionally designed template, so you can quickly launch your app. Having a template reduces your costs for development and cuts down on bugs. Save time and money by using a premium iOS app template from CodeCanyon.

The Best iPhone and iOS App Templates on CodeCanyon

CodeCanyon has a library of some of the best iOS app templates ever created. With a low-cost, one-time payment, you can purchase these high-quality iOS mobile app templates and bootstrap your iPhone or iOS app project.

Here are some of the weekly best-selling iOS mobile app templates available on CodeCanyon for 2020.

Best-Selling iOS App Templates Available on CodeCanyon

These feature-rich iOS app templates will help you focus on running your business rather than designing an app. With the premium apps offered on CodeCanyon, you will be able to create all types of apps in many different industries, such as:

cryptocurrency
fashion
ride-sharing
restaurant
eCommerce

Head on over to CodeCanyon and find the right iOS app template now!

Top 20 iOS App Templates (From CodeCanyon for 2020)

1. Best-Seller: Universal for iOS

The magic of the Universal for iOS app layout template is that it lets users create just about any app they want by pulling in unlimited content from blogs, timelines, feeds, channels, playlists, or webpages, and easily combining them in one customisable app.

One of the best-selling iOS mobile app templates at CodeCanyon, Universal for iOS supports most popular web resources, like WordPress, YouTube, Facebook, RSS, etc. It also supports AdMob and gives your users the option of removing banners and interstitial ads with an easy in-app purchase.

The iOS starter app is completely based on Objective-C and designed for the latest version of iOS. It comes with step-by-step instructions and video tutorials on how to configure your template from scratch, and it's suitable for both professionals and beginners as no code knowledge is required.

User thesanguy says:

"Universal for iOS offers an extremely flexible code base for a wide variety of app designs. I found the documentation and support to be top notch, and I am a complete novice with Xcode. My app was quickly approved by Apple and I was very pleased with the end result."

2. Best-Seller: WebViewGold

The WebViewGold Apple app template is another great iOS template that allows users to convert website content into an app. It does so by using a Swift Xcode package to wrap the URL or local HTML into an iOS app. The real genius of this HTML5 iOS app template, though, is that it does its work in just a few clicks. So no coding knowledge is required! WebViewGold is optimised for iPhone, iPod Touch, and iPad.

Apps made with this iPhone web design template are 100% guaranteed by the author to get acceptance into the Apple App Store.

Try this out if you've been looking for template apps for iPad and iPhone. User talimagnum says:

“I have been using this code for a while now and I have to tell it has been awesome. I have never had any trouble and the only time I needed help they answered really fast.”

3. Best-Rated: CiyaShop Native iOS Application

CiyaShop Native iOS Application iOS App Layout Template

Need to create an app quickly and easily that is compatible with WooCommerce themes? Look no further! The CiyaShop iOS starter app is an ideal solution for your eCommerce business. If you are a retail store, marketplace, or fashion shop looking to buy iOS app code, then this is the right app template for you.

Here's what you can expect from this eCommerce iOS template:

WooCommerce theme synchronization
reward points
multi-vendor support
push notifications
delivery tracking

View the live preview of this iPhone and iPad app design template to see if it's the right fit for your business!

4. WooBox: WooCommerce iOS App

The ideal app for shoppers, the WooBox app template helps developers create their own beautiful eCommerce app for mobile shoppers. WooBox includes more than 40 professionally designed screens to feature products. Other great features of this eCommerce iOS template include:

light and dark mode themes
RTL support for Arabic and Hebrew
Admob integration
wish list functionality
and more!

If you need to buy template apps for iPad and iPhone for eCommerce, then WooBox is what you've been looking for.

5. WoWonder IOS Messenger

WoWonder IOS Messenger iPhone App Template

WoWonder IOS Messenger is an iOS chat application template that allows end users to chat together on their mobile phones via the app or send and receive messages. The iOS template features:

registration page
ability to upload and share images as well as voice recordings
offline access to all messages and recent conversions
ability to control privacy and profile settings

You can't go wrong with WoWonder if you've been looking to buy Xcode templates. User darkpixel66 says this about the iPhone app template:

"Great support and communication."

6. Store Finder Full iOS Application

When you need to find a specific item or store, and don’t want to spend all day driving from one end of town to the other or doing laps around the mall, a store finder app is a lifesaver.

Enter the Store Finder iPhone app template, a developer’s dream, with a long list of must-have features like:

call, email, and SMS integration
Google directions
social media logins
pinch and zoom navigation
and so much more!

7. Web2App for IOS

Web2App for IOS iPhone Web Design Template

Web2App for IOS offers you another way to convert your website into a real iOS app. This HTML5 iOS app template offers great features like:

tabs
built-in advertisements
notifications
easy customisation
styling options

This iPhone app HTML5 template is highly customisable and ships with comprehensive documentation, video tutorials, and step-by-step instructions that make it easy to get started. You can choose from countless display modes and colors to suit your requirements, and of course customise the AdMob integration.

User misterzenith says this about the Web2App iPhone web design template:

“Design quality is awesome with well-commented code.”

8. Item Finder MarketPlace

Item Finder MarketPlace eCommerce iOS Template

The item finder marketplace allows you to easily set up an eCommerce marketplace with all the necessary features such as reviews, social media sharing, promotions, and detailed product descriptions. Other notable features for this eCommerce iOS template include SMS integration, user profiles, image sliders, and social logins.

If you need to buy Xcode templates for your eCommerce marketplace, this template is perfect. See what this app is capable of by viewing the video preview.

9. Classify

Classify is an all-in-one iOS app template for ads. The iPhone application template allows you to create mobile classified services for professionals. The Apple app template is easy to customize to create just the look you need.

Here are a few notable features for this iPhone app template:

AdMob interstitials
login and sign-up controllers
no external CMS needed
PSD graphics included

Here's what users are saying about this iOS template:

"The developer has created an amazing product that is easy to customize and has fast and accurate customer support." — arudkosky

Download this powerful iPhone app template now!

10. PikLab

The PikLab photo editor Apple app template was inspired by the popular AppStore app, PicLab. This iPhone application template has all the important features of modern photo editors. This makes editing images quick and easy for all users of the app.

Here are a few of the iOS app layout template's most essential features:

text collages
sticker creation
filter, contrast, and texture photo editing
background insertion
PSD icon files included

If you're looking to create a professional photo editing app, then this is the iPhone app template for you.

11. Events—iOS Universal Events App Template

Events is an iPhone app template created with Swift that allows developers to create their own mobile iOS events app to store and share events happening all over the world. End users are able to submit new events that you can approve and add to your Parse Dashboard.

The iPhone app template also has a button that enables end users to automatically add an event on their native iOS Calendar and to open the address in Maps to get directions. They can also share the event via their social media platform of choice.

User dnederlof says this about the iPhone app template code:

"Great code and some of best support I've seen!"

12. PIXL

PIXL is an app template that comes with a built-in custom image editor for editing images and icons. It also comes with a customizable camera built with the AVFoundation framework. The iOS template allows you to either edit photos from your existing photo library or take pictures with your phone's camera. They're useful features if you've wanted to buy iOS app code for photography.

Here is what users of this iPhone app template are saying:

"Outstanding template and customer support! I highly recommend this app template!"—VL

13. Restaurant Food Delivery and Ordering System

Restaurant Food Delivery Ordering System iOS App Layout Template

This eCommerce iOS template is ideal for any on-demand delivery business or food delivery app like UberEats or Postmates. The process within the app allows your customers to create an account, choose a restaurant of their choice, select the food from this restaurant, and check out with cash or credit.

Here are a few notable features of this eCommerce iPhone app template:

social login
phone verification
restaurant menu screens
seamless checkout
order tracking

14. Woopy

The Woopy iPhone and iPad application design template allows developers to create listing apps that facilitate buying and selling items online. Users can browse by keyword or category. They can also chat with sellers or potential buyers and give feedback on each transaction.

One of the Apple app template’s outstanding features for sellers is the ability to add a ten-second video to their listings. Another is the app’s optional email verification system that gives buyers and sellers extra assurance by posting a verification symbol next to the user’s name.

Customer Kaya09 said this about the iOS template:

“Great support, well-designed app, and code is perfect. No issue with iTunes, approved in a few hours.”

15. SuperView

SuperView iPhone and iPad Application Design Template

SuperView is another great iPhone and iPad application design template created to enable users to easily create a native iOS container for their website. It is ideal for a single-page web app with on-screen or no navigation. Users who want to ease the difficult learning curve associated with the Swift programming language and iOS SDK will really appreciate SuperView.

This iOS app layout template also has some great features you can take advantage of in your app, including:

Firebase or OneSignal push notifications
GPS support
social network login
Google AdMob
support for right-to-left (RTL) languages such as Arabic

User muhsin2905 has this to say about the iPhone and iPad application design template:

"Really good app and really good support. No problem to release to app store. App is online and we are happy. I would buy this App again if I needed it."

16. Instagram Mobile Template

Instagram Mobile iPhone App Template Design

Love Instagram? Want to create your own Instagram-type app? We have just the thing for you. The Instagram Mobile Template is an iOS template that allows developers to create a photo and video sharing app in the vein of Instagram where users can follow, like, comment, and share photos.

The Apple app template allows users to log in with their email, Google, or Facebook accounts and supports monetisation with AdMob. It also supports push notifications and comes with built-in analytics to monitor performance.

User Mbosoft says:

“Customer support, code quality, customizability. I recommend it to everyone. Always new, updated and easy to use. No need for coding knowledge. Just follow the steps."

17. Ads listing, Classified app for iOS

If you're looking to buy iOS app code to start a classifieds app, here's your top choice. By purchasing this iPhone app template code, you can set up in app purchases, multiple ad screens, different color themes, and a lot more.

Features of this iPhone app template design include:

multiple currencies
Google AdMob
account profiles

19. FireApp Chat IOS (Inspired by WhatsApp)

Need to create a messaging app? This iPhone app template design will help you build a WhatsApp-style app in no time. The iOS starter app will allow users to easily communicate with their friends through messages and video calls. Users can share images, video, audio, stickers, location, and contacts when you set up the FireApp iOS template.

20. ExpensesApp

We end our list of professional iOS app design templates with ExpensesApp. This is a great iPhone app template design that lets users manage their income and budgets. ExpensesApp uses a minimal layout that's easy for users to navigate. It comes with step by step documentation for easy setup, and it's 100 percent ready for the AppStore. If you've been looking for Apple template apps that can help people manage their money, try out ExpensesApp.

5 Free iOS App Design Templates to Download in 2020

The premium iOS mobile app templates available on CodeCanyon will undoubtedly give you the most advanced features and the best possible user experience. They are complete apps with full source code—in many cases you can customize them to create your own working app, without any coding. However, if you're on a tight budget, you might not want to use a paid template. The good news is that there are iPhone app template free download alternatives to the premium Apple template apps found above.

Many iOS app design templates or UI kits have been created by designers and are free to download and use in your own project. To create an app from one of these free app design templates, you will need to do all the coding yourself, though. The UI kit or design template will only include the layout and graphics for your app—you'll have to figure out how to turn this design into a real app.

Below are my picks for the five best free iOS app design templates available on the web.

1. Move

The Move iPhone and iPad app template is free and will give you a clean and simple design that users can easily navigate. It comes with 12 different templates that will work for businesses and startups of all different types.

2. Payment App UI Kit

If you need to accept payments on your app, then this free iOS app template UI kit features 11 different screens that will help your users send and receive money from contacts or people nearby. A few of the included screens in this kit are expense log, security login, contact chat, and manage money screens. Try this out if you need an iPhone and iPad app template that's free .

3. Amazon Refresh Design Sketch Resource

Amazon Refresh Design Sketch Resource iPhone App Design Template Free Download

This UI kit builds on the Amazon Marketplace UI and gives it a more modern feel. The iPhone app template free download kit comes with three screens that will help your business look professional. This iOS app design will make a great accompaniment to your online store app.

4. Restaurant Wireframe

If you're running any type of restaurant, fast food place, or food delivery service, this wireframe can be adapted to your needs. It's minimal design looks great and is hard to find in other iOS app design templates that are free online. The wireframe features two screens for searching specific types of foods and locations of the different eateries. If you've been looking for a restaurant iOS app design templates for free online, try out this wireframe.

5. Book App Concept

This iPhone app design template free download features a sleek and modern design that can not only work for books but for magazines as well. You can scroll and search through different books and magazines quickly and efficiently with this iPhone and iPad app template that's free.

Explore More Great iOS App Templates for 2020

While the iOS mobile app templates mentioned above are some of the best available for 2020, they may not fit your business's needs.

If none of the templates mentioned work for your current business or you need even more templates, then check out our other articles that contain plenty more ideas for high-quality premium and free iOS app templates:

So what are you waiting for? Get started on your new app today!

Web application development is difficult. There is no other type of application that is as involved, or requires you to understand multiple languages, frameworks, and platforms, as web applications. The most basic web application is comprised of two separate applications:

The server-side application to manage data.
The client-side application displays that data to the user.

The simplest application is written in two languages—one for the server, and HTML for the client. But that's not all: modern applications require you to understand many languages, frameworks, and development tools. At best, an application is developed by multiple teams that can individually focus on smaller pieces of the larger whole. At worst, a team as small as one person develops the entire application.

But the story doesn’t end when an application is “finished”. After a lengthy and involved development processes, there are countless hours of testing for bugs, security issues, integration, performance, and user experience. Although many developers won't admit it, performance and the user experience are often overlooked. The result, of course, is that slow, unrefined applications are released into production.

That’s exactly why tools like Raygun’s Application Performance Monitoring (APM) and Real User Monitoring (RUM) exist. They provide developers the means to quickly analyze not only how your application performs in production, but it pinpoints the exact performance issues down to the method or database query, as well as visualizing your visitors’ experiences.

In this article, I will walk you through my experience using Raygun’s APM and RUM to pinpoint issues in a live, in-production website and the steps I took to fix them.

The Problem: A Legacy Application With a Complex Codebase

I work in a fast-paced environment where quantity is more important than quality. That’s not to suggest the software I or my co-workers write is subpar; our applications work well. But the demand on our time requires us to focus more on bugs and security than performance and the user experience.

I recently used Raygun’s APM and RUM to monitor our main public web application: an informational website for the company’s investors. It is written in C# and runs on the .NET 4.6.x runtime.

This application started as multiple small projects written by a team of three people with minimal communication. The projects shared a “core” library that quickly grew into a massive, unwieldy behemoth with a lot of duplicated functionality (as I said, there wasn’t a lot of communication).

Over the years, the multiple projects morphed into a single large application. It pulls information from multiple MSSQL databases and an IBM DB2 machine to provide visitors with a wide array of economic and industry information. It interacts with other systems on the network, ranging from mail and file servers and other RESTful API services to perform other tasks.

I should also mention that I am somewhat unique in that I have a heavy IT background. My job title is “Programmer/Analyst”, but my actual duties consist of network and systems admin, programmer, and analyst. So when it comes to analyzing any issue, I'm equipped to examine both the code and the systems it runs on and interacts with.

Identifying Performance Issues

I know that my application has several performance issues; one of them is the authentication experience. Visitors must first authenticate using their credentials and then provide their OTP (one-time passcode) for two-factor authentication. Some visitors use a separate authenticator app on their mobile device to generate their OTPs, but most visitors receive their code via email. For the latter group, the authentication experience can take anywhere from 1 to 30 seconds, with most visitors experiencing longer waits.

After installing and configuring Raygun’s APM agent (a very simple process), I started seeing trace data in the dashboard within a minute. The dashboard gives you a glimpse of your application’s performance issues, providing tables and graphs showing the slowest requests, class methods, traces, SQL commands, and external API calls. Sure enough, some of the immediate offenders were related to the authentication process.

The top two slow URLs are used during the authentication process for visitors with emailed OTPs. Both are concerning (holy cow! 31 seconds for one request for /resend2fa). I certainly want to fix all the issues, but my time is limited. Therefore, fixing some of the issues with the /login endpoint is my priority.

Judging from the data provided by the “Slowest requests” table, I already suspect that the culprit is related to the process of sending emails. To be sure, I click the /login link to view the data that APM collected on that URL.

Analyzing the Data

APM collects a lot of information for every request, and it is extremely helpful because it can break down a request into its smaller parts—the methods that execute to provide the visitor with a response. The following screenshot shows the methods, ranked slowest to fastest, for the /login URL:

As expected, the main issue has something to do with the email process. It’s also interesting that the IBM DB2 ADO.NET provider is used during authentication. It shouldn’t be, and it's taking a rather significant amount of time to clear error info (as denoted by the call to IBM.Data.DB2.iSeries.MPConnection.clearErrorInfo()) that shouldn’t even be there. But that’s an issue for another day.

Apart from daily notifications, all emails sent by the website are dispatched on demand. The code that sends these emails is used in a variety of other applications that does not exhibit any performance issues. So in my mind, neither the code or the email server is at fault—there's something wrong on the machine that runs our public site.

There are so many things on a computer system that can cause performance issues. So, after viewing the logs and not seeing any apparent causes, I decide to spin up a new virtual machine and test the website on it. After installing the APM agent on the new machine and testing the login process, I notice a tremendous improvement.

The above screenshot shows the breakdown of where the application calls the SendMessage() method. Simply transferring the application to another machine cut the login process down by 26 seconds! While that's certainly a huge improvement, it still takes an average of 4-5 seconds for the initial login process.

Examining the flamechart for a single /login request (shown below), I can clearly see that sending an email is still an issue because SendMessage() still takes at least 3 seconds to completely execute.

I can solve this problem by submitting the email message to a queue or batch, and let a separate process send the message. But that feels like a work-around to me. I'd rather find and fix the issue, but I also need to manage my time. There are other, arguably more important projects that I need to complete.

Analyzing the User Experience

Raygun's APM gives you clear performance data for your server, but that's only half of your application. What happens in the browser is just as important as what happens on the server, and Raygun's Real User Monitoring (RUM) gives you insight into how your users experience your application. Not only can it track your users' individual sessions and provide usage statistics (such as number of page visits, durations, and browsers), but it can also give you an accurate picture of their experience as they navigate from page to page.

RUM also displays each requested page and breaks down a its load time into different factors, as shown here:

The /cico URL in this screenshot has a rather high server time of 5 seconds, which is understandable because that page calculates a lot of data gathered from multiple sources on the fly. But now that I see that working with live data greatly slows down the page load, I need to implement a caching/summarizing solution.

Notice that the /takepay URL has a rather small server time (it works with cached/summarized data), but it has a large render time due to rendering interactive graphs with many data points. So, I can easily solve the slow server response for /cico by daily caching or summarizing the data it works with in a separate process.

But there's more to performance and a user's experience than just response times; when properly configured, RUM catalogs all requests—including XHR, as shown below:

The first thing that caught my eye were the 30+ requests for the /settings/email-alerts URL. Either 30+ people viewed/changed their email alert settings, or that XHR is automatically executed on one of the pages. Unfortunately, RUM didn't give me an immediate idea of what page made the XHR, but I did eventually find the culprits when viewing the performance reports for various pages:

Those needless XHRs do contribute to the load time, and eliminating them can make a big difference..

Conclusion

Raygun provides an invaluable service. As my experience shows, by using APM and Real User Monitoring, you can easily monitor your application's performance.

They automatically pinpoint the performance issues on both the server and client, which is vital in a fast-paced environment. They truly are fantastic services and you can try them free today!

Do you want to build a single app that works for both Android and iOS? With React Native, your team no longer has to build a separate app for both iOS and Android. A single code base makes it possible to build your app once and deploy it everywhere.

On top of this, React Native apps are coded entirely in JavaScript so that it's easier for developers to create an app using a language that they already know.

However, while React Native has made the process easier, it doesn't mean it's simple. Building an app from scratch with React Native is still a lot of work!

That's where React Native app templates come in. When using a React Native app template, your team begins their project with a solid code base, documentation, and a set of mobile app designs that can cut down on development costs immensely.

On CodeCanyon, there are many React Native templates to choose from. In this article, I'll walk you through some of the best React Native app templates available.

The Best React Native App Templates on CodeCanyon

CodeCanyon has the best React Native templates on the internet, with nearly 200 currently available. Ratings and reviews help to make sure you pick the right template for your project, and the extended support makes the template developers available to you should you need any assistance.

React Native app templates available on CodeCanyon

Check out all of the available React Native templates for 2020 on CodeCanyon now.

21 Best React Native App Templates (From CodeCanyon for 2020)

Let's have a look at the best React Native mobile app templates available on CodeCanyon.

1. The Best-Selling React Native Template: MStore Pro

If you already have a WordPress, WooCommerce, or Shopify site, a React Native theme can make it easy to turn that site into a mobile app.

MStore Pro React App Template — MStore Pro

One of the highest-selling React Native templates for 2020 available at CodeCanyon, MStore Pro allows users to convert their existing online shop to a mobile store app.

The template requires no coding skills and is very easy to customise. It's fully integrated with WordPress and WooCommerce, supports PayPal, Stripe, and COD payment methods, and allows users to log in with their Facebook account.

To learn how to create your own app with MStore Pro, check out our tutorials.

2. Best React Native App Builder: React App Builder

React Native app builders make it easy to create any kind of React Native mobile app. These are multipurpose tools that save development time and make it possible for even non-developers to build an app for iOS and Android.

React Native Template React App Builder — React App Builder

React App Builder is a multipurpose React Native app builder that helps developers and non-developers alike create any kind of iOS or Android app they want—chat apps, event apps, recipe apps, shopping apps, restaurant apps, etc.

All you need to do is choose one of the available React Native templates, edit and reorder the app’s more than 30 sections, customise the design, colours, and layout, add your content, and your app is ready to publish on Google Play and the App Store. It's a fluid, easy to use option that's more functional than many React Native Expo templates that are free.

3. Cut Down on Development Time With Antiqueruby

Antiqueruby React App Template — Antiqueruby

Antiqueruby is a React Native template app that's every app developer's dream. This all-in-one React Native app template is designed to save developers hours of work by providing stylish and clever UI and UX components to customise their apps.

Created using Material Design, it offers over 140 React Native screens for profiles, sign-ins and sign-ups, social media, and navigation. It's no surprise that Antiqueruby has become one of CodeCanyon’s bestsellers in this category.

4. BeoNews Pro

BeoNews Pro Reactive Native App Layout — BeoNews Pro

BeoNews Pro is a rather cool React Native Theme that allows users to create a mobile app using any of the content on their WordPress site, including video, photos, and blog posts. BeoNews Pro supports both Facebook and Google logins, and it stores user data on Firebase that can synchronise between devices.

5. EvaStore: React Native Shopify Store

EvaStore Reactive Native Mobile App Design

EvaStore is a React Native mobile app design template that will help you convert your Shopify online store into a mobile app. To help you do this, you can choose a React mobile template from a massive library of templates. In addition, they come in many styles, each with a different look and feel and offering different types of navigation.

Directory Listing React Native App Templates

Directories are some of the most profitable online businesses. These directory listing React Native app templates help developers create profitable listing apps for their clients.

6. ListApp: Best-Selling React Native Directory App Template

ListApp React Native App Layout — ListApp

ListApp is a great React Native mobile app design for developers looking to create an app with content that takes the form of lists. So if you’re interested in creating an app for the top restaurants, shops, or sights in a specific area, this is the template for you. Some key features available with this app are a map and booking features, social login, and the ability to track bookings.

7. Listar: Listing Directory React Native App Template

Listar is a mobile React Native app template for the classified directory listing industry. It's suitable for many kinds of mobile directory listings, like store locators, city guides, events and attractions, and even real estate applications. The design is quite simple. Its components were made with pure React Native, without using extra libraries, so you can easily customize it for your business.

8. DWT Listing: Directory Listing React Native App

DWT Listing is a React Native app that gives you complete freedom to create any type of directory or listing website. You don't need any coding knowledge to use this React Native template app.

Trending Special-Purpose React Native App Templates

Sometimes, your specialty app or niche won't be covered by one of the generic templates. In this case, you might benefit from a special-purpose React app template that's already geared towards your specific product or application.

9. GrabCab React Native Full Taxi App

Ride-sharing has become more popular than ever. If you're looking to start a local alternative to the international companies, you'll need to start with an app. GrabCab is a React Native theme that's compatible with iOS and Android devices. This React app template features a slick UI, multiple payment options, and great admin features.

10. Lekima—Store Delivery App for WooCommerce

Sometimes ordering in sounds a lot better to customers than going to restaurants. You can help out this market with the Lekima React Native app. It comes with all the features of the best store and restaurant delivery apps:

distance and delivery time estimates
product add ons
social media sign up and login
multiple payment methods

If you're looking for a fully-featured React Native template app that makes home delivery stylish, try out Lekima.

11. GoFit Fitness App Template

If you want to create your own fitness app that covers all aspects of a get fit plan from nutrition to exercise, check out the GoFit app template. This React Native app template features a signup and login screen, main menu, workouts, exercise, recipes, blog, levels and goals, body parts diagrams, and equipment—in other words, everything you need to create the best fitness app. Try it out and find out why GoFit is one of the best fitness React Native templates in 2020.

12. Oreo Fashion—Full React Native App for WooCommerce

OREO is a best-selling React Native app template that's perfect if you want to build mobile applications for owners of physical stores. OREO is also a top choice for converting an online store into a WooCommerce mobile store. Its feature list and user-friendly design makes it one of the best React Native templates for 2020.

13. Felix Travel: React Native Travel App Template

Felix Travel is a mobile React Native mobile app design for building universal travel or booking applications. The template supports many kinds of booking modules, like hotel reservation, tour booking, car rental, flight booking, cruise booking, shuttle bus, and event booking.

The template provides a rich and versatile React Native UI kit. You can choose from 100+ React Native sample screens and 40+ reusable React Native components.

14. Food Delivery: React Native Template

Food Delivery is a component-based application template for React Native. The application has more than 25 components and 50 screen containers, and the visual design can easily be customized.

You can choose from two versions of the application:

Food Delivery Pro: built with React Native CLI 0.62
Food Delivery Expo: built with Expo SDK 37

This powerful React Native starter kit saves you hours of development so you can focus on what makes your app unique. Note: this is just a UI template, no back-end functionality is included.

15. Mr. Pharman—React Native eMedical Shop

Mr Phaman React Native Home Screen Template

Mr. Pharman is a React Native template app for an eMedical shop that makes buying and delivering medicine from local pharmacies easier. It's also perfect for users in rural or isolated areas.

16. Medical and Hospital Mobile React Native App

Medical Hospital Mobile React Native Home Screen Template

Medical & Hospital Mobile App helps you build mobile React Native apps that make it easy to manage small medical practices and hospitals. It's more than just a React Native home screen template. This React Native template project comes loaded with 15 React Native screens, and it uses React Navigation 5. It also uses hooks, and is ready for localization.

17. Soundkit—Mobile Application for Ios and Android

Soundkit - React Native App for Ios and Android

Share music with the world with the Soundkit React app template. Compatible with both iOS and Android, it features a modern design that has music streaming, blog, radio, shop, and more. Soundkit also comes with excellent support if you ever need help. If you want a premium alternative to a React Native Expo template that's free for music, try this one out.

5 Free React Native App Templates

Some of the best React Native app templates are found on CodeCanyon. However, if you just want to try out some of the free options first, here are some free React Native templates that can help kick-start your project.

1. Argon React Native

Argon React Native is an open-source React Native app template built with Galio.io, React Native, and Expo. With Argon, you can create powerful and beautiful e-commerce mobile applications. It features over 200 variations of components like buttons, inputs, cards, navigations, and screens—all built to fit together and look amazing. It's a nice option for a React Native Expo template for free. Check out the GitHub repo.

2. React Native Starter Kit

This React Native Starter Kit will help you kick-start your next project! It comes with a lot of the common React Native boilerplate features, and it can also help you learn React Native. It has a wide range of popular features around user registration and login, as well as popular SDK integrations, such as Firebase and Facebook. If you need a React Native home screen or full app template for free, try out this starter kit.

3. Food App Template

Food App Template Native React App Template Free

This free React Native app allows users to browse food recipes, read their description and cooking steps, and see their ingredients. For each ingredient, users can also browse all the recipes that use that specific ingredient. The app also has support for recipe categories and comprehensive native search functionality. Additionally, all the data feed is modularized, so you can plug in your own back-end effortlessly.

4. React Native Starter

React Native Starter is another template that makes it easy to start your app. This allows you to focus on coding the features that set your product apart from the competitors! This starter template comes with a number of built-in components that enable developers to develop and deploy their React Native application faster and easier.

5. React Native Walkthrough Flow

Get started with the development of your app by downloading this beautiful, fully coded React Native walkthrough flow template. Highly modularized, it supports an unlimited number of onboarding steps that can be added with only one line of code.

Why Use React Native Apps?

You no longer need to build your mobile app separately for each type of device you want it to run on. With React Native, a single code base makes it possible to build your app once and deploy it everywhere.

With React Native app templates, your team begins their project with a solid code base, documentation, and a set of screens that can cut down on production costs immensely.

Mobile App Design Tips for React Native App Layouts

Finding an excellent React Native app layout is the first step to your app's design. But there's always room to take your design up a level. Try adding these useful tips to have user friendly React Native mobile app design.

1. Keep It Minimal

Your React Native template for apps may come with many useful elements, but the most user-friendly design will use them sparingly. Reducing this clutter makes each screen feel easier to understand.

2. Be Consistent

While each page of your React Native theme doesn't have to look identical, every variation must fit the same design language. This means don't use serif fonts on one page and sans serif type on another. Inconsistencies in design look unappealing and unprofessional, so it's important to keep this tip in mind.

Drawing icons placement for ui design (Envato Elements).

3. Don't Underestimate Speed

Just because it looks great doesn't mean your work is done. It's important to test out the speed of your React Native app layout. Sluggish apps are a quick way to make your audience lose interest in your hard work. The ideal loading time for an app is two seconds according to Free Code Camp. Use this as a benchmark for your React Native app mobile design.

Choose Your React Native App Template

If none of these React Native app templates are quite what you're looking for, you can find more on CodeCanyon. And if you want to learn more about React Native app development, check out some of our other posts.

Get a good overview of the React Native templates and tools that are available, and then check out how to use a React Native template in your own project.

Designing an app from scratch is no easy task. That's where Envato Elements comes in. With high-quality mobile app design assets, you can create a profesional application without having to outsource any of the work. Using UI kits, wireframing, icons, and other types of downloadable mobile assets allows you complete control over the app creation process for an affordable price.

Mountify Mobile UI Kit — Mountify is one of the many high-quality mobile app downloads available on Envato Elements

The downloads on Envato Elements include everything you need to design and create an entire mobile application. Head on over to Envato Elements and see for yourself the quality of mobile app UI design downloads avaialbe.

The Best Mobile App UI Design Assets Available on Envato Elements

Envato Elements has thousands of the best mobile design assets available on the web!

For a low monthly cost, you can access this massive library of templates, wirefreames, UI kits, fonts, backgrounds, and logos that will help you bring your app idea to life.

Not only can you access all these mobile app downloads, but you get unlimited access to photos, videos, web templates, and many other resources that could be helpful to you.

All the mobile app downloads in the Envato Elements library are fully customizable, have trendy designs for 2020 and 2021, and can be used right after downloading them.

Graphic Templates UI Kits Envato Elements — Best-Selling Mobile App Downloads on Envato Elements

These feature-rich mobile app design elements are a life saver if you are trying to create a mobile app on a budget. The best part is, you don't even have to compromise on the quality of the mobile app design.

The downloads available on Envato Elements will allow you to create apps such as:

online stores
news apps
social media apps
educational apps
and much more!

Head on over to Envato Elements and download one of the many mobile app downloads!

Now let's go over some of the best selling mobile app downloads available on Envato Elements.

Top 17 Mobile App Downloads (From Envato Elements for 2020 and 2021)

To help you wih your search for only the highest quality resources for building your next mobile app, we have collected 17 best-selling downlods for you to check out below. We broke down the app into various categories such as wireframing, UI kits, fonts, backgrounds, and logos.

Wireframing

1. Mobile Wireframe Kit

Compatible with Sketch and Illustrator, the Mobile Wireframe Kit features over 90 ready-to-use screens which will give you plenty of flexibility in creating the mobile app of your dreams. The kit has hundreds of symbols and elements which are well labelled and grouped in categories to make them easy to find. Best of all, it uses a drag and drop system so you can build your design blueprint quickly and intuitively.

2. Wirey Mobile Wireframe Kit

Wirey Mobile Wireframe Kit is another great option for wireframing your mobile app. With over 200 ready-to-use mobile screens, a thousand elements and an easy-to-use drag and drop system, users can create any number of highly complex projects. All files are compatible with Photoshop and Sketch file formats.

Mobile UI Kits

3. Dashboard UI Kit

Every great mobile app needs an equally great dashboard, and Dashboard UI Kit delivers a wide range of screens so that designers can create a range of dashboards from the very simple to the highly complex. The kit has been designed with Sketch and includes a style guide to help you maintain consistency in design. Another great feature of the kit is that every screen is available for both desktop and mobile.

4. SignUp and Login Mobile Form UI Kit

SignUp and Login Mobile Form UI Kit is a mobile form kit that provides designers and developers with 40 gorgeous sign-in and sign-up forms for their mobile apps. Each form is highly customisable so that users can change elements like colours and fonts to match the required style. The forms are constructed using vector shapes so that users can easily resize them.

5. M3 Mobile UI Kit

This jam packed kit features plenty of PSD files that can help you create various types of apps. There are kits for news, weather, calendars, and much more. The designs feature a clean and modern layout that will translates well for the different types of apps that can be created. Included are 124 psd files in both light and dark versions.

Fonts

6. Sovereign Typeface

Need a strong, clean font that makes a statement? Sovereign Typeface may be just what you’re looking for. An ideal font for titles and headers, this big, bold font will certainly command attention in places where you need it.

7. Burford Pro

The Burford Pro font package is a collection of 18 complementary fonts that can be used separately or layered on top each other to create interesting and unique effects. The package also includes extras like banners, borders, corners, arrows, line breaks, catchwords, anchors and other such items you can use to add visual interest or weight to chosen areas.

8. Shoreline

Shoreline is a serif font with a textured surface and a bit of a vintage feel. It comes in regular and bold and is probably best used in places where you want to create visual emphasis.

Icons

9. 527 Useful Flat Icons

With everything from cameras, globes, and music notes to play buttons, currency signs and much more, 527 Useful Flat Icons will leave you wondering how you ever did without it. These icons are available in png file format for easy use, as well as ai and eps file formats so that you can change their colour and size to suit your needs.

10. 32 Browser Interface Icons

The icons in 32 Browser Interface Icons are the kind that every designer should have in their arsenal. This collection covers all the basics like home, favourites, zoom, downloads, refresh, forward and backwards arrow, and more. They come in their original vector format so that you can change and customise them as you wish, as well as in png, svg, and psd file formats.

11. White Multipurpose Icons

White Multipurpose Icons 3 Different Sheets

White Multipurpose Icons is a collection designed to stand out against backgrounds that use colour, complex patterns, or images. The collection brings together the most popular icons found on the web today, like social media icons, shopping cart and magnifying glass icons.

Backgrounds

12. Royalty-Free Stock Photographs

Photographs are an important part of branding because they can be manipulated to communicate a wide range of ideas or emotions. A well-chosen photograph can therefore make a huge difference to the success of your project. With your Elements subscription, you can now take advantage of the hundreds of thousands of new royalty-free stock photos available at Envato Elements and take your project to a whole new level.

13. Polygon Abstract Backgrounds

A clean, plain background may be the best option for most of your app screens, but when you’re looking for a bold and interesting background to set your app apart and catch the viewer’s eye, the stunning Polygon Abstract Backgrounds is a perfect choice.

14. Simple Line Geometric Patterns

Simple Line Geometric Patterns will add a clean, modern look to your mobile app. The patterns come as vector files and therefore are easy to customise. With 40 different designs to choose from and combine as you like, you’re sure to create an app that stands apart from the pack.

15. Chromasect 02

Chromasect 02 certainly has a funky vibe that might not appeal to every taste, but when used sparingly and strategically, it’s guaranteed to add a touch of cool to your mobile app. The pack contains ten unique patterns and comes both in the original vector file and jpg files.

Logos

16. 30 Modern Marks & Symbols

Finding the right logo can sometimes be the hardest step in building a product. 30 Modern Marks & Symbols is designed to make your search that much easier. This selection of 30 logos is made up of editable vector objects, which means that you can customise them as you like to add your own unique touch and make them truly yours.

17. 50 Premade Watercolor Logos

50 Premade Watercolor Logos is perfect for those projects that convey an air of whimsy or femininity. The logos have a lovely handmade quality to them and are created in a layered psd file with links to the font files used so you can easily personalise your selected logo.

On a tight budget? Let's now have a look at 5 of the best free mobile app design downloads available on the web.

5 Free Mobile App Downloads Available in 2020 and 2021

The premium mobile app downloads available on Envato Elements will give you the highest quality set of app downloads available on the web which will allow you to build the best app possible. However, if you are on a tight budget, you might not be able to afford these premium mobile app downloads, but still be needing to create an app.

To help you out with the creation of your app if you are on a budget, we have collected 5 free mobile app downllads for you to check out below:

1. Clean & Modern iOS UI Kit

This modern looking UI kit has 10 different screens that are fully customizable. This can be a good starting point for any type of online store, social media, or news app.

2. Concept App Sketch

This UI kit can be use for any app that needs to feature artistc works. This UI kit is for iOS apps and features a minimalist design.

3. Harmony UI Kit

4. Mobile App Icons

Regardless of what type of app you are creating, you will need to have graphical icons displayed on the app so your users know how to navigate the app. Mobile App Icons offers five thousand plus free icons from you to choose from.

5. Da Font

Just like the icons, you will also need a font or fonts that match your specific app. Da Font offers fifty four thousand plus free fonts for you to add to your app.

Get Unlimited Design Elements for Mobile App UI!

When it comes to creating a mobile app, many people are lost. You feel like the only way to create a professional quality app is to hire a designer. This is simply not the case anymore. Envato Elements has an extensive library of premium mobile app assets, templates, UI kits, and other downloads that can help you take your app idea and turn it into a fully functioning app on iOS and Android.

Whether you are creating an app for your online store, social media platform, or delivery service, Envato Elements has the necessary tools for you to create your own app without having to hire a developer. Take advantage of this unlimited access library and get your app up and running today!

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

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

20 Best PHP Email Forms
PHP email forms have many uses. While some may need a basic contact form, some need forms to collect more data. For example, you might be creating a website...
Esther Vaati
29 Jun 2020
PHP
18 Best Contact Form PHP Scripts for 2020
Are you looking for an easy-to-use contact form PHP script? Contact forms are a must-have for every website, and with 14 premium scripts from CodeCanyon and...
Monty Shokeen
29 Jul 2020
PHP
Comparing the 5 Best PHP Form Builders (And 4 Free Scripts)
Looking for a PHP form builder script for your website? Today, we compare the five best PHP form generators available at CodeCanyon. This post will help you...
Monty Shokeen
17 Jun 2020
PHP
19 PHP Login and Registration Forms to Download
By downloading a PHP login and registration script, you can add a registration form to your website that will be secure and look good.
Daniel Stern
16 Apr 2020
PHP

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

<form method="post" action="" name="signup-form"><div class="form-element"><label>Username</label><input type="text" name="username" pattern="[a-zA-Z0-9]+" required /></div><div class="form-element"><label>Email</label><input type="email" name="email" required /></div><div class="form-element"><label>Password</label><input type="password" name="password" required /></div><button type="submit" name="register" value="register">Register</button></form>

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 the 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 more power over the error messages that are shown and their placement and appearance. If you want to learn more about client-side validation, check out those posts.

Form Input Validation Using Only HTML5 and Regex
In this tutorial, you will learn how to implement basic form validation using attributes like type and pattern using regex and in HTML5.
Monty Shokeen
19 Apr 2019
HTML5
Easy Form Validation With jQuery
In this tutorial, you'll learn how to validate your forms and show custom error messages easily using the jQuery form validation plugin.
Monty Shokeen
23 Apr 2019
JavaScript

Coding the Login Form

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

<form method="post" action="" name="signin-form"><div class="form-element"><label>Username</label><input type="text" name="username" pattern="[a-zA-Z0-9]+" required /></div><div class="form-element"><label>Password</label><input type="password" name="password" required /></div><button type="submit" name="login" value="login">Log In</button></form>

Style the Forms With CSS

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

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
    margin: 50px auto;
    text-align: center;
    width: 800px;
}
h1 {
    font-family: 'Passion One';
    font-size: 2rem;
    text-transform: uppercase;
}
label {
    width: 150px;
    display: inline-block;
    text-align: left;
    font-size: 1.5rem;
    font-family: 'Lato';
}
input {
    border: 2px solid #ccc;
    font-size: 1.5rem;
    font-weight: 100;
    font-family: 'Lato';
    padding: 10px;
}
form {
    margin: 25px auto;
    padding: 20px;
    border: 5px solid #ccc;
    width: 500px;
    background: #eee;
}
div.form-element {
    margin: 20px 0;
}
button {
    padding: 10px;
    font-size: 1.5rem;
    font-family: 'Lato';
    font-weight: 100;
    background: yellowgreen;
    color: white;
    border: none;
}
p.success,
p.error {
    color: white;
    font-family: lato;
    background: yellowgreen;
    display: inline-block;
    padding: 2px 10px;
}
p.error {
    background: orangered;
}

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

CREATE TABLE `users` (
    `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
    `username` varchar(25) NOT NULL,
    `password` varchar(255) NOT NULL,
    `email` varchar(100) NOT NULL,
    PRIMARY KEY (`id`),
    UNIQUE KEY `username` (`username`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1;

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

<?php
    define('USER', 'root');
    define('PASSWORD', '');
    define('HOST', 'localhost');
    define('DATABASE', 'test');
    try {
        $connection = new PDO("mysql:host=".HOST.";dbname=".DATABASE, USER, PASSWORD);
    } catch (PDOException $e) {
        exit("Error: " . $e->getMessage());
    }
?>

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

<?php
    session_start();
    include('config.php');
    if (isset($_POST['register'])) {
        $username = $_POST['username'];
        $email = $_POST['email'];
        $password = $_POST['password'];
        $password_hash = password_hash($password, PASSWORD_BCRYPT);
        $query = $connection->prepare("SELECT * FROM users WHERE email=:email");
        $query->bindParam("email", $email, PDO::PARAM_STR);
        $query->execute();
        if ($query->rowCount() > 0) {
            echo '<p class="error">The email address is already registered!</p>';
        }
        if ($query->rowCount() == 0) {
            $query = $connection->prepare("INSERT INTO users(username,password,email) VALUES (:username,:password_hash,:email)");
            $query->bindParam("username", $username, PDO::PARAM_STR);
            $query->bindParam("password_hash", $password_hash, PDO::PARAM_STR);
            $query->bindParam("email", $email, PDO::PARAM_STR);
            $result = $query->execute();
            if ($result) {
                echo '<p class="success">Your registration was successful!</p>';
            } else {
                echo '<p class="error">Something went wrong!</p>';
            }
        }
    }
?>

The first step is to include 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 row number exists for a given email address. If it does, the user will get a message saying the email address is already registered.

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

Implementing the Login Functionality

In our last step, we wrote 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.

<?php
    session_start();
    include('config.php');
    if (isset($_POST['login'])) {
        $username = $_POST['username'];
        $password = $_POST['password'];
        $query = $connection->prepare("SELECT * FROM users WHERE username=:username");
        $query->bindParam("username", $username, PDO::PARAM_STR);
        $query->execute();
        $result = $query->fetch(PDO::FETCH_ASSOC);
        if (!$result) {
            echo '<p class="error">Username password combination is wrong!</p>';
        } else {
            if (password_verify($password, $result['password'])) {
                $_SESSION['user_id'] = $result['id'];
                echo '<p class="success">Congratulations, you are logged in!</p>';
            } else {
                echo '<p class="error">Username password combination is wrong!</p>';
            }
        }
    }
?>

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've successfully confirmed 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 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 the login page. Otherwise, show them the contents of the page.

<?php
    session_start();
    if(!isset($_SESSION['user_id'])){
        header('Location: login.php');
        exit;
    } else {
        // Show users the page!
    }
?>

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

Resolving Common Errors

There are three types of errors that you might encounter when using this script:

1. Errors Due to Wrong Variable Names

One of the most common sources of error is having the wrong capitalization for a variable somewhere. Therefore, it is important to stick with the same naming convention for all your variables. As an example, consider the keys in the $_POST superglobal are based on the value of name assigned to input elements in the form. This means that $_POST['USERNAME'] and $_POST['username'] will have different values.

2. The " Headers already sent" Error

Some functions like session_start() and header() modify HTTP headers. Since PHP flushes all headers before it outputs something, it is important to call all such functions before you output anything. This includes any raw HTML or unintentional spaces before the opening <?php tag.

3. Session Variables not Persisting Across Pages

You can access session variables on a page only if you called the function session_start() on that page. If you cannot access the values in $_SESSION superglobal on a page, this is probably because you forgot to call session_start(). Also remember to call the function before you output anything on the page. Otherwise, you will encounter the " Headers already sent" error.

Final Thoughts

In this tutorial, we learned how to create a basic user registration and login system using PHP. Once you've grasped the basics of login and registration systems, you can create more complicated logic, for example allowing users to reset their password, or verify their email address.

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

Learn PHP With a Free Online Course

If you want to learn PHP, check out our free online course on PHP fundamentals!

FREE
PHP
PHP Fundamentals
Jeremy McPeak

Do you want to save time and money building your Swift app? An Xcode app template makes it easy to get started building your iOS app.

Developing an app from scratch is a costly and time-consuming process, but a Swift app template makes it more affordable because much of the code is already written for you.

A good app template will come with all the features you need to create your own mobile app. You only need to follow the instructions in the documentation to customize it and add elements that will make your app unique.

App templates are coded to ensure your app runs efficiently. They offer UI consistency and performance that can only come from native apps.

Top-Selling Xcode App Templates for 2020 on CodeCanyon

Grab one of these best-selling Xcode templates. Depending on the license that you purchase for a template, you can either use it as a learning tool or offer it as a real product on the App Store.

15 Best Xcode App Templates on CodeCanyon

There are plenty of Swift and Xcode app templates on CodeCanyon. Let's have a look.

1. Bestselling: MStore Pro

If you have a brick and mortar store and you want to build your eCommerce store in the shortest time possible, you’re in good hands with MStore Pro. And if you’re a developer pressed for time, this swift app template is your friend. It supports WooCommerce integration, AdMob and Facebook ads, push notifications, and multiple payment gateways.

2. Bestselling: Universal for iOS

Universal for iOS is a template that anyone can use to create amazing apps using content from all around the web. No coding knowledge is needed. It supports many content sources including WordPress, YouTube, Flickr, Tumblr, Twitter, Pinterest, and more.

It comes with lots of features, including AdMob for monetization and in-app purchases if your user wants to have ad-free content. You can also change your content remotely.

And of course this universal Swift app template comes with a complete Xcode template, so you can get your app up and running quickly.

3. Trending: Dating App

Making the world less lonely one person at a time is easy through the Dating App. The iOS version of this app is built with Xcode 10.3 using Swift 5. Its long list of must-have features that will keep users engaged includes a full-featured admin panel that allows you to manage user accounts, view personal conversations, account and gallery moderation, and manage advertising. To boost your revenue, you can add in-app purchases and AdMob ads.

4. Trending: WebViewGold

The WebViewGold app template is another great Swift app template that allows users to convert a website's content into an app. It does so by using a Swift Xcode package to wrap the URL or local HTML into an iOS app. The real genius of this app template, though, is that it does its work in just a few clicks, so no coding knowledge is required! WebViewGold is optimised for iPhone, iPod touch, and iPad.

5. SuperView—WebView App for iOS

SuperView is a template designed to let web developers easily create a native iOS container for their website. It provides some basic functionality, including a toolbar with back, forward, and refresh buttons, but it keeps your website front and centre.

This template, also adds a lot of extra features you can take advantage of in your app, including Firebase or OneSignal push notifications, GPS support, social network login, Google AdMob, and support for right-to-left languages such as Arabic.

6. AdForest—Classified Native IOS App

Consider AdForest if you're looking to manage product listings for your ad posting website. It comes with WordPress back end panel. It also comes with handy features like Google Maps integration, radius search, featured ads, social media registration and login, seller ratings, and more. Once you install it, you can make the necessary changes, and your app is ready to use. And since it's completely white labeled, you can upload it to the iOS App Store with your business's brand name.

7. Classify—Classifieds App Template for iOS

If you're looking for a template to help you create a classified ad app, then check out Classify, a universal app template that you can use to develop your own mobile classifieds service app. End users will be able to post and edit ads using their mobile device of choice. The classifieds Swift app allows end users to do everything you’d expect, like browsing listings by categories, searching for what they need, and contacting the seller.

8. iOS Recipe App

The iOS Recipe App template gives you an app which displays various recipes based on categories, including a user-customisable favourites category. The screen for viewing the details of a recipe supports multiple images, sharing, and smooth transitions.

All the recipe data is stored in an XML file which can be easily edited or replaced with data loaded from a server. This template also includes quite a few extra features, including a shopping list, Google AdMob integration, push notifications, and a sliding menu on the left side of the app.

9. Events—Events App Template for iOS

The Events app template allows you to create your own mobile iOS events app to store and share events happening all over the world. End users are able to submit new events, and you can approve and add them in your Parse dashboard.

The Xcode template also has a button that enables end users to automatically add an event on their native iOS calendar and to open its address in Maps to get directions. They can also share the event via their social media platform of choice. More features include transaction history, push notifications, user feedback, analytics that track customer interests, and so much more.

10. woopy—Listings and Chat App Template for iOS

woopy is an app template that allows developers to create listing apps that facilitate the buying and selling of used and hand-crafted items online. Users can browse by keyword or category. They can also chat with sellers or potential buyers and give feedback on each transaction.

For sellers, one outstanding feature of this Xcode template is the ability to add a ten-second video to their listings. Another is the app’s optional email verification system that gives buyers and sellers extra assurance by posting a verification symbol next to the user’s name.

11. WebView Swift App

The WebView Swift app template is the perfect choice to turn your website into an app with a native-seeming look and feel. It is made using Swift 5 and Xcode 11. You can easily customize it by changing the colors of buttons and text, and even hiding them using config files. It also includes a Swift 4.2 for Xcode 10 version if you prefer to work with that version.

12. appyMap

appyMap is an excellent app for browsing different locations and points of interest near the user's current location. The template allows you to split up points of interest into various groups which, if you want, can easily be locked behind an in-app purchase.

appyMap also lets you choose between using either Apple's CloudKit or a local .plist file for your data. Additionally, this template features AdMob integration if you want to use it.

13. Store Finder

Store Finder app template helps users find stores easily without having to go around in circles. It comes with a long list of must-have features like photos, call, email and SMS integration, comments, Google Maps directions, social media logins, pinch and zoom function, and so much more.

The app uses Parse server hosted in Back4App as a backend. In addition to high quality documentation, you will a well-commented code, storyboards, sketch files with every asset used on the app and the design.

14. Feedews—News App Template for iOS

Feedews is a highly customizable RSS feed reader wriiten in Swift and built on a native Xcode project. It lets users get all their news in one place. You can add news categories, share articles to social networks and mail. you can send push notifications to all registered users by using the Parse push web.

15. Instagram iOS Template

Instagram iOS Template is your go-to photo-sharing Xcode app template if you want to build your own photo-sharing app with social functionalities such as likes, comments, and so on.

Users can create profiles, message each other in real time, and share photos and videos with playback.

You can also activate AdMob to monetize your app. It comes with well-written documentation that includes video support.

2 Free Swift App and XCode App Templates

1. Swift Radio

Swift Radio is an open-source radio station app with robust and professional features. There are over 80 different apps accepted to the app store using this code! The open-source code for Swift Radio can be found on GitHub.

2. YouTube iOS Template

The open-source code for this YouTube iOS App Clone can be found on GitHub.

What Makes a Great Xcode Template?

When you're choosing an app template, keep the following factors in mind:

Ease of Use

It has to be so simple that someone with no coding expertise can easily learn and use it. The documentation should be clear.

Customization

The template should be easy to customize so that the finished app can reflect your unique style and branding. Customization should not take a lot of time.

Design

Simplicity is key. The design of the template should be intuitive, uncluttered, and consistent from screen to screen.

Cost

Compare the prices of other templates and see what fits your budget.

Social Login and Sharability

Make it easy for users to log in from their social media, enabling them to publicize your app by sharing it with others through social media.

Ratings and Reviews

Let customers know they can trust your product or service.

Downloads

The number of downloads is proof that a template is popular among users and that they trust the provider.

Security and Frequent Updates

Regular updates mean the developer cares about the security of the template. Your choice of an app template should factor this in.

Support

Make sure that the seller offers support. Check what other users say about the quality of support from the provider.

Integration With Payment and Marketing Gateways

These allow for revenue through advertising, subscriptions, and so on.

Launch Your Mobile App With a Great Template

This article lists just a few of the popular Swift and Xcode app templates available on CodeCanyon. If you are looking for inspiration or you're building an application and need help with a particular feature, then you may find your answer in some of these templates.

Put one of these templates to use right now, or check out some of the other templates for complete apps available on CodeCanyon.

CodeCanyon mobile app template bestsellers

Premium App Templates From CodeCanyon

CodeCanyon is an online marketplace that has hundreds of mobile app templates—for Android, iOS, React Native, and Ionic. You can save days, even months, of effort by using one of them.

If you want to improve your skills building iOS apps and templates, then check out some of our other posts on iOS app development.

The Portable Document Format, or PDF for short, is ideal for sharing documents containing lots of precisely formatted text and images, especially if they're likely to be printed or read offline. Although most modern browsers can display PDF files, they do so using a PDF viewer that runs in an independent tab or window, forcing users to leave your website.

PDF.js is an open-source JavaScript library that allows you to parse and render PDF files right inside your web pages. In this tutorial, I'll show you how to use it to create a fully fledged custom JavaScript PDF viewer from scratch.

If you're adding a PDF viewer to your site, you might also be interested in a professional Flipbook plugin. JavaScript flipbooks showcase your content in a digital flipbook form, using page-flipping effects, zoom, and support for multiple content types.

jQuery
Best jQuery Flipbook Plugins Compared (Free and Paid)
Esther Vaati

1. Creating a User Interface

Let's start by creating a new web page and adding the usual HTML5 boilerplate code to it.

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>My PDF Viewer</title></head><body></body></html>

Next, inside the <body>, create a <div> element that can serve as a container for our PDF viewer.

<div id="my_pdf_viewer"></div>

At the heart of our JavaScript PDF viewer will be an HTML5 <canvas> element. We'll be rendering the pages of our PDF files inside it. So add the following code inside the <div> element.

<div id="canvas_container"><canvas id="pdf_renderer"></canvas></div>

To keep things simple, at any given time, we'll be rendering only one page inside the canvas. We will, however, allow users to switch to the previous page or the next page by pressing a button. Additionally, to display the current page number, and to allow users to jump to any page they desire, our interface will have an input field.

<div id="navigation_controls"><button id="go_previous">Previous</button><input id="current_page" value="1" type="number"/><button id="go_next">Next</button></div>

To support zoom operations, add two more buttons to the interface: one to zoom in and one to zoom out.

<div id="zoom_controls">  <button id="zoom_in">+</button><button id="zoom_out">-</button></div>

At the end of this section, the web page code looks like this.

<!doctype html> <html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>My PDF Viewer</title></head><body><div id="my_pdf_viewer"><div id="canvas_container"><canvas id="pdf_renderer"></canvas></div><div id="navigation_controls"><button id="go_previous">Previous</button><input id="current_page" value="1" type="number"/><button id="go_next">Next</button></div><div id="zoom_controls">  <button id="zoom_in">+</button><button id="zoom_out">-</button></div></div></body></html>

2. Getting PDF.js

Now that a bare-bones user interface for our JavaScript PDF viewer is ready, let's add PDF.js to our web page. Because the latest version of the library is available on CDNJS, we can do so by simply adding the following lines towards the end of the web page.

<script
    src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js"></script>

If you prefer to use a local copy of the library, you can download it from the pdfjs-dist repository.

3. Loading a PDF File

Before we start loading a PDF file, let's create a simple JavaScript object to store the state of our PDF viewer. Inside it, we'll have three items: a reference to the PDF file itself, the current page index, and the current zoom level.

<script>
    var myState = {
        pdf: null,
        currentPage: 1,
        zoom: 1
    }
    // more code here</script>

At this point, we can load our PDF file by calling the getDocument() method of the pdfjsLib object, which runs asynchronously.

pdfjsLib.getDocument('./my_document.pdf').then((pdf) => {
    // more code here
});

Note that the getDocument() method internally uses an XMLHttpRequest object to load the PDF file. This means that the file must be present either on your own web server or on a server that allows cross-origin requests.

If you don't have a PDF file handy, you can get the one I'm using here.

Once the PDF file has been loaded successfully, we can update the pdf property of our state object.

myState.pdf = pdf;

Lastly, add a call to a function named render() so that our PDF viewer automatically renders the first page of the PDF file. We'll define the function in the next step.

render();

4. Rendering a Page

By calling the getPage() method of the pdf object and passing a page number to it, we can get a reference to any page inside the PDF file. For now, let's pass the currentPage property of our state object to it. This method too returns a promise, so we'll need a callback function to handle its result.

Accordingly, create a new function called render() containing the following code:

function render() {
    myState.pdf.getPage(myState.currentPage).then((page) => {
        // more code here
    });
}

To actually render a page, we must call the render() method of the page object available inside the callback. As arguments, the method expects the 2D context of our canvas and a PageViewport object, which we can get by calling the getViewport() method. Because the getViewport() method expects the desired zoom level as an argument, we must pass the zoom property of our state object to it.

var canvas = document.getElementById("pdf_renderer");
var ctx = canvas.getContext('2d');
var viewport = page.getViewport(myState.zoom);

The dimensions of the viewport depend on the original size of the page and the zoom level. In order to make sure that the entire viewport is rendered on our canvas, we must now change the size of our canvas to match that of the viewport. Here's how:

canvas.width = viewport.width;
canvas.height = viewport.height;

At this point, we can go ahead and render the page.

page.render({
    canvasContext: ctx,
    viewport: viewport
});

Putting it all together, the whole source code looks like this.

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>My PDF Viewer</title><script
    src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js"></script></head><body><div id="my_pdf_viewer"><div id="canvas_container"><canvas id="pdf_renderer"></canvas></div><div id="navigation_controls"><button id="go_previous">Previous</button><input id="current_page" value="1" type="number"/><button id="go_next">Next</button></div><div id="zoom_controls">  <button id="zoom_in">+</button><button id="zoom_out">-</button></div></div><script>
        var myState = {
            pdf: null,
            currentPage: 1,
            zoom: 1
        }
        pdfjsLib.getDocument('./my_document.pdf').then((pdf) => {
            myState.pdf = pdf;
            render();

        });

        function render() {
            myState.pdf.getPage(myState.currentPage).then((page) => {
                var canvas = document.getElementById("pdf_renderer");
                var ctx = canvas.getContext('2d');
                var viewport = page.getViewport(myState.zoom);

                canvas.width = viewport.width;
                canvas.height = viewport.height;
         
                page.render({
                    canvasContext: ctx,
                    viewport: viewport
                });
            });
        }
    </script></body></html>

If you try opening the web page in a browser, you should now be able to see the first page of your PDF file.

You may have noticed that the size of our PDF viewer currently depends on the size of the page being rendered and the zoom level. This is not ideal because we don't want the layout of our web page to be affected while users interact with the PDF viewer.

To fix this, all we need to do is give a fixed width and height to the <div> element encapsulating our canvas and set its overflow CSS property to auto. This property, when necessary, adds scroll bars to the <div> element, allowing users to scroll both horizontally and vertically.

Add the following code inside the <head> tag of the web page:

<style>
    #canvas_container {
        width: 800px;
        height: 450px;
        overflow: auto;
    }</style>

You are, of course, free to change the width and height or even use media queries to make the <div> element match your requirements.

Optionally, you can include the following CSS rules to make the <div> element seem more distinct:

#canvas_container {
    background: #333;
    text-align: center;
    border: solid 3px;
}

If you refresh the web page now, you should see something like this on your screen:

5. Changing the Current Page

Our JavaScript PDF viewer is currently capable of showing only the first page of any PDF file given to it. To allow users to change the page being rendered, we must now add click event listeners to the go_previous and go_next buttons we created earlier.

Inside the event listener of the go_previous button, we must decrement the currentPage property of our state object, making sure that it doesn't fall below 1. After we do so, we can simply call the render() function again to render the new page.

Additionally, we must update the value of the current_page text field so that it displays the new page number. The following code shows you how:

document.getElementById('go_previous')
    .addEventListener('click', (e) => {
    if(myState.pdf == null|| myState.currentPage == 1) 
    return;
    myState.currentPage -= 1;
    document.getElementById("current_page").value = myState.currentPage;
    render();
});

Similarly, inside the event listener of the go_next button, we must increment the currentPage property while ensuring that it doesn't exceed the number of pages present in the PDF file, which we can determine using the numPages property of the _pdfInfo object.

document.getElementById('go_next')
    .addEventListener('click', (e) => {
    if(myState.pdf == null || myState.currentPage > myState.pdf._pdfInfo.numPages) 
    return;
    myState.currentPage += 1;
    document.getElementById("current_page").value = myState.currentPage;
    render();
});

Lastly, we must add a key press event listener to the current_page text field so that users can directly jump to any page they desire by simply typing in a page number and hitting the Enter key. Inside the event listener, we need to make sure that the number the user has entered is both greater than zero and less than or equal to the numPages property.

document.getElementById('current_page')
    .addEventListener('keypress', (e) => {
    if(myState.pdf == null) return;
    // Get key code
    var code = (e.keyCode ? e.keyCode : e.which);
    // If key code matches that of the Enter key
    if(code == 13) {
        var desiredPage = document.getElementById('current_page').valueAsNumber;
        if(desiredPage >= 1 && desiredPage <= myState.pdf._pdfInfo.numPages) {
            myState.currentPage = desiredPage;
            document.getElementById("current_page").value = desiredPage;
            render();
        }
    }
});

Our PDF viewer can now display any page of the PDF file.

6. Changing the Zoom Level

Because our render() function already uses the zoom property of the state object while rendering a page, adjusting the zoom level is as easy as incrementing or decrementing the property and calling the function.

Inside the on-click event listener of the zoom_in button, let's increment the zoom property by 0.5.

document.getElementById('zoom_in')
    .addEventListener('click', (e) => {
    if(myState.pdf == null) return;
    myState.zoom += 0.5;

    render();
});

And inside the on-click event listener of the zoom_out button, let's decrement the zoom property by 0.5.

document.getElementById('zoom_out')
    .addEventListener('click', (e) => {
    if(myState.pdf == null) return;
    myState.zoom -= 0.5;
    render();
});

You are free to add upper and lower bounds to the zoom property, but they are not required.

This is what it looks like when it's put all together.

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>My PDF Viewer</title><script
    src="http://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js"></script><style>
      #canvas_container {
          width: 800px;
          height: 450px;
          overflow: auto;
      }

      #canvas_container {
        background: #333;
        text-align: center;
        border: solid 3px;
      }
  </style></head><body><div id="my_pdf_viewer"><div id="canvas_container"><canvas id="pdf_renderer"></canvas></div><div id="navigation_controls"><button id="go_previous">Previous</button><input id="current_page" value="1" type="number"/><button id="go_next">Next</button></div><div id="zoom_controls">  <button id="zoom_in">+</button><button id="zoom_out">-</button></div></div><script>
        var myState = {
            pdf: null,
            currentPage: 1,
            zoom: 1
        }
        pdfjsLib.getDocument('./my_document.pdf').then((pdf) => {
            myState.pdf = pdf;
            render();

        });

        function render() {
            myState.pdf.getPage(myState.currentPage).then((page) => {
                var canvas = document.getElementById("pdf_renderer");
                var ctx = canvas.getContext('2d');
                var viewport = page.getViewport(myState.zoom);

                canvas.width = viewport.width;
                canvas.height = viewport.height;
         
                page.render({
                    canvasContext: ctx,
                    viewport: viewport
                });
            });
        }

        document.getElementById('go_previous').addEventListener('click', (e) => {
            if(myState.pdf == null || myState.currentPage == 1) 
              return;
            myState.currentPage -= 1;
            document.getElementById("current_page").value = myState.currentPage;
            render();
        });

        document.getElementById('go_next').addEventListener('click', (e) => {
            if(myState.pdf == null || myState.currentPage > myState.pdf._pdfInfo.numPages) 
               return;
            myState.currentPage += 1;
            document.getElementById("current_page").value = myState.currentPage;
            render();
        });

        document.getElementById('current_page').addEventListener('keypress', (e) => {
            if(myState.pdf == null) return;
            // Get key code
            var code = (e.keyCode ? e.keyCode : e.which);
            // If key code matches that of the Enter key
            if(code == 13) {
                var desiredPage = 
                document.getElementById('current_page').valueAsNumber;
                if(desiredPage >= 1 && desiredPage <= myState.pdf._pdfInfo.numPages) {
                    myState.currentPage = desiredPage;
                    document.getElementById("current_page").value = desiredPage;
                    render();
                }
            }
        });

        document.getElementById('zoom_in').addEventListener('click', (e) => {
            if(myState.pdf == null) return;
            myState.zoom += 0.5;
            render();
        });

        document.getElementById('zoom_out').addEventListener('click', (e) => {
            if(myState.pdf == null) return;
            myState.zoom -= 0.5;
            render();
        });</script></body></html>

Our PDF viewer is ready. If you refresh the web page again, you should be able to view all the pages present in the PDF file and also zoom in to or zoom out of them.

Conclusion

You now know how to use PDF.js to create a custom JavaScript PDF viewer for your website. With it, you can confidently offer a seamless user experience while displaying your organization's brochures, white papers, forms, and other documents generally meant to be distributed as hard copies.

You can learn more about PDF.js on the official GitHub repo.

You might also be interested in a professional Flipbook plugin. JavaScript flipbooks showcase your content in a digital flipbook form, using page-flipping effects, zoom, and support for multiple content types. CodeCanyon is a marketplace for all kinds of code, including premium JavaScript widgets and jQuery plugins. It's the best place to find jQuery flipbook plugins.

jQuery
Best jQuery Flipbook Plugins Compared (Free and Paid)
Esther Vaati

One of the strengths of sharing your content online is the power you have to create a truly innovative experience for your audience. Displaying your content as a flipbook is an effective way to share content, and there are a wide range of WordPress flipbook plugins available on the market. But don’t be fooled: these flipbook WordPress plugins allow you to create so much more than static documents.

In this article, I would like to give you an overview of some tools that I find especially intriguing. Along with the obvious book flipping pages animations, these easy-to-use WordPress flipbook plugins offer impressive functionality that, if you so choose, will allow you to create a truly interactive experience for your readers.

WordPress Flipbook Plugins on CodeCanyon

There are currently over 50 different WordPress flipbook plugins on CodeCanyon. You can use any of them to create 2D or 3D flipbooks for your books or magazines. Many of them also offer something that is unique to them. This could either be an interesting feature or a new layout for the flipbook.

Some of these plugins also offer Add-ons that make them even more powerful. Go check them all out on Codecanyon.

Best WordPress Flipbook Plugins on Codecanyon

1. PDF to Flipbook Extension

This flipbook WordPress plugin allows you to convert any PDF to a flipbook in just a few clicks—no technical knowledge required. Perfect for PDFs with high-resolution images, this WordPress flipbook plugin will preserve your image quality and allow for zoom-friendly flipbook viewing. Lazy loading ensures the best experience for your readers. It's packaged with handy features like bookshelf and hardcover, which let you further enhance the display of your document.

User coderralted says:

“We purchased this extension because we wanted to allow our client to quickly create new flipbooks from their PDFs. It works really well and our client couldn't be happier.”

2. Responsive Flipbook Plugin

Create a PDF page turner with ease using this WordPress flip plugin. Responsive design and no Flash required means your flipbook will display beautifully on mobile and desktop devices. Use the WYSIWYG page editor to take advantage of all the customization options this flipbook WordPress plugin has to offer.

Along with all the standard PDF functionality, with this plugin you can select from:

hardcover
popup
double pages
bookshelf
always open
and many more flipbook display options

Customize navigation and skin settings, or simply choose from one of the included 11 styles and 4 book mockups, all based on flat and clean design, for an effortless and modern flipbook.

User sebcreativos says:

“Excellent functionality. I used it for my web design company and my client was delighted. Thank you.”

3. Real3D Flipbook WordPress Plugin

Create 3D flipbooks to display directly on your website using the Real3D WordPress flipbook plugin. This flipbook plugin uses the JavaScript 3D library Three.js to support ultra-realistic features like page bending, shiny pages, lights, and shadows—just upload your PDF or images and copy and paste the shortcode.

Optimized for mobile with automatic fallbacks that ensure your flipbook will display correctly on all platforms, this plugin comes with all the basic and premium PDF page-turner features you need: interactive pages, lightbox, single or double page view, and more are all included in this package. This plugin supports unlimited books and pages, and it ensures smooth loading by rendering pages one by one, so visitors can start reading instantly.

User GuedinDesigns says:

“We picked this flipbook because it has features literally no one else has on the market—such as the single page download feature.”

You can make this plugin even more powerful and useful with the help of an add-on called PDF tools for Real3D Flipbook. The plugin adds functionality such as exporting the content of PDF files to JPEG and JSON format. There is also a boost in performance because the plugin avoids loading and rendering the full PDF file on runtime.

4. dFlip PDF FlipBook WordPress Plugin

Perfect for creative applications like books, photo essays, and portfolios, this WordPress flipbook plugin is powerful and easy to use. Based on WebGL technology, dFlip allows you to create realistic PDF page turners and photo books with an entirely drag-and-drop user interface.

There is no coding required—simply add the link to your file to create a flipbook instantly. Fully responsive and with smart rendering for low CPU consumption, this flipbook WordPress plugin performs reliably across platforms. Along with technical power and dynamic book flipping pages animation, dFlip has all the features you need in a single package, like hotspots, PDF annotations, and custom outlines.

User conceivecreative says:

“Awesome flipbook plugin! By far the best I've found. Very clean and you can customize everything you need! Recommend to all! A+”

5. Diamond Flipbook WordPress Plugin

The Diamond WordPress flipbook plugin allows you to create flipbooks from a variety of source files: automatically convert PDFs, upload multiple JPGs at the same time to create a flipbook, manually add pages, or simply enter text directly into the WYSIWYG editor. Then, either add a shortcode for the generated flipbook to your website or post an image link that will launch a lightbox with one click.

This flipbook WordPress plugin also offers YouTube support and will display YouTube videos in a layer above your flipbook. Fully responsive and with no Flash needed, this WordPress flipbook plugin works reliably on both mobile and desktop.

User josephdelaubriere says:

“Great plugin and very simple to use.”

6. WordPress 3D Flipbook

Revolutionize online books with this 3D WordPress flipbook plugin. You can use this plugin to create a standard flipbook, or using CSS layers, you can insert content like video, audio, hover and navigation effects, HTML, and JavaScript directly into your book to create an interactive experience for your viewers.

Choose from fully customizable skin options to display your content in a realistic 3D flipbook, complete with page-depth simulation and user-friendly, interactive, flexible page corners. Pages render in the background, ensuring a smooth reading experience, and smart pans automatically display your flipbook in the most comfortable orientation for reading in any device.

User MichaelNickel says:

“This is a truly amazing flipbook plugin, easy to use, with great value for money! Highly recommended.”

7. iPages Flipbook

The iPages Flipbook plugin is lightweight WordPress plugin full of features that make it incredibly easy for you to create amazing HTML5 flipbooks. It provides a very convenient way of converting static PDF documents or set of images into an engaging magazine.

There are a lot of useful features that will be loved by both you and your readers. For example, there are three different render modes called two page flip, one page flip and swipe. You can also choose from a light or dark theme to view the flipbook.

Publishers can also add supplemental images, stickers, links or text to any page they want. The side panels contain page thumbnails for ease of navigation. Readers can also navigate easily through the book using arrow keys. The plugin also offers many other functions as well. You can visit the live demo page to see the plugin in action and read more about those features.

User teclaseafins says:

The plugin does exactly what it promises and the customer service was exemplary: fast, efficient and with good results. I recommend!

8. Newspaper Flipbook

The Newspaper Flipbook WordPress plugin allows you to create responsive flipbooks from your PDF files. The PDF file you provide will be automatically converted to jpeg images.

The plugin also allows you to directly read PDF files without converting them to jpegs with the help of pdf.js. It works great in all modern browsers and provides limited functionality in IE9 as well. Instead of creating the flipbook from PDF or image sets, you an also add individual pages manually or create pages using a WYSIWYG editor.

Books can be displayed to users using four different methods. This includes shortcode, templates, a lightbox and a bookshelf. Both the lightbox and bookshelf work in a similar manner. You simply have to click on a link to open the book. The major difference between them is the style of presentation.

User rafpigna says:

Great plugin and great support. Really suggested among the others!

Free WordPress Flipbook Plugins

There are also a few free WordPress flipbook plugins that you could try if you are not ready to purchase a premium plugin yet. However, remember that any free plugins you use might not receive regular updates or provide support when needed.

We have also included the free versions of a couple of premium plugins here so that you can try out the limited version of the premium plugins before deciding which one you should buy.

9. DearFlip

This is a free version of the dFlip PDF flipbook plugin. It allows you to quickly create 2D and 3D flipbooks. You can also provide a table of contents for your PDF.

10. iPages Flipbook

This is a Lite version of the iPages Flipbook plugin. It does not limit you in term of features. Both the lite version and pro version offer the exact same set of features. However, the Lite version only allows you create one flipbook.

11. 3D Flipbook

You can use this 3D Flipbook plugin to create flipbooks with realistic 3D animation for magazines, books and brochures.

Choosing a Flipbook Plugin

As you can see, there are a lot of choice available for people who want to turn their PDFs of books and magazines into flipbooks. All of them will allow you to create a flipbook from PDFs. Here are our suggestions if you are looking for something specific:

For a very realistic page turning experience consider using either the Real3D FlipBook plugin or the dFlip PDF FlipBook plugin. Real3D uses Three.js to create the realistic effects while dFlip relies on WebGL. Both of them support modern browsers starting from IE10.

Some of you might want more control over the content of the Flipbook. Two more plugins called Diamond Flipbook and Newspaper Flipbook would be great for you. They allow you to create flipbooks from a variety of sources as well as use a WYSIWYG editor to add content to the flipbooks. You will also get a slightly better browser support up to IE9.

Conclusion

As you can tell by now, there are many powerful options to customize your content using a WordPress flipbook plugin. Each of these flipbook WordPress plugins has something to offer—with features like bookshelf display and 3D book simulations, as well as embedded web and video content, you are able to create an engaging experience for your readers that makes the most of the display potential of digital media. Go ahead and try one of these tools for yourself to showcase your content easily and effectively.

As a developer, you can completely customize the back-end of your clients' websites to reflect their unique brand and messaging. It means completely transforming the look of the dashboard, admin menu, logo, graphics, header, the width of the logo, the footer logo, and the login form. You do this by removing all information that comes with WordPress. This is called white label branding.

If you are code savvy, you can make all these changes manually. But it´s time consuming. That's where white-label branding WordPress plugins come in. No coding experience is required to use them. With these plugins, even those with no coding knowledge can create a white-label back-end for your WordPress websites.

White Label Branding for WordPress Single Site

What Do White-Label Branding Plugins Do?

They give you the ability to control and transform the appearance of the back-end.
They help you customize the back-end of your WordPress site without coding.
They come with extensive documentation that helps you do the customization by yourself.

Bestselling WordPress White-Label Plugins for 2020

Here are a few of the best-selling white-labeling WordPress plugins available on CodeCanyon for 2020.

How White-Label Branding Is Done

White label branding can be done manually or by using plugins.

The manual process involves making changes to your WordPress theme's PHP code by inserting snippets of code to perform the following tasks:

replacing WordPress logos with the client’s logo
replacing standard login images with the client’s image
replacing the header
customizing the admin menu
replacing footer text like Powered by WordPress with your own wording

If you have no coding knowledge or little coding experience, then manual white labeling is overwhelming. The same applies to experienced developers who are pressed for time.

Of course, you don’t have to do all that manually. There are plugins you can use to do white labeling.

White-Label Branding Plugins on CodeCanyon

On CodeCanyon you will find white-label branding plugins that will help you customize your clients’ WordPress back-end to reflect their brands.

1. Bestselling: White Label Branding for WordPress (Single Site)

With the White Label Branding plugin, you have the ultimate tool for customizing the WordPress admin and login screen.

It allows you to take full control over branding in the WordPress admin by:

customizing your login screen, menus, and logos
changing the color scheme of the entire admin section
creating your own advanced login templates
creating new user roles and assigning capabilities

Not only that, but you can decide who has access to what features by hiding elements for other administrators.

You can even create a fake administrator account! This is useful if you want to give your clients “admin” access, but still limit what they have access to. The real administrator will also be hidden from the user list. This way, a client with the “fake” administrator account will never know that they don’t have full access to all features.

2. WPShapere

WPShapere is a very popular back-end customization plugin on CodeCanyon. It’s a very light plugin, easy to install, and easy to customize.

Here is what you can do with this powerful plugin:

remove the WordPress logo from the admin bar
upload your own logo to the login page and admin bar
customize the login page design
customize the admin theme with 16 built-in themes to kick-start your project
remove the WordPress default dashboard widgets
add your own content widgets and RSS widgets
customize the admin bar links
add your custom logo, text content, or links in the footer
create user access restrictions

3. White Label Branding for Multisite

White Label Branding for Multisite lets you control the branding of the main site and all sub-sites in a network of websites powered by WordPress Multisite.

This white label branding WordPress plugin for multisite allows you to:

give each sub-site the ability to do their own branding and customize their menus for the editor role
customize the menus and logos on each sub-site in your WordPress multisite network
replace the WordPress logo from the log-in screen and dashboard with your own identity or even your client’s
add custom dashboard meta box viewable only to editors or all users with your own welcome message or help

4. Ultra Admin

Ultra Admin is a combination theme and white-label branding plugin that helps you design a WordPress site for your clients with your own company branding.

It comes with 30 built-in theme templates. You can customize the admin menu, top bar, buttons, content boxes, typography, forms, text and background colors, logo, and so on.

Ultra Admin's white-label branding features will help you create a white label WordPress site by:

rearranging menu and submenu items
changing menu icons
controlling the top bar links
customizing the footer
setting plugin access permissions
customing the login page

5. WPAlter

WP Alter - White labeling WordPress Plugin

WPAlter completely changes the style of the WordPress admin panel to your desired color theme.

Using this plugin, you can:

remove the WordPress text and logo
create custom login themes and add a custom logo for login and admin pages
hide, rename, and rearrange admin menu items
hide admin menu items based on user roles

You can create a white label WordPress site and also white-label emails.

WPAlter is tested for compatibility with popular plugins: Visual Composer, WP Super Cache, WP Total Cache, Contact Form 7, and WooCommerce.

6. Material Admin

This multisite-compatible white-label branding WordPress theme comes with:

100 elegant themes and gives you an option to create your own custom theme
20+ custom dashboard widgets for site and visitor statistics
LTR and RTL modes so can be used for any language

To support white-label branding for WordPress, you can easily:

rearrange menu and submenu items
change menu icons
enable or disable menu and submenu items

It also comes with a fully customizable login screen.

7. Legacy Admin

Legacy Admin is an advanced, feature-rich white-label WordPress admin theme that comes with:

20 elegant, fully customizable themesfully customizable beautiful login screen theme
admin menu management

Here is what Legacy Admin allows you to do in terms of white-label branding:

customize the admin top bar (all links and CSS Styles)
customize the footer
customize the login section
customize the admin look and feel to represent your branding needs
customize the admin menu
add a custom logo and favicon for the admin panel

It is translation-compatible with RTL and LTR modes that can be used to support any language.

Finally, Legacy Admin is also multisite-compatible, so it’s easy to install and ready to use on a multisite network.

8. Slate Pro

Slate Pro - WordPress Admin Theme and White Label

Say goodbye to the run-of-the-mill WordPress. With Slate Pro, you can:

reimagine WordPress with a clean and simplified design
change or remove all WordPress branding
customize brand clients’ admins with custom colors and a custom login screen

Your clients don’t even have to know that you’re using WordPress! Also, Slate Pro is multisite-compatible, so you can control the look of all sub-sites.

9. wphave Admin—WordPress Admin Theme

wphave Admin is a clean, beautiful and modern admin theme that is very easy to customize. It is packed with useful features such as wp memory usage, custom login page, custom theme colors and many more.

Using wphave Admin you can do:

white-label branding for WordPress backend
white-label branding for login

Bonus

Here's one more plugin that isn't specifically a white-label branding plugin, but could be useful for any white-label branding project.

Menu By User Role

Menu by User Role gives you complete control over the menus in your WordPress-powered website. You have the ability to:

create a public menu
create a menu for logged-in users
create a separate menu for each user role defined in your website

In addition, you can create a custom navigation menu, which can be used instead of the default menu. In order to use this feature, it must be registered in the theme’s functions.php file.

You can easily add pages, posts, categories, and custom links to the menu. And you can even create multi-level menus with just a few clicks and organize them by drag and drop.

This plugin can be used together with White Label Branding for WordPress.

Free White-Labeling WordPress Plugins

For a professional white-label WordPress site, the premium plugins from CodeCanyon can't be beat. However, if you want to try creating white-label WordPress sites for free, here are some plugins you can start with.

Get a White-Labeling WordPress Plugin Now!

Transform the backend of your clients websites to reflect their unique brand and messaging with white-labeling WordPress plugins available on CodeCanyon.

bestselling white-labeling WordPress plugins for 2020

Finally, increase engagement on your WordPress websites with the help of these articles:

Bestselling Google Drive Plugins for WordPress on CodeCanyon

1. Bestselling: Use-your-Drive: Google Drive Plugin for WordPress

2. FileTrip

3. WordPress Cloud Manager

4. CloudFiles: WordPress Media Library Folders Cloud

5. Share-one-Drive: OneDrive plugin for WordPress

6. Super Backup & Clone: Migrate for WordPress

7. Out-of-the-Box: Dropbox Plugin for WordPress

8. Lets-Box: Box Plugin for WordPress

9. BeDrive: File Sharing and Cloud Storage

3 Free Google Drive Plugins for WordPress

1. Google Drive Embedder

2. UpdraftPlus WordPress Backup Plugin

3. Image & Video Gallery from Google Drive

Get Your Google Drive Plugin Now!

Free Course on Essential WordPress Plugins

The Best-Selling WordPress Utilities of 2020

1. WPBakery Page Builder for WordPress

2. Yellow Pencil

3. Hide My WP

4. Interactive World Maps

5. Advanced Google Maps Plugin for WordPress

6. Video Gallery Plugin

7. Essential Grid Gallery

8. White Label Branding for WordPress

9. Reviewer WordPress Plugin

10. Ajax Search Pro

11. Blog Designer PRO for WordPress

12. Super Store Finder for WordPress

13. Ajax Translator Revolution WordPress Plugin

14. Cornerstone

15. Filetrip

16. Ultimate Author Box

17. WP Contacts

18. Custom Page Templates

19. Out-of-the-Box

20. Diamond Flipbook

Add a Premium WordPress Plugin to Your Website Now!

Discover More Awesome WordPress Plugins

Learn More About WordPress Plugins

Learn How to Use WordPress

A Recap on How Arguments Work in WP_Query

Coding Your Arguments

Category Parameters

The cat Parameter

The category_name Parameter

The category__and Parameter

The category__in Parameter

The category__not_in Parameter

Tag Parameters

The tag Parameter

The tag_id Parameter

The tag__in Parameter

The tag__not_in Parameter

The tag_slug__and and tag_slug__in Parameters

Advanced Use of Categories and Tags with WP_Query

List Subcategories of a Category

Display The First Post from a Category in One Element Then More Posts in Another Element

Display Posts From Multiple Categories

Summary

How Functions in Parent and Child Themes Work

Pluggable Functions

Function Priority

Removing Functions From Hooks

A Note on Priorities

Advanced Parent and Child Theme Functions: Plugable Functions and Extending Functions

How to Partially Override a Function in the Parent Theme

How to Override Non-Pluggable Functions

How to Extend Parent Theme Functions

Summary

What Is a Control Structure?

Learning PHP Control Structures

PHP If Statement

PHP Else Statement

PHP Else If Statement

PHP Switch Statement

Loops in PHP

While Loop in PHP

Do-While Loop in PHP

For Loop in PHP

A Recap on How Arguments Work in `WP_Query`

The `cat` Parameter

The `category_name` Parameter

The `category__and` Parameter

The `category__in` Parameter

The `category__not_in` Parameter

The `tag` Parameter

The `tag_id` Parameter

The `tag__in` Parameter

The `tag__not_in` Parameter

The `tag_slug__and` and `tag_slug__in` Parameters

Advanced Use of Categories and Tags with `WP_Query`