post

How to setup a VPS (Ubuntu) for WordPress hosting – A to Z tutorial

VPS is being more popular day by day. Personally I prefer to use DigitalOcean, they are cheap and their support is awesome. They also have tons of tutorial guides, chat community. Also they answer your questions very quickly in their support forum.

Let’s dive into the main point. When you will have a VPS droplet, you will get an IP, login username, password that you can use to login in your VPS via command line. There are several tools like Putty in windows, but I love to work in command line in Linux or Mac OS.

Let’s assume the IP is 111.111.111.111 where username is root and password is myvps. So, now connect to the VPS using terminal:
[html]
ssh root@111.111.111.111
[/html]
If you connect for the first time, the following message could be appeared:
[box type=”shadow”]The authenticity of host ‘111.111.111.111 (111.111.111.111)’ can’t be established.
RSA key fingerprint is xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx.
Are you sure you want to continue connecting (yes/no)?[/box]
Just type yes and press enter. It will ask for password, give the password myvps and press enter, you’re in!

Note that, if you have connected to same VPS using other IP before, then you may see a error message like the following:
[box type=”shadow”]@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@ WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY!
Someone could be eavesdropping on you right now (man-in-the-middle attack)!
It is also possible that the RSA host key has just been changed.
The fingerprint for the RSA key sent by the remote host is
xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx.
Please contact your system administrator.
Add correct host key in /home/user/.ssh/known_hosts to get rid of this message.
Offending key in /home/user/.ssh/known_hosts:1
RSA host key for ras.mydomain.com has changed and you have requested strict checking.
Host key verification failed.[/box]
Then you need to run these commands in terminal, before connecting to VPS:
[html]
$ ssh-keygen -R 111.111.111.111
[/html]

Now we will add new user for your server, as we won’t use root user. “root” users is only for administrative purpose. Let’s create a new user:
[html]
sudo adduser sandbox
[/html]
Now a user having username as ‘sandbox’ will be created, but you are not done yet. You will be asked for password immediately. Give password and press enter. Now the system will ask for additional details like name, email etc. You don’t need to provide those information if you don’t want to, just keep pressing enter until you see the following message:
[box type=”shadow”]
Is the information correct? [Y/n]
[/box]
Press Y and then press enter. New user ‘sandbox’ with password (in my case it’s sandbox too) is created!

Now we need to give root privileges to sandbox user:
[html]
sudo /usr/sbin/visudo
[/html]
A text file will be opened in the terminal, add the following lines:
[html]
root ALL=(ALL:ALL) ALL
sandbox ALL=(ALL:ALL) ALL
[/html]
Press ‘cntrl x’ to exit the file and then ‘Y’ to save the file.

[box type=”shadow”]
If you want to delete any user from your system, use the following command:
[html]
sudo userdel sandbox
[/html]
And then you need to delete the user’s home directory:
[html]
sudo rm -rf /home/sandbox
[/html]
To change user:
[html]
su sandbox
[/html]
[/box]

post

WordPress Meet The Team Plugin – best ever

Meet the Team is a WordPress plugin that allows you to easily create and manage teams. You can display single teams as multiple columns, you can also showcase all teams as a filterable isotope gallery, easy social links management included.

The purpose of this plugin is to allow you to create a “Meet the Team/Partners” page for a website. This plugin makes it easy to create a Team Page to showcase your most important assets.

[purchase_link id=”633″ text=”Add to Cart” style=”button” color=”green”]

It’s very cheap and easy to use. You can check the “demo” and “how to use” in following video.

Special thanks to MixItUp.

How to use?

Just like adding a new post or page.

Use shortcoe [my-team] to show whole team or [my-team cat=”CAT_ID”] to show a specific category. You will also have a widget to show a member like Highlight or Spotlight.

If ANY question, please feel free to drop an email with your purchase code at aknath.707@gmail.com

Total Sales: 149

Check Screenshots:

Screen Shot 2013-08-02 at 4.22.05 AM

Meet the team Meet the team

80X80

8

7

6

4

3

2

1

So, why wait?

post

HTTP Error when uploading images in WordPress – no thumbnail

Did you ever see HTTP Error when uploading an image in wordpress? Most of the times the images are uploaded but no thumbnail is created. And sometimes the images are not even uploaded. We are going to discuss about this right now!

There could be several issues that cause this error. First of all, we can assume that you don’t have enough memory for the script to be executed. So, try adding something like the following in your wp-config.php file:
[php]
define(‘WP_MEMORY_LIMIT’, ’64MB’);
[/php]

In stead of 64MB you may need more, though you can’t exceed the limit that your host allows you to use :)

If the solution doesn’t work, then open the .htaccess file from root of wordpress installation and add the following line:
[html]
AddType x-mapp-php5 .php
[/html]

Third issue could be mod_security is enabled in your server. To overwrite the default, create a .htaccess file in your wp-admin folder and paste the following code in there:
[html]

SecFilterEngine Off
SecFilterScanPOST Off

[/html]

Another main issue I suppose that your script is using ImageMagick library, but you need to use GD library to resolve the HTTP error. You need to force wordpress to use GD library in this case. To force you can use the following code:
[php]
add_filter( ‘wp_image_editors’, ‘force_to_use_GD’ );
function force_to_use_GD($array) {
return array( ‘WP_Image_Editor_GD’, ‘WP_Image_Editor_Imagick’ );
}
[/php]

I hope one of the above should fix your issue. There are more possible options out there though, but these are the common ones :)

post

How to get start date of a week in JavaScript

This is little tricky to get the start date or/and end date of a week. Also, there is no standard day that should be a REAL start day in a week. In my example, I assume that the start day is Monday. Also, I will show you how you can adjust it to fit your needs. So, you can make it as Saturday or Sunday or whatever.

In my example, suppose I want to make a title like “Accepting Bookings For the Week of START_DATE to END_DATE”. So, within this week, it should be same. But in next week, it should be changed automatically.

Well, it’s not hard, let’s look at the code:
[html]

Accepting Bookings For the Week of Feb 23rd to Feb 23rd

//
[/html]

There is some vita points. First month array, I needed to use that to print the month name as JavaScript has no function to print month name. So, when we will get the month number (0, 1, 2 etc) we will print the same index of month array. Note that getMonth() function returns the month number based on zero, so January would be 0, February would be 1 and so on.

Next one is:
[javascript]
startDate = d.getDate() – day + (day == 0 ? -6:1)
[/javascript]

This is where you need to edit if you change the start day. Change -6 to something between -1 to -7 and you will see the result.

And then the following line set the end date:
[javascript]
endDate = startDate + 6;
[/javascript]

If you want to make it for next week, then change this line
[javascript]
startDate = d.getDate() – day + (day == 0 ? -6:1)
[/javascript]

to

[javascript]
startDate = (d.getDate() + 7) – day + (day == 0 ? -6:1)
[/javascript]

And finally, I set the correct value in correct place:
[javascript]
document.getElementById(‘ds’).innerHTML = month[correctStartDate.getMonth()] + ” ” + correctStartDate.getDate();
document.getElementById(‘dl’).innerHTML = month[correctEndDate.getMonth()] + ” ” + correctEndDate.getDate();
[/javascript]

:)

post

Redirect to another page when back button is pressed in JavaScript

One of the most wanted feature now-a-days is to detect browser back button. Couple of years ago there were lots of script to detect browser’s back button, but browsers are getting smarter day by day, and so are we :)

Sometimes we need to redirect into a different page when user press browser back button. So, we need to detect when the user press back button. Well a developer Brooke Bryan wrote a script for detecting pressing back button. You will found the script here. But it will detect back button and then redirect to old page. I have modified the original code based on his suggestion so that you can set a script to redirect into a different page.

You can get modified script here:
[javascript]
/*!
* Back Button Detection Object V 1.0.1
* www.brookebryan.com/
*
* Copyright 2010, Brooke Bryan
*
* Date: Thu 27 Jan 2011 13:37 GMT
*/

var bajb_backdetect={Version:’1.0.0′,Description:’Back Button Detection’,Browser:{IE:!!(window.attachEvent&&!window.opera),Safari:navigator.userAgent.indexOf(‘Apple’)>-1,Opera:!!window.opera},FrameLoaded:0,FrameTry:0,FrameTimeout:null,OnBack:function(){alert(‘Back Button Clicked’)},BAJBFrame:function(){var BAJBOnBack=document.getElementById(‘BAJBOnBack’);if(bajb_backdetect.FrameLoaded>1){if(bajb_backdetect.FrameLoaded==2){bajb_backdetect.OnBack();}}bajb_backdetect.FrameLoaded++;if(bajb_backdetect.FrameLoaded==1){if(bajb_backdetect.Browser.IE){bajb_backdetect.SetupFrames()}else{bajb_backdetect.FrameTimeout=setTimeout(“bajb_backdetect.SetupFrames();”,700)}}},SetupFrames:function(){clearTimeout(bajb_backdetect.FrameTimeout);var BBiFrame=document.getElementById(‘BAJBOnBack’);var checkVar=BBiFrame.src.substr(-11,11);if(bajb_backdetect.FrameLoaded==1&&checkVar!=”HistoryLoad”){BBiFrame.src=”blank.html?HistoryLoad”}else{if(bajb_backdetect.FrameTry<2&&checkVar!=”HistoryLoad”){bajb_backdetect.FrameTry++;bajb_backdetect.FrameTimeout=setTimeout(“bajb_backdetect.SetupFrames();”,700)}}},SafariHash:’false’,Safari:function(){if(bajb_backdetect.SafariHash==’false’){if(window.location.hash==’#b’){bajb_backdetect.SafariHash=’true’}else{window.location.hash=’#b’}setTimeout(“bajb_backdetect.Safari();”,100)}else if(bajb_backdetect.SafariHash==’true’){if(window.location.hash==”){bajb_backdetect.SafariHash=’back';bajb_backdetect.OnBack();}else{setTimeout(“bajb_backdetect.Safari();”,100)}}},Initialise:function(){if(bajb_backdetect.Browser.Safari){setTimeout(“bajb_backdetect.Safari();”,600)}else{document.write(‘‘)}}};bajb_backdetect.Initialise();
[/javascript]

Now we need to use it.

Fortunately, you don’t need a second page to check this script. You will use this script in the page from where you need to redirect into a different page when back button is pressed. Logic is, when the page with the script loaded, a hashtag (#b) is automatically added with the URL. So, you can press the back button for the first page (as I said don’t need a second page to test).

I assume you have saved the above script in a file called – backfix.min.js and put it in js folder. So, first include the script into your html head section. And then call the script:

[html]

//
[/html]

And you’re done. You can do anything you want with script within that function. You also can set a message like “Are you sure want to live this page?” with confirm function.

So, Brooke made our life easy, Good bless him :)

post

Enable css for HTML5 tags in Older Internet Explorer: HTML5 – The Beautiful Butterfly! Part 3

First you may take a look in:
Part 1
Part 2


This is a very interesting topic. Most of the html5 tags are not supported in older versions Internet Explorer(IE) or other older browsers. When we develop a website in html5, we consider it. You can ignore older versions of FF, Chrome or Safari, but you can’t just ignore IE7 or IE8. Well, some tags are still not supported in any browsers, but what about simple tags like section, article, header, nav etc?

When we apply styling on these tags using css, the tags are not recognized in IE at all. So, no style is shown. For example:
[html]

bla bla bla
bla bla bla

[/html]
And you style this
[html]

header{padding: 10px; background: red;}
nav{margin: 10px 5px 10px;}

[/html]

This will look good any modern browser but not in older versions of IE. And it was not discovered until a unknown person make a comment. It was in 2008. The commenter Sjoerd Visscher posted a comment in intertwingly.net/blog/2008/01/22/Best-standards-support:

Btw, if you want CSS rules to apply to unknown elements in IE, you just have to do document.createElement(elementName). This somehow lets the CSS engine know that elements with that name exist.

And this comment changed everything! Before this comment nobody knew that you can do it, pretty interesting, isn’t it?

So, the way is if we create a simple script line in the head tag, all html5 tags should be introduced in IE.
[html]

document.createElement(‘header’);
document.createElement(‘nav’);
document.createElement(‘article’);

[/html]
So, if we need to create a number of elements for IE, we can use an array:
[html]

var e = [‘header’, ‘section’, ‘nav’, ‘article’]; // add more elements here
for(var i = 0; i < e.length; i++){
document.createElement(e[i]);
}

[/html]
But we don’t want to execute this script in every browsers, only in IE. So, use conditional html tag :)
[html]

var e = [‘header’, ‘section’, ‘nav’, ‘article’]; // add more elements here
for(var i = 0; i < e.length; i++){
document.createElement(e[i]);
}

[/html]

You can see a nice documentation here by John Resig. Another well known and popular web developer Remy Sharp created a script that enable html5 tags in IE and is available in google code. An advanced script is here. So, if you use this you just need to include the source, rest of things will be done by that script :)

There are many ways out there for IE to recognize the html5 tags. We will discuss about those in some other day :)

Part 1
Part 2

post

HTML5: The Beautiful Butterfly! Part 2

Before starting this part, you may like to take a look on part 1. We are going to discuss some more important changes in this post. As HTML5 has been taking the top place of tomorrow’s world, it has a lots of flexibility. So, it’s your turn to use the resource that you have in HTML5.

Section, Article and Aside tag

Section is used to separate two or more parts, to make a connection between a heading and it’s excerpt or content. Also, within a section you can use h1 elements without having to worry about whether a particular section is at top level, second level, third level and so on. Section can be nested. One thing you need to remember that, section should not be used for styling. So, use a parent wrapping element to style for a particular section.
[html]

This is heading

This is excerpt…

This is heading

This is excerpt…

[/html]

About article, many people thinks article is used only for blog posts. This is wrong. Article can be used for the content that are segmented. So, your main content can be wrapped with article tag. Even you can wrap your blog comments with article tag. You can use header tag within article tag.

[html]

This is heading

Long content here..

Long content here..

Long content here..

    • …
    • …
    • …

Long content here..

Long content here..

[/html]

We have a generic idea that “aside tag is only used for a sidebar”. Well, this is true, but not true if you use the term ‘only’. Aside tag represents the part of the content that is not 100% applicable but still related to the content. So you can use aside tag within a content, just remember the aside tag should represent related content, not the applicable content. You know the use as sidebar. Let’s see different one.

[html]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae nisi metus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis vulputate tristique iaculis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae nisi metus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis vulputate tristique iaculis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae nisi metus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis vulputate tristique iaculis.

[/html]

Make a simple accordion with details tag

Many people thinks some things should be separated for javascript and html. We can build pretty attractive and sexy accordion with javascript. But for the same of simlicity, html5 introduces a very easy approach with details tag. Remember, all browsers don’t support all tml5 tags yet. Google chrome is the best browser to check html5 tags and attributes. So, you should really stick with chrome when you want to check your html5 outputs.

Within details tag, you need to use summary tag to show a part, e.g. question. Other elements will be hidden by default, we can consider it as answers.
[html]

  • This is a question

    This is a long answer….

  • This is a question

    This is a long answer….

[/html]
It will show only the questions with an arrow behind it. When you click on the arrow, then the rest of the corresponding content will be visible. This is very useful if you want to develop a FAQ quickly.

Now, what about changing the colors of the arrow. We can use a tricky css to change the colow of the arrow.
[html]

[/html]
If you want to keep open an item, just use open attribute in the details tag.
[html]

  • This is a question

    This is a long answer….

  • This is a question

    This is a long answer….

[/html]
The last item will be open by default. Also, remember details tag need to be used within list items. It should look like below:

Screen Shot 2013-11-30 at 8.20.37 PM

See Part 1 here

post

Unique display name and nickname in wordpress

Hiya Folks!

We know that display name and nickname are very useful option in wordpress. Some users want to show display name or nickname instead of username. But there is possibility to be the display name and username same for more than one users. It will create confusion in plugin like BuddyPress or Classifieds or so.

But, if you can protect your user and system to create duplicate display name and nickname, then it’s achievable. Let’s make the hands dirty :)

You can add these 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 their. You don’t need to activate that plugin. Mu-plugins means must use plugins, so it will be activated automatically always.

The above code speaks a lot!
Many thanks to my colleague Vaughan Montgomery.

Suggestions are welcome :)

post

How to add login logout link in wordpress menu

We can add login and logout link using Appearance > Menus and then custom link. But then both links will be shown always, doesn’t matter if you are logged in or out. But if you want to use Login link only for visitors and logout link only for members, this little snippet will help you with that.

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 their. You don’t need to activate that plugin. Mu-plugins means must use plugins, so it will be activated automatically always.

[php]
function add_login_logout_link($items, $args)
{
if(is_user_logged_in())
{
$newitems = ‘

  • logout
  • ‘;
    $items .= $newitems;
    }
    else
    {
    $newitems = ‘

  • login
  • ‘;
    $items .= $newitems;
    }
    return $items;
    }
    add_filter(‘wp_nav_menu_items’, ‘add_login_logout_link’, 10, 2);
    [/php]

    Enjoy WordPressing :)

    post

    HTML5: The Beautiful Butterfly! Part 1

    HTML or Hypertext Markup Language is a formatting language that programmers and developers use to create documents on the Web. The latest edition HTML5 has enhanced features for programmers such as video, audio and canvas elements. You view a Web page written in HTML in a Web browser such as Internet Explorer, Mozilla Firefox or Google Chrome. The HTML5 language has specific rules that allow placement and format of text, graphics, video and audio on a Web page. Programmers use these programming tags or elements to produce web pages in unique and creative ways. Tags enable the creator to make a more efficient and intelligent web page. Users will not have to use a Flash plug-in for video and audio content. Visual Studio users typically write code in HTML5 when creating web site content.

    Well, we are not going to discuss here about HTML5, but some useful tips for HTML5 :)

    Change of Doctype

    Doctype declaration in older version
    [html][/html]
    This is much more easier now
    [html][/html]
    Also, you can put notes here:
    [html][/html]

    Some people may think that it will not run in Internet Explorer 6 or 7 or other older versions. Totally wrong. As long you are using
    [html][/html]
    Basically the ‘text/html’ part will handle it.

    New html tag

    We are used to keep in this way:
    [html][/html]
    Get rid of this xmlns attribute now:
    [html][/html]
    You can declare a language here:
    [html][/html]

    No self closing tag

    In xhtml, we needed to close the self closing tags. Like:
    [html]

    [/html]
    But now in HTML5, we don’t need to close the self closing tag. So,
    [html]

    [/html]

    not bound to use quotation for attribute value

    Well, we needed to use quotation for attribute value in xhtml. Like:
    [html]

    [/html]
    You can get rid of that quotation.
    [html]

    [/html]
    But it is strongly recommended to use quotation for attributes value as when you use a editor, it changes color and better to understand the segmentation of your code.

    Unique tag for header, footer and nav

    When you think a segment should be considered as a header, then change your
    [html]