I want to make it more obvious for a the editor that they need to click the UPDATE button after they made any changes to a wordpress page.
If a class can be added to the UPDATE button once any field, be it title, description or a custom field, has changed, then I can change the colour or make it pulsate.
Thank you
This goes into the functions.php of your child theme. To make your own animation you have to insert the CSS inside the Tag in the code snippet.
add_action('admin_head', 'orders_list_preview_css');
function orders_list_preview_css() {
echo "<script>
jQuery(document).ready(function($) {
$('body').on('keydown', '*[contenteditable=\"true\"]', function() {
if ($('.editor-post-publish-button.clicktoupdate').length < 1) {
$('.editor-post-publish-button').addClass('clicktoupdate')}
})
$('body').on('keydown', 'input', function() {
if ($('.editor-post-publish-button.clicktoupdate').length < 1) {
$('.editor-post-publish-button').addClass('clicktoupdate')}
})
})</script>";
echo "<style>/*cssgoeshere*/</style>";
Related
I have the below code. I need a button like add media in the edit page of admin, in which on click shows a popup and displays my custom html with a form in it.
I tried with below but I am getting the unnecessary things like Upload files tab, Media library tab etc., I don't need all these but I just need my custom form on button clicked.
index.php
function add_cp_media_button() {
echo 'cp Forms';
}
function include_cp_media_button_js_file() {
wp_enqueue_script('media_button', plugins_url( '/js/cp.js', __FILE__ ), array('jquery'), '1.0', true);
}
add_action('wp_enqueue_media', 'include_cp_media_button_js_file');
cp.js
jQuery(function($) {
$(document).ready(function(){
$('#cp-forms-btn').click(open_media_window);
});
function open_media_window() {
//I want to display the form with select drop down with my names populated in the dropdown, after selecting the item, I need to insert the text to the editor.
}
});
Could someone help me on this
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 );
}
}
} );
Woocommerce displays the product gallery on a lightbox or new tab by default. I would like to display the product gallery on the box where the product image is displayed. I tried WooCommerce Dynamic Gallery but the LITE version doesn't allow me to display all the product gallery images on each product. Also, it displays the image on the product description.
Can anyone suggest me a wordpress plugin or coding that can display the product gallery dynamically ? Thanks a lot.
It's possible with some straightforward jquery (see below). You'll also need to override the default lightbox that WooCommerce includes for the gallery.
I believe that it's possible to disable it from the admin under WC -> Settings -> Products -> Display. But you can also remove the styles and scripts directly.
I haven't tested this code on a fresh install of WooCommerce--this is some modified code from a site with a heavily customized product gallery that includes video support.
You'll need to include this in your theme's functons.php file, etc. etc.
add_action( 'wp_enqueue_scripts', 'wc_remove_lightboxes', 99 );
/**
* Remove WooCommerce default prettyphoto lightbox
*/
function wc_remove_lightboxes() {
// Styles
wp_dequeue_style( 'woocommerce_prettyPhoto_css' );
// Scripts
wp_dequeue_script( 'prettyPhoto' );
wp_dequeue_script( 'prettyPhoto-init' );
wp_dequeue_script( 'fancybox' );
wp_dequeue_script( 'enable-lightbox' );
}
/* Customize Product Gallery */
/**
* Click on thumbnail to view image for single product page gallery. Includes
* responsive image support using 'srcset' attribute introduced in WP 4.4
* #link https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/
*/
add_action( 'wp_footer', 'wc_gallery_override' );
function wc_gallery_override()
{
// Only include if we're on a single product page.
if (is_product()) {
?>
<script type="text/javascript">
( function( $ ) {
// Override default behavior
$('.woocommerce-main-image').on('click', function( event ) {
event.preventDefault();
});
// Find the individual thumbnail images
var thumblink = $( '.thumbnails .zoom' );
// Add our active class to the first thumb which will already be displayed
//on page load.
thumblink.first().addClass('active');
thumblink.on( 'click', function( event ) {
// Override default behavior on click.
event.preventDefault();
// We'll generate all our attributes for the new main
// image from the thumbnail.
var thumb = $(this).find('img');
// The new main image url is formed from the thumbnail src by removing
// the dimensions appended to the file name.
var photo_fullsize = thumb.attr('src').replace('-300x300','');
// srcset attributes are associated with thumbnail img. We'll need to also change them.
var photo_srcset = thumb.attr('srcset');
// Retrieve alt attribute for use in main image.
var alt = thumb.attr('alt');
// If the selected thumb already has the .active class do nothing.
if ($(this).hasClass('active')) {
return false;
} else {
// Remove .active class from previously selected thumb.
thumblink.removeClass('active');
// Add .active class to new thumb.
$(this).addClass('active');
// Fadeout main image and replace various attributes with those defined above. Once the image is loaded we'll make it visible.
$('.woocommerce-main-image img').css( 'opacity', '0' ).attr('src', photo_fullsize).attr('srcset', photo_srcset).attr('alt', alt).load(function() {
$(this).animate({ opacity: 1 });
});
return false;
}
});
} )( jQuery );
</script>
<?php
}
}
I'm looking for a WP function that add the Read-only parameter to all Pages's Titles's input, that will make the Page's title unalterable.
Thanks a lot in advance.
This can be accomplished with some simple JavaScript/jQuery. Create a file called admin_title_disable.js, and queue it up within functions.php. For example:
functions.php:
wp_register_script('admin_title_disable', '/path/to/admin_title_disable.js');
function disableAdminTitle () {
wp_enqueue_script('admin_title_disable');
}
add_action('admin_enqueue_scripts', 'disableAdminTitle');
Now, in your js file:
jQuery(document).ready(function ($) {
$('#title').attr('disabled','disabled');
});
This will set both post and page title input fields with a disabled attribute. Hope this helps!
If you want to restrict this script to a particular admin page, wrap the add_action hook in a conditional that compares $_GET['page']. You can also take advantage of the $hook parameter that is available when using admin_enqueue_scripts to check for the page. See here.
Update::
WordPress makes it a little tricky to tell between post and page edit screens, but there is a hidden input that you can take advantage of. :) Here's an updated version of the jQuery that will only run on page edit screens:
jQuery(document).ready(function ($) {
//find the hidden post type input, and grab the value
if($('#post_type').val() === 'page'){
$('#title').attr('disabled','disabled');
}
});
No need to make a seperate js file. Adding this to your function.php will do the same that Matthew showed.
function admin_footer_hook(){
?>
<script type="text/javascript">
if(jQuery('#post_type').val() === 'post'){
jQuery('#title').prop('disabled', true);
}
</script>
<?php
}
add_action( 'admin_footer-post.php', 'admin_footer_hook' );
This Solution Will disable clicking on the post title and editing it using CSS. CSS targets post type "page" only. It has been tested on Gutenberg visual editor. Users Can still edit title from "Quick Edit".
Add this code to your functions.php file.
function disable_title_edit() {
if(!current_user_can('administrator')){
if( !current_user_can('administrator')){ ////Only allow Admin
echo '<style>.post-type-page .edit-post-visual-editor__post-title-wrapper{
pointer-events: none;
}</style>'; } }
}
add_action('admin_head', 'disable_title_edit', 100);
I can create the metaboxes just fine and if I assign a metabox to a specific template(s), they appear just fine in the Add New Page screen, but only after the new page has been saved.
Is there a way to show/hide the metabox when the template value has changed...without having to save the page first?
Add to WP admin page
jQuery(document).ready(function($) {
$("#page_template").live('change',function(){
var getCurrentTemplate = $("#page_template").val();
if( getCurrentTemplate == "template-contact.php"){
$("#pageheading-hide").attr('checked', true);
$("#pageheading").css({'display':'block'});
}
else{
$("#pageheading-hide").attr('checked', false);
$("#pageheading").css({'display':'none'});
}
});
});