Auto complete/suggest in wordpress

Hi guys, After a longtime i’m coming to my blog due to my work tension. I have learned new thing today auto suggest or auto complete in WordPress. I have creating a plugin for income tax calculator in that i need to do auto suggest or auto complete for one of the field in the wp-admin section.

It’s very easy to do in WP. They had already predefined jQuery Suggest we need to enqueue the script and then your function.

In your function script add this line


Then add the style


Then your function

jQuery(function() {

In “yourcustomscript.php”

  • Connects to the WP DB
  • Queries the table for the data you want
  • Convert the result set into an associative array (or pull it from the DB as one)

Thats all your result


Plugin & Widget for Partners and Clients logo in wordpress

Hi everyone,

I have developed a plugin with widget where the admin can upload the logo, link-url of their partners/clients. You can use this as widget and shortcode in any posts/pages. I have created the full validation, Title setting, after widget and before widget content.

You can check the below image for your reference



if (function_exists('partner_widget')) {

You can contact me if you have any doubts and need this this plugin/widget.

Sorry Guys, I stopped giving support for this plugin because i have created this plugin 3.2Version after that i don’t have time to test for other versions. nd upgrade to newer version.

Upload image for my plugin in wordpress

Hey Guys, After a long time i came back with a new and good info. In my project i want to upload a image in the admin side plugin. I’m searched a more than 3 hours and got a nice and life saver tutorial. So i thought to save others save so i’m sharing the code and method.

Firstly add the HTML form as like
<tr valign=”top”>
<th scope=”row”>Upload Image</th>
<td><label for=”upload_image”>
<input id=”upload_image” type=”text” size=”36″ name=”upload_image” value=”” />
<input id=”upload_image_button” type=”button” value=”Upload Image” />
<br />Enter an URL or upload an image for the banner.

Now time to create the “my-script.js” and paste it inside your plugin folder

jQuery(document).ready(function() {

jQuery(‘#upload_image_button’).click(function() {
formfield = jQuery(‘#upload_image’).attr(‘name’);
tb_show(”, ‘media-upload.php?type=image&amp;TB_iframe=true’);
return false;

window.send_to_editor = function(html) {
imgurl = jQuery(‘img’,html).attr(‘src’);


The first click() event listener opens a ThickBox dialog when the “Upload Image” button is clicked, and loads the uploader page inside it. It also stores the name of the URL input field in a variable, for later use.

The second function overrides the send_to_editor() function in the media-upload script. This is probably the most important part. When the “Insert into Post” button is clicked in the uploader dialog, this function fires. It collects the URL of the image that was uploaded, dumps it into the awaiting form field, and closes the ThickBox dialog.

Now, you need to enqueue some scripts and styles. Its already predefined int he wordpress

function my_admin_scripts() {
wp_register_script(‘my-upload’, WP_PLUGIN_URL.’/my-script.js’, array(‘jquery’,’media-upload’,’thickbox’));

function my_admin_styles() {

if (isset($_GET[‘page’]) && $_GET[‘page’] == ‘my_plugin_page’) {
add_action(‘admin_print_scripts’, ‘my_admin_scripts’);
add_action(‘admin_print_styles’, ‘my_admin_styles’);

We need the media-upload and thickbox scripts for starters, as well as jQuery, which is already included. Then we have to register and enqueue our own JavaScript file, my-script.js, which will handle the media uploader functionality. We also need to load the thickbox stylesheet in the next function.
The if (…) block ensures that the scripts and styles will only be included if the user is on a specific admin page. If you look at your plugin’s (or theme’s) admin page, the URL should have a ?page=some_string at the end. Substitute my_plugin_page for that string.

That’s it. Providing everything went according to planned, you should have a form field that will either accept an arbitrary image URL, or allow a user to upload one on the spot.


Textarea to tinymce wysiwyg in wordpress plugin

Hi guys, today i have to create a plugin to wordpress. In that i have task to make text area into a tinymce wysiwyg editable field. I learned how to do. I thought of sharing to you guys.

add_action(“admin_print_scripts”, “js_libs”);
function js_libs() {
wp_tiny_mce( false , // true makes the editor “teeny”
“editor_selector” => “tinymce_data”

<script type=”text/javascript”>
jQuery(document).ready(function($) {
$(‘a.toggleVisual’).click(function() {
console.log(tinyMCE.execCommand(‘mceAddControl’, false, ‘tinymce_data’));
$(‘a.toggleHTML’).click(function() {
console.log(tinyMCE.execCommand(‘mceRemoveControl’, false, ‘tinymce_data’));

<form method=”post” action=””>
<span id=”submit”><input class=”button” type=”submit”></span>
<p id=”toggle” align=”right”><a class=”button toggleVisual”>Visual</a><a class=”button toggleHTML”>HTML</a></p>
<li><textarea style=”width:100%;” class=”tinymce_data” id=”tinymce_data” name=”tinymce_data”></textarea></li>

Instant Font Resizer using Jquery

Nowadays, In all website and blogs has the font re-sizer. So many developer/designers struggling to get this. Writing so many CSS and Javascript. Here i’m going to give few simpler and instant font re-sizer. For further info: jFontsize.

Step 1. Download the Js file

Upload the js file to the server. Add the script before </head> in your index.html

<script src=”; type=”text/javascript”/>

Step 2. Customize CSS

Add below class in your stylesheet

.jfontsize-button {
    font: bold 12px arial;
    padding: 3px;
    border: solid 1px #ccc;

.jfontsize-button:hover {
    text-decoration: none;
    background: #333;
    color: #fff;
    border: solid 1px #333;

.jfontsize-disabled, .jfontsize-disabled:hover {
    color: #aaa;
    border: solid 1px #eee;
    background: #eee;

Step 3.  Assigning Font resize Function

<a id=”jfontsize-minus” class=”jfontsize-button” href=”#”>A-</a>
<a id=”jfontsize-default” class=”jfontsize-button” href=”#”>A</a>
<a id=”jfontsize-plus” class=”jfontsize-button” href=”#”>A+</a>
<p class=”PUT-THE-CLASS-NAME”>
Place your content here
<script type=”text/javascript” language=”javascript”>
                            btnMinusClasseId: ‘#jfontsize-minus’,
                            btnDefaultClasseId: ‘#jfontsize-default’,
                            btnPlusClasseId: ‘#jfontsize-plus’

Just replace the “PUT-THE-CLASS-NAME” as your class where you need the font resizer to work on.

For the live demo and you can download full source code

YouTube Video as Website Background – Jquery Tubular

Jquery Tubular plugin was created by Sean McCambridge, a front-end developer from Chicago, USA. This awesome plugin  you can set a YouTube video as your website/ blog’s background. Just call it on yourtag with a YouTube video ID.

To add youtube video as background in your site or blog,

1. Add the JS File of the Tubular plugin into your page and download the JS file from the link upload in the server.

2. Now call the JS in your header

<script type="text/javascript" charset="utf-8" src=""></script>

<script type="text/javascript" charset="utf-8" src=""></script>

<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.js"></script>

<script type="text/javascript" charset="utf-8">
      $().ready(function() {
                $('body').tubular('someYTid','wrapper'); // where someYTid is the YouTube ID and wrapper is your containing DIV.

Replace the word someYTid in the code with ID of desired Youtube video which you can get from its URL like shown in the image below.

For more information, visit

Text Area Counter Using Javascript

I have created the text area counter character counter using  javascript. I’m sharing the script to you guys.


<script type="text/javascript">
function textCounter(field, countfield, maxlimit) {
if (field.value.length > maxlimit) // if too long...trim it!
field.value = field.value.substring(0, maxlimit);
// otherwise, update 'characters left' counter
countfield.value = maxlimit - field.value.length;
// End -->
<textarea cols="32 " rows="10" name="message" id="message" class="inputbox required" onkeydown="textCounter(this.form.message,this.form.remLen,500);" onkeyup="textCounter(this.form.message,this.form.remLen,500);" ></textarea><br /><input type="text" class="wordlimit" value="500" readonly="readonly" name=remLen size="5" maxlength="5">

Guys try and comment on this.