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!
Related
I am trying to add language switch links in my WordPress gutenberg so that I can switch to the corresponding language edit page easily.
I follow this step: https://developer.wordpress.org/block-editor/developers/slotfills/plugin-document-setting-panel/.
The "Language Switcher" section appears successfully, but I don't know how I can add the edit links.
My ideas are:
To get the edit link, we need to know the post_id.
The post names are consistent among the whole websites, say, a post is in language1.example.com/post1, then it has language2.example.com/post1, language3.example.com/post1, and so on...
So, I need to get the post name first, then get the post id for the other languages, and then save them into a list of links.
However, I am stuck with step 3, I don't know how to get the post name properly...
Below is my code:
import { registerPlugin } from '#wordpress/plugins';
import { PluginDocumentSettingPanel } from '#wordpress/edit-post';
const { select } = wp.data;
const title = select("core/editor").getEditedPostAttribute( 'title' );
const languageSwitcher = () => (
<PluginDocumentSettingPanel
name="custom-panel"
title="Language Switcher"
className="custom-panel"
>
<a>English {title}</a>
<a>简体中文</a>
<a>繁體中文</a>
</PluginDocumentSettingPanel>
);
registerPlugin( 'language-switcher', {
render: languageSwitcher,
icon: 'translation',
} );
Now, select("core/editor").getEditedPostAttribute( 'title' ) returns undefined...
I really appreciate your help! Thank you!
Have you tried adding wp-data to your wp_enqueue_script.
Ex:
wp_enqueue_script(
'your-doc',
plugins_url( 'build/yourDoc.js', __DIR__ ),
[ 'wp-i18n', 'wp-edit-post', 'wp-element', 'wp-data' ],
'0.0.1',
true
);
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.
I'd like to extend the WordPress shortcode Edit button and have my own functionality onClick and at the same time don't lose/overwrite the one the WordPress has.
Here is the code I have right now (which works) but this overwrites the WordPress onClick which doesn't work any more and obviously I don't want to have that.
editor.addButton( 'wp_view_edit', {
tooltip : 'Edit',
icon : 'dashicon dashicons-edit',
onclick : function() {
// here goes my code for custom functionality
}
} );
And here is the original code from WP found in /wp-incldes/js/tinymcs/plugins/wp-view/plugins.js
editor.addButton( 'wp_view_edit', {
tooltip: 'Edit|button', // '|button' is not displayed, only used for context
icon: 'dashicon dashicons-edit',
onclick: function() {
var node = editor.selection.getNode();
if ( isView( node ) ) {
wp.mce.views.edit( editor, node );
}
}
} );
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.
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' );