Develop Reference

WYSIWYG Editor in custom Wordpress Widget

Replacing a textarea with WordPress TinyMCE wp_editor()
I've followed the above guide, but the WYSIWYG has some issues.
$text = str_replace(array("\r", "\n"), '', $instance['text']);
$settings = array( 'textarea_name' => $this->get_field_name('text') );
wp_editor( esc_attr( $text ), 'text', $settings );
The result is this:
The tab wont switch (sometimes Text is selected initially, sometimes Visual). The Add Media button appears to work, but when clicking Insert into Post, the modal disappears and nothing happens.
There's nothing in the console, so I'm not sure what's going wrong. Might someone know what is happening, or perhaps what direction to move in order to start figuring it out?

Maybe a little too late but i saw the post a few minutes ago and had the same issue.
I tried the examples from the Wordpress Code Reference:https://developer.wordpress.org/reference/functions/wp_editor/
So you don´t need $settings for initializing the editor, just use it like this:
wp_editor( $content, $editor_id );
For usage in a Widget:
public function form( $instance ) {
$text = $instance['text'];
wp_editor(esc_attr( $text ), $this->get_field_id( 'text' ));
}
And there is another catch. You need a Unique ID for the editor as described here: https://wordpress.stackexchange.com/questions/82670/why-cant-wp-editor-be-used-in-a-custom-widget
Hope this helps!

rev slider javascript comes up in wordpress search results

I'm working on a website based on the BETHEME, it includes muffin content builder and visual composer. Visual composer is how I hvae build the website.
On the homepage I have included a revolution slider in an visual composer text field. I used the shortcode as follows:
[rev_slider alias="Home_page"]
The problem is that when I search anything in the WordPress search, the results display a piece of javascript code for the homepage result (as it was content of the page).
var htmlDiv = document.getElementById("rs-plugin-settings-inline-css"); var htmlDivCss=""; if(htmlDiv) { htmlDiv.innerHTML = htmlDiv.innerHTML + htmlDivCss; }else{ var htmlDiv = document.createElement("div"); htmlDiv.innerHTML = "" + htmlDivCss + ""; document.getElementsByTagName("head")[0].appendChild(htmlDiv.childNodes[0]); […]
After some research i only found out it's used by revolution slider. How do I cause this script to not display in my search results?

This seems like a bug with Revolution Slider(not really sure)
However this is how I went about fixing it.
Edit your functions.php and add the following:
add_post_type_support( 'page', 'excerpt' );
This code modifies the default WordPress content type ‘page’ to add support for excerpts.
After you've done this, edit the page that shows the Javascript code in your search results and add content to the 'Excerpt' field for that page and save. Search again and you'll see that the code is no more.

One potential solution is to remove shortcodes from your search results.
One method to do this would be to add the below code to your theme's functions.php file.
function remove_shortcodes_from_search( $content ) {
// Only modify the content if it is the search results page
if ( is_search() ) {
$content = strip_shortcodes( $content );
}
return $content;
}
// Assign a very low number (-9999) to priority to ensure it runs before shortcodes are expanded
add_filter( 'the_content', 'remove_shortcodes_from_search', -9999 );

PHP, JavaScript - Is it right to detect screen-width by redirecting header

I am using the following JavaScript to detect the screen-width and use it as a constant across my template files through conditional statements to display / not-display portions of my site. While it has nothing much to do with my questions, but just in case... Yes I am using WordPress. Also I am already using mobiledetect PHP Library.
function getLayoutWidth() {
if (isset($_GET['width'])) {
define( "SCREEN_WIDTH", $_GET['width']);
} else {
echo "<script language='javascript'>\n";
echo " location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}"
. "&width=\" + screen.width;\n";
echo "</script>\n";
exit();
}
}
Important :
Other techniques are like...... Let's assume if my site is 2MB in size, it will still load 2MB of content and then hide 1.5MB of it on mobile devices by using CSS properties like display:none; Whereas I don't want that template part to load itself, thus not needing to hide anything.
I am not looking to load an entire JavaScript library like jQuery or so to do this because location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}". "&width=\" + screen.width; is the only JavaScript in my entire site. Rest everything is pure PHP, HTML and CSS based. I even disabled jQuery of WordPress in the front-end template.
UPDATE :
Since some friends did not get my point although I mentioned clearly that I don't want to load the content into DOM at all, I am giving a bit more clarity here.....
For Example --- #1200px I want only 1 Sidebar to be displayed. #1600px I want 2 Sidebars to be displayed and over 1600px I want 3 Sidebars to be displayed. Please don't suggest Media Queries solutions as I already know it and that is exactly what I don't want to do. I want to avoid loading the content into DOM. Kindly let focus be only and only on questions asked. Also please don't post suggestions as answers. Let others with proper answers do it. Kindly post suggestions in Comment section.
My questions :
Is this a good / correct way to do from SEO stand point? If not why?
My URL is displayed as example.com/my-product-category/my-product-name/?width=1440 How to remove /?width=1343 and display just example.com/my-product-category/my-product-name part?

Simple answer, no, it is not good from a SEO standpoint. Or any other standpoint. Crawlers such as Googles are designed to completely ignore all hidden elements and thus you will lose big time SEO ranking if your content isnt getting fully crawled, and crawlers crawl each site multiple times masquerading as mobile devices to check if the site is mobile friendly as well.
http://www.seonick.net/responsive-design-seo/
Not to mention the trouble of calculating your arbitrary cutoff point of .5mb serves no purpose if the content is merely hidden (since its all getting sent anyway thus saving no bandwidth).
You need to do this in pure CSS using media queries, it is the most compatible way and allows for a fluid design (changes on the go as the window resizes.
<link rel="stylesheet" media="(max-width: 700px)" href="mobile.css">
<link rel="stylesheet" media="(min-width: 700px)" href="full.css">
That will use one css file if the window is smaller than 700px and the other if it is over.
Another of my more favorite methods is to use the http://mobiledetect.net/ class. Its small and fast, more accurate and better flexibility. Load that class then just add classes to your body element depending on the visitors browser
<body class="<?PHP if ($detect->isMobile() && !$detect->isTablet()) echo " .phone";?>">
Then style by targeting classes inside body.phone. This method also ensures you know if the browser is mobile BEFORE the DOM starts to process, meaning you can serve compressed versions of images through some simple logic rather than having CSS swap them out or just resize them or omit entire parts of the markup from being sent to the user at all ensure bandwidth is only used for parts of the DOM relevant to the users device.
<body>
This is normal content and will be visible to all devices
<?PHP if (!$detect->isMobile()) { ?>
This content will only be visible to desktop users, in fact it wont even be transmitted to mobile users thus making it NOT in the DOM
<?PHP } ?>
</body>

To set a cookie in javascript
function Cookies(){};
Cookies.prototype.save=function(name,value,days){
if( days ) {
var date = new Date();
date.setTime( date.getTime()+( days*24*60*60*1000 ) );
var expires = "; expires="+date.toGMTString();
var dom = "; domain="+document.domain;
} else { expires = ""; }
var path = "; path=/";
var tmp=[];
if( typeof( value )=='object' ) {
for( p in value ) tmp.push( p+'='+value[ p ] );
value=tmp.join(';');
}
document.cookie = name+"="+value+expires+path;
};
Cookies.prototype.read=function(name){
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for( var i=0; i < ca.length;i++ ) {
var c = ca[i];
while( c.charAt(0)==' ') c = c.substring(1,c.length);
if( c.indexOf( nameEQ ) == 0 ) return c.substring( nameEQ.length, c.length );
}
return null;
};
Cookies.prototype.erase=function(name){
this.save( name, "", -1 );
};
var cn='jsdim';
var ckie=new Cookies;
ckie.save( cn, JSON.stringify({ width:screen.availWidth, height:screen.availHeight, colour:screen.colorDepth, depth:screen.pixelDepth }), 1 );
In PHP
<?php
if( isset( $_COOKIE['jsdim'] ) ){
$json=json_decode( $_COOKIE['jsdim'] );
if( !defined('SCREEN_WIDTH') ) define( 'SCREEN_WIDTH', $json->width );
if( !defined('SCREEN_HEIGHT') ) define( 'SCREEN_HEIGHT', $json->height );
if( !defined('SCREEN_COLOUR_DEPTH') ) define( 'SCREEN_COLOUR_DEPTH', $json->colour );
if( !defined('SCREEN_PIXEL_DEPTH') ) define( 'SCREEN_PIXEL_DEPTH', $json->depth );
}
?>

I do not think, that screen size/resolution is really what you want to adjust your view templates for mobile devices. Actually you want to know what plattform/device someone is using, think about Nexus 7, which has 1920 × 1200 or Sony Xperia Z5 with 2160 x 3840px.
I would look at user-agent and HTTP headers for the server side code, there are already good libraries for that: e.g. mobiledetect. For the client side the best practice is to use CSS3 Media Queries: Media Queries for Standard Devices

You can retire the $_GET of the URL by the htaccess, I'm using RewriteRule.
Options +FollowSymLinks
RewriteRule ^folder/file.php$ folder/file.php?g=2
#if you want to remove php file extension, don't keep the .php before the $
To remove all php files extension: php.net.
Edit: this is for who doesn't use Wordpress

You can use this plugin:
https://wordpress.org/plugins/mobble/
It adds an is_mobile()-feature.
In your theme you can now use is_mobile() instead of $_GET['width'] > ...
This way you don't need a ?width= in your $_GET

How to add custom Javascript and external src link to a Gravity Form?

I know we can inject custom script into a gravity form using this: http://www.gravityhelp.com/documentation/page/Gform_register_init_scripts
The example uses a jquery script. But is it possible to inject normal javascript code like below?
var addresses = document.getElementsByClassName('classAddress');
i = addresses.length;
while (i--) {
var autocomplete = new google.maps.places.Autocomplete(addresses[i]);
}
Also how can one add a external link to JS to a Gravity Form instance like this:
<script type='text/javascript' src='...'></script>
Not sure where to do this in functions.php or a Gravity Form related php file

Yeh, you can. This is how I did it (prepare for a nutty hacky but working contraption). It's a really ugly, nasty way of doing it but there was a time constraint so I apologize in advance since this is not the WordPress way of doing things.
I made a custom field, mycustomfield ,(which using css i made not visible on the form) and then i just filtered the field and in its place pulled in a php file containing 8 jquery files. So create an empty file called scriptjs.php, and you can put whatever you want in there and it will get pulled into the form and that's that.
<script type='text/javascript' src='...'></script>
Add the code below to functions.php, change the 'plugins_url' in the code to your theme folder or wherever you plan on hosting the scriptsjs.php file. Don't forget to make a custom field, or you can just filter another field that you are not using for example.
add_filter("gform_field_input", "mycustomfield_input", 10, 5);
function mycustomfield_input($input, $field, $value, $lead_id, $form_id){
if($field["type"] == "mycustomfield"){
$input_name = $form_id .'_' . $field["id"];
$tabindex = GFCommon::get_tabindex();
$css = isset( $field['cssClass'] ) ? $field['cssClass'] : '';
$input='';
if(!is_admin()){
$input=file_get_contents(plugins_url('scriptjs.php', __FILE__));
}
}
return $input;
}

javascript & jquery optimization question

I am creating a website that's being localized through JavaScript, however... I have alot of pages and in each page there are alot of text inputs items, I am using this plugin
http://code.google.com/p/jquery-watermark/
to apply watermark on my inputs, now I just need guides for better performance.
Shall all watermarks be in one javascript file, or each page shall have it's own watermarks in it's own javascript file?
Shall i create one JavaScript file having all the system $(object).watermark() (I am choosing objects by classes), or each page with it's own JavaScript file must contain the jQuery watermark line of code?

TBH I wouldn't do it this way. I would apply the watermarks (or placeholders as they're known) in the HTML, like so:
<input type="text" placeholder="Hello mum!" />
And I would then use jQuery and Moderizer to determine if the current browser supports placeholders or not. If it does, you don't need to worry as the hard work's been done. If it doesn't, you can use a script like this:
if ( !Modernizr.input.placeholder )
{
$( '[placeholder]' ).focus( function()
{
var i = $( this );
if ( i.val() === i.attr( 'placeholder' ) )
{
i.val( '' );
}
}).blur( function()
{
var i = $( this );
if ( i.val() === '' )
{
i.val( i.attr( 'placeholder' ) );
}
}).blur();
}
This script essentially checks to see if the user has clicked into the input or not. If they have, it removes the placeholder as text. If they leave the input and they've left text in there, it doesn't change anything. However, if the input is empty, it then fills it with the placeholder.
I hope that helps.

General: normally you would have page specific things in a page specific javascript.
Your Problem;
assuming your html looks something like this;
<input type='text' name='bla'></input>
You could rewrite it to read;
<input type='text' name='email' class='watermark' data-watertype='email'></input>
You could apply a single javascript snippet and inlcude it throughout the page;
var texts={ "email":"Please enter a valid email address", .... },
elems=jQuery("input.watermark"),
elem,
watermarkType;
elems.each(function(i,elem){
elem=jQuery(elem);
watermarkType = texts[ elem.attr("data-watertype") ] || "";
if (watermarkType.length!==0){
//apply the watermark
elem.watermark(watermarkType);
}
}
//this isn't tested but should work as expected!
thus resolving the need of having a specific javascript for each page to apply the watermarks