wp_editor always convert <br> to <p> </p> - html

I create a custom plugin that has a wp_editor on the admin, now when I put some html tags in the editor in Text view tab like <br> and click on the Visual tab.. the <br> converts into <p> </p> when I back to Text tab.
this is my php code:
$html_value = '<h1>test</h1><br> ....';
$settings = array( 'textarea_name' => 'al_srms_fileform_content', 'media_buttons' => true, 'wpautop' => false );
wp_editor($html_value, 'mycustomeditor0pdf', $settings );
this is what happening:
I put <br> tag by Text tab.
I click Visual to display the result.
I click back the Text tab and the <br> is gone and replaced by <p> </p>
is there a way the when putting a <br> it remains <br> ?

I hope this will assist you. You don't need to install the suggested plug-in, though. Just add this mini plugin and you're set:
<?php
defined( 'ABSPATH' ) OR exit;
/* Plugin Name: TinyMCE break instead of paragraph */
function mytheme_tinymce_settings( $tinymce_init_settings ) {
$tinymce_init_settings['forced_root_block'] = false;
return $tinymce_init_settings;
}
add_filter( 'tiny_mce_before_init', 'mytheme_tinymce_settings' );
Now when you press enter, <br> tag will be inserted instead of creating new paragraph. But beware, if you create two consecutive newlines, the text will still be split to paragraph as a result of wpautop filter applied to your post content. You need to remove this filter first and create a new filter that will replace all newlines with <br> tags. Add something like this to your functions.php to display the <br> tags in your template:
remove_filter ( 'the_content', 'wpautop' );
add_filter ( 'the_content', 'add_newlines_to_post_content' );
function add_newlines_to_post_content( $content ) {
return nl2br( $content );
}

The problem you are running into is the result of the wpautop filter function in your Themes functions.php file.
To disable this function add the following to lines to your functions.php file located in your themes directory:
remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );
Reference: https://codex.wordpress.org/Function_Reference/wpautop (Wordpress Codex)

Related

How to insert HTML code into HTML file from a .gs using Google Apps Script

My variables I'm inserting into an HTML file using the code below inserts the variables as plaintext and does not register code within my variables.
function sendEmail(){
var htmlBody = HtmlService.createTemplateFromFile('emailFormat');
var variableOne = "text";
htmlBody.example = '<p>' + variableOne + '</p>';
var email_html = htmlBody.evaluate().getContent();
MailApp.sendEmail({
to: "email#email.com",
subject: "subject",
htmlBody: email_html
});
}
The code above makes anywhere I put <?= example ?> within the file 'emailFormat' become "<p>text</p>". The problem is it does not display it as "text" it displays "<p>text</p>" entirely. How do I get it to show register the <p>'s as code?
The tags <?= ?> will escape the output, thus <?= <p> ?> will "print" the string <p> and not a paragraph tag.
You can use <?!= ?> to not escape the output. Those are useful for including additional HTML and inline JavaScript, CSS files into your templates. Using the exclamation mark should fix your issue.
But in your case, try just putting the <p> tags outside <?= =?> tags like this:
<p><?= example ?></p>
That's the typical way to do it. Or if you need to switch the tags, you could use the <?!= option, but that puts HTML in your JavaScript... it's a subjective choice, but you can also control options by using the <? ?> tags like this:
Code.gs
// html refers to a template
html.type = "p";
html.content = "some paragraph content!";
template.html
<? if (type === "p") { ?>
<p> <?= content ?> </p>
<? } ?>
Try this:
function sendEmail(){
var v1="Hello World";
var html='<p>' + v1 + '</p>';
MailApp.sendEmail({to: "email#email.com", subject: "Email Test", htmlBody: html});
}
We don't really load html into html files from gs file scripts except possibly via the Google Apps Script Advanced API. We can however load html directly into the Document Object Model of a browser by using google.script.run and then it's just a matter of getting the element by id and loading it's text or innerHTML via Javascript. I don't think even scriplets actually load it into the html file but I'm not sure about that.

WooCommerce Add Extra Tabs - Single Product Page

The following is the code from WooCommerce to Add Extra Tabs:
My Question is, how to insert a video link, or an iframe in the tab content.
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
// Adds the new tab
$tabs['test_tab'] = array(
'title' => __( 'New Product Tab', 'woocommerce' ),
'priority' => 50,
'callback' => 'woo_new_product_tab_content'
);
return $tabs;
}
function woo_new_product_tab_content() {
// The new tab content
echo '<h2>New Product Tab</h2>';
echo '<p>Here\'s your tab content.</p>';
}
How to insert anchor text, or iframe inside "Tab Content"
Any Help would appreciated..
Cheers
If you just want to show a static video iframe in your tab content, then simply add iframe/video tag in your tab content callback function likes
function woo_new_product_tab_content() {
// The new tab content
echo '<h2>See the video</h2>';
echo '<div><iframe width="100%" height="315" src="paste your video link here" frameborder="0" allowfullscreen></iframe></div>'; }
Or if your wants dynamic video link for each product then you must have to store video link in respective product meta first. And then echo get_post_meta for video on above 'src' attr.

Yii2 add to head() and endBody()

In developing a site that can have multiple front-end themes, I am looking for a way to allow users on the back-end to manually inject code into the head and body. Two use cases are as follows:
Case 1 - Styles
In the back-end, the user selects a theme.
User likes the theme but would like to make links a different color.
Rather than copy and modify the theme, user can set custom code to execute at end of <head> tag.
Case 2 - Scripts
User wants to add custom JavaScript to end of document but requires an additional JavaScript library as well.
Rather than copy and modify the theme, user can set custom code to execute at and of <body> tag.
I understand that both of these specific cases could be accomplished (in part) with the use of registerCss and registerJs but those automatically wrap whatever is passed to them in <style> or <script> tags. I am hoping there is a way to just directly inject whatever is indicated directly into the head() or endBody() methods. The reason behind this is that I do not wish to limit what the user can inject (perhaps a script tag is needed in the head).
Currently, I am just storing the code-to-be-added in params then manually including them in each theme as follows:
<?php $this->endBody() ?>
<?= $this->params['theme_include_body_end'] ?>
This is undesirable as it can easily be forgotten when creating the theme. I would like to find a way to append my param value to the endBody() call automatically so whenever endBody() is called, my code is included (same for the head() call).
Yii2 already provide this functionality in View Class by using Block Widget
you need 2 simple steps:
1- (in required View file): in any given view
<?php $this->beginBlock('block1'); ?>
...content of block1...
<?php $this->endBlock(); ?>
...
<?php $this->beginBlock('block3'); ?>
...content of block3...
<?php $this->endBlock(); ?>
2- (in layout): define block name and its place in the layout page
...
<?php if (isset($this->blocks['block1'])): ?>
<?= $this->blocks['block1'] ?>
<?php else: ?>
... default content for block1 ...
<?php endif; ?>
...
<?php if (isset($this->blocks['block2'])): ?>
<?= $this->blocks['block2'] ?>
<?php else: ?>
... default content for block2 ...
<?php endif; ?>
...
<?php if (isset($this->blocks['block3'])): ?>
<?= $this->blocks['block3'] ?>
<?php else: ?>
... default content for block3 ...
<?php endif; ?>
...
Referance: Yii2 Guide
http://www.yiiframework.com/doc-2.0/guide-structure-views.html#using-blocks
I hope this will help someone. Thank you.
You can use own View component that overrides methods renderHeadHtml() and renderBodyEndHtml(). In these methods can be injected necessary code as you need:
namespace common/components;
class View extends \yii\web\View {
/**
* #var string Content that should be injected to end of `<head>` tag
*/
public $injectToHead = '';
/**
* #var string Content that should be injected to end of `<body>` tag
*/
public $injectToBodyEnd = '';
/**
* #inheritdoc
*/
protected function renderHeadHtml()
{
return parent::renderHeadHtml() . $this->injectToHead;
}
/**
* #inheritdoc
*/
protected function renderBodyEndHtml($ajaxMode)
{
return parent::renderBodyEndHtml(ajaxMode) . $this->injectToBodyEnd;
}
}
In config file:
// ...
'components' => [
// ...
'view' => [
'class' => '\common\components\View',
]
]
Somewhere in controller code:
\Yii::$app->view->injectToHead = '...';
\Yii::$app->view->injectToBodyEnd = '...';
Another, perhaps more simple alternative depending on your use case is to use the view events. You can inject different items at different parts of the page. For example:
Yii::$app->view->on(View::EVENT_END_BODY, function () {
echo date('Y-m-d');
});
You can read more here: https://www.yiiframework.com/doc/guide/2.0/en/structure-views#view-events

How insert raw HTML to label?

Is there some easy way how put raw HTML tag to label? I have this:
{{ Form::label('firstName', 'First name <em>*</em>', array('class' => 'input_tag')) }}
and it produces:
<label class="input_tag" for="firstName">First Name <em>*</em></label>
BUT tag EM is not interpreted as it should be. What I want is:
<label class="input_tag" for="firstName">First Name <em>*</em></label>
use HTML::decode():
{!! HTML::decode(Form::label('firstName', 'First name <em>*</em>', array('class' => 'input_tag'))) !!}
Using sprintf in a macro is much faster than redecoding:
Form::macro('rawLabel', function($name, $value = null, $options = array())
{
$label = Form::label($name, '%s', $options);
return sprintf($label, $value);
});
You can create a helper function (macro) just like:
HTML::macro('raw', function($htmlbuilder) {
return htmlspecialchars_decode($htmlbuilder);
});
in your view:
{{ HTML::raw(Form::label('input_firstname', 'Prénom <sup>*</sup>')) }}
I often use raw html for form input and labels as I find it easier to read and use html5 attributes such as required and placeholder. This form is a good example of how to use raw html with Input::old which allows you to capture old input. https://github.com/Zizaco/confide/blob/master/src/views/login.blade.php
For required inputs, instead of trying to add HTML into the label, I add a class, 'required-input' (or something).
Then I have the following CSS rule
label.required-input:before {
content: ' * ';
color: #f00;
}
This would work unless you are needing to have the <em>*</em> for screen readers. But you can still add the required flag on the input.
Got it, it's using the e() helper function that uses htmlentities() to format your labels and this is converting your tag to &lt;em&gt;*&lt;/em&gt;.
The quick and (very) dirty fix is to add this to your start.php or some other place before the first call to Helpers.php:
function e($value) { return $value; }
But this far from ideal.
I believe the Form::label($name, $value, $attributes, $escape_html) takes a fourth parameter which tells it whether to not to escape html. It defaults to true. So if your expected result is an italic *, pass false as the fourth parameter.

Wordpress menu in drop down?

I have a code in wordpress which generates a horizontal menu. The code is
<? php wp_nav_menu (array ('theme_location' => 'header-menu'));?>
I would like to have a drop down instead, and tried the following code but its not working.
<select name="blog-dropdown" onChange='document.location.href=this.options[this.selectedIndex].value;'>
<option value="">Navigering</option><?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?></select>
What is wrong? I get an empty drop down list.
i was able to meet the similar requirement by using this WordPress function wp_dropdown_pages($args);
the drop down options contain the page id as value so i used them to redirect user through jquery. my jquery code looks as follows:
$("nav select").change(function() {
var pageID = $(this).find("option:selected").val();
window.location = siteurl + '?p=' + pageID;
});
here siteurl contains my home page URL(which is WordPress blog URL)
u can keep some div like below in the footer.php
<div id="wordpress_blog_url" style="display:none;"><?php bloginfo('template_url'); ?></div>
and then
var siteurl = $('#WordPress').html();
It's empty in your browser but inspect the code (or read the html source).
The wp_nav_menu function create an ul>li>a tags.
http://codex.wordpress.org/Function_Reference/wp_nav_menu.
The option tag needs something like this :
<select>
<option>Volvo</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</select>