Safety concept: Opened Padlock on digital background

Easiest but powerful encryption in PHP

For a secured system, most of the data is encrypted in server end and sent to database. And after fetching the data from database, just decrypt before showing in front end.

There are lots of procedure to encrypt the data, lots of encryption algorithm out there. But, here we will use a simple encryption method though it’s powerful 🙂

We are going to use mcrypt library of php for this method. You can install the library following the instruction below: (based on Ubuntu)

Once you install mcrypt, you are free to use the library. Here is the code that you need to include in your project:

The usage is already in the above gist. But again, just instantiate the class, pass the data you want to encrypt, do whatever you want. Then when needed, fetch and decrypt:

Happy coding! 🙂

gulp

Gulp tutorial for beginners

In a sentence, Gulp is a task runner.

Gulp makes our life easier. In a development workflow, we need to do some tasks frequently and gulp can do some tasks automatically. Don’t think gulp is a replacement of grunt, but it is being improved very very fast.

Gulp is a task/build runner for development. It allows you to do a lot of stuff within your development workflow. You can compile sass files, uglify and compress js files and much more. The kicker for gulp is that its a streaming build system which doesn’t write temp files.

In this article, I will show you to create a simple WordPress plugin taking advantage of gulp. I am using MAC OS (OS X Yosemite) and MAMP as server.

We will compile sass to css, minify it, concat all the css files into one file, uglify js, concat all js files into one file, run these on changes automatically, create po file for i18n and create the release package as zip.

Let’s start!

First, look at my directory structure:

In here, index.php is our main plugin file. There are three sass file in scss folder, which will be converted into css where gulp.main.css is the css file and gulp.main.min.css is the minified version. Exactly same for js script as well, gulp.main.min.js is the minified/uglified version of gulp.main.js which is a combination of ajax.js and public.js files. In the lang folder, we will generate out po file. node_modules folder will be auto generated, so is package.json file (we will see), the packages will be in there. We will use the releases folder to store the plugin package as zip. gulpfile.js file is our gulp configuration file.

Install Gulp

You must need Node JS and Node Package Manager (NPM) in your host to use Gulp. If you don’t have yet, please download from their site.

If you have those, let’s install gulp globally that will help us to run the gulp command anywhere in your system.

I assume you are already in root of the plugin directory in terminal.

Initializing gulp

Run the following command:

This command will create a package.json file and it will look like:

The command will ask you some question, you can leave to default just pressing enter or you can configure.

Now, we have to install dependencies. Of course, the first dependency is gulp itself:

The –save-dev flag asks to install the dependencies locally and you will see the updated package.json file with this dependency.

Now, let’s create gulpfile.js file manually, the file name is strict.

Hello World(?) in Gulp

Open the new created gulpfile.js and start configuring. We have just installed a dependency and to use every dependency, we need to use require function.

As we know, gulp is a task runner, so we will define some tasks, and gulp will run those tasks. The format of a task declaration is simple:

So, create our first task:

And run just “gulp mytask” in the terminal. Please note, in the command example first gulp is my plugin folder name, please do not get confused, sorry for that.

The “gulp mytask” will show the output like:

If we want to use more dependencies (of course we will use), then the default format should be:

Here, src function is used to get the source file, pipe function is used to bind with the dependency functions and dest function refers to the destination folder.

Let’s compile SASS

We have learnt about gulp, now let’s do a real task. We will compile sass file and for that we will need to install a dependency:

Add in gulp js file:

Write the task:

Write some sass file in about.scss file like:

Now run “gulp sass” in the terminal and you will see the generated css file:

Please check, in the task, the task name is sass, so we called “gulp sass”, gave the source file in src function, then used pipe function to run sass dependency function, and then sent to the destination.

This is done for one file, what if we have multiple files? We can do is very easily:

Now, if you have 3 sass files, it will generate 3 css files. But we want to combine all those. So, let’s install contact dependency:

And add code in gulp js file:

See, in pipe function, I used concat funtion and gave a file name. All the css files will be combined and get name gulp.main.css and then sent to the destination folder.

Our next job is to minify the generated css, so install minify module:

Add code in gulp file:

This is all similar, here I have also mentioned to make compatible to IE8, that’s totally optional.

Let’s do some auto-prefixing job. Like, if you use “display: flex” in your sass file, it will create all the prefixer for that like – -webkit-flex, -ms-flex etc, cool – heh?

So, install auto-prefixer:

Add in gulp file:

Another interesting thing, we are going to add – sourcemap. This is very interesting. To debug css, we always use the browser developer toolbar. But when you use sass to write your css, then in browser inspector, you will see reference to css not sass file. Sourcemap will help you to see the reference of sass file, like the screenshot below:

sm

Install sourcemap then:

Configure in gulp file:

We are almost done. Just one thing, after doing minify we need to rename the file to with some suffix, like .min. We will use rename module:

And now configure:

Please note, in a step I renamed the task name to “build-css”. So, now run in the terminal “gulp build-css” and see the magic! The minified version and combined version will be generated in the css folder.

As we are familiar with the process now, I will go little faster, if any confusion, please comment below.

Let’s play with JS now

For JS files, we will do almost similar things, except we will uglify instead of minify. It’s same but uglify minifies the variable name and do other compression too.

Install uglify then:

And in gulp file:

Now, run “gulp build-js” in terminal and see the output files in js folder.

Do the above jobs on the fly!

Till now, what we have done, if we make any changes we will need to run the command and check in the browser. How’s about doing it more automatic? Like we will make changes, save and right then the above task will be completed. We will ask gulp to watch for any changes, and if any changes found, run the above two tasks.

We will use “watch” command to ask gulp to watch changes.

Check at the very bottom, I have defined the watch task which will watch all css and js files for changes and run the corresponding task.

Create po file

In WordPress, we need to provide po file to the users, so that they can translate the strings in their language. We normally use poedit or glotpress to do this job. But now, we will run a php shell command using gulp.

To do that, we will use WordPress’ makepot tool. So, download the wp-dev using svn:

And the gulp task will be:

Here, /Users/ashokkumarnath/Desktop/pot/wp-dev/tools/i18n/makepot.php is the path to makepot.php file which will create the po file. Please replcae the path with your file path.

wp-plugin is used for plugins, if you are developing a theme, use “wp-theme”.

Then the folder name “lang”, in my case, and the text-domain gtd.po. Change gtd with your text-domain.

Now run “gulp i18n” and see the po file is generated in lang folder.

Final touch and release the plugin!

Now, we will copy the files we need for the plugin and paste to releases folder, under the version name:

The created task name is “build” here. We have asked to copy index.php and recurrsive assets folder into releases/VERSION_NO/ folder.

In last step, we will create zip of the plugin, so we will need zip module:

And create the zip task:

You will see at the bottom, I have created a default task for gulp. The default task will run when you command just “gulp” in the terminal. So, when “gulp” command is run in terminal, I have set ‘build-css’, ‘build-js’, ‘build’, ‘zip’ – all four tasks to be run.

Now, if you just run “gulp”, it will compile the sass, create css, combine, create minify version, combine js files, create minified js file, create po file, copy the plugin files and create the releasable zip.

I have done some more polishing in my final gulpfile.js file:

In line 65, I asked to run build task only when build-css and build-js tasks are done, not before that. In line 73, the zip task will run, when the build task is done. This is called task dependency.

So, when you will work on css and js, before start working run “gulp watch” in the terminal, do not break/cancel it so that it can run the build-css and build-js when you make some changes. When you are done, just run “gulp”.

This is the final version of package.json:

This is the final version of main plugin file:

It may look like little complex, but once you practice 2-3 times, it will be very very easy.

So, be automatic! 🙂

ssl

How to use SSL in localhost

There are lots of stuffs we need to test with SSL. There are some SSL providers that provide free SSL we can use those in our site. Among free SSL providers, I prefer to use CloudFlare, it’s very easy to use and nothing to setup though it needs ~24 hours to activate. Also, developers from countries where we don’t have super high speed internet, we are used to work in locally hosted site. So, usually we can’t use SSL in local site – in other words most of the developers doesn’t know. But it’s possible, and even it’s not complex at all!

SSL (Secure Sockets Layer) is the standard security technology for establishing an encrypted link between a web server and a browser. This link ensures that all data passed between the web server and browsers remain private and integral.

There are many ways to enable SSL in localhost, specially if you use MAMP PRO, then it is just a matter of couple clicks. Today, I will show you to use SSL in VVV. Just for your information, we are not buying any SSL certificate, it will be self signed certificate.

The self-signed SSL certificate is generated from the server.key private key and server.csr files. The server.crt file is your site certificate suitable for use with Heroku’s SSL add-on along with the server.key private key.

I assume you are already familiar with Vagrant and VVV. I am using a customized version of VVV in MAC OS, so the folder path could mismatch but that should not be any problem. I am also using VVV Site Creation Wizard to create and delete site with a couple of commands, it’s really very handy. It also creates vhost file in VVV disk and edit the host file in your OS. So, just command and start using the new site!

Let’s open the terminal and navigate to your vagrant directory and create a site:

It will ask you site name, domain, if it will be a single wp site or multisite etc, should take 2-3 mins. I assume, the domain you selected is http://sslsite.dev. Now. let’s navigate to nginx config folder and create SSL directory:

Now, we need to generate our self-signed cert and key file, let’s do it:

Add the cert and key file reference in the sslsite.dev configuration file:

You must replace vvv_path_to_folder with the correct folder path, it may vary. Below is the my configuration:

Easier to find if you just login at your vagrant using ssh and check the location. Now as the last step, run a single command:

We are all done, hurray!

We still have a small problem. When you run the site https://sslsite.dev (with https) the browser will show that the site is not trusted. To avoid this, let’s add the cert file into your keychain. Open your keychain access window, in left sidebar select “System” for keychains and select “Certificates” for category, like the following screenshot. Now just drag the cert file and drop into the right panel of the window.

keychain

You are completely all set. Start playing around with SSL in your local machine!

Happy New Year!

Celebration

How to apply coupon automatically on WPMU membership2 checkout

Membership 2 is an awesome plugin to sell your content. That being said, you can charge your members to see your site content.

If you want to give discount, you can use Coupon addon. You have to enable from Membership 2 > Addons and then you can create coupons and share with your users. Today I will show you a trick to share coupon embedded with URL. You can share your URl like http://domain.com/?coupon=XXXX and the XXXX coupon will be automatically applied on checkout.

Let’s look at the code:

You can add those codes in your functions.php in the theme, if you think your theme won’t be changed. Otherwise mu-plugins is the best solution. To use mu-plugins, go to /wp-content/ and find the folder with name ‘mu-plugins’. If there is no folder in that name, then create a folder, name it ‘mu-plugins’, create a file inside that, give any name you like and paste the code in there. You don’t need to activate that plugin. Mu-plugins means must use plugins, so it will be activated automatically always. If you use mu-plugins then add a php start tag at the beginning of the code.

Celebration

Assign and withdraw role on an user based on membership – WPMU Membership2

WPMU Membership2 plugin has an addon that you can use to assign extra capabilities to an user when he joins in a membership, and when the user left the membership the capabilities are withdrawn. But, the problem is, even it says “Assign role”, it doesn’t assign role to that users but just assign the capabilities of that role.

So, if you need members of certain role, you won’t get those members in the member list. Even, if you have other plugin that makes some operation based on role, won’t work here. Let’s find a solution.

The following snippet will allow you to set different role based on membership, you will need to know membership IDs though. In the following example, if ID is 1343, I want to assign those users “editor” role, “author” for 1345 and “administrator” for 1348. Take a look:

Now, if the user’s membership is deactivated or cancelled, we need to assign back “subscriber” role to that user. I have used same code for cancel and deactivation operation, you can assign different role if you want:

You can add those codes in your functions.php in the theme, if you think your theme won’t be changed. Otherwise mu-plugins is the best solution. To use mu-plugins, go to /wp-content/ and find the folder with name ‘mu-plugins’. If there is no folder in that name, then create a folder, name it ‘mu-plugins’, create a file inside that, give any name you like and paste the code in there. You don’t need to activate that plugin. Mu-plugins means must use plugins, so it will be activated automatically always. If you use mu-plugins then add a php start tag at the beginning of the code.

Screen-Shot-2014-10-03-at-2.23.50-AM

Assign a membership to a registered member automatically – Membership 2 (WPMU)

WPMU DEV has released the new revamped version for membership plugin, called Membership 2. The layout and interface is awesome of the plugin and I am personally impressed. There is a new type of membership introduced in the plugin – Default Membership. This membership will work for the user who are just registered but didn’t choose any membership to join.

But what if you want to assign a regular membership to that user? Here is a simple code snippet that will help you to do this job:

Just make sure you change to correct membership ID for $membership_id variable.

You can add those codes in your functions.php in the theme, if you think your theme won’t be changed. Otherwise mu-plugins is the best solution. To use mu-plugins, go to /wp-content/ and find the folder with name ‘mu-plugins’. If there is no folder in that name, then create a folder, name it ‘mu-plugins’, create a file inside that, give any name you like and paste the code in there. You don’t need to activate that plugin. Mu-plugins means must use plugins, so it will be activated automatically always. If you use mu-plugins then add a php start tag at the beginning of the code.

Screen-Shot-2014-10-05-at-3.48.41-AM

How to add an user into a BuddyPress group automatically when he joins in a WPMU membership

This is an useful snippet that will add your newly registered (via WPMU DEV Membership 2) member to corresponding BuddyPress group.

You can add those codes in your functions.php in the theme, if you think your theme won’t be changed. Otherwise mu-plugins is the best solution. To use mu-plugins, go to /wp-content/ and find the folder with name ‘mu-plugins’. If there is no folder in that name, then create a folder, name it ‘mu-plugins’, create a file inside that, give any name you like and paste the code in there. You don’t need to activate that plugin. Mu-plugins means must use plugins, so it will be activated automatically always. If you use mu-plugins then add a php start tag at the beginning of the code.

cpt

How to use custom post type archive as front page

We can easily set any page as front page from Settings > Reading. It can be any static page. But what if we want to set an archive or CPT archive page as front page?

There are many ways to do so. We can create a custom page template, and write our code to get the posts for the post type (will look like an archive). Then create a wordpress page using that page template and select that page as front page from Settings > Reading.

This is a little complex if you are not a developer. Or even if you use a custom theme. Let’s do it in another way.

What you need is to have a file inside your theme for archive – archive.php. For CPT the file name will be archive-{CPT}.php. We will use the same file to make our home page.

For example, if your CPT archive url is http://domain.com/my_cpts then we want to see exact same layout and same content of http://domain.com/my_cpts in http://domain.com/.

What I love to do in this case is to use a very simple snippet. Where I just need to set the CPT name, that’s it. Here is the code:

You can add those codes in your functions.php in the theme, if you think your theme won’t be changed. Otherwise mu-plugins is the best solution. To use mu-plugins, go to /wp-content/ and find the folder with name ‘mu-plugins’. If there is no folder in that name, then create a folder, name it ‘mu-plugins’, create a file inside that, give any name you like and paste the code in there. You don’t need to activate that plugin. Mu-plugins means must use plugins, so it will be activated automatically always. If you use mu-plugins then add a php start tag at the beginning of the code.

Note that, here CPT means Custom Post Type

Enjoy!

Screen-Shot-2014-10-05-at-3.48.41-AM

Defer parsing of javascript to improve performance in wordpress

Nothing for introduction, hehe! A very small snippet which will help you to defer parsing all javascript files except jquery in wordpress. Here is the code:

You can add those codes in your functions.php in the theme, if you think your theme won’t be changed. Otherwise mu-plugins is the best solution. To use mu-plugins, go to /wp-content/ and find the folder with name ‘mu-plugins’. If there is no folder in that name, then create a folder, name it ‘mu-plugins’, create a file inside that, give any name you like and paste the code in there. You don’t need to activate that plugin. Mu-plugins means must use plugins, so it will be activated automatically always. If you use mu-plugins then add a php start tag at the beginning of the code.

Screen-Shot-2014-10-05-at-3.25.51-AM

Why you shouldn’t use one click installer to install wordpress

Yes, you will fall at the mid-ocean, trust me!

Well, most of the bloggers just maintain a simple blog so usually they don’t need to worry. They just need to keep a regular backup. But if you are planning to run a business site in wordpress and if that site is your everything, never ever use one click installer to install wordpress! You’d be better off installing it manually which may take you a few minutes longer to install.

Here you can get an idea about manually installing wordpress:
http://codex.wordpress.org/Installing_WordPress
http://www.siteground.com/tutorials/wordpress/wordpress-installation.htm

If you want to install manually, download wordpress from here. Then you can upload this through ftp. You can use several ftp client such as – filezilla, coreftp, fireftp (a firefox add-on) etc. You can know about uses of filezilla here.

Why you shouldn’t?

  • Big WordPress Security Risks
  • Exporting and importing content with WordPress’s built in export tools
  • They use old scripts. Updated versions of WordPress or any script are not immediately released on those services. They install an outdated version of WordPress. It’s not a good start with outdated one.
  • They bypasses almost all settings used for installing
  • Sometimes it has issues while you want to upgrade.
  • Suppose first created database is wpdb1 and the next one is wpdb2 and so on. Malicious hackers know this is how they’re created and it gives them more ammo.
  • Created a file named fantversion.php (or something similar), which is common for all auto installers. This is a security risk if crackers know how to break into it.
  • The auto created database name and the database username is same in most cases.

So what if you have already installed?

  • First of all, keep a backup of whole site and the database.
  • Download latest wordpress from WP rep. (see above for link)
  • Delete wp_admin and wp_includes folder via ftp.
  • Extract the zip and upload only wp_admin and wp_includes folder via ftp.
  • Change (alter) the database name, db username and password.
  • Put the changed db name, db username and db password in wp-config.php.
  • Get new auth key, salt etc from https://api.wordpress.org/secret-key/1.1/salt
  • Copy and replace the keys in wp-config.php
  • Uninstall the plugins that come with default one-click installation

It should work.

WordPress is a 15min install when completely secured and optimized through htaccess. So it’s your decision what will be your route. I just showed you some examples, if you do a little research over google you will get lots of ideas about it.

Hope you will enjoy! :)