Add Custom Menu in admin area WordPress

Create file test.php and copy past following code inside.

put file in wodpress plugin directory

Plugin Name: Custom Admin Menus
Plugin URI:
Description: Simple demo of admin menus
Author: yogs174
Version: 1.0
Author URI:

add_action('admin_menu', 'yogs174_admin_menu_create');

function yogs174_admin_menu_create() {

	add_utility_page('Yogs174 Top', 'Yogs174 Top', 'manage_options', 'y174_top' , '', '', 81 );

	add_submenu_page('y174_top', 'One', 'One', 'manage_options', 'y174_top', 'y174_one_func');
	add_submenu_page('y174_top', 'Two', 'Two', 'manage_options', 'y174_two', 'y174_two_func');
	add_submenu_page('y174_top', 'three', 'three', 'manage_options', 'y174_three', 'y174_three_fun');

function y174_one_func() {
	echo "Admin One";

function y174_two_func() {
	echo "Admin Two";

function y174_three_fun() {
	echo "Admin Three";


X-editable overwrite user input from server

Following are two cases:

Case 1:  you want to just display value differently

you can use render event

$('#action').on('render', function(e, editable) {
	var colors = {0: "gray", 1: "green", 2: "blue", 3: "red"};
	$(this).css("color", colors[editable.value]);


Case 2: you want to set value to element which is returned in ajax response instead of what set at client side e.g. uesr inserted value “Hello” but sever converts it into “hello”(small case) then do following

in ajax response set new value e.g. {“success”:true,”pk”:13,”value”:”hello”}

use following code

success:function(data, config) {
	if(typeof(data) == 'object') {
	var api_id =;
	var success = data.success;
	if(success == true) {
		return {newValue:data.value}

ensure you return object with exact name newValue