Javascript code inside "<# #>" in core WordPress files .php

I found some interesting embeding JavaScript mix with HTML in WordPress php files, for instance: &lt;?php // Template for the Attachment Details two columns layout. ?&gt; &lt;script type=&quot;text/html&quot; id=&quot;tmpl-attachment-details-two-column&quot;&gt; &lt;div class=&quot;attachment-media-view {{ data.orientation }}&quot;&gt; &lt;h2 class=&quot;screen-reader-text&quot;&gt;&lt;?php _e( 'Attachment Preview' ); ?&gt;&lt;/h2&gt; &lt;div class=&quot;thumbnail thumbnail-{{ data.type }}&quot;&gt; &lt;# if ( data.uploading ) { #&gt; &lt;div class=&quot;media-progress-bar&quot;&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt; &lt;# } else if ( data.sizes &amp;&amp; data.sizes.large ) { #&gt; &lt;img class=&quot;details-image&quot; src=&quot;{{ data.sizes.large.url }}&quot; draggable=&quot;false&quot; alt=&quot;&quot; /&gt; &lt;# } else if ( data.sizes …
Category: Web

Hook into backbone to add js to wp-admin -> media library?

I've enqueued a .js file on the "Media Library" page (upload.php). I need to hide and manipulate a few of the thumbnails on the page using JS only ( I'm not looking for workarounds ). The elements on the page are being rendered by backbone and I have found no way so far to hook into it. In any window/document state, $('li.attachment').hide() function for example won't do it's job because of this. I have tried going with the following piece …
Category: Web

How to use underscore.js in WordPress Admin

I am trying to use underscore in my WordPress Admin. This is what I have done: I enqueue a script in the very end of the page, like so: function load_admin_scripts() { wp_enqueue_script( "my-admin", get_template_directory_uri() . "/assets/scripts/admin.js", array('jquery', 'wp-util'), null, true ); } add_action('admin_enqueue_scripts', 'load_admin_scripts'); ...then in the script file, I am at the moment only trying this: console.log( jQuery ); // is defined console.log( underscore ); // ReferenceError: underscore is not defined(…) Can anyone point me to the solution …
Category: Web

How to Dequeue All WordPress Assets

I want to dequeue all styles and scripts that are loaded on the front-end (EG. not the admin panel) by default. I found this function, but am not sure how to utilize it to accomplish my goal. I'm seeing a ton of assets that I don't need on the front end, loaded by WP core: For example: backbone.js jquery UI jquery UI datepicker 5 different mediaelement assets (js + css) underscore.js wp-embed js wp-util js
Category: Web

Issue with using Underscore in Wordpress

I have read in another SO post that Underscore.js is including in Wordpress by default. I am using it to test if a variable is defined but get this in the browser console: pluginAdminPage.js:32 Uncaught ReferenceError: _ is not defined at pluginAdminPage.js:32 (anonymous) @ pluginAdminPage.js:32 _.VERSION // .VERSION even autofills. So then the browser has the library imported? "1.8.3" The code it refers to: if (_.isUndefined(module) === false) { module.exports.func = func; } Phpstorm lints _ and isUndefined yellow which …
Category: Web

underscore template dynamically remove row Jquery

I have this underscore template to add and delete row : &lt;# jQuery( document ).ready( function() { jQuery( '.add-ingr' ).click( function() { jQuery( '#re-ingr .ingr' ).append( '&lt;div&gt;&lt;input type="text" name="ingr[]" value=""/&gt;&lt;a href="#" class="remove_field" style="margin-left:10px;"&gt;Remove&lt;/a&gt;&lt;div&gt;'); }); jQuery( '.remove_field' ).on("click", function(e){ e.preventDefault(); jQuery(this).parent('div').remove(); }); }); #&gt; the add row with remove link works , it generates the good html output: &lt;div&gt;&lt;input type="text" name="ingredients[]" value=""&gt;&lt;a href="#" class="remove_field" style="margin-left:10px;"&gt;Remove&lt;/a&gt;&lt;div&gt;&lt;/div&gt; &lt;/div&gt; But not the remove , nothing happen when i click on the remove hyperlink Any …
Category: Web

Render repeatable widget fields properly with Backbone.js

I wanted to create widgets with repeatable fields for testimonials, time tables etc.. I recently stumbled up on this tutorial from codeable.io. I have some good experience with standard backbone.js as well. I completed the tutorial and implemented it. This tutorial uses backbone.js/ underscore.js template engine to render repeatable fields. Here is the widget code and corresponding backbone.js script. However there is one problem that is making me sleepless since a week. Widget is working properly only after hitting the …
Category: Web

WP Customizer JS Template not saving color field

I'm trying to create a custom typography control, I'm having problem saving the value of the color, please take a look at my code: &lt;?php class Customizer_Typo_Control_Typography extends WP_Customize_Control { /** * The type of customize control being rendered. */ public $type = 'typography'; /** * Array */ public $l10n = array(); /** * Set up our control. */ public function __construct( $manager, $id, $args = array() ) { // Let the parent class do its thing. parent::__construct( $manager, $id, …
Category: Web

Replace Underscore (_) on Space ( )

I use the plugin "Auto Post With Image Upload" For example I load an image with name "Image_Name" then plugin creates a post with name "Image_Name" Now the question: How to remove Underscore (_) in post title Tell me "where to dig"? I know that there are such a function "str_replace". Where apply it? Here is a piece of code: $postData = array( 'post_title' =&gt; $attachment-&gt;post_title, 'post_type' =&gt; 'post', 'post_content' =&gt; $image_tag, 'post_category' =&gt; array('0'), 'post_status' =&gt; 'publish' ); P.S. …
Category: Web

Open media frame and select an attachment

I'm using the following piece of code to open a media frame when clicking a link with a data-attachment_id attribute. This attribute holds the id of an attachment that I want to select when the frame opens: jQuery(document).ready(function($){ $( '#gallery_images_container' ).on( 'click', 'a.edit', function( event ) { var $el = $( this ); var selected = $( this ).attr( 'data-attachment_id' ); event.preventDefault(); // If the media frame already exists, reopen it. if ( gallery_items_frame ) { // Select the attachment …
Category: Web

Remove H1 / title / Underscore - without CSS

I have tried searching, and tried a few options, but I'm not able to remove the H1 / title / Underscore for specific pages. I don't want use CSS. I would like to remove it via functions.php or in content.php. I'm not good in PHP, so the Codex didn't help me too much. I need something like this: if &gt; page slugs / IDs &gt; do not display H1/ title Can anybody help? Thanks.
Category: Web

Can I add custom attributes while adding inline scripts?

I need to inject some underscore templates into admin screen without modifying the core. The templates look like this: &lt;script type="text/template" id="template-123"&gt; &lt;div class="section intro"&gt; {{{ data.section.intro }}} &lt;/div&gt; &lt;div class="section content"&gt; {{{ data.section.content }}} &lt;/div&gt; ... &lt;/script&gt; All templates depend on certain script handle, so I thought about using wp_add_inline_script() but it doesn't allow me to specify type and id attribute. So, is there a hacky solution to add that attributes while adding inline scripts? Or There's a better …
Category: Web

What type of template are WP media-modal's templates?

I was looking at the Wordpress templates (html that's written to the page instead of awkwardly adding strings in JS). There are a lot of templates like this in a post editor for example: &lt;script type="text/html" id="tmpl-uploader-status-error"&gt; &lt;span class="upload-error-filename"&gt;{{{ data.filename }}}&lt;/span&gt; &lt;span class="upload-error-message"&gt;{{ data.message }}&lt;/span&gt; &lt;/script&gt; Now, I know these can be referenced with wp.media.template('uploader-status-error')( data ) to get html rendered for example, but what type of template is this? I would think this would be underscore since wp-views are …
Category: Web

Customizer Ajax

This is the JavaScript code used in the underscores theme to preview any change of the setting value without reloading the previewer: // Site title and description. wp.customize( 'blogname', function( value ) { value.bind( function( to ) { $( '.site-title a' ).text( to ); } ); } ); Instead of using this (from the code above): value.bind( function( to ) { $( '.site-title a' ).text( to ); } ); Can I use the following? function ( value ) { $( …
Category: Web

Getting custom post type author and date published

In underscores I can get my custom post type just fine with pre get posts along regular blog posts. However the date published and author does not display. How can I modify my template tag (themeslug_posted_on) to show them as well? My pre get posts filter: add_filter( 'pre_get_posts', 'get_my_cpt' ); function get_my_cpt( $query ) { if ( is_archive() || is_search() || is_home() && $query->is_main_query() ) $query->set( 'post_type', array( 'post', 'my_cpt' ) ); return $query; } The underscores I'd like to …
Category: Web

Using Underscore Templates in WordPress

I've noticed that since WP 3.5 that we now have the Backbone.js and Underscore.js libraries included. The new Media Modal uses Underscore templates and I was wondering how would I be able to insert them, especially in the admin side of things.Is there a correct way to insert these?
Category: Web

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.