Monthly Archives: September 2015

MultiUp v1.0 – Multi Purpose WordPress Theme

By | September 29, 2015

MultiUp v1.0 – Multi Purpose WordPress Theme

MultiUp – Multi-Purpose WordPress Theme is a clean, flexible and fully responsive theme perfect for any Corporate, Business, Personal, Agency, Photo Studio, Freelancers, Portfolio, Blog, Events and more. It includes POWERFUL drag and drop page Builder using Visual Composer and AWESOME revolution slider. Create an Awesome website today using MultiUp Multi-Purpose WordPress Theme

MultiUp v1.0 – Multi Purpose WordPress Theme

Features

  • 100% Responsive
  • 3 Header Styles
  • Fully customizable theme and page options
  • CSS3 Animation
  • 21+ powerful shortcodes
  • Coming soon page included
  • 500+ google fonts
  • 2 Portfolio styles
  • One click demo import
  • Custom background and parallax
  • Builded Visual Composer & Revolution Slider
  • Child theme support

Change Logs

Demo and Dwonload Links are as:

live_demo_button.fw_b-download

 

How To Build Responsive WordPress Theme Using Bootstrap

By | September 28, 2015

How To Build Responsive WordPress Theme Using Bootstrap

The growing demand for responsive designs in the web design industry has given birth to numerous frameworks which have been effectively utilized for building websites and applications that can run on multiple devices with varying screen sizes and dimensions. Bootstrap is one such responsive framework which can act as a brilliant starting point for development of responsive WordPress theme.

how-to-build-responsive-theme-using-boostrap

This is exactly what I’ll be looking into in this post. Here, you’ll get to know about the steps associated with creating a remarkable WordPress theme using the Bootstrap framework.

Knowing the tasks to be performed before creating the responsive WordPress theme

Here is a list of few things that you’ll need to do before creating a responsive WordPress theme using Bootstrap:

  1. You’ll have to install WordPress
  2. You’ll have to download and unzip Bootstrap
  3. You’ll have to install the Theme Test Drive plugin

Among the above three tasks, the third one is optional and applicable only in case you’re building a theme using your live site and don’t want people to view it while you’re still developing it.

Once you’re done with the above steps, follow the steps explained below:

Step 1- Open the WordPress files directory and go to wp-content->themes as shown in below screen-shot:

building-responsive-WordPress-theme-using-Bootstrap

Now, create a new folder named as: wp-bootstrap and within this folder paste the bootstrap folder as shown in below screen-shot:

Within the wp-bootstrap folder, create a new file called index.php as shown in below screen-shot:

building-responsive-WordPress-theme-using-Bootstrap-2

Step 2- As the second step, go ahead with copy pasting the source code from your live site into the index.php file(the one created in step 1). This marks the creation of a static HTML page.

Step 3- Create the main CSS page

Within the same folder as available for the index.php file, go ahead with creating a new file called style.css. Now, add the below comment code to the top of the style.css page:

/*

Theme Name: WP-Bootstrap

Description: A comprehensive tutorial on building responsive WordPress theme using bootstrap.

*/

Step 4- Upload an image for the WordPress theme

Now, go ahead with uploading the image that you want to appear with the theme within the WordPress admin dashboard. Ensure that this image is 300×225 px and assign a suitable name to it.

Step 5- Login to your WordPress admin area and go to Appearances-> Theme. Here, you’ll be able to view wp-bootstrap listed as one of the many themes. Now, click on “Activate” button available under wp-bootstrap theme for setting this as your site’s current theme.

Step 6- Convert Bootstrap files into WordPress templates

Start off with creating empty files for header.php, footer.php and sidebar.php. Now, cut all the HTML that would be included at the top of every page and paste it into header.php. Do the same for all HTML that would appear at the bottom of every page, followed by pasting it into footer.php file.

With the sidebar.php file still being empty, go ahead with using two WordPress tags viz:get_header() and get_footer() for including header and footer into index.php page.

The index.php file would now look like this:

Step 7- Add the wp_head() function for allowing plugin developers to be able to dynamically add the CSS or Javascript into your website. The header.php template would now look like this:

Step 8- Add wp_footer() tag before the closing body tag. The updated footer.php file would now look like this:

Step 9- Add JavaScript

In the same folder as for the header.php file, open the functions.php file and paste the following code inside it:

Step 10- Create the WordPress Homepage

For this, go to WordPress admin dashboard and click Pages-> Add New. Now, assign a suitable title to the page and click on HTML tab placed above the Content Editor. After this, cut the remaining markup from index.php file and paste the same into this homepage and click on “Publish”. The Homepage would look like this:

A-comprehensive-tutorial-on-building-responsive-WordPress-theme-using-Bootstrap-3

Step 11- Use the WordPress function called the Loop for including the Homepage content which has been added in WP admin area back into the template dynamically. The basic loop looks like this:

The updated index.php file would now look like this:

Step 12- Add the code for pulling in title and content of homepage
Here’s the code that you need to use in this step:

Step 13- Add navigation and more content

Here, go ahead with adding new pages like About Us, Contact Us, News in the WordPress admin area. You can include dummy content for the time being and add your own content later on. Also, opt for replacing the site’s static navigation menu with the one that would display all pages which have been added via the admin panel.

Step 14- Create templates for posts and pages

Starting off with creation of a page template, take index.php file and save it as page.php file which will serve as the template of all pages which are being added into the WordPress website.

Code snippet associated with creation of page template is shown below:

For creating the sidebar template, simply go to the page.php file add the below code inside the get_sidebar() in the “span4” div as shown below:

Step 15- Adding the finishing touch to the WordPress theme

Use wp_title() tag for displaying the name of page or post in the title as well as in the name of the website. This is how you can customize the tag:

Additionally, you can display the name of the website using bloginfo( “name”). You can use them together with the title tag as shown below:

Simply add the above code to your header.php file in place of current title tag. You’ll be able to view all title tags towards the top of the page.

Step 16- Widgetize the sidebar

For widgetizing the sidebar, simply add the below code to your functions.php file:

Finally, go back to your sidebar.php file and replace the static content with a code so that it looks like this:

We’re done!

You can download complete code here:

download-button

 

FreshIM – WeChat Clone Script

By | September 28, 2015

FreshIM – WeChat Clone Script

freshim-wechat-clone.

Features:

  1. Self hostable PHP MySQL based back end server.  Most other sites use a BAAS as their backend, thereby, bound to keep paying Parse or Quickblox even after purchasing their scripts for a premium price. When you buy FreshIM, you are truly free to create your fortunes, without paying a cut to anybody.
  2. One to one chat with image, video, stickers, contact and location share (Private Chat)
  3. Many to Many chat with image, video, stickers, contact and location share (Group Chat)
  4. Message Sent and Seen Notifications
  5. Stickers – You can now share stickers like Facebook Messenger with your friends (You could contract us to create custom stickers for you)

What is Included:

What comes in the box:

  1. iOS 7 compatible native iOS source code for the client (Included in iOS and the combo pack)
  2. Android 4.4 compatible native Android source code for the client  (Included in Android and the combo pack)
  3. Creative UI set pieces and default logo
  4. Instant Messaging App Server Source Code in PHP MySQL that you can host on any server shared, VPS, Dedicated or Cloud
  5. Web Admin Dashboard to control the server, app and the users

What is included in the Paid Installation:

  1. Helping you setup the source code on your machine
  2. Compiling the source code for both iOS and Android on your machine
  3. Basic help in understanding the code.

What I can do with this:

I like to think that you are an entrepreneur or someone who is getting ready to take the leap of faith and about to startup. Here are the ways you can monetize the heck out of our clone script! 1. You can start a fremium messaging service Although the race has started, it is far from over. If you think you have the understanding of your market, that you can pull the crowd to your camp, go ahead and start a free messaging service like Whatsapp, Line or Viber. You can then charge them a subscription fees after the first year or charge them for fun stickers as in-app purchases etc You should also consider this if these mainstream companies do no cater to your geography yet or to your local language 😀 2. Launch one for a family, class, group, team or a company This is the best plan which I would recommend. You can deploy a hosted instant messaging service for anyone who wants a private space to collaborate, on the go. Why don’t companies use Whatsapp? Because all their conversations will end up in Whatsapp’s or WeChat’s servers and that is not good. Whereas, if you can convince a startup, an SME or even a large established company with 100+ employees that you can provide a white label instant messaging service to them…you will soon be a millionaire :)

Download and Demo Links are as:

live_demo_button.fw_b-download

Truemag v1.1.6 – AD & AdSense Optimized Magazine

By | September 28, 2015

Truemag v1.1.6 – AD & AdSense Optimized Magazine

Responsive and Mobile-optimized:
Don’t leave any of your visitors behind. All themes created by StrictThemes are fully responsive, and looks great on all kind of devices and screen sizes: from widescreen desktops down to tiny smartphone displays.
HiDPI Ready:
All themes created by StrictThemes are fully compatible with high-resolution screens like a laptops with Retina-display, so your text and images will look absolutely gorgeous!
Color Schemes:
The theme comes with two color schemes – Light and Dark…

Truemag-v1.1.6-AD-AdSense-Optimized-Magazine

 

Demo and Download Links are as:-

 

 

 

live_demo_button.fw_b-download

How To Use CodeMirror as a FrontEnd Editor

By | September 27, 2015

How To Use CodeMirror as a FrontEnd Editor

In this tutorial I will show you how to create a online code editor like Codepen, jsFiddle,repl.it etc.

After reading this tutorial you will be able to create such kind of awesome tools with just few lines of code. Let’s see a demo of what we will be creating in this tutorial.

live_demo_button.fw_

Let’s see how to create such kind of tools.

code-mirror

What are the basic components?

These tools are made up of two basic components: code editor and code interpreter/compiler. Let’s see how to create a code editor and how to execute the code.

Creating a Frontend Code Editor

There are basically three ways of creating a code editor:

  1. We can use a HTML textarea element as a editor. But the problem with textarea element we cannot style the text inside it therefore its not possible to support syntax highlighting.
  2. We can use WYSIWYG HTML5 API’s contenteditable attribute to convert a div into a editor. We can also highlight code. But the problem is it will not support in old browsers.
  3. The final solution is to create your own custom editor from scratch. Creating a editor from required a lot of work because you need to emulate cursor, handle lots of keyboard and mouse events and also have to deal with a lot of data structure and algorithms. Therefore we can use open source custom text editors like CodeMirror. If you would have build your own editor then it would have been something like CodeMirror.

With just few lines of code we finished building a front end HTML code editor using CodeMirror.

Here we loaded XML highlighting mode library but if you need your code editor to highlight some other language then load appropriate mode library. For more information refer to CodeMirror docs.

Code Execution

If your editor is for front-end languages(HTML, CSS and JS) then you can execute the code inside an iframe. But if you code editor is for languages like C++, PHP, Java, Python etc then you can execute your code inside a Docker container and display the output on frontend.

Here I am creating a editor for frontend languages therefore I will execute code inside iFrame. here is the code to execute frontend code

Here we encoding the user entered code into base64 and assigning it to the iFrame via data URI. Here we are using jQuery base64 encoding library to encode code into base64.

Now you must be amazed to see how we created a frontend code editor with just few lines of code.

How to Login with Facebook Graph API in PHP

By | September 26, 2015

How to Login with Facebook Graph API in PHP

I have been working on facebook apps and connection with Facebook Graph API access token. This post will explain you how to integrate facebook connect in your website in easy way to connect and read the Facebook home timeline with PHP. Explained how to get facebook token and user id hope you like it. Thanks !

How to Login with Facebook Graph API in PHP

live_demo_button.fw_b-download

Make New Application on Facebook:

1. Visit https://developers.facebook.com/apps and click + Create New App.

facebook-graph-1

The script contains two folders called oAuth and images with PHP files.

src

– base_facebook.php // Class Get user Info

– facebook.php // Class Get user Info

– config.php // Configuration file

images

html.inc // html design view

index.php // Main index file show data

 PHP Code

Edit config.php

Index.php

While clicking Login with Facebook button URL requesting Facebook Graph API with contains your web project redirection URL:

login-button

That’s All!

Vanilla JS Browser Default Java Script

By | September 21, 2015

Vanilla JS Browser Default Java Script

Recent days many are discussing about Vanilla JS a ZERO KB framework, it is basically plain/default JavaScript like vanilla ice cream (default flavor) and it is not really a library or a framework. Nowadays JavaScript DOM methods has been improved a lot, it is very powerful in speed operations per second. So that you no need to use any external libraries like Jquery etc.. If you are working for simple mobile or web application, I suggest use following plain JavaScript scripts.

Vanilla JS Browser Default Java Script

 

 

live_demo_button.fw_b-download

The term Vanilla is refers to raw or plain JavaScript.

Start Vanilla – The Document Ready Event
Code runs after the browser finishes loading the document, including images and banner ads.

Click Event
Contains plain JavaScript code, here linkID is the ID name of anchor tag. You can prevent the default behavior by calling e.preventDefault();

Hide & Show Div
The divBlock slowly disappears when clicked hideLink.

Add & Remove Class
Applying and Removing a HTML Class.

CSS Code
You have to include following CSS code within the tag HEAD of the document

You can use following code with in the function HTMLElement.classList, this allows to add or remove the class of an element.

Toggle Class
This method simply toggles the visibility of elements, here the code is adding and removing the class hidden.

Mouse Over & Mouse Out
Changing the div behavior based on mouse moments.

HTML Code

JavaScript
Here grid is the class name of div tags. Using this calling the selected DOM element.

CSS Code

Live POST Update and Delete Records with Vanilla JS

A simple demo project, you can instantly upload and delete news feed without refreshing the page.

HTML Code
Update box with news feed result. Live Demo

Ajax Post
Contains JavaScript code querySelector(“#updateButton”).addEventListener(“click”, function(){}updateButton is the ID name of the button. Usingdocument.getElementById(“updateText”).value; calling update textbox value. I did simplified a function called vanillaGetPost, you will find this in vanillaFunctions.js. Take a look at the Live Demo

post.php
You have to write database connection for inserting update.

Delete Records
Using this.parentNode calling parent DIV DOM element and applying fadeOut effect.

Final JavaScript Code
You can include all of the code here.

Download the script, you will find out vinillaFunctions.js

vanillaGetPost Function
Ajax function for POST and GET methods.

vanillaFadeEffect Function
FadeIn and FadeOut animation effect.

 

 

How to use Font Awesome Iconic font using CSS

By | September 19, 2015

How to use Font Awesome Iconic font using CSS

Font Awesome is a CSS library which gives you vector icons (which are all based on mathematical expressions, to represent images in computer graphics.) that can be easily customize with power of CSS like size, color or drop shadow etc. Basically this Font Awesome was designed for Bootstrap and now all the web designers adopting it and creating themes with very few images or no images.

How to use Font Awesome Iconic font using CSS

We are showing very few samples of Font Awesome click here for more options and complete documentation.

CSS Font include

Above we included font files in CSS to create icons.

 CSS and HTML for home icon:

You don’t need to add any css in your HTML just include css file which is available for download and include in your website like below.

This markup show you a home icon class used fa-home for home icon.

you can create any size image with adding these classes fa-5x, 4x, 3x etc will increase icon size or you can add your own class with your required size of icon.

These classes defined for different sizes of your icons.

Home Icon with different sizes.

There is also motion icons available in this library you can add spinner using below markup.

This will show you a spinning icon and very interesting feature is that you can spin any icon just including this class fa-spin and your icon rotate clock wise.

By default it show black icos but you can change color of icons very easily by creating a color class like below.

I have added some CSS for extra colors in this library.

ou can add your color codes as per your theme.

An other feature in this library is rotate elements in degrees like arrows direction no need of 4 arrows there is only one arrow you can move it in any direction in which you need just using this class fa-rotate-* and to flip fa-flip-*.

This example rotate and flip a shield icon.

You can see many icons in live demo and download script to use in your own themes.

For complete icons cheat sheet contain around 400+ icons click here.

Download and Demo Links are as:

live_demo_button.fw_b-download

How to Upload multiple images jQuery Ajax using PHP

By | September 17, 2015

This post on How to Upload multiple images jQuery Ajax using PHP will explain Jquery and PHP to Upload Multiple images at once. You can use this as a reference for your web projects, specially focused on newbies to understand the procedures of images uploading.

How to Upload multiple images jQuery Ajax using PHP

Used a jQuery Library from hayageek.com and create tutorial in more simple way.

We also publish two tutorials on image upload

  1. File uploading with PHP
  2. How to Upload Image using jQuery with progress in PHP

Here is index.html file which contain jQuery library and CSS to handle your requests.

<div id=”mulitplefileuploader”>Upload</div> This div will be replace with the form and input file field and make some are for drag and drop image. <div id=”status”></div>Shows status of images and progress of uploading images.

upload.php

File contains post upload process and move files in uploads directory.

First check directory and error after that check if single file coming then process separate if multiple files handle in loop.

Add UNIX time stamp with image name to create unique name.

Demo and Download links are as:

live_demo_button.fw_

b-download

Useful and Cool HTML5 Features You must Know

By | September 15, 2015

Useful and Cool HTML5 Features You must Know

In this article, we are going to build a simple app that receives the user’s geographic coordinates (latitude and longitude) with the HTML5’s Geolocation API and shows the current weather for the place they are located in (using a remote API provided by OpenWeatherMap).

Useful HTML5 Features

 

live_demo_button.fw_b-download

Geolocation API’s browser support

The Geolocation API has an excellent support so you may feel free to start using it today. 90.68% of Internet users globally have browsers that support it according to Can I Use.

It is supported in the following browsers:
1. IE 9+
2. Firefox 31+
3. Chrome 31+
4. Safari 7+
5. Opera 30+
6. iOS Safari 7.1+
7. Android 4.1+
8. Chrome for Android 42+

Every major browser supports it except Opera Mini.

About Gelocation

Before we start, it is important to know that the user has to allow geolocation usage for your website before you can use his location. If the user does not allow your website to get his coordinates – then you would not be able to use this feature.

Getting the current local weather with the Geolocation API

Our skeleton just loads jQuery and adds some basic styles to the text with the local weather (which will be added with JavaScript. Therefore, if the user does not allow the website to use his location – he will get a blank screen).

We declare our paragraphs to have a white color with a cursive font and be bigger than usual. Then, we add some emphasis to the span tag which will hold the weather values retrieved from the weather API.

If the user supports/has enabled geolocation ( "geolocation" in navigator is true) then we get the weather by calling our getWeather function and pass it the latitude and longitude from the Geolocation API.

The syntax is the following:

Otherwise, we give the user a friendly alert instructing him what to do:

Next is our getWeather function which just performs a XHR GET request to the OpenWeatherMap API and calls showWeather when the results are ready:

Finally, our showWeather method accepts the returned weather data and creates markup using parts of it:

Notice that we are converting the sunrise/sunset times from a UNIX timestamp to a date string in the format that we want.

Conclusion

Geolocation can be the source of powerful applications. Many applications out there are already using it. With it, you can create dating sites that finds people in the area, show the weather for the user’s location in your website (as you just saw), create apps that recommend people sights to visit in their area and an endless more groups of things.

I encourage you to go on and build something cool with the Geolocation API and tell me all about it in the comments below.