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!
Related
I tried to use this extesion. All i want is reply example 6 from official docs Thats what i did:
<?php echo Slider::widget([
'name'=>'rating_1',
'value'=>7,
'sliderColor'=>Slider::TYPE_GREY,
'pluginEvents' => [
"slide" => "function(slideEvt) {
$('#testVal').text(slideEvt.value);
}",
],
]);
?>
<span>Current Slider Value: <span id="testVal">3</span></span>
So as you can see on the picture, i can move slider, but value inside #testVal do not changing. What i did wrong?
You need to make sure that you have only a single span element with the id testVal, otherwise, it wouldn't work, there is nothing wrong with the script.
Secondly, remove the extra double-quotes " around the id part from the line
$('"<?php echo $value['strategy_title']?>"').text(slideEvt.value);
to
$('". $value['strategy_title']."').text(slideEvt.value);
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 );
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
I am a pure beginner of Javascript. I got some advanced experience with php but until now I refused to work with JS.
So now I have a question. I wanted to make possible to pickup date-value from a php-generated calendar and put it into a form input field just below of the same page / script.
My idea was to create an onlick-event for each date data. So in my calendar I have this:
$date = date('Y-m-d',$daystamp);
$post = '<div class="cal_day">'.$day.'</div>';
What I thought to do with Javascript is the following:
function dateclick(var x)
{
document.getElementById("date_entry").innerHTML = var x;
}
And my html-input field where I like to have the choosen date-values:
<input type="text" id="date_entry" name="abs_date" size="15" max-length="15"/>
I am sure the solution is simple. At W3Schools I saw that the output of JS doesn't require a return all the time? Should I add it?
Thank you for any answer or help.
UPDATE:
So I tried what you mentionned as solution/s:
- I removed the "var" before the x.
- I have encapsed the $date.
It is still not working. When I look up the element with OPERA it tells me it is a event handler but source file missing. But I have included the functions.js and another function in the same file is working well.
I tried the same thing in the try-field on W3Schools and it worket there..
So I guess that there is something in my structure around it that isn't working.
The calendar source line is included above the form element. Is this a problem?
I don't know if I zapped something.
GOT IT
The problem was that I needet to put the value into an input element.
The following code works:
function dateclick(x)
{
document.getElementById('date_entry').value=x;
return false;
}
Thanks for all your help!
Your php should be:
$date = date('Y-m-d',$daystamp);
$post = '<div class="cal_day">'.$day.'</div>';
And you javascript should be:
function dateclick(x)
{
document.getElementById("date_entry").innerHTML = x;
return false; // This will force the browser not to load the url.
}
You don't have to go through all that trouble, this should work:
<script>
var phpDate = "<?php echo $date; ?>";
</script>
I'm setting out to convert an existing jQuery plugin into WordPress plugin. This will be my first WP plugin (please be gentle). I've setup the basic plugin structure and can activate/deactivate the plugin successfully (resulting in adding the necessary JS and CSS files to the site). So far so good.
The tricky part that I don't understand.
What I am trying to accomplish on a post or page:
1 - Target a single element within the post or page (image)
2 - Apply a specific class to that element
3 - Allow user to then supply the plugin settings to that element only
I have no clue how to do this.
Everything I find regarding WordPress plugin development details how to setup a settings panel in the dashboard. Unfortunately, I cannot find anything that details targeting specific elements within a post or page and then applying the plugin settings to those.
On a standard HTML site, the plugin code would look like:
<img src="..." class="myPlugin"/>
// INIT
$(document).ready(function(){
$('.myPlugin').myPlugin({ someOptions });
});
Settings can also be applied like this:
<img src="..." class="myPlugin" data-myPlugin='{ someOptions }' />
Hopefully this is enough code for everyone and I hope someone out there can point me in the right direction.
Thanks!
You can use the filter hook image_send_to_editor. It returns the HTML that's inserted on the post/page when we select an attachment with the Add Media button.
I've seen an interesting usage here, adapted bellow. We're basically rebuilding the HTML using the attachment attributes passed on $attachment.
add_filter('media_send_to_editor', 'media_html_so_22584846', 10, 3 );
function media_html_so_22584846( $html, $attachment_id, $attachment )
{
$post = get_post( $id ); // used to get the post title, but there's a bug in WP, the title is never printed
$url = $attachment['url'];
$align = ! empty( $attachment['align'] ) ? $attachment['align'] : 'none';
$size = ! empty( $attachment['image-size'] ) ? $attachment['image-size'] : 'full';
$alt = ! empty( $attachment['image_alt'] ) ? $attachment['image_alt'] : '';
$rel = ( $url == get_attachment_link( $attachment_id ) );
$new_html = get_image_send_to_editor( $attachment_id, $attachment['post_excerpt'], $post->post_title, $align, $url, $rel, $size, $alt );
return $new_html;
}
You could use the fields Alt and Description to pass your custom options. Another option would be inserting a custom field in the Media Library popup, but it's not an easy task.
And here the array $attachment after inserting the previous image.
And the generated HTML:
[caption id="attachment_662" align="alignright" width="584"]
<a href="http://plugins.dev/del-me/ampi" rel="attachment wp-att-662">
<img src="http://plugins.dev/wp-content/uploads/2013/10/ampi-682x1024.jpg" alt="alt" width="584" height="876" class="size-large wp-image-662" />
</a>
caption[/caption]