Wordpress custom role can't upload images using media on front end - wordpress

I have created a custom template with plugin that allows user (Role: Customer) to upload pictures from front end but when I try to upload a picture it says "You don't have permission to attach files to this post."
I can upload pictures through /wp-admin > Media - Add New but not from the front end.
Here is my code;
`function CA_enqueue_scripts() {
wp_enqueue_media();
wp_enqueue_script(
'some-script', get_template_directory_uri() .
'/custom/assets/js/edit_profile.js', array('jquery'), '2017-09-27'
);
}
/**
* This filter insures users only see their own media
*/
function CA_filter_media($query) {
// admins get to see everything
if (!current_user_can('manage_options'))
$query['author'] = get_current_user_id();
return $query;
}
add_action('wp_enqueue_scripts', 'CA_enqueue_scripts');
add_filter('ajax_query_attachments_args', 'CA_filter_media');`
JS:
(function($) {
$(document).ready( function() {
var file_frame;
$( '#upload_image' ).on( 'click', function( event ) {
event.preventDefault();
if ( file_frame ) {
file_frame.open();
return;
}
file_frame = wp.media.frames.file_frame = wp.media({
title: $( this ).data( 'uploader_title' ),
button: {
text: $( this ).data( 'uploader_button_text' ),
},
multiple: false // set this to true for multiple file selection
});
file_frame.on( 'select', function() {
attachment = file_frame.state().get('selection').first().toJSON();
console.log(attachment);
});
file_frame.open();
});
});
})(jQuery);
I have set granted 'upload, edit post' permissions to role using using User Role Editor plugin.
Thanks!

I resolved this issues installing https://wordpress.org/plugins/user-role-editor/,
then I realized that my CPT, the one that I created to be modified by this Role(Customer) was with capabilities of page. I modified on the plugin option..
Hope that helps you.

Related

The wp.customize object is not working for me

I used to add Customizer Panel, Section and Controles using the classic PHP Method, but, then I found Weston Ruter's post and found that the PHP method is just a wraper for wp.customize JavaScript object.
The post -> https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/.
I'm trying to create new panel, section and control using the wp.customize control on my custom theme, but IDK why I can't see any changes in the customizer.
In functions.php
function customize_preview_js() {
wp_enqueue_script( 'agilitywp-customizer', THEME_DIR . 'js/customizer-preview.js', array( 'customize-preview' ), VERSION, true );
}
add_action( 'customize_preview_init', 'customize_preview_js' );
In customizer-preview.js:
wp.customize.bind( 'ready', function() {
// Add a custom panel
wp.customize.panel.add( 'my_panel', {
title: 'My Panel',
priority: 10,
} );
// Add a custom section
wp.customize.section.add( 'my_section', {
title: 'My Section',
panel: 'my_panel',
priority: 10,
} );
// Add a custom control
const control = new wp.customize.Control( 'my_control', {
type: 'text',
label: 'My Control',
section: 'my_section',
settings: {
default: 'my_setting',
},
} );
wp.customize.add( control );
} );
I'm not sure if I' doing something wrong or I understand the Weston's post wrong. I'd appreciate all your help and discussion.
Thank you!

Button to display modal is not doing anything after moving to plugin

SELF SOLVED:
Simply needed to add document ready function to my script.
Originally I was using the same code but within my theme using:
add_action('wp_footer', function () {
wp_enqueue_script('modal', get_stylesheet_directory_uri() . '/modal.js', array(), '1.0', false);
});
and everything worked fine.
This morning I decided to move the script into my plugin and now the button does nothing.
I am getting nothing in console to help me debug this.
The script is registered and enqueued in the plugin:
wp_register_script( 'modal_script', plugin_dir_url( __FILE__ ) . 'js/modal.js', array('jquery'), '1.0', true );
wp_enqueue_script( 'modal_script' );
The button and classes:
<button onclick="anotherFunction()" class="trigger">Request Stamp</button>
<div class="modal">
<div class="modal-content">
<span class="close-button">x</span>
The modal.js:
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
Nothing in console after button click to help me debug, network shows the script is loaded from the new plugin location.
Any ideas?
Just added:
jQuery(document).ready(function(){
to my js and everything works.

How to change WP Gutenberg's category components panel?

In Gutenberg Editor, I try to modify the categories panel (the one on the right where I choose the categories my post will be placed into).
One should not be able to add a post to a category if that category has child-categories. As the categories are static, it'll be ok to use the category-id.
My idea was to use the enqueue_block_editor_assets and add some javascript to disable the checkbox via the ID of the element.
This does not work, the element could not be found :-(
This is my unfunctional code so far:
functions.php:
function gutenberg_enqueue()
{
wp_enqueue_script(
'gutenberg-additions-script',
get_stylesheet_directory_uri().'/gutenberg-additions.js',
array(), true, true
);
}
add_action('enqueue_block_editor_assets', 'gutenberg_enqueue', 999);
(I use get_stylesheet_directory_uri(), because I am in a child theme)
gutenberg-additions.js:
window.onload = function () {
var cat1 = document.getElementById('editor-post-taxonomies-hierarchical-term-1');
if (cat1 != null) {
cat1.disabled = true;
}
Welcome to Stackoverflow. There is an example about that in the gutenberg github directory. It is written in the old es5 syntax, but should easily be transferrable to esnext. It uses the editor.PostTaxonomyType filter to edit the taxonomies component.
var el = wp.element.createElement;
function customizeProductTypeSelector( OriginalComponent ) {
return function( props ) {
if ( props.slug === 'product-type' ) {
return el(
'div',
{},
'Product Type Selector'
);
} else {
return el(
OriginalComponent,
props
);
}
}
};
wp.hooks.addFilter(
'editor.PostTaxonomyType',
'my-custom-plugin',
customizeProductTypeSelector
);
If you need more information, also read the comments on this github issue.

TinyMCE wordpress, custom button does not show up

I created a plugin in wordpress to add a button to the TinyMCE. I have at the moment the code below which follows very strictly the example here:
https://www.gavick.com/blog/wordpress-tinymce-custom-buttons#tc-section-1
Php file
< ? php
/*
Plugin Name: TinyMCE Custom Buttons
Plugin URI:
Description:
Version:
Author:
Author URI:
License:
License URI:
*/
//Hook the button on init, so after loading wordpress
add_action('init', 'add_button1234');
//add filters within th function which loads after loading wordpress
function add_button1234() {
// add new buttons
add_filter('mce_buttons', 'myplugin_register_buttons1234');
// Load the TinyMCE plugin
add_filter('mce_external_plugins', 'register_1234');
}
//Add the newly created button to ithe $buttons array
function register_1234($buttons) {
array_push($buttons, 'separator', 'button1234');
return $buttons;
}
//create the button
function myplugin_register_tinymce_javascript1234($plugin_array) {
$plugin_array['button1234'] = plugins_url('plugin.js', __FILE__);
return $plugin_array;
}
?>
javascript file
(function() {
tinymce.PluginManager.add('button1234', function(editor, url) {
editor.addButton('button1234', {
text: 'My test button',
icon : false,
onclick : function() {
editor.insertContent('Hello World!');
}
});
});
})();
Also when I follow exactly the code from the site (only adapting the JS url, it doesn't work.) What could I possible have done wrong?
It looks like you might not be calling the right function when adding the filter mce_buttons in the add_button1234() function.
Change this line:
add_filter( 'mce_buttons', 'myplugin_register_buttons1234' );
To:
add_filter( 'mce_buttons', 'myplugin_register_tinymce_javascript1234' );

Creating a custom plugin to add a discount to woocommerce products

I currently have a wordpress site setup using woocommerce and gravity forms plugins. I am selling bike wheels and on my product page I use gravity forms to display different customization options. the options are different if they select one wheel or two wheels.
What I'm trying to achieve
I want to add a 5% discount if two wheels are selected and 10% if four+ are selected. This discount is applied to the product as it is added to the cart.
I am attempting to create a custom plugin that uses javascript to get the value from the gravity forms input, and hooks into woocommerce to edit the total price before adding it to the cart.
What I have so far
custom.js
jQuery(document).ready(function () {
jQuery('.cart').submit(function () {
var noOfWheels = jQuery(".rdoWheel input[type='radio']:checked").val();
console.log(noOfWheels)
var data = {
action: 'my_discount',
wheels: noOfWheels
};
jQuery.ajax({
type: 'POST',
url: discountAjax.ajax_url,
data: data,
success: function (data) {
//do nothing
},
});
return false;
});
});
discount.php
add_action('wp_enqueue_scripts', 'load_script');
function load_script() {
wp_enqueue_script('discount', plugin_dir_url( __FILE__ ) . 'custom/custom.js', array( 'jquery' ) );
wp_localize_script('discount', 'discountAjax', array('ajaxurl' => admin_url('admin-ajax.php')));
}
add_action('wp_ajax_woocommerce_discount', 'calculate', 10);
add_action('wp_ajax_nopriv_woocommerce_discount', 'calculate', 10);
function calculate() {
if (isset($_POST['wheels'])) {
global $woocommerce;
$wheels = $_POST['wheels'];
if ($wheels === "1") {
$val = 0;
} elseif ($wheels === "2"){
$val = 10;
}
session_start();
$_SESSION['val'] = $val;
}
}
add_action('woocommerce_before_calculate_totals', 'add_discount');
function add_discount( $cart_object) {
#session_start();
if (isset($_SESSION['val'])) {
$wheels = $_SESSION['val'];
foreach ( $cart_object->cart_contents as $key => $value ) {
$c_price = $value['data']->price;
$discountAmount = $c_price * $wheels/100;
$value['data']->price = $value['data']->price - $discountAmount;
}
//for testing purpose
echo $_SESSION['val'];
echo 'completed';
unset($_SESSION['val']);
}
}
whats happening
It seems the woocommerce function is not firing at all. when i check with firebug I see my ajax request go through okay then nothing else. If i remove everything except for the add_discount function then it goes through and applies the discount. I cant seem to get it to work with javascript/ajax.

Resources