Wordpress Customizer text area is changing my outputted HTML - php

I have created a wordpress theme, in the wordpress theme customizer I have added a couple of text areas where a user can input their own CSS or JS to be added to the head.
The placement of the text area is fine, i.e. when a user adds code it is displayed on the right place in the page, however it is being formatted differently.
For example, I add the following code to one of the textareas:
jQuery(document).ready(function($){
$('full_page').css('min-height',($(window).height()-195));
});
And in my theme it is outputted like this:
jQuery(document).ready(function($){
$('full_page').css('min-height',($(window).height()-195));
});
As you can see, the ' is being replaced with '
Here is the code in my customizer.php file to create the text area:
$controls[] = array(
'type' => 'textarea',
'setting' => 'js',
'label' => __( 'Custom JS', 'skizzar_bootstrap' ),
'subtitle' => __( 'You can write your custom JavaScript/jQuery here. The code will be included in a script tag appended to the top of the page.', 'skizzar_bootstrap' ),
'section' => 'advanced',
'priority' => 6,
'default' => '',
);
Is there a way to stop this formatting from happening?

Wordpress is HTML encoding all of the special characters. If the user enters HTML, then the result should be fine. It is not intended for Javascript.
Allowing the user to enter Javascript like this a big security hole. The script could do anything, not necessarily all pleasant.
If you really want to do this and it's your code echoing the Javascript in your theme, run it through htmlspecialchars_decode before you display it. That PHP function will convert the HTML codes back to characters.

Related

Having trouble getting WP Customizer Color Picker to actually change colors on my site

I'm busy developing my first custom theme on WordPress. I have converted and created all the files and everything is working as it should. The original files are based on Bootstrap, but I have converted the stylesheets to not be dependant. I am finally at a place where I want to allow users some customization and among other things, would like to add the ability to change theme colors.
I created a separate customize.php file that handles my customizer code. I have also added the WP Color Picker component and it does show up in the WP dashboard > Appearance > Customize window. The problem is that it doesn't actually work...
As part of my testing, to ensure that Bootstrap wasn't affecting anything, I created a div and gave it a custom class name (one that isn't found anywhere else on the website), I gave the div some height and width, and inside, I added a p-tag just to have some content. What I would like to do, is create a section (in the customizer) that will allow users to change the background color of the div
In the customize.php file:
<?php
function myTheme_customize_register($wp_customize){
$wp_customize->add_section('colors', array(
'title' => __('Colors', 'myTheme'),
'priority' => 30
));
$wp_customize->add_setting('bg_color', array(
'default' => '#f0a709',
'transport' => 'postMessage', // I have also tried 'refresh'
));
$wp_customize->add_control( new WP_Customize_Color_Control ($wp_customize, 'bg_color', array(
'label' => __('Background Color', 'myTheme'),
'section' => 'colors',
'settings' => 'bg_color',
)));
}
add_action('customize_register', 'myTheme_customize_register');
In my functions.php:
<?php
function myTheme_customize_css(){ ?>
<style type="text/css">
.hi{
background-color: <?php echo get_theme_mod('bg_color', '#f0a709'); ?> !important;
}
</style>
<?php
}
add_action('wp-head', 'myTheme_customize_css');
require get_template_directory().'/inc/customize.php';
?>
In the Customizer, the section 'Colors' is available and also the Color Picker, but selecting another color does nothing. The option for additional CSS is also available, and to test, when selecting the div and giving it a custom bg-color, the color does indeed change. I have also created another section of code in the customizer.php which handles some custom footer settings, things like heading text and button customization, and that's working just fine. I have a feeling the solution is really simple but I'm just not seeing it. Any help would be greatly appreciated.
The action will be like this :
add_action('wp_head', 'myTheme_customize_css');
You write the action name wrong. It will work as expected.

WordPress: Adding Theme Support

I am trying to add the "Custom-Background" theme hook for a WordPress site.
In my functions file, the one for the theme folder, I added
add_theme_support( 'Custom Background', array (
'background-color' => '#000000',
'background-size' => 'cover'
) );
It seems to work because going into the WordPress Dashboard -> Appearances -> Background, I can add an image and have it shown in the Customizer space. But when I actually go to the page itself, it shows me a blank white background.
Is there an additional code I need to add to my '.php' files? There was a similar post previously here:https://wordpress.stackexchange.com/questions/259315/custom-background-image-not-showing-up
But I believe this does not work anymore, or maybe I'm doing my process wrong.
Based on the codex sample you need this format
$args = array(
'default-image' => 'https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823__340.jpg',
'default-size' => 'cover',
);
add_theme_support( 'custom-background', $args );
Thank you for replying. I found out what the issue was with my code. It wasn't that my code was in an incorrect form, but I had forgotten to put a
<body <?php body_class();?>>
wherever I put my tag in.

How to get the value of wp_editor()'s textarea

So i am trying to have a custom textarea where users can do things like bold text, add ul's,link tags and so on. For all of this I am using the wp_editor() function inside wordpress, like this.
$content = "";
$editor_id = "e_id";
$editor_settings = array(
'teeny' => true,
'editor_height' => 160,
'quicktags' => array( 'buttons' => 'strong,em,del,close' ),
'media_buttons' => false );
wp_editor( $content, $editor_id ,$editor_settings );
So everything such as adding links bolding text and so on works just fine.
My issue is accessing the text that was just typed into this field.
I tried accessing the text using JQuery, by alerting the value of the textarea/contenteditable area like so...
alert($("#e_id").val());
but each time the result is always an empty string and not the newly typed text.
How do I get a hold of the newly typed text
So while looking around on here I found a similar question related to the Wordpress wp_editor() function. Here
Apparently there is a special tinyMce function used to access wp_editor() or the tinyMce editor's text/content.
So using this inside inside my onSubmit handler:
tinyMCE.activeEditor.getContent()
I was able to get content or text that was entered into the wp_editor().
Also another good post on the subject.

SilverStripe wysiwyg style constraints

Is there any way to prevent certain custom wysiwyg styles to be applied to certain HTML elements?
Suppose I have two styles called "red" and "framed". One colours text red and the latter puts a frame around photos.
Can I control which styles are available when highlighting text or an image? For example, I want the style "framed" not to be available when highlighting text and the style "red" not showing in the styles dropdown menu when highlighting an image.
Tinymce configuration is kinda tricky in silverstripe, though it looks easy once you got it running.
Jonom wrote down some configs and put it on Github, called tinytidy module, there you might find a possile solution. So best is to try out this module as it adds some custom css to the editor.
Copied from there, put in your /mysite/_config.php:
$formats = array(
// Define the styles that will be available in TinyMCE's dropdown style menu
// * Use 'selector' to specify which elements a style can be applied to
// * See Headings example below for explanation of different settings
// * Using 'classes' allows a class to be combined with others while 'attributes'=>'style' removes other classes before applying
// Text styles
array(
'title' => 'Selected text'
),
array(
'title' => 'highlight red',
'classes' => 'red',
'inline' => 'span',
'selector' => 'i,em,b,strong,a'
),
array(
'title' => 'Images',
),
array(
'title' => 'Put a frame around a photo',
'attributes' => array('class'=>'framed'),
'selector' => 'img'
)
);
//Set the dropdown menu options
HtmlEditorConfig::get('cms')->setOption('style_formats',$formats);
hope that helps, wmk

Programmatically creating a CMS/Page in Magento

I saw the following answer to the post Where are Magento static CMS blocks stored? regarding programatically using PHP generating cms/blocks in Magento.
I changed the code to the following
$newBlock = Mage::getModel('cms/page')
->setTitle('Test CMS Page Title')
->setContent('Hello I\'m a new cms page.')
->setIdentifier('this-is-the-page-url')
->setIsActive(true)
->save();
... and it works. I see a new page show up in the CMS Pages area in the backend.
What I need to add to this is the ability to set the content of the other fields in the CMS/Page. Namely:
Layout (trying to set to 1 column)
meta keyword
meta description
fields. These fields are blank currently. I so far haven't been able to figure this part out.
Thanks,
here you go:
$cmsPageData = array(
'title' => 'Test CMS Page Title',
'root_template' => 'one_column',
'meta_keywords' => 'meta,keywords',
'meta_description' => 'meta description',
'identifier' => 'this-is-the-page-url',
'content_heading' => 'content heading',
'stores' => array(0),//available for all store views
'content' => "Hello I'm a new cms page."
);
Mage::getModel('cms/page')->setData($cmsPageData)->save();
The keys of the array are the name of the fields of the cms_page table (check the db). And to know the value, I manually create the cms page I want and then see the value for this entry in the db.

Categories