Top 10 Tips for a Better WooCommerce Store(1 day, 14 hours ago)

Do you want your WooCommerce store to stand out from competition and attract traffic? 

The right WooCommerce plugins can make your online store better and more successful. In this post I'll share 10 ways you can improve your store and show you the best WooCommerce plugins on CodeCanyon.

With the right tactics, you can gain repeat customers and increase your profits.

On CodeCanyon you will find plugins and themes that will help you implement these suggested tips so your website can see increased sales and profits.

1. Presentation is Key

It can be viewed from the following perspectives:

  • aesthetic appeal
  • originality
  • clear product description

I'll discuss these concepts one by one.

Aesthetic Appeal

Final Tiles
                               One of the many gallery plugins available on CodeCanyon

The Aesthetic appeal of your store by gives it a signature look to distinguish it from others. Visually appealing stores create more customer engagement. Visitors to your website will stay longer and are more likely to buy or sign up for products and services you’re offering.

In addition, images improve your SEO ranking and make your website easier to find in search results. Make sure visual appeal is consistent on all devices and browsers.

To achieve this, gallery plugins are perfect for elevating the look of your store and driving customer engagement.

Originality

Customers trust a store with quality product photos or videos. Your product photos should  stand head and shoulders above every other website that uses stock photos. Conversion rates for online stores with original photos of their products is usually higher.

Clear Product Descriptions

Clarity reinforces trust. Use product descriptions that are clear and easy to follow. Your product categories should be precisely named and not ambiguous. Your warranty policy, your guarantee policy, your return policies should be clearly explained and easy to follow.

Top-Selling WordPress Gallery Plugins for 2020 on CodeCanyon

Grab one of these WordPress gallery plugins to help you build outstanding visual appeal for your WooCommerce store.

There are many different kinds of gallery plugins available on CodeCanyon for your WordPress website. Let's have a look. 

 Unite Gallery 

Unite Gallery

Unite Gallery makes creating beautiful image and video galleries for your WordPress website a breeze. It has 10 gallery layouts and over 120 options to choose from. This makes customization easy and fun. It Includes support for four types of videos: YouTube, Vimeo, HTML5 video, and Wistia.

InstaShow Instagram Feed

InstaShow Instagram Feed

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

 Global Gallery 

Global Gallery

With the Global Gallery plugin you will be able to create filterable, fully responsive and adaptive galleries on your website from unlimited image sources. It comes with impressive features including: four gallery layouts, ten lightboxes, slider and carousel mode, and integration with Visual Composer, Elementor and Cornerstone.

 Justified Image Grid

Justified Image Grid Gallery

Showcase your images in the most beautiful and authentic way without changing their original size by using the Justified Image Grid Gallery. There is no random cropping—it maintains the integrity of your photos.Combining Justified Image Grid gallery with Visual Composer (aka WPBakery) makes it possible to live preview any change of your carefully crafted galleries.

Final Tiles WordPress Gallery

Final Tiles

Here is why Final Tiles WordPress Gallery is impressive: 

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

2. Easy Navigation is User-Friendly

Is your store easy to navigate? Easy user-friendly navigation significantly enhances the experience of visitors to your website. It makes it easy for visitors to find, read about, and checkout products. Make sure you have guest checkouts, not everyone wants to sign up. Few clicks as possible, if not visitors will just leave.

Top-Selling Menu and Navigation Plugins for 2020 on CodeCanyon

Grab one of these menu plugins to help you build user-friendly navigation for your WooCommerce store customers. 

There are many different kinds of menu plugins available for your WordPress website. 

Let's have a look.

 UberMenu

UberMenu WordPress Mega Menu Plugin

UberMenu is the most popular mega menu plugin on Code Canyon. It is fully responsive, provides its own mobile menu, you can choose from multiple layouts, configure click and hover behavior, and show or hide content for different screen sizes. You can rapidly develop mega menus from your pages, posts, custom links, or any content! You can tweak menu colors, sizes, and fonts with the Customizer’s Live Preview.

TapTap

TapTap Super Customizable WordPress Mobile Menu

Customizing your mobile menu is faster and easier than ever, thanks to TapTap! It blends seamlessly into any WordPress website. You can preview any changes you make in real time. It uses the built-in WordPress customization tools and menu builder. This means the plugin is lightweight and allows you to use tools you’re already familiar with. No need to learn a new interface! TapTap is WordPress Multisite compatible!

 Touchy WordPress Mobile Menu

Touchy WordPress Mobile Menu

Touchy WordPress Mobile Menu is designed and built with smartphone usability in mind. It is tremendously customizable. With just a few clicks, you can change the color of any element, alter positioning options, hide any of the menu bar buttons, override button functions, change transparencies, and more. Touchy also works great on desktop browsers, so if you wish, you can even use it on a full-blown desktop site.

QuadMenu: Theme Developer Menu

QuadMenu - Theme Developer Menu

QuadMenu is a WordPress menu designed for both regular users and developers. It has a drag-and-drop interface dashboard that allows you and your users to create and customize an unlimited number of mega menus and tab menus without any programming skills.

 WP Floating Menu Pro

WP Floating Menu Pro

 WP Floating Menu Pro  is a two-in-one menu for WordPress, comprising a page navigator and sticky navigation menu. With this plugin, you can add a smart looking page scrolling navigation bar to any WordPress theme or website in just minutes. All you need to do is define the sections on your website and create the one-page navigation menu. 

3. Feature Bestselling Products On Your Home Page

Have you seen stores that feature product of the day on their homepage? This practice boosts the visibility of your products and your online store, increase their SEO ranking, make them easy to find on online searches. It also gives customers ideas about their next purchase. You can use sliders to display your products in ways that engage visitors on your online store.

Top Selling Sliders and Carousels in 2020 at CodeCanyon

Grab one of these slider plugins to help you display bestselling products on your home page. 

On CodeCanyon you will find slider plugins to help you showcase popular products that are selling well on your website. Let's have a look. 

 RoyalSlider

RoyalSlider
RoyalSlider

RoyalSlider will knock the socks off your visitors with its clean design and professional functionality. Its native HTML5 fullscreen support makes it perfect for displaying high-resolution photography! You can create multiple sliders per page, even with different skins. You can also create vertical or horizontal thumbnails, bullets, or tabs for navigation. It also has touch swipe navigation support. You can't go wrong with a slider that is used by companies as diverse as Coca Cola, Ralph Lauren, and Land Rover.

Ultra Portfolio

Ultra Portfolio
Ultra Portfolio

Ultra Portfolio offers a large number of layout options and really delivers on flexibility and functionality. The most appealing feature of this slider is the ability to control animation effects and animation speed. It comes with unlimited layouts, WooCommerce integration, and Google Font integration.

Carousel Anything 

Carousel Anything
Carousel Anything 

 Carousel Anything is the easiest and quickest way to create carousels for your website. Whether you're creating a carousel of blog posts, image sliders, video showcases, testimonials, or team members—you're covered. It is lightweight, works great with touch devices and all types of themes. It comes with two designs: one displays your posts in a simple and clean layout, while the other offers a few more design features.

Super Carousel

Super Carousel is a multi-purpose responsive WordPress image and content carousel plugin. It has its own image and content management system. It supports post, custom post, taxonomy, custom taxonomy, YouTube, RSS Feeds and Flickr. In addition, it has an built-in template system, as well as filters and actions to make customization easy. 

4. Upselling & Cross-Selling

Upselling and cross-selling boost sales and increase profitability for your online store.

If a customer is looking for a particular product, you can persuade them to buy an high-end, more expensive version of it. This is upselling.

When you suggest products that goes with or compliments an item that a customer is buying, this is cross-selling.  

On CodeCanyon you will find plugins that can make it easy for you to cross-sell or upsell.

You can use plugins that will help you:

  • suggest products that go together
  • suggest products related to what customers have bought
  • suggest alternative products if they can't find what they are looking for

Best Upselling and Cross-Selling Plugins on CodeCanyon

WooCommerce Boost Sales

WooCommerce Boost Sales

WooCommerce Boost Sales allows you to add upsell, cross-sell products in your Woocommerce store.

WooCommerce Extra Product Options 

WooCommerce Extra Product Options

Need further pricing options to grab your shoppers attention? Extra Product Options is the best WordPress Product Plugin you have been searching for.

You can create priced product options and addons, conditional logic (within the form builder), build forms, style & validate features, convert the variation attributes dropdowns to radio buttons, image swatches and much more.

WooCommerce Notification

WooCommerce Notification

WooCommerce Notification displays recent orders on your storefront. It’s the online equivalent of a busy store and shows prospective customers that other people are buying your products.

  • Increase conversion rate by highlighting other customers that have bought products.
  • Display orders in real time for buyer validation and social proof!
  • Create a sense of urgency for visitors, and expose new products!

WooCommerce Frequently Bought Together

WooCommerce Frequently Bought Together

Your customers often want more than one product, but they might need inspiration as to what other products could fit with the one they are buying.

You can manually assign frequently bought together (FBT) products. Or, perhaps more interestingly, the plugin can automatically match products that are bought together or added to carts together.

Then you can simply show these products on product or cart pages and increase your cross sales!

5. Call to Action Buttons Mean Increased Income 

After doing the work of attracting traffic to your store and getting visitors to look at products on your website, you want them to take action. Place clear call to action messages and buttons on all pages on your website. 

Add to Cart, Buy Now, Subscribe Now, Sign Up: these should be effortless to find. Call to Action means increased conversation rates which translates into increased income.

WordPress Button Plugins for WooCommerce 

Call to Action plugins like Buttons X guide your website visitors to take appropriate actions.

 Buttons X

Build any kind of button imaginable right from your WordPress Dashboard with Buttons X!

Buttons X is a WordPress button builder plugin which comes with free extensions and free button packs. It is packed with functionality that allows countless button variations to be made easily without any coding.

Buttons are fully responsive and, of course are fully CSS3 compliant.

6. Make Checkout Painless

To avoid abandoned carts, speedy checkout is a must. Make it easy for shoppers to pay you by making paying painless.

Don’t make customers fill in too many forms and details before they pay. And allow for guest checkout!

Also integrate popular payment gateways into your WooCommerce store. Paypal, Square, and Stripe are some popular gateways.

Dealing With Abandoned Carts

Sometimes customers add the products to their cart then leave the website because of some reason. You can send them an email reminding them they have an abandoned cart. This is a great way to close a sale you're about to lose because you can include an extra discount which more often leads to a sale. 

Using the plugins below you can navigate abandoned cart communications with customers.

CartBack

CartBack is the most effective way to recover abandoned carts because it sends abandoned carts messages to Facebook Messenger. It gets high open and click rates once it reaches Facebook Messenger chat box. This often generates and boosts sales.

You can customize your message and call-to-action button, create “Send to Messenger” coupon box and “Send to Messenger” shortcode box, and you can also collect users’ data to follow up.

WooCommerce Abandoned Cart Recovery

WooCommerce Abandoned Cart Recovery helps you to recover unfinished order in your store. The plugin sends cart recovery email or Facebook message to the customer, reminding them to complete the order.

WooCommerce Abandoned Cart Email Reminder

Using this plugin, you can easily track those customers who abandon their cart and send them cart recovery email reminders. In addition, you can send them SMS along with the emails. 

7. Top Notch Customer Service

Think about integrating a CRM platform into your WooCommerce store. CRMs are excellent for building relationships with your online store customers. They keep detailed records of transactions, communications from emails to phone conversation details. In addition, social media is a great space for customers to engage with your online store and content you put out. It is where you can build your online community. 

WooCommerce Customer Relationship Manager

WooCommerce Customer Relationship Manager

Manage your customers and make sales from the same admin using WooCommerce Customer Relationship Manager. With this impressive plugin: you can classify customers as leads or prospects, record notes about your customers and their financial activities with your business, send emails in bulk or one by one, place and log phone calls. You can also integrate MailChimp, WooCommerce subscriptions, and Advanced Custom Fields plugin!

NinjaTeam Facebook Messenger for WordPress

NinjaTeam Facebook Messenger WordPress Social Media Plugin

Let visitors contact you directly through your website with the WordPress Facebook Plugin. Based on Facebook Messenger, this plugin creates a Message Us on Facebook button for your website that allows you to chat with your customers in one of the easiest and most effective ways. 

WhatsApp Click to Chat Plugin for WordPress

WhatsApp WordPress Social Media Messenger Plugin

Embed a click-to-chat WhatsApp button on your site, making it easy for your customers to reach out. You can display multiple accounts and set availability for each account so that the widget is hidden when you are not available for live chat. 

8. Embrace the SEO

It doesn't matter how good your online store is if you don't have any visitors. That's where SEO—search engine optimization—comes in. You need good SEO to get visitors to your site.

Best WordPress SEO Plugins on CodeCanyon 

Premium SEO Pack—WordPress Plugin

Premium SEO Pack demo

Attract organic traffic to your site with the Premium SEO Pack, one of the best SEO plugins for WordPress. This plugin packs a punch: the powerful Search Engine Results Pages (SERP), Website Statistics, and Report modules provide a 360-degree view of your website’s SEO strategy. It has a user-friendly interface and is easy to set up.

Rankie—WordPress Rank Tracker Plugin

Rankie plugin demo

Rankie is an SEO plugin that helps you track WordPress rankings on Google. It incorporates a powerful keyword research tool that generates keyword lists based on real users’ Google searches, showing you the terms to target to increase traffic to your site. 

You can use this plugin to track keywords over time, and generate downloadable reports and graphic data to help you or your client analyze and implement the most effective SEO keyword ranking strategy for your website.

WP GeoIP Country Redirect

WP GeoIP plugin demo

Does your website generate traffic from different countries and feature multiple page options optimized for viewers from different locations? Make sure to capture your visitors’ attention by getting them to the right page, quickly. 

The GeoIP Country WordPress SEO plugin detects the location of your visitors in order to automatically redirect them to the most relevant part of your site, based on their country of origin and a set of rules that you can define on your WordPress admin panel. 

This SEO plugin includes a mass redirect feature to send unwanted website traffic away from your site in order to lower your bounce rate and optimize your website’s performance.

Interlinks Manager

Interlinks Manager plugin demo

One of the most important SEO strategies is to build an effective internal links structure that is both relevant to search engines and feels natural for readers. The Interlinks Manager SEO plugin is a tool to help you develop this structure and increase visits to your website. 

Create automated internal links using specific keywords, and analyze and manage internal links through the dashboard in order to ensure an optimized number of links per post. Save time with the Interlinks Suggestion meta box tool to find articles related to the post you are working on. With many more features and ample user controls, this plugin can be modified to perfectly support your website’s specific SEO needs.

9. Be Social

Social media integration is an important part of your web presence, for brands, businesses, and individuals. These plugins take the time and effort out of social media strategy by using smart automation, integration, and outreach tools. .

Top-Selling Social Media Plugins for 2020 on CodeCanyon

Social media is a powerful way to connect with your customers. Check out the social plugins below to harness the power of social networks. 

Facebook Messenger Customer Chat WordPress Plugin

Facebook Messenger Customer Chat WordPress Plugin

Make connecting with your customers easier and provide a seamless experience for visitors to your WordPress site with the Messenger Customer Chat plugin. Based on Facebook Messenger, this plugin allows customers to contact you for live chat directly through your website.

Messenger Customer Chat automatically loads recent chat history with each individual, to create a streamlined experience for your customers that allows you to continue the conversation even after they have left your website. No need to capture customers' information for follow up: just open the conversation in Messenger and continue where you left off! This plugin is a very convenient way for customers to stay in touch. And with each interaction, you build your customer base for future online marketing and outreach.

Flow-Flow WordPress Social Stream Plugin

Flow-Flow WordPress Social Stream Plugin

This WordPress social media plugin lets you combine feeds from 16 sources—including popular social sites like Facebook, Twitter, Instagram, and YouTube—into responsive walls or galleries, so news, photos, videos, and reviews can all be integrated into the same stream. Smart caching means this plugin delivers your stream content without lags, which is especially important when you are pulling from multiple networks. Beautiful templates, hover animation, and lightbox functionality round out this plugin.

Instagram Feed WordPress Gallery

WordPress Instagram Feed Gallery Social Media Plugin

Create galleries for your website with this WordPress social media plugin. Advanced filtering options let you stream from unlimited Instagram sources using any combination of usernames, hashtags, locations, and post URLs. You can also exclude specific photos, usernames, or hashtags from your feed. 

This plugin is fully responsive and mobile-friendly, and you can choose from slider or grid layouts, tile or classic post templates, and multiple colour schemes to create a custom Instagram feed to your existing site.

10. Build Trust With Security and Social Proof

To ensure customer data is kept safe, your site should use SSL and HTTPS. You can find out how to install an SSL certificate for free here on Envato Tuts+.

To help communicate that your site is secure, SSL certificate should be prominently displayed. If the certificate is issued and verified by a trusted third party security company, like Thwate for example, the name of the security company should be prominently displayed. 

Best Social Proof Plugins on CodeCanyon

Customer reviews and testimonials offer a space for digital word of mouth. Customers trust the word of other customers who have purchased your product. Their decision to buy will be based on what others who have used your products or services have to say.

Taqyeem 

Taqyeem is a premium reviewing and rating WordPress plugin. This plugin was built for adding lovely ratings and reviews to your posts, pages, and custom post types. Use the customization options to create the perfect rating addition to your website. Change the fonts, image, colors, style, and of course the criteria.

Conclusion

In this post, we looked at customer-centric ways of making your online store more engaging. These tactics when done well can help increase your sales and profits. 

The following articles will help in your journey to build a profitable WooCommerce store. 


15 Best WordPress Audio Player and Video Player Plugins(5 days, 16 hours ago)

Add a stylish and easy-to-implement audio and video player plugin to your WordPress website to help display your website's content in an interactive way. 

Popup WordPress video plugin screenshot

The audio and video WordPress plugins available on CodeCanyon will allow you to integrate a fully customizable and full-featured audio and video player to your website. 

Whether you are a musician, YouTuber, filmmaker, eCommerce business owner, or a blogger, the high-quality WordPress plugins can be used effectively on your website.

The Best WordPress Slider & Carousel Plugins on CodeCanyon

Discover CodeCanyon's extensive library of the best audio and video WordPress plugins ever created. With a cheap one-time payment, you can purchase these high-quality WordPress plugins and give your website viewers a more interactive experience.  

Best-selling audio and video player plugins available on CodeCanyon
Best-selling audio and video player plugins available on CodeCanyon

These dynamic audio and video player plugins allow you to present your video and audio in a visually appealing way. The flexibility and feature-rich audio and video player plugins contain many features that will enhance your user's experience including:

  • playlist creation
  • fully responsive players
  • audio and video purchasing buttons
  • search function
  • player window resizers

If you need to add either audio or video to your website, then head on over to CodeCanyon and choose from the premium plugins available. 

Best-Selling WordPress Audio Players

Here are 9 of the top-rated WordPress audio plugins that are available for you to download on CodeCanyon.

1. ZoomSounds—WordPress Wave Audio Player with Playlist

ZoomSounds WordPress audio player demo

ZoomSounds is a retina-ready, fully responsive HTML5 WordPress audio player that supports self-hosted MP3, M4A, and WAV files, as well as MP3 Shoutcast radio stations. This plugin features nine editable CSS skins, so you can customize or simply choose a style that suits your brand. 

Curate how users experience your audio—this plugin has options for audio looping, user commenting, and playlist or single track downloads. Optimized for Apple and Android devices and built with search engine optimization in mind, this WordPress audio player plugin is compatible with all major browsers, so it will meet the needs of both you and your listeners.

User PickWard says:

“Our soundtrack site is performing beautifully with ZoomSounds. Very stable—both on desktop and on mobile—and have had zero end-user complaints. Really great plug-in, and I've tried a lot!”

2. MP3 Sticky Player WordPress Plugin

MP3 Sticky WordPress audio player demo

Create an uninterrupted audio playback experience for your website visitors with this WordPress audio player. Listeners can browse other websites while enjoying to your audio on a popup player that deploys in a separate window. 

Compatible with MP4 and YouTube videos, this mobile ready player runs on all major browsers. Features like HTTP live streaming, deep linking, share buttons, and Shoutcast and Icecast support create a complete WordPress media player that creates a dynamic AV experience for your audience.

User 5dportal says:

“This player plugin is the best MP3 player in the market, hands down.”

3. Responsive HTML5 Audio Player PRO WordPress Plugin

Responsive HTML5 WordPress audio player demo

This high-performance WordPress audio player encourages listeners to interact with your content. With playlist search, lyrics integration, download, purchase, and social share capability, this WordPress audio plugin keeps listeners engaged. Integrate this player into your existing website design with fully customizable colour schemes. Mobile-compatible, responsive design ensures that your audio will reach your audience, every time.

User leonordl says:

“Great design and great, fast support! Definitely recommend it!"

4. Radio Player Shoutcast and Icecast WordPress Audio Plugin

Radio WordPress audio player demo

Stream radio content on your website with this WordPress audio plugin. Add a radio stream, and this plugin will automatically load the name, categories, current song, and artist photo of all MP3 audio streamed. 

Fully compatible with responsive websites, this plugin also allows you to disable responsive behaviour for integration into non-responsive sites, should you desire. With support for Shoutcast and Icecast and over 70 customization options, this is the only WordPress audio plugin you need for radio streaming.

User rfisher68 says:

“This product has been fantastic since the day I purchased it. The free radio players available on the net are nothing shy of a complete hassle. The customer service here is top notch. In fact, I purchased an additional player, that's how impressed I was with the first one.”

5. tPlayer—WordPress Audio Player

tPlayer WordPress audio plugin demo

Create as many playlists as you want, each with an unlimited number of tracks, with this WordPress audio player. This plugin is a powerful and highly customizable audio player, with many unique front-end options—for example, you can let listeners enjoy an automatic “Top 10 songs of the week” playlist and consult song details and stats directly in the player, or add this player to any post or page as a widget. This WordPress audio plugin runs on all major browsers, is mobile-friendly, and can be installed in any WordPress theme.

User soulshakepower says:

“I found it really hard to find a decent audio player nowadays since it's all about video. I've tested dozens of plugins but I'm glad I found tPlayer. It is trendy, has a lot of features, and most importantly it works great on all devices!”

6. Native HTML5 Radio Player WordPress Plugin

Native WordPress audio plugin demo

Weave cross-platform radio streams into your website with this WordPress audio player. This plugin plays all MPEG and AAC audio streams using HTML5 live streaming technology. Mobile-ready for both iOS and Android, this fully responsive player features a streamlined design that works on all major browsers. Simple and straightforward to use, the audio player features “Now Playing” song information and displays album cover images with links to iTunes.

User danmason says:

“Stylish, simple to use, and very well designed player. Support was fast and helpful, too. This is an outstanding plugin worth every penny.”

7. Disk Audio Player for WordPress

WordPress audio plugin demo

This easy-to-use WordPress HTML5 audio player is customizable with multiple skins and unlimited colour options. Retina ready and mobile responsive, this audio plugin features keyboard control, external links to support purchases and downloads, track info, and playlists with an adjustable scrollbar. Configure your audio player easily with a drag-and-drop admin panel.

User TooCrazyMedia says:

“Really good player. Best support!”

8. WavePlayer—WordPress Audio Player With Waveform and Playlist

WavePlayer WordPress audio player demo

Host your own audio tracks and play them in this beautiful, modern WordPress audio player. This plugin's interface is built around the waveform of the audio file that is playing, and it allows you to insert custom track information for your files. Ideal for music and podcast websites, this WordPress audio plugin is fully integrated with WooCommerce, and uses Font Awesome 5 for high-quality icon design.

User herringla says:

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

9. HTML5 Audio Player WordPress Plugin

HTML5 WordPress audio player screenshot

This mobile-compatible WordPress audio plugin can be used as a fully functional player, or to play background music on your WordPress site. This plugin features continuous playback and shuffle options, as well as the ability to automatically generate a playlist from a folder of .mp3 files. Insert multiple instances of this player into your website or a page and customize the design by changing the colour or hiding elements, to best complement your website.

User Paully says:

“The support I received regarding this plugin is fantastic. I would highly recommend any plugin from this developer. Thanks for your A-class service.”

Best-Selling WordPress Video Players

1. WordPress Responsive YouTube Playlist Video Player

Responsive WordPress video player screenshot

Play YouTube content on your website using this fully responsive and intelligent resizing WordPress video plugin. Simply enter a YouTube playlist, channel, or single video ID as a source, and this plugin will run your video content smoothly on mobile and desktop devices. This WordPress video player has a fully customizable CSS-built interface rather than the default YouTube player. 

With total control over play options, unlimited playlist length, and integrated social sharing features, this plugin is a full-service solution for your WordPress video player needs.

User Splash1 says:

“Great looking playlist, easy to use, and does exactly what I need. Great job!”

2. Elite Video Player—WordPress Plugin

Elite WordPress video player screenshot

This powerful WordPress video player supports the most popular video platforms and includes multiple advertising options. It's truly versatile, so you can play content from YouTube, Vimeo, self-hosted videos, Google Drive, local videos, live streaming content, and more. 

This WordPress video plugin supports pre-, mid- and post-roll video and pop-up ads, so you have full control of the advertising potential of your content. Play videos from multiple sources in your playlists, track plays and advertising data using integrated Google Analytics, and expect seamless performance across platforms with this WordPress video player.

User davidmfraser says:

“Quite simply the best video player I have used in connection with WordPress, and I have tried several. Easy to set up and customize the player. Very simple and intuitive, even for those with not much of a tech background. Aesthetically, fantastic to look at. The support is very good, quick as well. Very happy—5 stars!”

3. Ultimate Video Player WordPress Plugin

Ultimate WordPress video player screenshot

Stream audio or video from a server, YouTube, or Vimeo with this WordPress video player. Features like responsive layouts and skins, multiple playlists, optional deep linking, and VR support enhance this video player’s functionality. 

This WordPress video plugin incorporates multiple video engines, allowing it to work on mobile or desktop devices no matter which browser is used. This player includes advertising support and is integrated with both Google Analytics and Google AdSense, so you can make the most of your views.

User wollesen1 says:

“Elegant, seamless plugin with a lot of customizations available. I needed a responsive video player that would host local video, and also pause when clicking anywhere on the video, among other things. I'm very happy with this purchase.”

4. WordPress Vimeo YouTube Popup Plugin

Popup WordPress video plugin screenshot

Use this WordPress video player plugin to easily create popup videos on your website. Users can click any designated element on your site—image, link, or other elements—to play YouTube or Vimeo videos in a popup player. This WordPress video plugin includes shortcodes to make your job easy. 

This player is responsive to browser sizes, has a scrollspy so that your video is always visible in the browser, and supports autoplay, so you can be sure that your visitors will view your featured video content.

User wipeoutmedia says:

“Thank you for creating this awesome solution. I have been looking for something like this for a while now and am so happy to have found it. Five stars for quality!”

5. Video Player and Fullscreen Video Background

Fullscreen Video Background WordPress video plugin screenshot

Enhance your website with a full-screen video background using this WordPress video player. Responsive and mobile-friendly, this player supports YouTube, Vimeo and self-hosted video files, and can automatically pull video thumbnails, titles, and descriptions for YouTube content. Customize your player style and functionality with over 30 parameters, choose a fixed width or full width, or even add texture over your video images.

User sandasusin says:

“Great plugin and great support!”

6. Facebook Live Video Auto Embed for WordPress

Facebook Live WordPress video plugin screenshot

Embed Facebook live streams to your WordPress site with this WordPress video plugin. Compliant with new Facebook data policies, this plugin detects if your Facebook account, page, or group is currently live and automatically embeds the video stream on your site. 

This video plugin features many customization options, including custom messages for website visitors during live streams and when offline. This WordPress video player is responsive out of the box, which allows to you easily embed your Facebook video content on your website for an effortless viewing experience.

User rmangram says:

“The support is awesome, especially when you have to keep your website accurate and up-to-date. They have been responsive, and the app works great and easy.”

Free Audio and Video Player WordPress Plugins for Download in 2020

The premium audio and video player WordPress plugins will give you the greatest amount of features and control over the media player. This will ensure that the user experience is the best it possibly can be. However, many website owners are on a tight budget and cannot afford to purchase these premium plugins, but their media still needs to be uploaded to their website. 

To help WordPress website owners that are on a budget, I have collected a list of five of the best free WordPress audio and video plugins available. 

1. CP Media Player

CP Media Player

The CP Media Player allows you to add files to the player that are in the format MP4, OGG, WebM, MP3, WAV and WebSRT. The player guarantees support for all browsers that implement the HTML5 standard. 

2. Audio Album

Audio Album enables you to style a group of audio files as a single block formatted as an album. The colors can be customized in the Audio Album section of the WordPress customizer. The player can be added to your website with the shortcodes available. 

3. FV Flowplayer

FV Flowplayer

FV Player is a complete solution for embedding FLV or MP4 videos into your posts or pages. This player comes with a wide range of features including custom start and end screens and media looping.

4. WooCommerce Music Player

Music Player for WooCommerce allows you to add a music player in the pages that contain your products. When uploading music to the player, you can associate audio files to a specific price and sell the audio files. 

5. Compact WP Audio Player

Compact WordPress Audio Player is an HTML5 plugin that can easily be embedded on your WordPress post or page using a shortcode. All major browsers will display this .mp3 and .ogg audio player.

How to Add an Audio Player to Your Website Using WavePlayer

To help show you just how easy it is to create an audio player and add it to your website with one of the premium audio player plugins available, we are going to go over how to create an audio player with the WavePlayer WordPress plugin. 

1. Adding the Audio Player to a Page or Post

Once you have uploaded the audio files that you would like to add to the WavePlayer in the media library, head on over to WP Dashboard > Pages > Add New. From the page creator page, we are going to click the Add Media button in the page editor. 

WavePlayer Add media

This will open up the WordPress media library. From there, we will click the Create WavePlayer link. We can now pick the audio files that we would like included in the audio player and click the Create a new WavePlayer button on the bottom right of the screen.    

WavePlayer Select new media
Adding media to the WavePlayer

2. Editing the Audio Player Settings

Now that we have created the audio player, it is time to style it. On the right-hand side of the screen, there will be a menu of options for us to customize. The first setting we are going to change is the style, We will change this to Dark as it will fit with our website's theme. Next, we will change the wave mode to Bars (6px) so the waveform will be a bit more impactful on smaller screens. 

Adjusting WavePlayer Settings

Finally, click the Insert WavePlayer button and the bottom-right of the screen and the WavePlayer shortcode will be added to the text editor in on your page. Click the Publish and Preview Changes button and you can see the audio player we just created on our pages. 

WavePlayer Audio Player

3. Adjusting the Settings Further

When creating the audio player, we were able to adjust a few of the styling options. If we click on WP Dashboard > Settings > WavePlayer, we can access many more customizable features. One of the best features to customize is in the Waveform Options tab. This will allow you to change the color of the waveform and preview these changes instantly unlike in the WaveForm creator. This will help you match the audio player with your website's theme more accurately. Feel free to browse all the other options in the settings of the WavePlayer to ensure it functions exactly how you would like it to. 

Install an Audio and Video Player WordPress Plugin Now! 

If you looking for a way to feature your audio and video content on your website in a stylish and interactive way, then purchase a premium WordPress audio and video plugin from CodeCanyon.

The various features and styling options allow you to integrate an eye-catching and fully functional player for your media that can fit your website's theme. 

While you are on CodeCanyon, feel free to check out the thousands of premium WordPress plugins available, as well as the best-selling, trending WordPress plugins of the year. 

Here are a few of the best-selling and hot new WordPress plugins available on CodeCanyon for 2020.

Add a stylish and easy-to-implement audio and video player plugin to your WordPress website to help display your website's content in an interactive way. 

Responsive HTML5 Audio Player PRO WordPress Plugin
One of the many high-quality WordPress audio and video plugins available on CodeCanyon

The audio and video WordPress plugins available on CodeCanyon will allow you to integrate a fully customizable and full-featured audio and video player to your website. 

Whether you are a musician, YouTuber, filmmaker, eCommerce business owner, or a blogger, the high-quality WordPress plugins can be used effectively on your website.

The Best WordPress Slider & Carousel Plugins on CodeCanyon

Discover CodeCanyon's extensive library of the best audio and video WordPress plugins ever created. With a cheap one-time payment, you can purchase these high-quality WordPress plugins and give your website viewers a more interactive experience.  

Best-selling audio and video player plugins available on CodeCanyon
Best-selling audio and video player plugins available on CodeCanyon

These dynamic audio and video player plugins allow you to present your video and audio in a visually appealing way. The flexibility and feature-rich audio and video player plugins contain many features that will enhance your user's experience including:

  • playlist creation
  • fully responsive players
  • audio and video purchasing buttons
  • search function
  • player window resizers

If you need to add either audio or video to your website, then head on over to CodeCanyon and choose from the premium plugins available. 

Best-Selling WordPress Audio Players

Here are 9 of the top-rated WordPress audio plugins that are available for you to download on CodeCanyon.

1. ZoomSounds—WordPress Wave Audio Player with Playlist

ZoomSounds WordPress audio player demo

ZoomSounds is a retina-ready, fully responsive HTML5 WordPress audio player that supports self-hosted MP3, M4A, and WAV files, as well as MP3 Shoutcast radio stations. This plugin features nine editable CSS skins, so you can customize or simply choose a style that suits your brand. 

Curate how users experience your audio—this plugin has options for audio looping, user commenting, and playlist or single track downloads. Optimized for Apple and Android devices and built with search engine optimization in mind, this WordPress audio player plugin is compatible with all major browsers, so it will meet the needs of both you and your listeners.

User PickWard says:

“Our soundtrack site is performing beautifully with ZoomSounds. Very stable—both on desktop and on mobile—and have had zero end-user complaints. Really great plug-in, and I've tried a lot!”

2. MP3 Sticky Player WordPress Plugin

MP3 Sticky WordPress audio player demo

Create an uninterrupted audio playback experience for your website visitors with this WordPress audio player. Listeners can browse other websites while enjoying to your audio on a popup player that deploys in a separate window. 

Compatible with MP4 and YouTube videos, this mobile ready player runs on all major browsers. Features like HTTP live streaming, deep linking, share buttons, and Shoutcast and Icecast support create a complete WordPress media player that creates a dynamic AV experience for your audience.

User 5dportal says:

“This player plugin is the best MP3 player in the market, hands down.”

3. Responsive HTML5 Audio Player PRO WordPress Plugin

Responsive HTML5 WordPress audio player demo

This high-performance WordPress audio player encourages listeners to interact with your content. With playlist search, lyrics integration, download, purchase, and social share capability, this WordPress audio plugin keeps listeners engaged. Integrate this player into your existing website design with fully customizable colour schemes. Mobile-compatible, responsive design ensures that your audio will reach your audience, every time.

User leonordl says:

“Great design and great, fast support! Definitely recommend it!"

4. Radio Player Shoutcast and Icecast WordPress Audio Plugin

Radio WordPress audio player demo

Stream radio content on your website with this WordPress audio plugin. Add a radio stream, and this plugin will automatically load the name, categories, current song, and artist photo of all MP3 audio streamed. 

Fully compatible with responsive websites, this plugin also allows you to disable responsive behaviour for integration into non-responsive sites, should you desire. With support for Shoutcast and Icecast and over 70 customization options, this is the only WordPress audio plugin you need for radio streaming.

User rfisher68 says:

“This product has been fantastic since the day I purchased it. The free radio players available on the net are nothing shy of a complete hassle. The customer service here is top notch. In fact, I purchased an additional player, that's how impressed I was with the first one.”

5. tPlayer—WordPress Audio Player

tPlayer WordPress audio plugin demo

Create as many playlists as you want, each with an unlimited number of tracks, with this WordPress audio player. This plugin is a powerful and highly customizable audio player, with many unique front-end options—for example, you can let listeners enjoy an automatic “Top 10 songs of the week” playlist and consult song details and stats directly in the player, or add this player to any post or page as a widget. This WordPress audio plugin runs on all major browsers, is mobile-friendly, and can be installed in any WordPress theme.

User soulshakepower says:

“I found it really hard to find a decent audio player nowadays since it's all about video. I've tested dozens of plugins but I'm glad I found tPlayer. It is trendy, has a lot of features, and most importantly it works great on all devices!”

6. Native HTML5 Radio Player WordPress Plugin

Native WordPress audio plugin demo

Weave cross-platform radio streams into your website with this WordPress audio player. This plugin plays all MPEG and AAC audio streams using HTML5 live streaming technology. Mobile-ready for both iOS and Android, this fully responsive player features a streamlined design that works on all major browsers. Simple and straightforward to use, the audio player features “Now Playing” song information and displays album cover images with links to iTunes.

User danmason says:

“Stylish, simple to use, and very well designed player. Support was fast and helpful, too. This is an outstanding plugin worth every penny.”

7. Disk Audio Player for WordPress

WordPress audio plugin demo

This easy-to-use WordPress HTML5 audio player is customizable with multiple skins and unlimited colour options. Retina ready and mobile responsive, this audio plugin features keyboard control, external links to support purchases and downloads, track info, and playlists with an adjustable scrollbar. Configure your audio player easily with a drag-and-drop admin panel.

User TooCrazyMedia says:

“Really good player. Best support!”

8. WavePlayer—WordPress Audio Player With Waveform and Playlist

WavePlayer WordPress audio player demo

Host your own audio tracks and play them in this beautiful, modern WordPress audio player. This plugin's interface is built around the waveform of the audio file that is playing, and it allows you to insert custom track information for your files. Ideal for music and podcast websites, this WordPress audio plugin is fully integrated with WooCommerce, and uses Font Awesome 5 for high-quality icon design.

User herringla says:

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

9. HTML5 Audio Player WordPress Plugin

HTML5 WordPress audio player screenshot

This mobile-compatible WordPress audio plugin can be used as a fully functional player, or to play background music on your WordPress site. This plugin features continuous playback and shuffle options, as well as the ability to automatically generate a playlist from a folder of .mp3 files. Insert multiple instances of this player into your website or a page and customize the design by changing the colour or hiding elements, to best complement your website.

User Paully says:

“The support I received regarding this plugin is fantastic. I would highly recommend any plugin from this developer. Thanks for your A-class service.”

Best-Selling WordPress Video Players

1. WordPress Responsive YouTube Playlist Video Player

Responsive WordPress video player screenshot

Play YouTube content on your website using this fully responsive and intelligent resizing WordPress video plugin. Simply enter a YouTube playlist, channel, or single video ID as a source, and this plugin will run your video content smoothly on mobile and desktop devices. This WordPress video player has a fully customizable CSS-built interface rather than the default YouTube player. 

With total control over play options, unlimited playlist length, and integrated social sharing features, this plugin is a full-service solution for your WordPress video player needs.

User Splash1 says:

“Great looking playlist, easy to use, and does exactly what I need. Great job!”

2. Elite Video Player—WordPress Plugin

Elite WordPress video player screenshot

This powerful WordPress video player supports the most popular video platforms and includes multiple advertising options. It's truly versatile, so you can play content from YouTube, Vimeo, self-hosted videos, Google Drive, local videos, live streaming content, and more. 

This WordPress video plugin supports pre-, mid- and post-roll video and pop-up ads, so you have full control of the advertising potential of your content. Play videos from multiple sources in your playlists, track plays and advertising data using integrated Google Analytics, and expect seamless performance across platforms with this WordPress video player.

User davidmfraser says:

“Quite simply the best video player I have used in connection with WordPress, and I have tried several. Easy to set up and customize the player. Very simple and intuitive, even for those with not much of a tech background. Aesthetically, fantastic to look at. The support is very good, quick as well. Very happy—5 stars!”

3. Ultimate Video Player WordPress Plugin

Ultimate WordPress video player screenshot

Stream audio or video from a server, YouTube, or Vimeo with this WordPress video player. Features like responsive layouts and skins, multiple playlists, optional deep linking, and VR support enhance this video player’s functionality. 

This WordPress video plugin incorporates multiple video engines, allowing it to work on mobile or desktop devices no matter which browser is used. This player includes advertising support and is integrated with both Google Analytics and Google AdSense, so you can make the most of your views.

User wollesen1 says:

“Elegant, seamless plugin with a lot of customizations available. I needed a responsive video player that would host local video, and also pause when clicking anywhere on the video, among other things. I'm very happy with this purchase.”

4. WordPress Vimeo YouTube Popup Plugin

Popup WordPress video plugin screenshot

Use this WordPress video player plugin to easily create popup videos on your website. Users can click any designated element on your site—image, link, or other elements—to play YouTube or Vimeo videos in a popup player. This WordPress video plugin includes shortcodes to make your job easy. 

This player is responsive to browser sizes, has a scrollspy so that your video is always visible in the browser, and supports autoplay, so you can be sure that your visitors will view your featured video content.

User wipeoutmedia says:

“Thank you for creating this awesome solution. I have been looking for something like this for a while now and am so happy to have found it. Five stars for quality!”

5. Video Player and Fullscreen Video Background

Fullscreen Video Background WordPress video plugin screenshot

Enhance your website with a full-screen video background using this WordPress video player. Responsive and mobile-friendly, this player supports YouTube, Vimeo and self-hosted video files, and can automatically pull video thumbnails, titles, and descriptions for YouTube content. Customize your player style and functionality with over 30 parameters, choose a fixed width or full width, or even add texture over your video images.

User sandasusin says:

“Great plugin and great support!”

6. Facebook Live Video Auto Embed for WordPress

Facebook Live WordPress video plugin screenshot

Embed Facebook live streams to your WordPress site with this WordPress video plugin. Compliant with new Facebook data policies, this plugin detects if your Facebook account, page, or group is currently live and automatically embeds the video stream on your site. 

This video plugin features many customization options, including custom messages for website visitors during live streams and when offline. This WordPress video player is responsive out of the box, which allows to you easily embed your Facebook video content on your website for an effortless viewing experience.

User rmangram says:

“The support is awesome, especially when you have to keep your website accurate and up-to-date. They have been responsive, and the app works great and easy.”

Free Audio and Video Player WordPress Plugins for Download in 2020

The premium audio and video player WordPress plugins will give you the greatest amount of features and control over the media player. This will ensure that the user experience is the best it possibly can be. However, many website owners are on a tight budget and cannot afford to purchase these premium plugins, but their media still needs to be uploaded to their website. 

To help WordPress website owners that are on a budget, I have collected a list of five of the best free WordPress audio and video plugins available. 

1. CP Media Player

CP Media Player

The CP Media Player allows you to add files to the player that are in the format MP4, OGG, WebM, MP3, WAV and WebSRT. The player guarantees support for all browsers that implement the HTML5 standard. 

2. Audio Album

Audio Album enables you to style a group of audio files as a single block formatted as an album. The colors can be customized in the Audio Album section of the WordPress customizer. The player can be added to your website with the shortcodes available. 

3. FV Flowplayer

FV Flowplayer

FV Player is a complete solution for embedding FLV or MP4 videos into your posts or pages. This player comes with a wide range of features including custom start and end screens and media looping.

4. WooCommerce Music Player

Music Player for WooCommerce allows you to add a music player in the pages that contain your products. When uploading music to the player, you can associate audio files to a specific price and sell the audio files. 

5. Compact WP Audio Player

Compact WordPress Audio Player is an HTML5 plugin that can easily be embedded on your WordPress post or page using a shortcode. All major browsers will display this .mp3 and .ogg audio player.

How to Add an Audio Player to Your Website Using WavePlayer

To help show you just how easy it is to create an audio player and add it to your website with one of the premium audio player plugins available, we are going to go over how to create an audio player with the WavePlayer WordPress plugin. 

1. Adding the Audio Player to a Page or Post

Once you have uploaded the audio files that you would like to add to the WavePlayer in the media library, head on over to WP Dashboard > Pages > Add New. From the page creator page, we are going to click the Add Media button in the page editor. 

WavePlayer Add media

This will open up the WordPress media library. From there, we will click the Create WavePlayer link. We can now pick the audio files that we would like included in the audio player and click the Create a new WavePlayer button on the bottom right of the screen.    

WavePlayer Select new media
Adding media to the WavePlayer

2. Editing the Audio Player Settings

Now that we have created the audio player, it is time to style it. On the right-hand side of the screen, there will be a menu of options for us to customize. The first setting we are going to change is the style, We will change this to Dark as it will fit with our website's theme. Next, we will change the wave mode to Bars (6px) so the waveform will be a bit more impactful on smaller screens. 

Adjusting WavePlayer Settings

Finally, click the Insert WavePlayer button and the bottom-right of the screen and the WavePlayer shortcode will be added to the text editor in on your page. Click the Publish and Preview Changes button and you can see the audio player we just created on our pages. 

WavePlayer Audio Player

3. Adjusting the Settings Further

When creating the audio player, we were able to adjust a few of the styling options. If we click on WP Dashboard > Settings > WavePlayer, we can access many more customizable features. One of the best features to customize is in the Waveform Options tab. This will allow you to change the color of the waveform and preview these changes instantly unlike in the WaveForm creator. This will help you match the audio player with your website's theme more accurately. Feel free to browse all the other options in the settings of the WavePlayer to ensure it functions exactly how you would like it to. 

Install an Audio and Video Player WordPress Plugin Now! 

If you looking for a way to feature your audio and video content on your website in a stylish and interactive way, then purchase a premium WordPress audio and video plugin from CodeCanyon.

The various features and styling options allow you to integrate an eye-catching and fully functional player for your media that can fit your website's theme. 

While you are on CodeCanyon, feel free to check out the thousands of premium WordPress plugins available, as well as the best-selling, trending WordPress plugins of the year. 

Here are a few of the best-selling and hot new WordPress plugins available on CodeCanyon for 2020.

Using ipdata for Geolocation(5 days, 17 hours ago)

When most people think of geolocation, they remember the familiar pop-up notifications saying that the "website wants to know your location". But did you know that you can get geolocation information about your visitors with the IP address alone, without requiring any extra permissions?

To web developers, geolocation is a treasure trove of information and capabilities that can enhance the visitor’s experience and provide meaningful information to the developer. While the HTML5 Geolocation API can certainly provide developers with the actual GPS coordinates of the visitor’s device, developers more commonly need a broader set of location data. They can get that information using the visitor’s IP address.

By itself, an IP address is simply that: an address of a device on the internet. However, the World Wide Web is well over 20 years old, and over that large span of time, tons of data has been collected, correlated, and combined in relation to millions of IP addresses. While there are many third-party services that offer IP geolocation data, none are as accurate or reliable as ipdata. Before we look at how to use ipdata’s service, let’s first look at why you may want to use geolocation data.

Uses of Geolocation

There are many legitimate reasons why you would want to gather geolocational data on your visitors and use it in your applications.

For one, you can serve regional content based upon your visitor’s IP address. Does your website offer products globally but services locally? With IP geolocational data, you can serve your normal, product-based content and target local visitors with special content about your services.

Using geolocational data can also help you identify visitors that fall under the EU’s General Data Protection Regulation so that you can properly adhere to the GDPR for those visitors.

Why ipdata?

With ipdata, you can access an accurate IP address intelligence API, allowing you to look up the approximate location of any IP address. But on top of that, ipdata also provides aggregated open-source threat intelligence data and IP to company lookups, as well as internationalization data like currencies, time zones, and languages. Many organizations and companies—NASA, Comcast, and Disney, just to name a few—trust ipdata with the geolocational data they provide.

While you can use any HTTP client to connect to and use their RESTful API, ipdata provides open-source libraries for C#, Java, PHP, JavaScript, and Python to make working with the API and response data a breeze. Third-party libraries are available for Ruby, Swift, and Go.

Note: this article uses ipdata’s JavaScript library in a Node application, but the same ideas and concepts can be applied to other languages. Refer to the official ipdata library documentation.

Using ipdata's API

The first thing we need is a Node application; be sure to install the latest Node LTS version from the Node.js website. Create a new directory called tutsplus-ipdata for your application’s project. Then open your operating system’s terminal application, navigate to your newly created directory, and type the following to initialize the project:

We now need to choose our application framework. Yes, we don’t technically need one, but frameworks like Express and Hapi greatly increase our productivity when building Node-based web applications. We’ll use Hapi, so we need to install it, as well as the ipdata package, with the following command:

In a real application, you’d naturally want to install packages for handling static files, views, errors, and so on. Hapi and ipdata are the only packages we’ll need for this tutorial because our server will be extremely simple: it will only respond with text.

Writing the Server

If you’re new to Hapi, the process for creating and initializing the server is straightforward. First, create a new file called index.js and create the server with the following code:

The first line of this code imports the Hapi object, which we use to create our server by calling its server() method. The server() method accepts an object that allows us to configure our server. In the above code, we configure our server to run on the localhost and listen on port 3000.

Next, we set up our single route using the server’s route() method:

This route handles GET requests for the home, or root, of our application. The handler function executes, returning a simple string, when the server receives a request that matches this route.

Lastly, we start the server with the following code:

Because the server’s start() method is asynchronous, we can choose how we want to use it. This code uses the await keyword, which means we have to execute this code within a function marked as async. So we’ll wrap the server creation, configuration, and execution within an asynchronous function, like this:

This code creates a simple server that doesn’t do anything except output “Hello, Tuts+” when you view http://localhost:3000 in your browser. Test it for yourself by running node index.js in your terminal.

We can add some useful functionality to this simple test server by writing and registering a plugin that only allows requests from certain countries—a whitelist.

Using ipdata for a Whitelist

The geolocation data returned by ipdata’s API contains a host of information that we can use to create a whitelist (or blacklist, if you want to take the opposite approach). To name just a few: you can retrieve the city, region/state, country, continent, ISP, and hosting provider that are associated with an IP address. For our purposes, we'll whitelist requests coming from certain countries.

Create a new file called whitelist.js, and type these first two lines:

The first line of this code imports the IPData constructor function, which is used to create the ipdata API client. The second line creates the client, passing in the API key associated with your account. If you do not have an account, you can sign up for a free account from ipdata. You’ll receive your API key via email. You can use the string "test" for testing purposes, but be aware it is rate limited.

Now define the plugin with the following code:

This code demonstrates the boilerplate for a basic Hapi plugin. It exports the plugin object and defines the plugin’s name property and register() method.

Unlike Express, Hapi doesn’t use, or even have the concept of, middleware. Instead, you hook into lifecycle events to process incoming requests, and you do so using the server’s ext() method, as shown in the following code:

This code goes inside the plugin’s register() method, and it sets up an event handler for the onRequest lifecycle event. The asynchronous function provided to ext() will handle the event and allow you to process the request.

We’ll start the processing by defining our whitelist of countries, which is an array of string values that contain the country codes of our whitelisted countries. Then, we’ll retrieve the requester’s IP address and use it to query the ipdata API, as shown here:

Note that if this application is running on your machine, the requesting IP address is the loopback IP address for your machine, and there is no geolocational data associated with that IP address. Instead, the above code uses the IP address for the Envato Tuts+ website.

The ipdata client is simple to use—its lookup() method accepts a number of arguments, the most notable being the desired IP, and queries ipdata’s API with the provided information.

The response from lookup() is an object that contains a wide range of properties, depending upon the result of the query. For example, the response object always contains a property called status that indicates if the provided IP address exists within ipdata’s database. It is an HTTP status code, so it's a good idea to check its value before doing anything else.

The property we are concerned with is country_code, and we can use it to check our whitelist. The following code uses both the status and country_code properties:

If the query status is 200 and the country code exists in the whitelist, then we tell our server to continue processing the request with the next plugin or the handler for the route—essentially allowing the requester to access the resource they requested. Otherwise, we takeover the response with a 403 status.

As previously mentioned, the query result object contains a wide variety of properties, but we only need one: country_code. As such, we can increase network efficiency by telling the lookup() method that we only want a certain set of properties, like this:

This code now passes an array that contains only the properties that we need (the status property is always included, so we do not need to specify it in the array). With this change, the completed plugin looks like the following:

Regsitering the Plugin

Now we need to register our whitelist plugin. Before defining our routes in index.js, add the following line:

The complete server code is as follows:

If you haven’t already, kill the server running in your terminal with Control-C, and run node index.js again. If you used the Envato Tuts+ website’s IP, you should see the text "Hello, Tuts+" in the browser. If you used an IP address from a country not listed in the whitelist, or you used the IP address from the local machine, then you’ll see the text "You are not allowed".

Conclusion

For web developers, ipdata provides an invaluable service. Not only does it allow you a sense of who your visitors are, but it lets you incorporate region-specific content to create a meaningful experience for your visitors. It’s free to get started and easy to use, so give ipdata a try today!

Website Hosting Experience Simplified With Cloudways' Managed Platform(6 days, 20 hours ago)

When setting up an online business, you might have a long checklist with many action items. On that list is an action item: Pick a hosting provider.

Many first-time online business owners overlook the significance of the decision and opt for the most cost-efficient solution. Once the business starts to run into hurdles and roadblocks, they check out a lot of areas without realizing that the core issue could lie in their choice of hosting solution.

How a Hosting Solution Affects Your Online Business

In March 2019, Facebook suffered an outage that lasted almost 14 hours. The cost: $90M and a 2% drop in the share value.

But more than that, Facebook lost the trust of the millions of users who use their services as an integral component of their businesses. While the reasons behind the outage were not disclosed, Facebook confirmed that it was not a DDoS attack.

Now while your business might not be as big as Facebook, it shares a basic challenge that all online businesses face: the performance of the hosting provider.

How can you measure the performance of your current hosting provider?

While you can set up and collect a lot of data and then analyze it on several industry-standard metrics, I would recommend the following four critical areas where you can judge the performance of your hosting provider, regardless of your technical skills or knowledge.

1. Downtime

A business's website is the primary location where visitors go to get information about the products and services. Matters become critical when there is an essential business component such as an online store or a blog attached to the website.

If this setup goes down, in practical terms, this means a temporary shutdown of your business. All the visitors who cannot access your website within the outage window will not come back and will go to your competitors. This loss of brand reputation and revenue adds up, and you will notice it the next time you check out the business performance numbers.

The business model is an important factor in the impact of downtime. If you are an ecommerce store with no physical presence, your revenue numbers would get a much more severe hit than a store with a hybrid presence. Thus, for online-only business models, choosing the right hosting solution becomes more than just another item on the list—it's an essential decision that could make or break the business.

2. Slow Loading Pages

With always-available internet access and so much content to consume comes the problem of decreasing attention spans, which have fallen to just eight seconds on average! This poses a particularly serious challenge for online businesses because visitors have a lot of options.

Slow-loading websites fail to convert visitors because they leave before the website is able to display the call to action. Slow-loading websites get a justified bad rap because of the bad user experience and the user perception of wasted time.

3. Security

Information is the most important commodity right now, and online businesses are a rich source of all sorts of information such as email and credit card details. As such, online businesses are frequent targets of cyberattacks.

While application-level security is the domain of the business, the hosting provider is an important stakeholder in the security of the business. Server-level protection is the first line of defense that filters out malicious traffic and protects the hosted websites from data breaches.

Security is not all about setting up tools and processes. It is a combination of a security-first mindset that integrates the security processes into the hosting solution. Once that is in place, the hosting provider can take advantage of industry tools.

4. Server Maintenance

Running an online business requires a lot of time and effort. You have to take care of marketing, vendor relations, and a long list of tasks that maintain and grow your business.

Even if you possess the right technical skills, chances are that you do not have time to manage the server and the related components of your hosting solution. As such, you do not wish to work with a hosting provider that makes you do their work.

Beyond these four critical areas, when it comes to hosting for online businesses, a hosting provider should offer features and options that add value to the business processes and be able to keep pace with the company's growth.

How Cloudways Solves Your Hosting Woes

Cloudways is a managed cloud hosting provider that offers peace of mind and flexibility so that you can continue to focus on your business processes. The idea is to provide a secure and scalable solution that fits the current and future requirements of the business without compromising the quality of services.

Rather than offering a single solution targeted toward a niche market, Cloudways is a managed solution that serves a wide range of use cases in almost all industries. So whether you are a solopreneur with an ecommerce store, a developer with a mission-critical workload, or an agency with small to mid-level clients (each with different requirements), Cloudways has a solution that takes all the server management hassles out of the equation.

Here’s how:

24/7/365 Support

When it comes to hosting solutions, the quality and availability of the support make all the difference. Cloudways offers best-in-class support through several channels such as email, support tickets, and live chat.

Some clients prefer a closer relationship that demands a more involved role for support engineers because they lack the necessary technical skills, or do not want their focus to move away from their business processes. In such cases, Cloudways offers two support add-ons that ensure service-level agreements (SLAs) with shorter turnaround time and private support channels via Slack and phone.

Five Cloud Providers

Cloudways understands that when it comes to choosing a cloud hosting provider, there is no one-size-fits-all approach. Businesses have different performance and budget constraints that demand a choice of cloud providers.

That’s why Cloudways offers five cloud providers:

  1. Amazon Web Services (AWS)
  2. Google Compute Engine (GCE)
  3. DigitalOcean
  4. Linode
  5. Vultr

Users can launch a server on any of the five cloud providers through the Cloudways Platform and benefit from unmatched performance, thanks to a custom stack that offers a powerful combination of servers, caches, and related Cloudways services.

Once the server has been launched, users can deploy as many apps as the server specifications (CPU, RAM, storage, and bandwidth) allow. In any case, the server specifications can be scaled up right from the platform.

Support for Popular Apps

Once you've decided on a cloud provider, the next decision is the choice of the application. Cloudways supports all PHP applications, from popular ones (such as WordPress and Magento) to emerging CMSs (such as Craft CMS and October CMS). Popular applications are available in the initial server and application process. However, if your application of choice isn’t on the list, simply launch a custom PHP application and then use the integrated Composer and support for Git to install your application.

Simplified Server Management

Instead of a (terrifying) command line, Cloudways offers an intuitive browser-based front-end panel from which users can take care of everything from launching additional servers and applications to adding SSL certificates for their applications.

Managed Security

For Cloudways, security is not an add-on. Rather, it is built right into the foundation of the platform, with firewalls that filter out malicious traffic before it gets a chance to hit users’ applications. Similarly, all Cloudways Platform accounts are protected by two-factor authentication (TFA) by default. Similarly, users get immediate notifications about unrecognized login attempts to their accounts.

Installing free (powered by Let’s Encrypt) or paid SSL certificates is a breeze, and the request can even be signed right from the platform.

To further strengthen the security of your managed servers, Cloudways Platform has a robust IP Whitelisting feature, where users can allow (or block) specific IP addresses to access their server. This prevents unauthorized access and allows users to work from anywhere by whitelisting their IP addresses.

Managed Application and Server Backups

Backups are a great way of recovering from disaster and making sure that the business websites are up and running with minimum downtime.

Cloudways Platform manages the backup processes and offers both automated and on-demand backups. This allows users to either let the platform take care of the backup or back up an entire server or individual applications whenever they wish.

The backup archives can be stored at an off-site location or locally on the same server. The price of the backup is very nominal and can be seen in the real-time billing section.

Set Up Your Website Within Minutes

When users think of cloud hosting, they imagine a blank command line and a complicated procedure that requires them to install the operating system, the core application, and their website. If something goes wrong during the process, they generally have to start from the last checkpoint.

Since Cloudways takes care of all the server setup and management requirements, users only have to wait as long as 15 minutes to use their preferred application on the cloud server of their choice.

Here’s the Entire Process

Sign up for a Cloudways account. To welcome you to the platform, here’s an offer that will give you a head start. Use the promo code “TUTSCW” and get 20% off for the next three invoices.

Now that you have a Cloudways account, log in and you will see the server launch screen. From here, you can launch a managed server and the application of your choice.

Cloudways server launch screen

WordPress is perhaps the most common tool developers and agencies work with. I will demonstrate how users can have a functional WordPress website in under 15 minutes.

On the next screen, select the details of the server and the application. This single form collects all the information Cloudways Platform requires for launching your server.

select the details of the server and the application

As you can see, you need to pick the WordPress flavor (out of four options: WordPress with Breeze, WordPress with WooCommerce, WordPress Multisite, and Clean WordPress), and then name your server and application. Next, pick a cloud provider and use the slider to pick your preferred combination of server resources.

The selection of the location where your server will be located is important because the closer it is to your target audience, the better the UX you can deliver from your websites.

At the bottom, you can see the per hour and monthly cost of operating the server. Click LAUNCH NOW to initiate server and application setup.

Server initiation and setup process

Yes, you read that right!

It takes just seven seconds to set up your managed cloud server and the WordPress application (the currently supported version is 5.3).

Access Your WordPress Website

To access your WordPress website, move the toggle to APPLICATIONS. You will see your WordPress application. Click it to enter the Application Management area.

move the toggle to APPLICATIONS

In the Application Management area, you can see the ACCESS DETAILS, where you can get both the application URL and the URL to access the WordPress admin panel. Click the arrow icon in the APPLICATION URL to launch the application. In the ADMIN PANEL section, you can launch the admin panel and get the admin credentials to log in to the application’s back end.

Application Management area in Cloudways

Your fully functional cloud server and WordPress application are now ready for your business processes.

More Power to Small and Medium Businesses (SMBs)

Now that the website is up and running, you can further optimize it to make sure it remains up and running and can accommodate a wide range of business processes and options. While you should definitely check out the Cloudways Features page to understand all the benefits of the platform, here are several key benefits that small and medium businesses could use to their immediate benefit.

Create a Staging Environment

Changes to websites are an ongoing process, and many businesses try to integrate new tools and components to keep up with improvements in technology. The problem with these “upgrades” is that they can potentially break your site, and that is not good for business.

With Cloudways, you can test any website changes in a separate staging environment, where you can experiment without worrying about the live website. The best part is that once you are satisfied with the changes, all the changes can be pushed to the live servers in a single click.

Install an SSL Certificate

SSL certificates have become the yardstick by which Google and other stakeholders measure the security of websites. In fact, Google now practically demands that business websites have an SSL certificate, and non-SSL-protected websites are ranked much lower in search engine results.

Now, a number of vendors offer SSL certificates, often at varying prices. This could be a blocker for SMBs who cannot afford the high price of custom SSL certificates.

Cloudways simplifies the process of installing SSL certificates for your business websites. In addition to supporting major third-party SSL certificates, you can deploy a free Let’s Encrypt SSL certificate that encrypts all communication between the clients and the server.

Enable CloudwaysCDN

Digital businesses usually serve a global audience, posing a serious challenge to business websites. Since visitors are coming from all over, how can the website ensure a consistent experience for all visitors?

The answer is a Content Delivery Network, or CDN for short. This is a globally distributed network of nodes (servers) that cache a copy of the website. When a user requests a page of the website, the request is served from the closest node rather than the original host. This reduces the page load time (an important component of the user experience) and the load on the server.

Realizing the importance of a CDN solution for business websites, Cloudways offers a native solution, CloudwaysCDN, which is fully compatible with all the applications hosted on the platform. The setup and integration are simple, and the cost of using CloudwaysCDN is low enough to be within the budget of even really small businesses.

Managed Backup and Restore

Regularly backing up application data is a highly recommended practice that every SMB should follow. Even if there is nothing wrong with the website, regular backups should be part of the standard operating procedures of business websites.

Cloudways understands that this could be a chore that gets overlooked in the rush of everyday business. That’s why the platform offers automated (and on-demand) backup options for both applications and servers. Again, the cost of the backups is very low and transparent (you can check it in the real-time billing section).

Performance Monitoring

Like regular backups, keeping a close eye on how the server and the applications (yes, you can host multiple applications on your Cloudways managed server) are performing is a highly recommended practice.

However, this doesn’t require you to dive deep into highly complicated utilities or a separate platform. Cloudways offers a native Monitoring feature, where you can easily check out the most essential metrics that determine application and server performance. By viewing simple and customizable graphs, you can get an instant and pretty accurate idea of what’s going on and what you need to fix in order to get the most out of your business websites.

Expert Support

Even with managed platforms such as Cloudways, you might run into a roadblock or a situation that could hinder your business operations. This is where the quality and availability of support makes all the difference.

Cloudways delivers support through a team of expert engineers who have in-depth knowledge of managed cloud hosting and how applications interact with servers. Users can contact Cloudways support 24/7/365 through support tickets and Live Chat.

Now, not all SMB owners have the time or technical know-how for proactive problem resolution. For these users, Cloudways offers two Support Add-ons that allow for a closer partnership with Cloudways support in the form of shorter turnaround times and additional support via private Slack channels and phone.

Conclusion

That does it for our quick tour of the main features of managed cloud hosting with Cloudways.

If you are a small or mid-sized business and want to grow your revenues and brand reach without worrying about the performance of your websites, Cloudways offers a great platform that effectively works as an in-house sysadmin for your business.

Visit the Cloudways website to learn more, and don't forget to use the promo code “TUTSCW” to get 20% off for the next three invoices.

14 Stunning Ionic App Templates(1 week ago)

Creating apps for different mobile operating systems used to take a lot of time and effort in the past. It is much more easier now with tools like Ionic.

Ionic is a popular framework for creating modern, hybrid, mobile applications, using the wildly popular Angular framework. Because developers can use technologies they are already familiar with (JavaScript, HTML, and CSS), the learning curve isn't that steep to create a full-featured mobile app for Android and iOS.

Ionic App Templates on CodeCanyon

CodeCanyon offers a wide range of ready-made app templates to kick-start your Ionic development. These app templates start from prices as low as $5 for something simple like a lockscreen. However, you can also find templates to create full fledged dating, restaurant or other apps.

Ionic Apps on CodeCanyon

Try out one of these app templates from CodeCanyon, for Ionic 3 and beyond! I'll show you ten templates to inspire your next project.

Best Ionic App Templates on CodeCanyon for 2020

Amore: Ionic 3 Complete Dating Application

One of the best things about Ionic is that you can use it to create almost all kinds of apps. The Amore app on CodeCanyon is one such example. It is a complete dating app that you can customize according to your own requirements. With a few tweaks, the app gives you the opportunity to fully utilize the untapped market potential in the industry.

Amore Ionic 3 Dating App

It comes with a lot of features that make it an ideal starting point for a dating app. For example, it provides an easy way for users to discover new people on the platform. Once you are interested in someone, you will be able to visit their profile to know more about them. Finally, it also allows users to post updates about themselves to increase their chances of being found by like minded people.

Ionic 3 Ready to Use Elements with 12+ Categories

This Ionic template will help you get started quickly with almost any kind of app that you plan to create using Ionic.

Ionic Opus UI Kit

Instead of a single app dedicated to create something specific like food delivery, restaurants or dating application, this template comes with different individual components that you can use in your own apps.

There are currently 12 different components to display chats, addresses, profile, home feed, orders as well as log in and registration. Each of these components has multiple variants for the UI. For example, there are 5 different UI demos for the grid component. You can pick the one that meets your needs and easily integrate it in your application.

The UI looks great for each component and the code has been optimized to give you the best possible performance without any lag.

Giraffy Delivery

Giraffy Delivery

Giraffy Delivery is a complete food delivery platform with both iOS and Android mobile apps. It also offers fully customizable templates so you can put your vision into reality. 

Some of the notable features include:

  • multiple languages
  • loyalty program
  • sales report dashboard 
  • push notifications
  • multiple payment gateways

The template also comes with a very easy-to-use Laravel admin back end where you can manage products, orders, customers, and vendors.

Ionic 3 App for WooCommerce 

Ionic 3 App for WooCommerce

Ionic 3 App for WooCommerce is an app template you should definitely consider using if you are creating a shopping app. It allows you to quickly create a beautiful app that can connect to your WooCommerce website, pull data and settings from it, and sync categories and products in real time. It also promises your customers an easy and hassle-free shopping experience. 

Customers can also search products within categories, view order history, and add products to a wish list.

The app template supports most of the payment methods out there, automatically loads shipping methods, allows customers to search for products globally on the home page or within categories, and much more.

Other notable features of this template include:

  • ability to load content from local storage
  • powerful admin panel where you can load the designs you like
  • unlimited design layout

Ionic Framework App

If you are looking for a modern template with dozens of beautiful pages and a wide variety of useful features, the Ionic Framework App template is for you. Built with Ionic 3, it is very modular and extremely easy to extend. 

The apps you create with this ready-made template will be able to communicate with your WordPress blog using its REST API. They'll also be able to display charts, YouTube videos, Google maps, and RSS feeds. Another impressive fact about the template is that it offers a barcode scanner module, which you can use to scan several types of barcodes.

This template also supports multiple languages.

Ionic Framework App

Ionic 3 Event and Movie Ticket Booking App Template

If you are looking to build your business around an app that can book tickets for movies and other local events, this event and movie booking app template would be perfect for you.

Ionic 3 Event and Movie Ticket Booking App

It comes with multiple screens that handle different tasks. There is a basic registration as well as a login screen. The movies and events are listed on separate screens. Clicking on a movie or event will take you to another page with details about the event like its location, timing, or entry fee. In case of movies, users will also get the option to select the desired seats in a movie hall. Two additional screens are available for user profile and payment integration.

Overall, this app template can act as a nice starting point if you want to create your own booking application.

Nearme

Nearme

Nearme is a location-based app template that has definitely had some teething problems in the past. However, with the recent Ionic 5 update, improved documentation, and a beautiful redesign, it's earned a place on our list as a great template to help developers build an app that will identify supermarkets, restaurants, places of interest, gas stations, and so on that are near the end user. 

The template comes with an admin panel that allows developers to send push notifications to users and manage categories, places, deals, slider images, users, reviews, and more. 

Ionic eCommerce 

Ionic eCommerce

A relative newcomer to the eCommerce app template market, Ionic eCommerce offers an impressive variety of ready-made eCommerce pages so that you can create a mobile app to suit your needs. It also provides a comprehensive CMS so that you can manage your store. 

Some key features include:

  • interactive themes
  • social share
  • product filters, sorting, and search
  • inventory management
  • multiple payment methods including PayPal, Instamojo, and Hyperpay
  • supports multiple languages
  • push notifications

The developer provides full support and will customize and install the app for you for a fee.

Ionic Stencil Essential

The Ionic Stencil Essential app template gives you a UI kit for quickly creating Ionic 3 and Ionic 4 apps. You will get two separate code bases. One is based on Ionic 3 while the other one is based on Ionic 4.

Ionic Stencil Essential

The app receives regular updates to get more features and screens. For instance, a dark theme was added in version 1.2 and the 'Awesome' theme was added in version 1.4. The latest update added a lot of new screens for e-commerce, social media and recipes.

This app template will basically act as a quick setup point for all kinds of apps that you want to create. This include event organizer apps, calendar apps, e-commerce apps or other apps related to financial aspects. There are a lot of screens and UI elements available to cover basically all your needs.

Here are some of its features:

  • multiple themes available for use
  • clean user interface
  • easy to install with detailed documentation
  • codebase is compatible with both iOS and Android
  • regular updates with new features

Ionic 3 Restaurant App

Ionic 3 Restaurant App

If you’re looking for an intuitive, easy-to-set-up restaurant app then check out the Ionic 3 Restaurant App template, developed by Lrandom. The app is well structured and offers useful features like food categories, item details that allow you to use images of products, product names and details, prices, current promotions, a powerful search, a cart list view, and much more. In addition, the source code for the app comes with an admin panel CMS that will help you build your app faster.

Other features are:

  • push notifications
  • payment methods such as PayPal and Stripe
  • social registration and login 
  • order tracking

Free Ionic App Templates and Components

It is not always possible to find completely developed Ionic app templates for free. Most of the times, you can expect to get individual components for free like login screens, custom lists etc. I am listing a few free Ionic app components and templates that I could find.

Ionic 4 Custom Color Picker

This component will help you quickly add a custom color picker to your Ionic app. Instructions for installation and usage are given on the download page.

Ionic 4 Start Theme

This is a basic Ionic 4 starter template with several pages like login, register, about, edit profile etc. It also contains a couple of components like notifications and popup menu.

Ionic 4 Start Theme

Beautiful Custom List

This beautiful custom list is actually a standalone component that you can integrate in your other Ionic apps. As the name suggests, it is simply a list of different items. However, the UI  has been designed to be very appealing.

Ionic 3 Multi Purpose Theme

This is yet another basic Ionic 3 based template that gives you access to common ready made components and pages. You will get things like welcome page, news feed page and a sidebar with sliding animation etc.

Tips on Getting Started with an Ionic App

Even though Ionic makes it a lot easier for people to quickly create apps for both Android and iOS, it can still be a bit challenging for absolute beginners. There are a couple of things that you can do to get started quickly.

1. Read the Documentation

The best way to learn about Ionic and get help when you are stuck is to read the documentation. it provides information about a variety of topics like installation, theming, components and native APIs.

2. Try Creating Basic Apps

The next step in the right direction would be for you to try and create some basic apps of your own. This could be something simple like a timer or calendar app in the beginning. After that take a look at free apps created by other users and see the process followed by them.

3. Start Developing Complete Apps

Once you fully understand the basic concepts and have created a few basic apps, it is time to start working on the app you wanted to create in the first place.

A fully completed apps will have a lot of components, screens and functionality that will take a lot of time and effort on your part to create from scratch. The Ionic apps and templates available on CodeCanyon will prove a great time saver for you at this point.

Ionic Apps on Codecanyon

Final Thoughts

These ten stunning Ionic app templates are just a small selection of the hundreds of Ionic app templates we have available at CodeCanyon, so if none of them quite fits your needs, there are plenty of other great options to choose from.

And if you want to improve your skills in building Ionic apps and templates, then check out some of the ever-so-useful Ionic tutorials we have on offer!

How to Migrate a WordPress Site(1 week, 1 day ago)

Final product image
What You'll Be Creating

If you’re switching hosting providers or you’ve been developing a WordPress site locally and you need to make it live, you’ll be wondering how to move your site.

For a WordPress site, migration is a little more complicated than for a static site, because WordPress consists of a few components. But it is possible.

In this tutorial, I’ll show you how to migrate a WordPress site to a new hosting provider or from a development site to a live site. I’ll show you how to do it on SiteGround, our recommended hosting provider, and how to do it manually if you’re with a different hosting provider. 

SiteGround makes it easy to manage your WordPress sites, and have a lot of tools for safe and speedy migration. Thanks to Envato's partnership with SiteGround, you can get up to 70% off managed WordPress hosting.

Times You Might Want to Move Your WordPress Site

There are a few scenarios in which you might want to move your WordPress site:

  • You’re switching hosting providers and want to move it to your new server.
  • You’re staying with your existing provider but want to move it to a new domain name.
  • You want to move it from a subdirectory of your site to the main root domain.
  • You’ve got a staging site and want to migrate changes you’ve made to that to your live site.
  • You’ve been developing a new site on your local machine and want to migrate that to your live site.

In some of these cases you’ll need to physically move your site, but in others you won’t. Let’s take a quick look at the situations in which you don’t actually have to move your site.

When You Don't Actually Need to Migrate Your WordPress Site

Out of the scenarios above, there are two which don't mean you need to physically move your site from one place to another. These are:

  • You’re staying with your existing provider but want to move it to a new domain name.
  • You want to move it from a subdirectory of your site to the main root domain.

If you want to change the domain name of your site, you don’t have to move it unless you’re switching hosting providers. WordPress lets you change the domain name of your site while keeping your site exactly where it is. To find out how to do this, follow our upcoming guide to changing your WordPress domain name.

If you want to move your site from a subdirectory into the root domain, you also don’t need to physically move anything. All you need to do is tell WordPress what to use as the site’s domain, and where to find the files. Follow our guide to moving WordPress from a subdirectory into the root directory to do it.

Another scenario in which you don’t need to completely move your site is when you have a staging site.

Some SiteGround hosting plans include staging servers, and when you want to push your staging changes to your live site, you don’t need to migrate the whole site across. Simply use the tools in your SiteGround admin to push your staging changes to live, and it will be done for you.

So that leaves us with two scenarios in which you really will need to move your site. These are:

  • You’re switching hosting providers and want to move it to your new server.
  • You’ve been developing a new site on your local machine and want to migrate that to your live site.

So let’s take a look at how you would migrate your site in both cases.

Moving Your WordPress Site to a New Hosting Provider

When you move to a new hosting provider, your first option is to get your provider to do it for you. GrowBig and higher plans at SiteGround come with one free website transfer. All you need to do is provide the login credentials for your old site, and they will handle it for you.

This saves you the time and hassle of moving your site yourself and means you don’t have to learn it.

Alternatively with SiteGround you can use their WordPress Migrator. This is a plugin you install on your old site which handles the migration process for you.

But if your hosting provider doesn’t offer this, or if you want to make changes to the way the site is configured during the migration and would rather do it yourself (or if you simply want to learn how migration works), you have the option to do the site migration yourself.

If this is the case, you have two options:

  • Migrate the site using export and import plugins.
  • Migrate the site manually by migrating the database and files as well as installing a new instance of WordPress.

I’ll take a look at each of these methods in more detail shortly. But first, what if you’re migrating from a local site?

Migrating a Local Development Site to Live

If you’re migrating a local site and making it live, you don’t have the option of asking your hosting provider to do it for you, as they don’t have access to your local machine. However you can do it yourself, using one of the same three methods:

  • Migrate the site using export and import plugins.
  • Migrate the site manually.
  • Use the SiteGround Migrator tool to migrate your site into SiteGround.

If you’re with SiteGround, the migrator tool makes it much easier to migrate your development site to live which means your site will go live quicker. I’ll show you how to use it shortly. But first, let’s take a look at the other two options.

Migrating Your WordPress Site Using Plugins

If you don’t want to manually migrate the database and files and you don’t have access to a migrator tool, one way to migrate your site is to use plugins.

WordPress Export tool

The steps are:

  1. Install the same themes and plugins in your new site as were on your old site. You must do this first or the import process won’t work.
  2. Use the WordPress Export tool (Tools > Export) and Import tool (Tools > Import) to export content from your old site and import it to your new site.
  3. Use the Widget Import/Export plugin to export widget settings from your old site and import them to your new site. This is much quicker than doing it manually if you have lots of widgets.
  4. Manually configure the settings fro your new site so they are the same as your old site. You’ll need to do this via the Settings section of the WordPress admin.

This method isn’t perfect—it involves some manual configuration. But it’s a good option if you don’t want to start messing with the database.

Migrating Your WordPress Site Manually

The next option is to migrate your site manually. This consists of:

  1. Installing WordPress at the new hosting provider.
  2. Copying all of the theme and plugin files from the old site to the new one using FTP.
  3. Dropping all the database tables from the new site, using phpMyAdmin.
  4. Exporting the database tables from the old site using phpMyAdmin.
  5. Importing the database tables to the new site using phpMyAdmin. You’ll need to edit the SQL file that holds this data before you upload the tables if your new site is on a different domain to your old site.

This option gives you the most control but is the most complicated and the most risky if you aren’t familiar with using phpMyAdmin or working with the database. You can see how to do it in detail in our guide to migrating WordPress manually.


Using the SiteGround Migrator to Migrate Your Site

If you’re migrating your site to SiteGround, you have a much easier option which is just as thorough as doing it manually, and that’s using the SiteGround migrator tool. Let’s work through the process of using the migrator to migrate a site into a SiteGround hosting account.

Generating a Migration Token

Log into SiteGround and click the Websites option.

websites screen in SiteGround

Click on Site Tools for your site, and then on WordPress > Migrator in the admin menu.

WordPress migrator screen in SiteGround

Here you’ll need to generate a migration token to start the process.

If you want to migrate your site to the root URL of your site, leave the Path field blank. But if you want to create a new site in a subdirectory of your site, add the name of the new subdirectory here. I’m going to use a subdirectory for the purposes of this demonstration, but it’s likely you’ll want to migrate to the root directory.

Generate Migration Token

Note: the folder where you want to migrate to should be empty. Don’t install WordPress there before you start. If you’ve already done that, delete that WordPress installation.

Now click the Generate button to generate the token.

You’ll see your token on screen. Copy it and click the Download Plugin button. You’ll be taken to the WordPress page for the plugin. You can either download it from here and upload it to your old site manually, or you can install the plugin via the Plugins admin screens and the plugin dirtectory.

Installing the Migrator Plugin in Your Old Site

Next, go to your old WordPress site and install the plugin. 

Here’s the home page of my old site. It’s a store with WooCommerce installed and some dummy products added. The migration process will copy all of that across.

old site home page

Go to Plugins > Add New. Here, you can either upload the file you downloaded from SiteGround by clicking the Upload Plugin button, or you can search for the SiteGround Migrator plugin. I’m going to use the second option.

In the search box, type SiteGround Migrator. The plugin will be displayed.

SiteGround migrator in Plugins screen

Click the Install Now button. WordPress will install the plugin and then that button will change to an Activate button. Click it again to activate the plugin.

Migrating Your Site with the Plugin

Now in the admin menu on the left, you’ll see a SG Migrator link. Click on that to go to the plugin screen.

SiteGround migrator plugin screen

Go back to the SiteGround migration screen in your SiteGround account and copy the migration token (if you haven’t already copied it). If it’s not still on the screen, you can find it by scrolling down to see all the tokens you’ve generated.

migration tokens

Paste that into the Migration Token field in your old site and click the Initiate Transfer button.

If your new site is on a different domain from your old site, you’ll see a warning (you won’t see this if you’re using the same domain for both).

new domain warning

SiteGround will change the domain name in your database updating it to your new domain. If you’re happy with this, click the Continue button. 

If you want to use the same domain for your new and old sites and you get this message, you’ll need to change the settings in your new SiteGround account and use your domain there. You don’t need to have your domain actually pointing to your new account yet as SiteGround gives you a temporary URL for testing your new site before you switch the DNS over. For guidance on this, see the SiteGround documentation on DNS.

If you want to update your domain name settings in your new hosting account first, click the Cancel Transfer button and update your domain name, then come back and continue the transfer process.

The migrator will then start the process and update you on it via the plugin screen.

migration progress

When the migration is complete, you will see a success screen.

migration success screen

To access your new site on the temporary URL, click the Go to Site button. As you can see in the screenshot, my new site is exactly the same as my old one, and everything has migrated across.

new site home page

Updating DNS Settings

Once you’re happy with the new site, you’ll need to update your DNS to point your domain name at your new site.

If your domain is registered with SiteGround, this will already be done for you, but if your domain is registered elsewhere, you’ll need to update the nameservers with your domain registrar. You’ll see the name servers on the success screen in the plugin. You can also access them in your SiteGround account by going to Site Tools > Dashboard where you will see your nameservers in the Name Servers section of the screen.

nameservers in the SiteGround dashboard

Summary

Migrating your WordPress site can be easier than you think. If you’re migrating to a SiteGround account, the migration tool makes it possible to migrate your site quickly, without having to manually copy any files or access the database.

And if you can’t use a tool like this, you can either migrate your site using plugins or migrate the database and files manually. These will take a little more time and care but are perfectly possible.

Special Discount for WordPress Hosting From SiteGround

If you are switching WordPress providers, take a look at SiteGround. It comes with an easy installer, free support, and automatic updates. And as mentioned, a lot of support for migrating your site! We're happy to be able to offer a huge discount of 70% off self-managed WordPress hosting, thanks to our partnership with SiteGround.

Managed WordPress Hosting From SiteGround

Build a 360-degree Video Player App With an Android App Template(1 week, 4 days ago)

There's no doubt that we are living in the age of VR. VR videos and 360 videos have been popular for the last few years, and there are tons of 360-degree videos all over the internet. This popularity has been brought about by the release of some VR headsets such as Oculus Rift, HTC Vive, Google Daydream, PlayStation VR, e.t.c. A VR (Virtual reality)  headset is a head-mounted device that provides virtual reality for the wearer. Virtual reality headsets are widely used with video games as well as other applications such as simulations. 

Users want to enjoy the immersive virtual reality experience, and you can make this possible by building a 360-degree video player.

What are 360-degree Videos?

360-degree videos are videos that offer a full 360º by 180º panoramic field of view. They let you view up, down, left, right, and all-around complete with sound and sights, thereby providing a cinematic experience.  Unlike standard videos, 360-degree videos let you view scenes from any perspective you choose. 

So, in this tutorial, you are going to learn how to create a 360 video player using a template from CodeCanyon. The 360 video player will allow you to click and drag on the video and explore 360-degree videos and get a feel for what they can offer.

What is CodeCanyon?

CodeCanyon is an online marketplace that has hundreds of additional professional Android app templates and builder tools. Some of these are incredibly feature-rich and well-designed. You can sometimes save days, even months, of effort by using one of them.

CodeCanyon mobile Android app template bestsellers

Getting Started

To get started creating your Android app, you'll need to install Java and Android Studio. If this is your first Android app, you can read about how to get your computer set up in Hathibelagal's post on How to Get Started Making Android Apps.

Get the Template and Unzip the Files

To start, download the 360 Video Player View template from CodeCanyon. You will get a link to download the files. Alternatively, you can find them in the download section of your account with your other purchased items.

Once you've downloaded the files, extract the file to a section of your computer where you can easily import them to Android Studio. You are now ready to build your Android app.

Features of the 360 Video Player View Template

This 360 player allows you to view your favorite 360-degree views and videos and gives you a better movie-watching experience. Notable features include:

  • ability to play and stream 360-degree videos
  • ability to play virtual reality videos
  • support for all kinds of .MP4 videos
  • 3D viewing experience
  • use of device gyro sensor to navigate in the video

Import Project

To build your app, you'll need to download the project you created into Android Studio.

Extract the .zip  from CodeCanyon. Now open Android Studio and you should see a display like this:

Select the  Open an existing Android Studio Project option, browse the location where you extracted the project files, select the 360 Video Player .gradle files, and press OK. Wait a few minutes until the sync process is complete.

This would be a good time to explore the project code.

Gradle Configurations

The first important step is to change the application id.. Go to app > Gradle Scripts > build and change the applicationId to your id name, eg. com.yourdomainname.appname.  

The application identifier should be unique if you wish to publish the app to the Google Play. Sync the project and wait for a few minutes until the sync process is complete.

Change the Application Name

Go to the strings.xml file and change the application name.  Here my app name is "360 Video Player", you can change your app name to something like 360 Player.

Change the App Color

Another aspect you can easily change is the color pallet of the app. To change the app color, go to res > values > colors.xml and make any changes you wish to, as shown below.

Run the App

You can now run the app on a physical device or an emulator. Connect your device to your computer with a USB cable and perform the following steps to enable USB debugging.

  • Go to Settings/System depending on your device
  • Select About phone.
  • Tap the Build number option seven times. The message You are now a developer should appear
  • Go to the settings page and tap Developer options.
  • In the Developer options window, enable USB debugging.

Once USB debugging is enabled, you can launch the app from Android Studio onto Your device:

  • On Android Studio, click Run from the toolbar.
  • Select the device from the drop-down menu and click OK.

Once Gradle finishes building, Android Studio should install the app on your connected device and start it.

Test the App

Finally, you can test the app.

Just open the new 360-degree app on your mobile phone. Click the OPEN GALLERY button at the bottom and choose the video you want to play from your phone. You can now explore the different ways to view your video.

Premium Android App Templates from CodeCanyon

App templates have proven to be a great way to accelerate your development project by saving both time and resources. You have seen how easy it is to use a template To build amazing Android applications. CodeCanyon offers a huge collection of Android  templates ranging from delivery and ridesharing apps to news apps and games. 

CodeCanyon mobile Android app template bestsellers

Be sure to check out some of the starter templates and full applications on CodeCanyon! If you have trouble deciding which template is right for you, these articles should help: 

How to Upload a Google HTML Verification File to WordPress and Boost Your SEO(1 week, 4 days ago)

Search Engine Optimization (SEO) is essential for getting your WordPress website the traffic it deserves. 

SEO has become such an integral part of creating a successful site, that today there’s an entire industry of agencies and specialists dedicated to helping businesses improve their SEO.

If your website is going to reach the widest possible audience, then you need SEO, and the first step to boosting your website’s search engine performance is registering it with the Google Search Console. 

Once you’ve added your WordPress website to the free Google console, you’ll have access to all the tools you need to monitor, analyze and optimize your site’s search engine rankings, making this console essential for fine-tuning your website's SEO.

In this article, I’ll cover two ways that you can register your website with the Google Search Console: uploading a Google HTML verification file to your WordPress account, and copy/pasting some code into your website’s homepage. Regardless of how you’re hosting your WordPress website, by the end of this article you can confident that Google will have no problems finding, crawling and indexing your site.

What Can I Do With the Google Search Console?

Google’s Search Console provides a range of tools that you can use to scrutinize and improve your website’s overall search engine performance. 

Once you’ve registered your website with this console, you’ll be able to: 

  • Optimize your content. You can identify the queries that are driving traffic to your website, and then fine-tune your content to capitalize on the most lucrative search terms. 
  • Register new webpages. You can use the URL Inspection tool to ensure that Google has access to any new webpages you add to your website. By using the Console, you can start driving traffic to your new pages as soon as they're live. 
  • Review your index coverage. This tool allows you to ensure that Google is looking at the most recent version of your website.
  • Identify and fix any issues. The Google Search Console will email you about any security or indexing issues it discovers, so you can resolve these issues before they start to negatively impact your search engine performance. 

For a more in-depth look at all the tools that are available as part of the Google Search Console, check out the console’s official documentation

Register Your Website With Google 

In this section, I’ll show you how to register with the Google Search Console, by uploading an HTML file to your website’s root directory. The exact steps may vary, depending on your hosting provider and how your website is setup, so if you’re struggling to add this file to your website, skip ahead to the following section where we’ll be exploring an alternative method of registering with the Google Search Console. 

How to Create a Google HTML Verification File 

The first step, is generating an HTML verification file for our website: 

  • Head over to the Google Search Console and select Start now.
  • When prompted, enter the username and password for your Gmail account.

At this point, you can verify your website using either its domain name or URL prefix. At the time of writing, Domain name only supported DNS verification, so opt for URL prefix. Enter your website’s URL, and then click Continue.  

When registering your WordPress website you can choose between Domain name and URL prefix

Click to expand the HTML File section, and then click the Download this file button. The HTML file will now be downloaded to your local machine. 

Uploading Your HTML File to WordPress

Next, we need to upload our HTML file using an FTP client.

There are plenty of FTP clients on the market, but I’ll be using the free FileZilla application, which is available for macOS, Linux and Windows. If you don’t already have FileZilla, then head over to the FileZilla website and download the latest version.

Launch FileZilla and enter your FTP username and password, which should have been included in your welcome email when you signed up for your WordPress hosting account. Alternatively, if you’re using cPanel then you’ll find your FTP account information in the cPanel dashboard. 

Once FileZilla has successfully connected to your server, select File > Site Manager... from FileZilla’s toolbar. If you’re connecting FileZilla to your WordPress website for the first time, then select the New Site button.

In the subsequent form, provide the Host, which is typically your website’s domain name.

There are multiple FTP clients on the market but Im using FileZilla which is free to download
  • Open the Protocol dropdown and select SFTP.
  • Open the Logon Type field and select Normal
  • Enter your FTP username and password when prompted.

When you’re happy with the information you’ve entered, click Continue and FilleZilla will open a new FTP connection.

If this is the first time connecting to your website from this computer, then FileZilla may display an Unknown certificate popup. Select the Always trust certificate for future sessions checkbox, and then click OK.

FileZilla will now connect to your website using the provided credentials. Once FileZilla has connected successfully, you’ll see a list of all your site’s files and folders, in a new Remote column.

You now need to place the HTML file in your website’s root directory. This directory is often the /public_html/ folder, although the directory name can vary depending on your hosting provider, for example it might be labelled wwwroot or wordpress. You can often locate the root directory, by clicking to expand the / directory and then double-clicking the first directory that appears. 

Once you’re inside the root directory, you’re ready to upload your HTML file. FileZilla’s Local column displays all the files on your computer, so navigate to your HTML file, Control-click it and then select Upload. This HTML file will now be uploaded to your WordPress account.

Flick back to the Google Search Console tab and click the Verify button. After a few moments, you should see an Ownership Verified message. 

If you head back to the Google Search Console, then you should now have access to various tools that you can use to analyze and optimize your website’s SEO performance.

You can analyze your websites performance using the various Google Search Console tools

HTML Tags: How to Add Your Site to the Google Search Console

Alternatively, you can register your site with the Google Search Console, by copy/pasting some HTML into your website’s header:

  • Head over to the Google Search Console and select Start now.  
  • Enter your Gmail username and password. 
  • Select URL prefix and then enter your website’s URL. Click Continue.
  • Click to expand the HTML tag section. 
  • You should now have access to a meta tag that you can copy/paste into your website’s header. Click the Copy button to get started.

Next, you need to verify that you own your website, by pasting the HTML tag into WordPress. To make this process as painless as possible, I’ll be getting some help from the Insert Headers and Footers plugin:

  • In a new tab, log into your WordPress account. 
  • In WordPress’ left-hand menu, navigate to Plugins > Add New.
  • Search for the Insert Headers and Footers plugin, and when it appears click Install Now. Activate this plugin when prompted.
  • In WordPress’ left-hand menu, select Settings > Insert Headers and Footers.
  • Paste your HTML tag into the Scripts in Header box, and then click Save.
Copypaste the Google Search Consoles HTML tag into the Scripts in Header box
  • Flick back to your Google Search Console tab, and click the Verify button. After a few moments, you should see an Ownership Verified message. 
  • Click Go to Property.

You should now be viewing the Google Search Console dashboard for your website. 

Are You Using the Yoast SEO Plugin?

If you’re using the popular Yoast SEO plugin, then you can help Google discover and index your website's content, by uploading an XML sitemap. This XML file supplies Google with a list of all your site’s content, in a machine-readable format:

  • In WordPress’ left-hand menu, select SEO > General, then select the Features tab.
Find the XML sitemaps slider and push it into the On position

Find the XML sitemaps section and push its slider into the On position. Then click the slider’s accompanying question mark icon. 

Select the See the XML sitemap link, and WordPress should open this link in a new tab. Copy the tab’s URL. 

If you haven’t already, open the Google Search Console, click the menu icon in the upper-left corner, and then select your website. You should now be viewing the Google Search Console dashboard.

In the Console’s left-hand menu, select Sitemaps. Find the Add a new sitemap section, and paste the final part of your sitemap’s URL into the accompanying text field, to create the complete sitemap URL. 

Copypaste your sitemaps URL into the Add a new sitemap field

Click Submit  and Google will now add the sitemap URL to your Google Search Console, and Google will start receiving your website’s content in a handy machine-readable format. 

Conclusion 

In this tutorial, I showed you how to drive more people to your WordPress website, by registering with the Google Search Console. If you’ve been following along, then you should now be receiving data in the Console dashboard, and can start using this information to fine-tune your website’s search engine performance. 

Want to ensure your website is reaching as many people as possible? We have a wide range of WordPress plugins that are designed to help boost your SEO, climb those Google search rankings, and generally get more eyes on your WordPress website

Special Discount for WordPress Hosting

If you're looking for a host for your WordPress site, check out SiteGround. It comes with an easy installer, free support, and automatic updates. We're happy to be able to offer a huge discount of 70% off self-managed WordPress hosting, thanks to our partnership with SiteGround.

Managed WordPress Hosting From SiteGround


What is a Slug in WordPress?(1 week, 5 days ago)

Final product image
What You'll Be Creating

Slugs. Slimy little critters that have a nasty habit of getting into your vegetable garden… Or maybe not! In this post, we’re talking about a different kind of slug, and that’s the slug that forms part of the address (or URL) of the individual pages and posts in your WordPress website.

A slug is unique to each post, page or archive, and will tell a browser exactly where to go. But there’s more to them than that, and there are ways you can use them to boost your site’s search engine optimisation (SEO) and user experience (UX).

So let’s start by examining what a slug is and then move on to looking at how you can optimize your slugs in WordPress.

Slugs Versus Permalinks

You may have heard of another term relating to links in WordPress, and that’s permalinks.

So what’s the difference between a permalink and a slug?

The permalink is the entire link to a post. So the link to a post on an example website might be https://example.com/what-is-a-slug-in-wordpress/.

That full link is the permalink. It consists of three parts:

  • The protocol: https://
  • The domain name: example.com/
  • The slug: what-is-a-slug-in-wordpress

The permalink in WordPress refers to that link but is also a unique link you can fetch in your theme template files using the the_permalink() function.

For the purposes of this article, we’re looking at slugs. The slug in that link is what-is-a-slug-in-wordpress.

You can see that the slug is based on the title of the post.

In WordPress, you can opt to use ‘pretty’ permalinks based on the post title, or ugly permalinks based on the post ID. I’ll show you why it’s better to use pretty permalinks and how to optimise your slugs for SEO and UX.

Slugs and SEO

Slugs are very important for SEO. In addition to the post title itself, they tell search engines what your post is about, and should include keywords that you are aiming to rank for.

So if you used slugs that consisted only of the post ID (e.g. post-3456), that wouldn’t be very helpful to search engines.

But if you use a slug that is based on the post title and includes keywords, it will help your post to rank more highly.

I’ll show you how to edit the slug for an individual post or page to include keywords shortly.

Slugs and UX

Slugs also have a role to play in UX. If you want users to remember the link to a post and be able to use it again without copying and pasting the post, or without searching for it, you’ll need to create a slug that’s short and memorable.

So for a post on slugs I might use something as simple as example.com/wordpress-slugs. You’d have no trouble remembering that and knowing what it was about (unless you were interested in slimy critters, in which case you might get confused).

To create such a memorable slug, I could edit the slug in the post editing screen for my post. If my site is set up to have an extra folder in its domain structure and the link to the post is example.com/blog/what-is-a-slug-in-wordpress, I might use a redirect to redirect example.com/wordpress-slugs to it. But the slug that search engines see would be the first one. This means you can create a slug for your post that includes all your keywords for SEO, and also create a short slug for users that redirects to that.

How to Optimize Slugs in Your WordPress Site

There are two ways to optimize the slugs in your WordPress site. The first is to configure your permalink settings and the second is to edit the slug setting for an individual post. You can’t do the second one unless you do the first, so let’s look at that first.

Configuring Permalink Settings

To access Permalink settings, go to Settings > Permalinks in the WordPress admin screens.

Permalink settings screen

WordPress gives you six options:

  • Plain: This is based on the post ID. While it’s short, it’s not memorable and not at all pretty. I wouldn’t advise using this option.
  • Day and name: This is prettier, as it includes the name of the post as well as the date it was created. But it is quite long, so not so good for UX.
  • Month and name: This is shorter than the day and name option and still includes the post title, so might be a compromise if it’s important that your URLs include the date, or if you have duplicate content each year and need to differentiate it. Don’t use this if you want your content to be evergreen.
  • Numeric: This option uses the post ID and is ugly, so won’t benefit your SEO or UX.
  • Post name: This is the prettiest option. It’s the best for SEO and for UX, and is what most WordPress sites use.
  • Custom Structure: Use this if you want to customize the structure. For example you might want to insert /blog/ between your domain name and the slug. Or you might want to include both the post name and the post ID in slugs. Use the tags provided by WordPress to configure this, making sure you copy them correctly.

The Permalinks setting screen also lets you configure the links used by archive pages for your tags and categories. These aren’t slugs in the strictest sense but you might also want to configure those, changing the default category to something else. This could be beneficial for UX or SEO if you have specific words that are meaningful to your users or that you want to rank for.

category permalinks settings

So instead of example.com/category/category-name, you might prefer to use example.com/services/category-name if your categories are actually services, or example.com/department/category-name if you’re running a store.

To enable pretty permalinks, go to the permalink settings screen and choose the options you want. Then click the Save changes button to save your configuration. Once you’ve done that, you can edit the slug for an individual page or post.

Editing Individual Post and Page Slugs

Once you’ve configured your permalinks settings, you can use the options on the editing screen for an individual page or post to make the slug more memorable or SEO-friendly than the default.

By default, WordPress creates a slug that’s based on the title of the post. So if I create a post called 20 Ways to Make Your WordPress Site Soar, the slug will be 20-ways-to-make-your-wordpress-site-soar.

To see this in action, create a new post (Post > Add New), give it a title and save it as a draft by clicking the Save Draft link.

creating a new post

Now click on the title of the post in the post editing screen. The full URL of the post will be displayed above the title, including the slug.

editing the slug in WordPress

Now click the Edit button next to the link and edit the slug (the last part of the link). You might want to make it shorter, so I could change mine to make-wordpress-soar:

slug edited

Or you might want to edit it to include a specific keyword that you want to rank for in search engines, such as ‘WordPress performance’. In that case, you could change it to 20-ways-to-boost-wordpress-performance:

slug edited for SEO

Note that if you wanted to rank for the search term  ‘wordpress performance’, you really should edit the title of the post as well to include that term, as that will have an even bigger effect not only on your ranking but also on the number of people clicking through to your site after they find it.

Once you’ve made the changes you need to, save your post by clicking the Publish button.

A Word of Caution When Editing Slugs

Editing slugs is very easy to do. If you have a post that isn’t performing, you might be tempted to go into WordPress and edit its slug as a way to fix it. But if you do that, the permalink will change, which means that any existing link to the post (using its old slug) that you’ve shared in the past will break.

You can fix this by installing a redirection plugin and setting up a redirect from the old URL to the new one. In fact, when configuring the redirect in the plugin settings, all you’ll have to do is use the old and new slugs and the plugin will do the rest for you.

The Redirection plugin is free and makes redirects easy. But if you want to be able to set up more complex redirects, you could try one of the premium plugins available at CodeCanyon. 

redirection plugins on codecanyon

Some of the best redirection plugins on CodeCanyon include:

Best Practice For WordPress Slugs

Sometimes you’ll need to find a balance between SEO and UX when configuring your slugs. But it’s worth understanding some principles which will help you adopt best practices with your slugs. These include:

  • Use pretty permalinks to ensure your slugs are text and not post IDs, and that they are as short as possible.
  • Edit your slugs to include search terms if you want to optimize them for SEO. These should also be in the post title—meaning that you don’t actually need to edit the slug if you start with the right title!
  • Make slugs short and memorable for UX. Remove filler words like ‘and’ and ‘of’, as well as numbers for list articles.
  • If you edit the slug of an existing post, make sure you set up a redirect so the old slug will redirect to the new slug.
  • If you change the title of a post, the slug won’t automatically change. You’ll have to edit it manually (and set up a redirect if it’s an existing post).

Summary

Slugs are an important part of WordPress. As part of the permalink, they make each post and page unique so it can be correctly displayed by browsers.

But optimised slugs will also enhance your SEO and your UX. If you configure your slugs so that they work harder for your site, you’ll get more visitors and provide a better experience for them.

The Best WordPress Themes and Plugins on Envato Market

Explore thousands of the best WordPress themes ever created on ThemeForest and leading WordPress plugins on CodeCanyon. Purchase these high-quality WordPress themes and plugins and improve your website experience for you and your visitors. 

Here are a few of the best-selling and up-and-coming WordPress themes and plugins available for 2020.


20 Best HTML5 Game Templates of 2020 With Source Code(1 week, 5 days ago)

HTML5 game templates come with ready-to-use designs and functionality. All the time-consuming programming has already been done for you, so you can focus on designing games that are fun to play. 

Top-Selling HTML5 Game Templates for 2020 on CodeCanyon

Grab one of these HTML5 game templates or engines. Whether you already have a game concept to build or would like a fun way to learn more about making mobile games, download the source code today

Indiara and the Skull Gold is a mobile platformer with an Indiana Jones feel to it. Collect the eight gold skulls, but be on the lookout—the caves are full of traps! It comes with supports both desktop and mobile, layered PSD and AI fileS, 860x480 graphics. 

Indiara and the Skull Gold includes eight complete levels and can be completely customized by using Construct 2. You can easily reskin this HTML5 game template by editing and replacing the images. You can also share on Facebook and Twitter. 

2. Don't Crash

“Don’t crash—this is the only rule of the game.”

Don't crash while you play Don't Crash! As two cars race around the track, tap the screen to change lanes and avoid a crash. This game comes with supports for both mobile and desktop, easy one-touch control, and 1280x720 graphics. 

Reskin this HTML5 game using the included AI files or completely change the game elements using Construct 2.

Don't Crash is simple, fast, and addictive.

3. Game FlapCat Steampunk

“Help the cat FlapCat to go through challenges that are super difficult.”

FlapCat Steampunk is a cute and simple HTML5 game that's perfectly made for mobile. How high can you score? It comes with PSD and AI files, 1280x720 graphics, and infinite levels. Whether you're playing in your web browser or mobile phone, all you need is a single touch or mouse click to play. Easy to play, hard to master.

Game FlapCat Steampunk can easily be reskinned by replacing the images or fully customized with Construct 2.

4. Jumper Frog

“Enjoy this colorful version of the classic game Frogger.”

Frogger is a classic arcade game that makes a great adaptation to mobile. It is also compatible with CTL ArcadeJumper Frog brings this arcade classic to any screen.

Fully developed in HTML5 and CreateJS , it comes with PSD and AI files for customization. 

5. Bubble Shooter

The goal of the game is to clear all the bubbles from the level avoiding any bubble crossing the bottom line.Launch the colorful bubble into place, and when you get three or more in a row, they disappear. Clear all the bubbles to win! 

Bubble Shooter is a classic puzzler that's easy to learn, but hard to master. It is developed in HTML5 and CreateJS.  It is also compatible with CTL Arcade. If you think this HTML5 game is fun, be sure to also consider the 50 Levels Pack.

6. Katana Fruits

If you're familiar with Fruit Ninja, you'll be familiar with Katana Fruits. The goal is to cut all the fruits that appear on the screen without dropping them and to avoid the bombs.

This fully customizable HTML5 game and CreateJS and  is compatible with CTL Arcade for WordPress and can be easily customized. 

So what are the features? PSD and AI files for customization, promote with social share buttons. Sharpen your Katana—it's time to slash some fruit with Katana Fruits.

7. The Sorcerer

The moment the screen loads, you'll know what to do. Inspired by Zuma, The Sorcerer is an instant puzzle game hit. This fully customizable,game is fully developed in HTML5 and CreateJS. It comes with the source code. It is also mobile or desktop, the 960x540 resolution is fully optimized. The Sorcerer is hard to put down, so you may want to consider acquiring extra levels, too.

8. Rearrange Letters

“Rearrange Letters is an HTML5 game where you can arrange the letters and make the right word with the given description as a clue.”

You're given a clue and a jumbled mess of letters. With the clue in mind, rearrange the letters until you've got the word right as the timer counts down. That's how the Rearrange Letters HTML 5 game works: make the right word with the given description as a clue.”

With plenty of customizations and built using CreateJS, you can reimagine Rearrange Letters any way you like. Features include: ability to share scores social media, mouse and touch control,  1024x768 resolution, and also customize the text, game mode, and time. 

9. Rolling Cheese

Rolling Cheese is one of the few games in this list not designed using Construct or a similar framework. The Rolling Cheese physics game has a tiny hero. Help this little hungry mouse get the cheese by rolling it through obstacle courses to reach the mouse. 

It is fully customizable with included source code. It is optimized for both mobile and desktop. Finally, it is developed using HTML5, JavaScript, and CreateJS. 

10. Quiz Game

"Quiz Game is a HTML5 game with free general knowledge quiz questions and multiple choice answers."

Build your own custom mobile quiz game using Quiz Game. You'll be able to spin up many different types of quizzes using Quiz Game because the questions, answers, and categories are loaded from an XML file. 

This fully responsive game is built with CreateJS. It´s features include: built-in editor tool, 17 different answer layouts, optional audio for questions and answers, optional right and wrong answer animations, option to display the correct answer.

11. Sweety Memory

“Match all the identical cards before time runs out!”

Do you remember Memory? Sweety Memory is an HTML 5 game that works the same way. Flip the cards, make the matches, and win! Sweety Memory is compatible with CTL Arcade

It is developed in HTML5 and CreateJS and come with source code. Mobile or desktop, the 960x1200 resolution scales to fit the whole screen of almost any device. It is fully customizable with included PSD and AI files. 

12. 3D Blackjack

“Enjoy this blackjack game with hi-res 3D graphics!”

 3D BlackJack is an HTML5 casino game that isn't designed to be used with real money—it is simply a fun game to play. You can easily monetize your app with banner ads and promote it with the social share buttons included with 3D BlackJack.

It comes with fully customizable HTML5 and CreateJS files, insurance feature, double bet, and split hand and PSD and AI files for easy customization. 

This HTML5 game is also compatible with CTL Arcade for WordPress.

13. 3D Roulette

3D Roulette is a high quality casino game with many great features. It is the perfect desktop in-browser roulette HTML5 game. It comes with fully customizable HTML5 and CreateJS files, PSD and AI files for easy customization. It is fully responsive and has 750 x 600px resolution.

It is also compatible with CTL Arcade for WordPress, but if you're looking for a mobile-centric version, I recommend Roulette Royale.

14. Driver Highway 

Driver Highway

Driver Highway is a 2D racing game made with the Construct 2 and Construct 3 game engines. It has 720 HD resolution, supports multiple screen sizes, and plays on desktop, mobile, and Facebook IG. It includes Admob banner and interstitial ads for the mobile version. It also includes Facebook interstitial ads for the instant game version. 

It comes with the following features: Constuct 2 files, Constuct 3 files, Facebook instant game file, HTML5 files, and Cordova file. 

15. Fruit Boom 

Fruit Boom

Feel like a Ninja Chef! Cut as many fruits as possible on normal mode or in limited time mode, avoid bombs and fruit drops and Become the Coolest! You can play it on desktop and mobile.

This game was created in Construct 2. It comes with HTML5 files, Android file, Construct 2 files, editable graphics, media (all screenshots and full HD trailer), Google Play and App Store game icon and extensive documentation.

16. Donut Crash Saga 

Donut Crash Saga

Donut Crash Saga: You have to put donuts of the same color in a series of three pieces or more to achieve the highest possible score. The game is made in Construct 2 in a beautiful summer style comes HTML5 files! It has a high resolution of 1920 x 1080 px. Enjoy the game!

17. Neon Bricks 

Neon Bricks

Neon Bricks is a game with a classic concept but with an innovative style have fun with 100 different levels that provided you with a lot of challenge and fun.

This beautiful game works on all HTML5 browser and mobile devices. It has 100 different levels and supports touch, mouse, and keyboard controls.. It comes with Construct 2 files, Construct 3 files, Cordova files, and HTML5 files.  

18.  Push It 

Push It

Push It is a relaxing, mind-bending, fun little puzzle game that has 50 levels. On the boards, use the ball launchers to fill the holes and clear the cells by strategically completing rows and columns. 

Push It is made with Construct 2. It comes with Construct 2 file, Construct 3 file, Cordova file, and HTML5 file. It has a high full HD resolution of 1080 x 1920. You can play this game only with a finger on mobile and it’s playable by mouse on PC. 

19. 5-Rex 

5-REX

In this game you have to control the 5-TREX. It is built on Construct 2 and comes with HTML 5 file, CAP X files and extensive documentation. It is easy to export to iOS and Android, has both mouse and touch control, and you can easily reskin.  

20. MR. ANT 

Mr Ant

Your name is Mr. Ant. You are about to embark on an epic journey of dodging feet and collecting Candys. Along the way, you'll get an ant's eye view of the world as you hustle and bustle to survive!

This intense arcade HTML5 game is made with Construct 2. It comes with HTML5 file, Capx file, and extensive documentation. You can easily export it to iOS and Android. You can play it with touch, mouse, and keyboard controls. You can share your high score on Twitter.  

More HTML5 Game Engines and Templates!

If you're still looking for the perfect HTML5 game engine or template, CodeCanyon has lots more to choose from. You can find another great list of HTML5 and JavaScript game templates here—along with 5 open-source games with free source code!

Things To Consider When Marketing Your Game

Building and launching your game is just the beginning! Customers have to know that your game exists. But marketing can feel so overwhelming that you want to keep putting it off. But doing so will be a terrible mistake. 

Here are some tips to help market your game. 

1. Know Your Audience 

Knowing what audience you want your game to attract is the first challenge in marketing. This something you should think about at the idea and planning stage. Games succeed because developers reach and engage and spark an interest in people. 

2. Know How to Talk to Your Audience

Game developers make the mistake of talking to fellow game developers. They want to impress each other with their technical skills. In doing so, they end up alienating the people who they should be attracting to play the game: gamers. 

How do you, as a game developer, connect with gamers? Gamers are passionate about games and gaming. Speak to this passion. Talk about games that inspired you to build your game. Talk about the thrill you felt when playing these games and how it inspired you to build your game. 

3. Marketing is a Daily Practice 

Promoting your game is something you will need to do on a daily basis. It starts with having a very clear and targeted marketing strategy that involves community building. 

And since all marketing is about building a community around your product, set aside particular hours to engage with your community through social media platforms because they provide a built-in audience eager to hear about your game. 

Constantly think about engagement strategies that involve interacting with games from all walks of life. 

4. Build, Grow, and Nurture Your Online Community

Here is where community management comes in. How do you create activities that gets your community talking to each other and about the game? How do you build a loyal and engaged audience? How do you bring in more people into your community?

Post regular, interesting, useful content. Ask your community of gamers for feedback, thank them for their comments,  build anticipation by telling them what other games you´re developing.

Make constant Interaction an indispensable part of your community. Educate your users on how to play them and in ask them to post new tricks they've discovered while playing the game.

Creating a Game Trailer That Generates Buzz

Trailers are the best way to show people why your product is awesome. They explain why your game is special and tell people where they can get it!

They create anticipation and generate buzz. As a tool for engaging an audience they are perfect because people relate easily to video. 

So what should you keep in mind when creating a trailer? 

Remember it's about telling a story with a beginning, middle, and end. Your beginning is the intro, your end is the call to action. The middle is the exciting highlights of the game. 

What story does your game tell and how do you tell it with the game trailer?

1. Create excitement. A trailer is there to grab attention. Think of how you will create an intro that draws the audience in, grab their attention from the beginning and sustain it to the end. So keep it short. 90 seconds is ideal. 

2. Focus on the highlights of the game. This is the middle part where you tell users what sets your game apart. The biggest mistake is to bore the audience to death, it also means the death of your game before its in the hands of gamers. So pacing is important. Choose the most engaging parts of your game, build them up to a cliff hanger, make them want more. 

3. Music and sound effect are an indispensable part of any trailer. Music is the sidekick to your attention-grabbing visuals. Choose a soundtrack that is inspiring and moves with the rhythm of visuals in your game trailer. And the sound effects should also work together with these elements to build excitement. 

4. Include endorsements. Reach out to critics, bloggers, developers in the industry and ask them to write blurbs for your game. This gives credibility to your work and establishes you as a professional. 

5. Have a clear call to action. The trailer is there to sell your game. It must have a clear call to action. Tell people to visit your website or the platforms hosting your game and buy it. 

Launch Your HTML Game with a Great Template

These HTML game templates are just a small selection of the hundreds of templates we have available at CodeCanyon, so if none of them quite fits your needs, there are plenty of other great options to choose from.

Whether you publish a game arcade on your website, earn revenue with advertising, or would like to dig deeper in HTML5 using game templates, you're sure to find something you're looking for on CodeCanyon.

You can also find useful Envato Tuts+ code tutorials on game design or game mechanics, as well as HTML5 tutorials to get you started.