How to capitalize first letter of a string with JavaScript

"hello world" => "Hello world"

String.prototype.capitalizeFirst = function()
{
    return string.charAt(0).toUpperCase() + string.slice(1);
}

// example
"hello world".capitalizeFirst(); //Output: Hello world

To convert a sting to title case with JavaScript check : How to convert a sting to title case with JavaScript

For who do not like prototype here is a Non prototype version for the same:-

function capitalizeFirst(string) 
{
    return string.charAt(0).toUpperCase() + string.slice(1);
}

// example
toTitleCase("hello world"); // Output : Hello world

For this solution we used:

  • The charAt() function returns the specified character from a string.
  • The toUpperCase() function returns the calling string value converted to uppercase
  • The slice() function extracts a section of a string and returns a new string.

How to convert a sting to title case with JavaScript

"hello world" => "Hello World"

We can convert a string to title case with below JavaScript function

String.prototype.toTitleCase = function()
{
    return this.replace(/\w*/g, function(str){return str.charAt(0).toUpperCase() + str.substr(1).toLowerCase();});
}
"hello world".toTitleCase(); // Output : Hello World

To capitalize only first letter with JavaScript check : How to capitalize first letter of a string with JavaScript

For who do not like prototype here is a Non prototype version for the same:-

function toTitleCase(string)
{
    return string.replace(/\w*/g, function(str){return str.charAt(0).toUpperCase() + str.substr(1).toLowerCase();});
}
   toTitleCase("hello world"); // Output : Hello World

Extra : Looking for angular solution read here : Angular TitleCase

How to use Wp_Editor() on theme options page

 

<?php wp_editor( $content, $editor_id, $settings = array() );  ?>

$content is the initial value for the wp_editor.
$editor_id is the HTML ID used for the textarea you want to turn into a TinyMce.  
$settings is an array of arguments used to setup the TinyMce.

We can add TinyMce editor to wordpress theme options page using wp_editor() function

To create a field using the settings API you need to use the function add_settings_field(). Please read How To Create A Theme Options Page For WordPress

The below code can be used to add a wp_editor() to the settings API.

add_settings_field( 'techkiz_editor', 'Techkiz WP Editor', 'tk_wp_editor', 'tk_theme_options.php', 'tk_editor_section', array() );

function tk_wp_editor($args){
     extract( $args );

     $class = (!empty($class))?$class:'';
		
     $settings = array(
	  'textarea_name' => 'techkiz_editor', 
	  'editor_class' => $class
     );
     
     $content = get_options('techkiz_editor');

     wp_editor($content, 'techkiz_editor', $settings );
		
     echo (!empty($desc))?'<br/><span class="description">'.$desc.'</span>':'';
}

wp_editor() Settings Arguments
These are the argument settings for the wp_editor().
wpautop – Boolean value to display wordpress automatically adds a paragraph around text.
media_buttons – Boolean value to display media buttons
textarea_name – Name of the textarea on the forms, this value is passed when submitting the form.
textarea_rows – The number of rows textarea displays
tabindex – The tabindex used on the form field
editor_css – This is additional CSS styling of the TinyMce
editor_class – Additional CSS classes added to the TinyMce editor
tinymce – Can be used to pass settings directly to TinyMce
quicktags – Pass additional settings to the quicktags

How to remove attribute from HTML element using jQuery

$("p").removeAttr("style");

// remove style attribute from all <p> tags 

We can remove a attribute from HTML element with the help of jQuery removeAttr() function

The below example will show us how to remove attribute from HTML element using jQuery. In this example when you click the Remove button it will remove the href attribute from the link using the jQuery removeAttr() method.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Remove HTML Element Attribute using jQuery</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>

    <a href="#">Demo Link</a>
    <button type="button" class="remove-attr">Remove</button>

</body>
<script type="text/javascript">
    $(document).ready(function() {
        $(".remove-attr").click(function(){            
            $("a").removeAttr("href");
        });
    });
</script> 
</html>
  

How to Create WordPress Custom Post Types

WordPress build in such a way that each and every section of wordpress is be customizable. WordPress is easy to customize and Custom Post Type is one of the it’s powerful features.

Need A ShortCut?

If you want to create custom post type without writing any code, easily and quickly, you can use Custom CMS wordpress plugin, which is created to give customization ability to wordpress admin.

Lets Write Code

how to start with angularjs

To start with AngularJS what should you already know

To start with AngularJS you should have a basic understanding of JavaScript, HTML and CSS. As you are going to develop web applications it will be great if you have understanding of other web technologies like Ajax, jQlite etc.

Lets know the basic of AngularJS and create a Hello World App

This is a basic example. In this we will initialize the AngularJS app which takes user input and shows the message on real time. For this we need to follow below steps :-

1) Loading Framework

First we need AngularJS library. As AngularJS is a pure javascript framework, we can embed it using script tag. We can either use a CDN or download it from angularjs.org. Here I am using CDN link.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

angular-js-download-popup

2) Bootstrap the AngularJS app using ng-app directive

Now it’s time to bootstrap AngularJS app. We can auto-bootstrap an AngularJS application using ng-app directive. It’s root element of the application and is typically placed near the root element of the page e.g. on the <body> or <html> tags.

<html ng-app="myFirstApp"> ... </html>

Note: Only one AngularJS application can be auto-bootstrapped per HTML document. You must manually bootstrap multiple app in a HTML document using angular.bootstrap . Check out ng-app Reference

3) Get user input using ng-model directive

We will create a input field to get user name. To bind input field value into the model we use ng-model directive.

<input type="text" ng-model="yourName" placeholder="Enter a name here">

The ngModel directive creates two way binding between a form control and a property on the scope. ngModel provides validation behavior, state of the control, and more. Check out ng-model Reference

4) Show user name using AngularJS expressions

In AngularJS we can print a property value using expression. AngularJS resolve the expression and replace property value in place of expression. Angular expressions can be written inside double braces: {{ expression }}. We can also print value using ng-bind directive.

<h1>Hello {{yourName}}!</h1>

Now we are done. Check out the Code Ground

See in Action

Enter the user name in input filed and see how things work.

Source Code

The final code we build in above example.

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

How to avoid being asked passphrase each time using ssh

Each time when you are trying to access remote server, pull push to git, your are being asked “Enter passphrase for key” because passphrase is not store in session.

“Avoid Enter passphrase for key”

you need to use a ssh agent and add passphrase in it by running :- Continue reading “How to avoid being asked passphrase each time using ssh”