How to create HTML5 DataList

HTML5 Datalist is a new html tag shipped with HTML5 specification. HTML5 Datalist can be used to create a simple poor man’s Autocomplete feature for a webpage.

In this tutorial we will go through the basics of HTML5 Datalist tag and check some quick examples of autocomplete.

Introduction to HTML5 Datalist tag

As part of HTML5 specification a new tag <datalist> has been introduced. Using this tag, we can define a list of data which then can be used as list for an input box. We can create a simple Autocomplete feature using this tag.

html5 datalist example
html5 datalist example

Consider a textbox to take country name input from user.


<input type="text" list="countries" name="mycountry" />

See how we used attribute list and pass a list of countries called ‘countries’. We can define this list of countries using datalist tag.

<datalist id="countries">
	<option value="India">India</option>
	<option value="United States">United States</option>
	<option value="United Kingdom">United Kingdom</option>
	<option value="Germany">Germany</option>
	<option value="France">France</option>

So we created a list of countries using <datalist> tag. The id of datalist tag must match with the list attribute of the input box.


Below is the demo. Enter some text in the Country textbox and see how an autocomplete list appears below it.

Browser Compatibility

Not every browser out there supports html5 datalist for now. So far IE 10 and above, Firefox, Chrome and Opera 19 above supports html5 datalist tag. Safari doesn’t support datalist yet 🙁

Chrome Firefox (Gecko) Internet Explorer Opera Safari
31 26.0 10.0 19.0
<!DOCTYPE html>
<script src=""></script>


// Safari reports success of list attribute, so doing ghetto detection instead
  test : (!Modernizr.input.list || (parseInt($.browser.version) > 400)),
  yep : [
<input type="text" list="countries" name="mycountry" />

<datalist id="countries">
	<option value="India">India</option>
	<option value="United States">United States</option>
	<option value="United Kingdom">United Kingdom</option>
	<option value="Germany">Germany</option>
	<option value="France">France</option>

Download Source Code (5.4KB)

Liferay 7 Community Expedition, Digital Enterprise Platform

After many months of hard work from the Liferay product and engineering teams along with the aid of the awesome Liferay community, it is my pleasure to announce the immediate availability of Liferay Portal 7.0 CE. Liferay Portal 7.0 CE is an amazing release packed with many new features and enhancements.

Liferay 7.0 CE was tested extensively for use with the following Application/Database Servers:

Liferay CE Application Servers:

  • Apache Tomcat 8.0 with Java 8
  • Wildfly 10.0 with Java 8

Liferay CE Databases:

  • HSQLDB 2 (only for demonstration, development, and testing)
  • MySQL 5.6
  • MariaDB 10
  • PostgreSQL 9.3

New Features Summary

  • Modularity inside
  • New Forms Experience
  • Optimized Content Authoring:
  • dvanced modern sites easier than ever
  • New image, file and media selector
  • Easier to use staging, even for the most advanced scenarios

Download Liferay 7 free click below

1.Liferay Digital Experience Platform
Liferay Portal CE

 click here for more information of Lifeay 7

Migrating Liferay 6.2 theme to Liferay 7 theme

Optimizing an Existing Theme for Liferay 7

Migrating your theme from Liferay 6.2 to Liferay 7 is easier than you may think, thanks to the themes generator. This tutorial assumes that you already have the themes generator installed and a 6.2 theme that was developed with the Plugins SDK.

This tutorial demonstrates how to:

  • Upgrade your theme from Liferay 6.2 to Liferay 7

Go ahead and get started.

Importing Your 6.2 Theme

The first thing you will need to do is import your 6.2 theme to use the new Node.js theme development tools. Follow the steps below to get your theme set up:

    • Navigate to the directory you want to import your theme into and open the command line and run the following command:
    • yo liferay-theme:import

This runs the import sub-generator for the themes generator.

    • Enter the direct path for your theme to import and press Enter.

Note: the themes import sub-generator does not support relative paths.

The theme’s modified files are all copied and migrated to a newly created src directory. A gulpfile.js, liferay-theme.json, package.json file and a node_modules directory is added to the existing theme.

Next, the gulp init task runs and prompts you with a couple questions.

  • Enter the path to your app server.
  • Enter the URL to your production or development site, or press Enter to accept the default http://localhost:8080.

Your theme is now set up to use the Node.js build tools and theme gulp tasks. However, the theme is still configured for Liferay 6.2. To upgrade your theme to Liferay 7, follow the steps in the next section.

Download doc to Upgrade 6.2 theme to Liferay DXP

Watch video how to Upgrade 6.2 theme to Liferay DXP

How to Create a Custom WordPress 404 Error Page

Custom WordPress 404 Error Page

An error 404 is when a visitor tries to access a page that does not exist. Sometimes people tend to overlook this feature, and never think about designing for it. Taking the time to make a user-friendly 404 page could mean the difference in a user staying on your website, or leaving.

Chances are you have created your website and checked multiple times to be sure that every link leads to somewhere. Eventually over time you may forget about a link that leads to a post you removed, or possibly changed the name to. Even if a visitor is searching for a page directly and they don’t get it right, then they will be taken to the error 404 page.

These can be made very user-friendly utilizing the WordPress template tags, and little bit of know-how.

Understanding The Error 404

The error 404 is a message that the visitor will receive when a page or post is not located. This is by default included within WordPress, but not with all themes. If you have created a custom theme, then you can increase the chances of a user sticking around even though they didn’t find what they were looking for with a properly designed 404 page.

The Basic Error 404 Template

The basic error 404 template is included with some WordPress themes but not all. WordPress is set to automatically look for the file 404.php when an error 404 is reached. If this file is not present, then it will give a basic error message which is not user-friendly.

If you do not already have this file you can create it. Make a new blank file and name it 404.php

Here is the basic code we will start with:

The 404.php File

<?php get_header(); ?>

<h2>Error 404 - Page Not Found.</h2>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

The above code within the 404.php file would give a simple output wrapped in H2 tags that would read “Error 404 – Page Not Found.” – It would also get the WordPress Header, Sidebar, and Footer. These are all optional and should be modified to fit your WordPress theme.

We want to take this a few steps further to achieve our goal. Make a note that I am using the get_header() along with get_sidebar and footer to call our theme template files. Your’s may vary slightly and you will have to adjust your 404.php file accordingly.

Starting To Work On It

First, We will add the search form to our basic 404 page to make it a bit more helpful. This way even if a visitor lands on your 404, they then have the option of searching your site. This is the first method to help users stick around instead of leaving.

404.php File – Added Search Form

<?php get_header(); ?>

<h2>Error 404 - Page Not Found.</h2>


<?php include(TEMPLATEPATH . "/searchform.php"); ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Making It More Dynamic

To create a more dynamic error 404 page you can use redirects so that the user only sees the error briefly, then gets redirected to your home page. This page can be made to be somewhat SEO friendly as well.

For this next example we can start by editing the header.php file of your template. Within the meta tags at the top of your header.php file you can add the following:

The header.php File

<?php if (is_404()) { $redirectHome = get_option('home'); ?>
<?php echo $redirectHome; ?>

After this is added we will then edit our 404.php file to look like this:

404.php File

<?php get_header(); ?>

<h1>Error 404 - File Not Found.</h1>

<h3>Please <a href="<?php bloginfo('home'); ?>" Click here</a> to return to our home page, or you can wait to be redirected in 15 seconds.</h3>

<?php get_footer(); ?>

The above example will allow the user to land on the 404 error page but then automatically take them back to the home page. This will also help users stick around instead of them being left confused and leaving your website.

This example may not always be the best solution for everyone but can be helpful to someone looking for something specific on your site.

Making sure it works

You can test your 404 error page by typing your URL and following it with a page that you know does not exist.


That should bring you to your 404 page for viewing and testing.

If it doesn’t work

If by chance your server is not automatically bringing you to your 404.php file we can modify our .htaccess file to make it work. Locate your .htaccess file within your WordPress install and add the following line to it:

ErrorDocument 404 /index.php?error=404

If your WordPress install is not in the root directory you will need to make sure the above code reflects that. If you have installed WordPress into a subfolder then modify your .htaccess like this:

ErrorDocument 404 /YOURSUBFOLDERNAME/index.php?error=404

This will force the use of your 404.php file.

A full example

The code below is a full demonstration that will show you some ways you can use the 404.php file to help users that have found something that doesn’t exist. Take a look at it and notice the options we are giving them to keep them around, and to help them find content.

<?php get_header(); ?>

<h1>404 Error</h1>

We cannot seem to find what you were looking for.

Maybe we can still help you.


<li>You can search our site using the form provided below.</li>

<li>You can visit <a href="<?php bloginfo?>"</a></li>

<a href="<?php ('url'); ?>" the homepage.</a>

<li>Or you can view some of our recent posts.</li>



TEMPLATEPATH . "/searchform.php"); ?>

<h3>Recent Posts</h3>

	<?php query_posts('posts_per_page=5'); if (have_posts()) : while (have_posts()) : the_post(); ?>

<li><a href="<?php the_permalink() ?>" title="Permalink for : <?php the_title(); ?>"><?php the_title(); ?></a>
	endwhile; endif; ?>

<?php get_footer(); ?>

Anything above can be changed and styled to fit your needs. In the above example we are displaying that there was an error, and then following it with a list of options for the user. We are also still giving them the option to search our site, and have now added the ability for them to view our recent posts.

The combination of all of these gives the user that reached the page options. These options can be used to ensure a user doesn’t leave right away if they didn’t find exactly what they wanted.

How to create Bootstrap Navbar Menu without JavaScript

Bootstrap Navbar Menu without JavaScript
Bootstrap Navbar Menu without JavaScript

Bootstrap Navbar Menu without JavaScript – Bootstrap is getting lot of traction since past few years. While many argue it makes web look plain and similar, it has been boon to non-ui developers. The learning curve is also easy and thus you can make good looking web pages in no time.

Update: For Bootstrap 4 example scroll to the bottom of post.

One of most used component of Bootstrap with Navbar. The navbar menu is responsive and adapts to any screen size. For small devices (mobile) the navbar get collapsed and a burger icon appears which can be used to open/close menu in navbar.

To collapse/uncollapse the menu you have to include bootstrap javascript and jquery javascript in your webpage. Sometime this is a little uncomfortable. Say you have a static webpage without any javascript. If you want to show/hide the navbar menu then you have to include all these javascript files unnecessarily. There must be a way of getting away with javascript and still able to use bootstrap navbar? Well there is. You can make bootstrap navbar hide/show for mobile devices without using javascript. Checkout the following code.


<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <input type="checkbox" id="navbar-toggle-cbox">
    <div class="navbar-header">
      <label for="navbar-toggle-cbox" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      <a class="navbar-brand" href="#">Project name</a>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>


#navbar-toggle-cbox {
#navbar-toggle-cbox:checked ~ .collapse {
    display: block;

So how does this works? First check the html. We added a checkbox and hide it using CSS. Next we changed the button into label and connect the label to checkbox using for="". So whenever you click the burger menu which act as label for checkbox toggles it state. And as per the state of checkbox we show or hide the content.

How to Implement Ajax in WordPress Themes

Implement Ajax in WordPress

AJAX(Asynchronous JavaScript And XML) as we all knows is a very democratic technology in web development that allows a web page to update the content without page reload or refresh. And WordPress is widely being used not just for Blogs but for CMS’s as well.

I have used WordPress many times in my Projects and Built web applications by using WordPress as a CMS. While using WordPress for your websites or web applications you will need to use Ajax in your WordPress themes or plugins etc.

Today, I am going to show you how we can implement Ajax in our WordPress themes with the help of simple example.


Suppose Our task is to show the categories in a drop down box and upon selection of Parent Categories, Sub Categories should appear in another drop down box depending on the selection of main categories.
To achieve our task let’s take a walk through step by step.

Step 1:

At first, Create Categories: Parent and Sub as well as shown in figure below:

How to Implement Ajax in WordPress Themes

Step 2:

Create a template in WordPress( I am not going in details of what are the templates of WordPress and how they process in WordPress themes) in which we will implement ajax functionality. Open a new php file and save it with any name like I saved it with implement-ajax.php.

Add the following code in the newly created page.

Template Name: Implement Ajax

Above code is self-explanatory. Template Name: Implement Ajax is the name of the template in wordpress and functions like get_header(); and get_footer(); are used to display the header and footer of the page.

To add the ajax stuff you will first need to include the jQuery library file in your page. You can use any JavaScript library or can call ajax stuff with RAW JavaScript too. In our example we are implementing ajax with jQuery JavaScript Library which is very popular and very active in community.

Step 3:

Lets include the jQuery file in our template and call the wp_dropdown_categories function to retrieve the Parent list of Categories in a drop down.

Template Name: Implement Ajax
<script type="text/javascript" src="" ></script>

<style type="text/css">
#content{width:auto; height:400px; margin:50px;}
<div id="content">
wp_dropdown_categories('show_count=0&selected=-1&hierarchical=1&depth=1&hide_empty=0&exclude=1&show_option_none=Main Categories&name=main_cat');
<select name="sub_cat" id="sub_cat" disabled="disabled"></select>

To understand about the arguments of wp_dropdown_categories look at here
I added second dropdown to display the sub categories in it.

Step 4:

Let’s add the jQuery code to get the ID of selected main category and then pass it on to the functions.php file where we will get the sub categories of that parent category ID and then send the results back to the page without refreshing.

					var $mainCat=$('#main_cat').val();

					// call ajax
														data:'action=my_special_action&main_catid=' + $mainCat,

								//  alert(results);

In the above jQuery code we added the code at change event of main categories drop down with Id #main_cat.

 var $mainCat=$('#main_cat').val();

.val() function gets the value of the selected option from drop down and stores in $mainCat variable.


Now before calling ajax we will empty the sub category drop down #sub_cat with previous values if any.
Our next jQuery lines are for calling ajax jQuery Function. Look at the parameters of the ajax function below:

url:"bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php",
type:'POST',														data:'action=my_special_action&main_catid=' + $mainCat,

url parameter is used to make ajax working in WordPress. So, requests will be sent to admin-ajax.php file and then we will call the hooks in our functions.php file to get the posted data that is sent to the url:”/wp-admin/admin-ajax.php”

data parameter is used for sending the values along with request. We have used 2 arguments with data parameter:

  1. action
  2. main_catid

Step 5:

In functions.php file we will hook an action like below:

add_action('wp_ajax_my_special_action', 'my_action_callback');

above action hook has 2 arguments. Wp_ajax_[here will be the value that is sent with data parameter “action”] so it will be wp_ajax_my_special_action while second argument is the callback function which will process the data and send the results back.
Above action hook works with logged in users. Suppose you have something to show non-logged in users you can hook an action like this

add_action('wp_ajax_nopriv_my_special_action', 'my_action_callback');

what will be our final code after adding hooks for logged and non logged users and callback function

function implement_ajax() {
			$categories=  get_categories('child_of='.$_POST['main_catid'].'&hide_empty=0');
			  foreach ($categories as $cat) {
				$option .= '<option value="'.$cat->term_id.'">';
				$option .= $cat->cat_name;
				$option .= ' ('.$cat->category_count.')';
				$option .= '</option>';

			  echo '<option value="-1" selected="selected">Scegli...</option>'.$option;
			} // end if
add_action('wp_ajax_my_special_ajax_call', 'implement_ajax');
add_action('wp_ajax_nopriv_my_special_ajax_call', 'implement_ajax');//for users that are not logged in.

Step 6:

Now create a new page in the dashboard and assign the template to it like shown in the figures below:

How to Implement Ajax in WordPress Themes

Load the page in the browser and you will see first drop down with parent categories loaded in it.

How to Implement Ajax in WordPress Themes

Second drop down is empty and not loaded yet. Select any value from the first drop down and see how it works.

How to Implement Ajax in WordPress Themes

How to Implement Ajax in WordPress Themes