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

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

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

Log in

Envato Tuts+ Code

  1. How to Code a Landing Page in Your WordPress Theme
    Final product image
    What You'll Be Creating

    If you've bought anything on the internet, you've probably come across a landing page. They're a highly effective way of maximizing conversions from a website.

    But just what is a landing page, and how do you create one for your WordPress site? 

    In this tutorial, I’ll demonstrate what makes a landing page different from a normal page on your site, and show you how to create a landing page template file so you can have your own landing pages.

    What is a Landing Page?

    A landing page is a page on your site which is designed to sell something. 

    You might direct people to it using SEO or via paid ads, or maybe from a call to action or widget on the other pages in your site. It’s a destination: somewhere you want people to do something.

    Your landing page has just one job. That job will vary depending on the nature of your business, but it will normally be one of two things: to sell something, or to get a visitor’s email address.

    So if you’re selling a subscription, a service or a product, your landing page will be designed to encourage people to buy that thing. The content will be designed to overcome objections, demonstrate how the product, service or subscription will meet the buyer’s needs, and get them to buy.

    If your landing page is designed to get email addresses, it’ll normally offer something in return. That may be a sample, a coupon, or a freebie people can download.

    Either way, when someone lands on that page (which is why it’s called a landing page), you don’t want them to go anywhere else until they’ve either bought from you or given you their contact details.

    Which is why the most effective landing pages have no links apart from those directly related to the goal of the page. Your landing page should have no navigation menu to tempt people to other parts of the site, no clickable logo to take them to your homepage, and no sidebars or footer widgets to distract people.

    This is why you need a dedicated page template that strips out all of these things.

    Here’s the landing page on one of my sites:

    my landing page with a button to sign up to my newsletter and no other links

    It’s really simple. It has no links, no navigation menu and just one button, which takes you through to a signup form. 

    You don’t want to give people the option to do anything else on your landing page, which is why you need a dedicated template file for it. The page will have no links taking the visitor away from the sales or subscription process. The only links on that page (and they should be big obvious buttons) will represent the top of your sales funnel.

    If you use a standard page template to create a landing page, you’ll increase the chances of a visitor getting distracted and moving away from the sales process. 

    So let’s start creating a custom page template instead.

    What You’ll Need

    To do this, you’ll need the following:

    • a development installation of your site
    • your own theme, or a child theme of a third-party theme (don’t edit third-party themes directly)
    • a code editor

    I’ll show you the code from my own site’s landing page template as we go along.

    Creating the Page Template

    In your theme (or your child theme), create a new page template. You can either do this by duplicating the page.php template or by creating a blank file and copying the contents of page.php into it. I’m calling mine landing-page.php.

    Here’s my existing page.php file:

    <?php
    /**
     * The template for displaying all pages.
     */
    get_header(); ?>
    
        <?php
    	if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
    
    	<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>	
    		
    		<?php if ( has_post_thumbnail() ) { ?>
    		
    			<h2 class="entry-title desktop"><?php the_title(); ?></h2>
    		
    			<div class="quarter right"> 
    				<?php the_post_thumbnail( 'large' ); ?>
    			</div>
    			
    			<section class="entry-content three-quarters left">
    				<h2 class="entry-title mobile"><?php the_title(); ?></h2>
    				<?php the_content(); ?>
    			</section><!-- .entry-content -->
    		
    		<?php }
    			
    		else { ?>
    		
    			<h2 class="entry-title desktop"><?php the_title(); ?></h2>
    	
    			<section class="entry-content">
    				<?php the_content(); ?>
    			</section><!-- .entry-content -->	
    			
    		<?php } ?>
    		
    	</article><!-- #post-## -->
    
    <?php endwhile; ?>
    
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>

    Let’s run through the contents of that file:

    • First, a call to the header.php file.
    • Next, a conditional check to see if there’s a featured image. If so, this is displayed right aligned. This is specific to my theme–yours may or may not have something similar.
    • The loop to display the page title and content.
    • A call to the sidebar.
    • A call to the footer.

    To create a landing page template, we'll need to do a few things to this file:

    • add commented text at the beginning so WordPress knows this is a page template
    • remove that conditional statement
    • remove the call to the sidebar

    I’m not going to remove the footer, because it’s needed for the closing of the body element and the wp_footer hook. Instead, we’ll create a version of the footer file which will be used by this page template.

    Adding Commented Text to Create a Page Template

    In your new landing-page.php file, add a line of commented out text to tell WordPress this is a page template. Here’s mine:

    /**
     * Template Name: Landing page
     * The template for displaying the landing page.
     *
     */

    Now when you edit or create a page in your page editing screen, you’ll be able to select this template in the Page Attributes section of the Document tab on the right of the page editing screen:

    selecting a page template in the WordPress admin

    Removing the Conditional Code

    Now let’s edit the conditional check. You'll only need to do this if your page.php file has one.

    My landing page will always have a featured image–I don’t need to check for one. This is because I’ll have an image of the free download that people receive when they sign up to my mailing list. I also want to change the layout. Here’s the new version of my code in my page template:

    <?php
    if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
    
    	<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    					
    		<h2 class="entry-title"><?php the_title(); ?></h2>
    					
    		<section class="featured-image one-third left">
    			<?php if ( has_post_thumbnail() ) { 
    				the_post_thumbnail( 'medium' );
    			} ?>
    		</section>	
                
            <section class="entry-content right two-thirds">
    			<?php the_content(); ?>
    		</section><!-- .entry-content -->
    	</article><!-- #post-## -->
    
    <?php endwhile: endif; ?>

    The CSS styles for layout in this page are already in my theme’s stylesheet–if you want the same layout, or you want to style your landing page differently from other pages, add the CSS to your theme’s stylesheet.

    Removing the Sidebar Call

    Now let’s remove that sidebar call. 

    Delete the get_sidebar() tag. Leave the footer call there–we’ll edit the footer to remove any links shortly.

    Editing the Header and Footer

    Not all of the content and links in each page on your site are in the template file. The header contains your navigation menu plus a link to your home page via your logo or site name. It may also contain other links in your banner.

    Your footer will probably contain a colophon with links to your homepage, plus widgets which may include internal or external links.

    You want to get rid of all of those, so people can’t leave the landing page without buying or signing up.

    Removing Navigation From the Header

    Now let’s start with the header. There are two things to get rid of: the link in your logo or site title, and the navigation menu.

    Start by creating a copy of your header file. Call it header-landing.php.

    Now in your landing-page.php file, edit the call to the header so it reads like this:

    get_header( 'landing' ); ?>

    Once you’ve done that, you can edit the header-landing.php file.

    Here’s my code for the site name:

    <hgroup class="site-name one-third left">
        <!-- site name and description - site name is inside a div element on all pages execpt the front page and/or main blog page, where it is in a h1 element -->
        <h1 id="site-title" class="one-half-left">
            <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
                <?php bloginfo( 'name' ); ?>
            </a>
        </h1>
      
        <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
      
    </hgroup>

    We still want to show the site name, so we edit the code to output that without the link:

    <hgroup class="site-name one-third left">
        <!-- site name and description - site name is inside a div element on all pages execpt the front page and/or main blog page, where it is in a h1 element -->
        <h1 id="site-title" class="one-half-left">
            <?php bloginfo( 'name' ); ?>
        </h1>
      
        <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
      
    </hgroup>

    Now let’s remove the navigation menu. You simply delete all of the code for the navigation menu in your header-landing.php file.

    Here’s the code:

    <nav class="menu main right">
    
      <div class="skip-link screen-reader-text">
        <a href="#content" title="<?php esc_attr_e( 'Skip to content', 'tutsplus' ); ?>">
          <?php _e( 'Skip to content', 'tutsplus' ); ?>
        </a>
      </div>
    
      <?php wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); ?>
    
     </nav><!-- .main -->

    Just delete all of that. Simple!

    Removing Links From the Footer

    Now let’s move on to the footer. 

    As with the header file, you need to create another version of the footer file. Duplicate footer.php and call it footer-landing.php.

    In your landing-page.php file, edit the footer call so it reads like this:

    <?php get_footer( 'landing' ); ?>

    Now let’s edit the footer-landing.php file. 

    In my footer file I have a widget area:

    if ( is_active_sidebar( 'footer-widget-area' ) ) { ?>
        <aside class="footer-widget-area full-width" role="complementary">
    		<?php dynamic_sidebar( 'footer-widget-area' ); ?>
    	</aside>
    <?php }

    Just delete that from footer-landing.php. Remove any element it’s wrapped in if you want: experiment to get it looking how you want.

    In my file I also have code for a colophon that includes links:

    <section class="colophon" role="contentinfo">
        <small class="copyright left">
            &copy; <a href="<?php echo home_url( '/' ) ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
                <?php bloginfo( 'name'); ?>
            </a>
        </small><!-- #copyright -->
    
        <small class="credits right">
            Proudly powered by <a href="https://wordpress.org/">WordPress</a>.
        </small><!-- #credits -->
    </section><!--#colophon-->

    I need to edit that to remove the link to the home page and the WordPress link, as follows:

    <section class="colophon" role="contentinfo">
        <small class="copyright left">
            &copy; <?php bloginfo( 'name'); ?>
        </small><!-- #copyright -->
    
        <small class="credits right">
            Proudly powered by WordPress.
        </small><!-- #credits -->
    </section><!--#colophon-->

    There will now be no links in the landing page footer or header.

    Editing the Stylesheet

    The final step is to edit styling for the page template so that the content is displayed at full width.

    I have the following layout styling for my content and sidebar by default:

    #content {
      width: 65%;
      float: left;
    }
    .sidebar {
      width: 32%;
      float: right;
    }

    I need to add some styling to target the content just on this page template:

    .page-template-landing-page #content {
      width: 100%;
      float: none;
    }

    You don’t need to add any extra styling for the sidebar–it won’t be displayed on your custom page template as it isn’t called from the template file.

    Creating Your Pages

    The last step is to create your landing page. Create a new page in your WordPress admin, using your new landing page template. It will include text enticing people to buy or sign up, plus a form or a buy button.

    In my site I actually have two landing pages: the first is the page people will arrive at, and the second is the page where people provide their email address. I’ve done it this way because there is research showing that people are more likely to complete a process if they’ve first had to click a link. I haven’t tested whether it makes a difference on my site yet: maybe I should!

    If you click on the button in the first landing page on my site, you get this simple signup page:

    a landing page with a one-field form and no other links

    That page uses the same template as my landing page. In both cases I’ve added the same featured image. Doing this reinforces the message that people will get that freebie if they sign up–and including visuals makes your page more attractive and increases conversions.

    A Landing Page Template Reduces Distractions and Increases Conversions

    Creating a template file for your landing pages will make them much more effective. Anyone arriving at your site on this page, or clicking a button in your site to get to it, will have nowhere else to go.

    Follow the steps in this tutorial to create a landing page for your site. If it’s larger than mine (landing pages selling an expensive product can need a lot of text to make the sale), you might want to add additional styling to break the content up and help people read it.

    Once you have this template, its easy to add extra landing pages to your site in the future, to support future campaigns or sell new products. Good luck!

  2. Best Free WordPress Calendar Plugins

    Have you ever wanted to add event booking and appointment functionality to your WordPress based website for free? Luckily, there are many WordPress calendar plugins available for you to use. In this post, we will cover six different free to use WordPress calendar plugins to help you get started with booking events and appointments.

    All these plugins offer a common set of features which is expected because they perform similar functions but some features and the UI of these plugins set them apart from each other.

    Before we start with our list of free plugins, I would like to mention that you should also take a look at some premium WordPress calender plugins available on CodeCanyon. In general, you can expect more features and better support from the plugin developers when using a premium plugin from the market. This basically means that you won't have to spend a lot of time trying to figure out how to use a specific feature and be able to just get the job done.

    Without any further delay, here are the six free WordPress calendar plugins that you can try out today.

    1. The Events Calendar

    The Events Calendar is currently the most popular free plugin for creating and managing events.

    The Events Calendar

    When creating a new event, you can use this plugin to specify the start or end date and time for the event. If the events lasts for a whole day, you can simply check the box for an all-day event.

    It also lets you provide information about the location of the event with extra information like the phone number that users can call or a website they can visit for more information. You can also embed Google Maps on the webpage to let users know the exact venue of the event.

    The plugin also gives you the option to specify how many events should be shown on a single page for a day. It is also possible to enable comments on the events page in order to get some feedback from the visitors.

    My Calendar

    Although not as popular as other plugins, the My Calendar WordPress plugin offers a lot of interesting features that make it quite useful.

    My Calendar

    Visitors can view the events in either grid form or list form. They can also view the events on a monthly, weekly or daily basis. The plugin also offers different widgets to show users the events of the day, upcoming events, a compact calendar and the ability to search through the events.

    You can also create recurring events in the plugin and edit individual instances of those recurring events.

    One of the features that might be of interest to you is the ease of customization of the plugin. For instance, you can directly edit the primary colors used in the calendar and also change every other aspect like the margins, fonts, padding, and border. In other words, you can get the calendar to look exactly the way you want.

    All-in-One Event Calendar

    The All-in-One Event Calendar plugin presents events to users in a very unique and refreshing way. It can also import events from other website calendars and allow users to subscribe to get updates about different events.

    All-in-One Event Calendar

    The plugin allows easy import and export of iCalendar (.ics) feeds so events that you create on one website can be automatically made to appear in the calendar of some other website that you manage.

    You can assign different categories and tags to an event. This way it is possible to filter and color code the events based on category. You can also directly create a link to filtered calendar views.

    The plugin offers five different views that you can use to display the events on your website. These are: day view, week view, month view, agenda view and posterboard view. You can also show upcoming events to visitors using the upcoming events widget.

    Modern Events Calendar Lite

    This Modern Events Calendar plugin is a good solution if you are running an event website or a booking website. You can use it to easily add and publish events while organizing them quickly in different groups.

    Modern Events Calendar Lite

    The calendar displayed to the users actually has a more modern design compared to other plugins in the list. It also provides easy ways to migrate all your data from existing event plugins like The Event Calendar.

    The plugin offers a lot of views including common ones like full calendar, monthly, daily, and weekly, and other views like countdown view, list view, and carousel view. Some of these views have different skins that you can apply as well. Check them all out on the plugin description page.

    There are many other features that you might like including integrations for Mailchimp and BuddyPress. You can import events from Google event calendar. The events can also be exported to various file formats including CSV, JSON and XML.

    You can embed Google maps in your events and use custom CSS to completely change the look of the calendars you create.

    Easy Appointments

    If the website is meant to be used by a lawyer, doctor, mechanic or another professional who has to constantly schedule and cancel appointments with their clients, the Easy Appointments plugin is a great choice.

    Easy Appointments

    It allows you to manage all your appointments with ease. You can use it to create appointments for multiple locations, services and workers. It is also possible to have dedicated calendars for particular locations and services.

    The plugin provides email notifications to clients when appointments are created or updated. These notifications can have their own custom subject and content. Links to confirm or cancel a booking are also provided within the email itself. Any information from the booking forms can be included inside the emails. Finally, you can have custom emails for different appointment statuses: pending, reservation, canceled and confirmed.

    You can either use one-column or two-column layouts for creating the booking forms on the front-end. It is also possible for you to add your own custom fields to the booking form.

    If you plan on using the Easy Appointments WordPress plugin, we also have a tutorial to help you get started quickly.

    Booking Calendar

    The Booking Calendar plugin is similar to the easy appointment plugin above but uses a different approach.

    Booking Calendar

    You can begin by creating booking resources. Each of these resources will identify and services or properties for which you are accepting bookings. For example, if you manage 5 different apartments or 3 different hotels, you could have create them all as separate resources. This means that the booking schedule of different apartments would not interfere with each other.

    You can also change the layout of the booking form and add your own custom fields. Similarly, you can customize the email templates to send different emails for different booking actions.

    The admin panel makes it very easy for you to manage all the bookings. You can easily changes the details and dates of different bookings. Similarly, you can copy a booking from one resource to another or change the resource of any existing booking.

    It is also possible to import bookings from Google Calendar or export existing bookings to CSV format.

    Final Thoughts

    In this post, we have summarized the features of some popular and free WordPress calendar plugins. Each of them offers something unique that you might find useful. For example, the My Calendar plugin lets you completely change the CSS of the event calendar displayed to the user. Similarly, the Modern Events Calendar Lite plugin has a great looking design and a variety of views with countdown timers. Additionally, it provides integration for Mailchimp and BuddyPress.

    Hopefully, one of the plugins mentioned in this post will meet all your requirements. Just in case you are looking for more features, make sure you check out these premium WordPress calendar plugins available in the Envato market. You will also get free support from the plugin developers so that your project is up and running in no time.

    What's your favorite WordPress calendar plugin? Let us know in the comments below!


  3. 15 Best Templates for Mobile App Monetization

    Imagine that you're ready to kick-start your own mobile app development business. Chances are you'd like to use the best development practices for your first app, and also code it as quickly as possible. You'll probably want to monetize your app as well! 

    This post will show you some easy ways to launch your next ad-supported app project.

    In this article I'll look at what app monetization is, list different ways of monetizing your app, and take a brief look at in-app advertising as a way to monetize your app. 

    Finally, I’ll introduce some highly customizable and versatile mobile app templates that you can use in your next development project. Each has Google's AdMob app monetization platform integrated, so you can build a revenue stream for your app from day one.

    These templates are all available from CodeCanyon, where you can buy and download an app template for immediate use in your app development project.

    Understanding App Monetization

    The market is saturated with free apps which has made it difficult to make revenue from selling apps. But even your app can still be a very reliable income source. Researchers are predicting that combined global mobile app revenue for 2020 will reach $200 billion. 

    There are number of different ways to monetize your app. 

    Here are some examples:

    1. free and premium versions 
    2. advertising 
    3. in-app purchases 
    4. licensing your code to other developers
    5. selling your app in market places like Code Canyon 
    6. using sign-up data to do SMS marketing & E-mail marketing 
    7. subscriptions 

    What is an App Template? 

    If you have an idea for an app for and you have no coding knowledge, don’t be discouraged. There are developers that build mobile apps templates that you can buy and customize and make them into your own app. 

    If you are a developer, instead of starting from scratch an app template can be your starting point.  

    An app template is a pre-built application that has a lot of the core functionality already provided for you. The next step is for you to customize it to create the final app you want. 

    now, or read more about how to use an app template here on Envato Tuts+!

    App Templates for Monetization

    If you want to make money out of your app, some mobile app templates come with Google AdMob app monetization platform already integrated into them. You can start making money with your app from the time it launches.  

    What is Google AdMob?

    AdMob is an app monetization platform by Google. Developers have been using AdMob advertising system to monetize their apps while still making them available for free. 

    There are many online platforms and networks for hosting mobile ads, but Google AdMob is one of the most popular. 

    What Does a Monetization App Template Do?

    It comes with built-in AdMob funcitonality that allows you to monetize your app. In this case, you begin making advertising revenue by showing ads on your app. 

    Why Should You Use a Monetization App Template?

    With a template, you don’t have to start building your app from scratch. You can start from an already built foundation. AdMob is already set up for you. 

    Let’s take a brief look at one of most popular ways of monetizing apps: in-app advertising. 

    In-App Advertising

    Digital advertising is the dominant form of online marketing. Advertisers realize mobile apps are the best way to reach consumers because people spend a lot of time on mobile apps and people prefer free apps. The catch for free apps is ads. Many developers offer their apps for free and utilize in-app advertising as a source of revenue. 

    The 7 most common ad formats used in apps include: 

    • interstitial ads–also known as full-screen ads,  they display across a screen after app loads or closes or in transition between screens 
    • banner ads—these display at the top or bottom of the screen with text and graphics
    • native ads—these don’t look like ads, instead they integrate seamlessly into the app and appear as if they are part of the content of the app 
    • video ads
    • notification ads–deliver ads to the notification area of the user's mobile device
    • capture forms–an opt-in form where uses can enter their email addresses for newsleters
    • interactive ads 

    When you decide to monetize your app by incorporating ads, these are some things you should consider.

    • Do the ads enhance or interrupt the experience of your app users? 
    • Does including these ads make the user experience more meaningful? 
    • If you decide to run ads in your app, how can you make your users' experiences meaningful? 
    • What advertisers do you want to associate your business or app with? 
    • Do the ads reflect your brand? Are they tied to what your business does? 
    • Too many ads on your mobile app may drive away users. 
    • Too many ads may also hinder the functionality of your app. 

    Since these factors can adversely affect your app income, it is important to find the right balance.

    Monetization App Templates on CodeCanyon

    Now I will show you some mobile app templates you can buy and download to kick start your own app. These mobile app templates are highly customizable and versatile. 

    Each has Google's AdMob app monetization platform neatly integrated, so you can build a revenue stream for your app from day one.

     I have grouped these monetization app templates into the following categories: 

    • Android templates
    • iOS templates 
    • game templates 
    • media templates 
    • cross-platform templates 

    Android Templates

    1. Universal Multi-Purpose Android App 

    Universal Multi-Purpose Android App

    Universal is a flexible and versatile app template that can be customized for a broad range of designs. In addition to its built-in AdMob support, the template can easily integrate with more than ten different content providers, including WordPress, YouTube, and Facebook. It is a native Android app and comes with extensive documentation to help you get started.

    2. Universal Android WebView App 

    Universal Android WebView App

    Universal Android WebView App has a simple goal—bundle a solid Android WebView component with AdMob ads. It has lots of nice extra features such as Material Design styling, geolocation, and pull-to-refresh gesture support. It supports app development in HTML5, CSS3, JavaScript, jQuery, Bootstrap and other web technologies, but at the same time offers its responsive design and clean native code as well.

     3. Web2App 

    Web2App

    Web2App is another app template that provides an Android WebView component, and it's packed with features. This template offers countless possibilities for customization. Not only that, but its comprehensive documentation, along with video tutorials and step-by-step instructions, make your job much easier than you might have thought possible.

    4. Android News App 

    Android News App

    Android News App helps you run your own news platform. The app template consists of two components: an Android client and a PHP with MySQL server. It also provides you with full control over AdMob, allowing you to enable and disable features according to your specific requirements. The RTL (right to left) mode will come in handy if you want to add languages other than English and expand your global audience.

    5. City Guide—Map App for Android 

    City Guide

    City Guide is a location-aware map and places app for the Android platform. It features eight different color themes, animated effects, responsive design, and a lot more. Also, it is built with easily configurable, cleanly written code, and its documentation will make getting started a breeze. It uses a local SQL database to store data, so reliance on the user's internet connection is minimized. And, of course, AdMob is supported (banners and interstitial ads). 

    6. Cookbook—Recipe App for Android 

    Cookbook

    Cookbook is an Android app template for sharing cooking recipes. With easily configurable and customizable code, you can create your own app with relatively little effort and time. The template features a responsive Material Design interface and a local SQLite database in addition to its AdMob monetization support. So it's time to start "cooking" your app, using Cookbook.

    7. Material Wallpaper 

    Material Wallpaper

    Android wallpaper apps are quite popular, and Material Wallpaper is a great way to cater to that market segment. It's designed according to Google's Material Design guidelines, so users get the visual experience they're expecting. The template can manage an unlimited number of categories and image galleries, thanks to its powerful and responsive admin panel. In addition to AdMob integration, it features Firebase Analytics and push notifications too.

    8. Your Recipes App 

    Your Recipes App

    Another great cooking app template, Your Recipes App is a complete platform with an Android client and PHP-based server. The powerful Admin Panel lets you manage your content to keep content up to date and error-free. You can send push notifications to your users with Firebase and OneSignal. There is even RTL (right to left) language support, which will help if you want to expand into other languages.

    9. WebViewGold for Android 

    WebViewGold for Android

    If you have a website you want to convert into an Android app then WebViewGold is perfect for you. WebViewGold for Android is Android Studio package wraps your URL (or local HTML) content into a real, native Android app! No more coding, no more plugins needed. This app template supports all kinds of web apps and websites including HTML, PHP, WordPress, progressive web apps, and HTML5 games. It also supports AdMob banner and full-screen interstitial ads.

    Android Games and Media App Templates

    10. Your Radio App 

    Your Radio App

    Your Radio App is an internet radio streaming app for Android. It supports several popular streaming formats, including M3U and AAC. This is a well-thought-out app with some nice features. For example, the ability to stop the radio when someone is calling is useful. The powerful admin panel, the great looking Material Design UI, and the Google Cloud Messaging push notifications are also worth mentioning.

    11. Your Videos Channel 

    Your Videos Channel is a great app template for those who just need to build a video streaming platform. It doesn't matter whether you choose to serve videos from YouTube or from your own server. This app is capable of handling any of those options. It has a beautiful Material Design UI, a responsive Admin Panel, and support for OneSignal push notifications. It's a great way to keep users engaged with your video content while also building an additional revenue source.

    iOS Templates

    12. Web2App for IOS 

    Web2App for IOS is the iOS version of the Web2App template mentioned above. This template is highly customizable and ships with comprehensive documentation, video tutorials, and step-by-step instructions that make it easy to get started. You can choose from countless display modes and colors to suit your requirements, and of course customize the AdMob integration.

    13. SuperView—WebView App

    SuperView - WebView App

    SuperView allows you to wrap your website in a simple iOS app. It's ideal for web developers who want to ease the difficult learning curve associated with the Swift programming language and iOS SDK. The quality of the coding and design in this template are really impressive.

    14. WebViewGold for iOS 

    WebViewGold for iOS

    If you have a website you want to convert into an iOS app then WebViewGold is perfect for you. WebViewGold is an Swift Xcode package which wraps your URL (or local HTML) into a real, native iOS app! No more coding, no more plugins needed. It’s optimized for iPhone, iPod touch and iPad. It supports AdMob banner & full-screen interstitial ads.

    Mobile Cross-Platform Templates

    15. Ionic Mobile App Builder

    Ionic Mobile App Builder

    Ionic Mobile App Builder is another hybrid mobile app template based on the Ionic framework. This template comes with some great front-end and back-end tools, including a WYSIWYG layout editor, a WordPress plugin generator, and a lot more. Even if you're not so confident in PHP and MySQL skills, that's no problem—Ionic Mobile App Builder even has a web admin panel generator that'll take care of your PHP code!

    Get an App Template Now!

    App templates are a great way to jump-start your next development project, or to learn from other people's work. Pick one of these great app templates today to kick-start development of your next app. Your time is valuable, and you owe it to yourself to do everything you can to get a head start on your next project. 

    There are many more templates available on Code Canyon. Put one of them to use right now, or read more about how to use an app template here on Envato Tuts+!

  4. Best Free WordPress Plugins for Optimizing Website Performance

    Did you know that search engines like Google give preference to fast-loading websites in their rankings? Visitors are also less likely to abandon your site if it loads quickly. Everyone expects a website to load as quickly as possible—if it doesn't, they will likely abandon it and visit the competitor instead.

    This means that a slow website with good content will still have a harder time bringing in visitors and potential business. On the other hand, a fast-loading website will help increase your business even further.

    If you are a WordPress user, there are a lot of plugins that you can use to optimize your website performance. In this post, we will summarize the features of some of these plugins which can improve a website's performance using caches or by optimizing images.

    WordPress Cache Plugins

    One of the easiest ways to optimize a website's performance is with the proper use of caching. This way, your visitors only need to load static resources like JavaScript libraries, CSS stylesheets and images only once. When someone visits your websites for the first time, all these static resources will be stored in their browser's cache so they don't have to request them again and again. This can significantly bring down the number of requests and page load time.

    Here are some of the most popular free plugins that you can use to fully utilize the potential of caching.

    W3 Total Cache

    The W3 Total Cache plugin will improve the SEO and user experience of a website by increasing its performance and reducing the load time with the help of CDN integration and latest best practices.

    W3 Total Cache

    The plugin provides the following benefits:

    • a boost in search engine result page rankings for websites specifically those which are mobile-friendly and use SSL
    • almost instant repeat page views due to browser caching
    • at least 10 times improved performance upon full configuration
    • optimized progressive render so that users can start interacting with the page content as soon as possible
    • improved performance of the web server and 80% savings in the bandwidth

    This plugin is compatible with shared hosting, virtual private hosting as well as dedicated servers. It also provides support for SSL and Accelerated Mobile Pages (AMP). You can use the plugin to cache pages, posts, CSS, JavaScript and search result pages within the website. Not only that but the plugin also minifies the HTML, CSS and JavaScript used to render the webpages.

    You can visit the plugin description page to learn more about the plugin.

    WP Super Cache

    The WP Super Cache plugin generates static HTML files to serve to users instead of repeatedly processing the WordPress PHP scripts again and again for each visitor. Creation of static HTML files for users can significantly reduce the load on server and improve the page load time because each webpage doesn't not have to be processed again and again for different users.

    WP Super Cache

    These static pages are served to users who are not logged in, have not left a comment on your website or who are not viewing a password protected post. This generally covers a majority of the website traffic.

    Any other website visitors will be served custom cached files tailored for their visits. For example, if they are logged in or have left a comment on a post, they will be served that specific cached version of the respective webpage.

    You should visit the plugin description page to check out different ways in which it serves cached pages and to learn about some troubleshooting tips if things are not working. The plugin has over 2 million active installations with pretty good reviews so you should definitely check it out.

    WP Fastest Cache

    The WP Fastest Cache works in a manner similar to WP Super Cache. It generates static HTML files from your dynamic WordPress blog. Instead of using RAM and CPU for each visit to your website to render and process the PHP or to access the database, this plugin creates a static version of the page or post.

    WP Fastest Cache

    The content of most posts and pages in a WordPress blog won't change frequently. So, it makes sense that the page is processed only once and a static file is served to the users after each that for each visit. The time period for which the static file is valid can be set by you so you can easily control how often the static version of a webpage is generated again.

    The plugin optimizes the website performance with use of static pages, minified HTML and CSS, combining multiple CSS and JS files, browser caching, enabling Gzip compression, and optionally removing the emoji inline CSS and the wp-emoji-release.min.js file.

    There are a lot of configurable options available to determine how and when a page is cached. As an admin, you will be able to delete all cached and minifed files from the options page whenever you feel like the cache has gone stale.You can also use shortcode to block specific posts and pages from being cached. The caching option can be enabled or disabled for mobile devices or logged-in users.

    If you like this plugin, you can read more about it on the description page.

    LiteSpeed Cache

    LiteSpeed Cache is also a great plugin for improving website performance. Even though some of its features can be used on any web server, it offers some features exclusively meant for users of OpenLiteSpeed, commerical LiteSpeed products, or LiteSpeed-powered hosting. You can ask your hosting provider if they use LiteSpeed because using this plugin will significantly improve your website performance while reducing server load as it is tailor-made for improving the performance of such WordPress websites.

    Some of the general features available in this plugin include minification of HTML, CSS and JavaScript files and well as minification of inline CSS and HTML. It will also combine multiple smaller CSS and JS files to reduce the total number of requests. It automatically generates critical CSS and load any CSS and JS files asynchronously. It also comes with several options to clean and optimize the database.

    Here are some of its LiteSpeed exclusive features:

    • automatic caching of pages to improve performance
    • automatic purges of related pages based on certain events
    • private cache for logged-in users
    • posts and pages are cached separately for desktop and mobile views
    • scheduled purge of specific URLs

    The description page for the plugin lists a few more features and answers all the plugin related FAQs.

    Image Optimization Plugins

    Generally, images make up the largest chunk of data that is loaded when someone visits a webpage. Text based files like scripts and stylesheets are very rarely larger than 100kb but images are bigger than that a lot of times.

    There are two major reasons why the loading speed of your website could be slow due to large image sizes. You might be loading images without proper compression and optimization or you are loading images with very large dimensions when small ones will do.

    Generally, images can be compressed to about half their size without seeing a significant drop in their quality. You can also resize images so that they are not larger than they need to be. For instance, the webpage where you are loading an image might be displaying it at a resolution of 1366 x 768 but you might be loading an image with resolution 1920 x 1080. Scaling the original image down to 1366 x 768 will bring down the file size and reduce the loading time of the webpage.

    Here are a couple of plugins that you can use to optimize images on your WordPress website.

    EWWW Image Optimizer

    The EWWW Image optimizer plugin offers many useful features related to image optimization. In the end, you will save both storage space and bandwidth while delivering fast page load times for your users. The plugin automatically optimizes any newly uploaded images.

    EWWW Image Optimizer

    One of the nice things about the plugin is that it does not put a restriction on the file size of the image that you want to compress. The plugin also tries to get the best possible  compression to quality ratio for the images. In certain cases, you can also choose to convert images from one format to another because it will yield smaller file sizes without compromising the quality.

    There are some other nice features that you can read about on the plugin description page.

    Smush Image Compression and Optimization

    This plugin offers a lot of unique features when it comes to image optimization. During lossless compression, the plugin will strip unused data without affecting the image quality. You can use it to optimize as many as 50 images with a single click. The plugin can also optimize images that are not located in the media library.

    Smush Image Compression and Optimization

    When you upload new images, it is possible to set a default max width and height so that any image with larger dimensions is automatically scaled down while being compressed. For example, if you know that no image on the website will be displayed in dimensions larger than 1366 x 768 just set them as the largest possible dimensions. After that, if you upload a 1920 x 1080 image it will be automatically scaled down to 1366 x 768. This scaling down by itself will significantly reduce the file size.

    One nice feature of this plugin is that it supports lazy-loading of images. This basically means that any off-screen images that the user still has not scrolled down to will not be downloaded as soon as the page loads. If a page has 20 images and the users does not scroll past the first 5 then the remaining 15 images won't even load on the webpage. This can significantly improve the page load time by only loading images when they are needed.

    One shortcoming of this plugin is that the images you optimize cannot be larger than 1MB in size. If that is not an issue for you, this image smushing plugin will serve you well.

    Final Thoughts

    In this article, we have covered six different free, popular and feature-rich plugins that you can use to optimize you WordPress based websites. The first four plugin offer general site optimization features and the last two specifically optimize images. You don't have to and should use all these plugins at once on a single website. Just try them first and choose the one you like the best.

    Do you know any other plugins for optimizing a WordPress website? Share them with us in the comments below!

  5. Easier Apps With Ionic Templates, Frameworks, and Tools

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

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

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

    What is Ionic?

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

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

    Why should you be using Ionic for your projects?

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

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

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

    Using Ionic Mobile Templates for Your Project

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

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

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

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

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

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

    Low- and Zero-Code Ionic App Creation

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

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

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

    IMABuildeRz Universal AppBuilder for Ionic

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

    Get to Minimum Viable Product Faster with Ionic Skeletons

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

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

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

    Barebone Ionic starter template

    Build an eCommerce App Fast With Ionic

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

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

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

    Here are some of the most popular eCommerce templates available:

    Ionic eCommerce app template

    Use Pre-Built Building Blocks with Ionic UI Kits

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

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

    Some of the best kits out there include:

    Ionic3 UI Theme

    Easily Make Business and Service Apps

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

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

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

    How Will You Use Ionic?

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

    Let me know by posting in the comments below!