wp query – Shortcode Not Working in Slider When Added To Post Title

I’ve coded a shortcode to add manually to specific post title fields so i can style part of a title

add_shortcode( 'green', 'green_shortcode' );
function green_shortcode( $atts, $content = 0 ) {

    $a = shortcode_atts( array(
        'class' => 'green',
    ), $atts );

    return '<span class="' . $a('class') . '">' . $content . '</span>';
}

This works on the single post titles but doesn’t parse the shortcode when pulling the title into a slider.

This is the messed up HTML output from the slider

<h2><a href="http://newlocal.local/this-is-a-featured-post-4/" title="This  is a Featured Post #4">This <span class="green"> is a Featured Post #4</span></a></h2>

Here’s a visual

enter image description here

I have added do_shortcode to the post title PHP but it doesn’t fix the problem

do_shortcode( get_the_title() );

The slider uses a WP_Query

new WP_Query( $query_args );

printf( '<h2><a href="%s" title="%s">%s</a></h2>', get_permalink(), the_title_attribute( 'echo=0' ), get_the_title() );

Display Custom Field Value Via Shortcode Inside Excerpt

I have the following function:

function dessert_function( $atts ) {

    $atts = shortcode_atts( array(
        'post_id' => get_queried_object_id(),
    ), $atts, 'dessert' );

    return dessert_meta( $atts('post_id'), 'dessert', true );
}

add_shortcode('dessert', 'dessert_function');

It allows to store a value inside a custom field 'dessert' and display that value using a shortcode (dessert) inside a post.

So if for a custom field dessert the value is cake.

I would like to be able to include a shortcode (dessert) inside an excerpt and for it to display cake.

At the moment when I save the article instead a shortcode it displays blank.

I am assuming it needs a filter.

I found a few solutions but none work.

For example:

add_filter('get_the_excerpt', 'do_shortcode');

php – Need help understanding ‘call shortcode in javascript’

I’m working on a website’s page that has about 20 PDF files. All those 20 PDF files are displayed with a “PDF viewer for Elementor” plugin in each separate template created using free “Elementor – Footer, Header & Blocks” plugin because I needed to paste shortcodes in tabs (tabs are simply named after their own PDF file simply for user to select which one he wants to read). I didn’t know how to display PDF’s in the page otherwise and selecting PDF file as an Image didn’t work and this is the approach I’ve come up with.

There is one problem though when you go to that page all those 20 templates with PDF’s are still being preloaded even though Elementor’s Tab widget hides them by default. This makes the user to wait quite some time for the PDF’s to appear. Better yet they sometimes don’t even show up but you can fix that if you refresh the page so I’m guessing that the server is overloading or something and as a result It doesn’t show up every time. I’m still a newbie student in this so I don’t know.

My approach to fix the page loading all the PDF’s was to use custom jQuery script and append templates shortcodes into html in which the result should be that the template with PDF that the user selects would start loading and showing only just then – when it’s selected by the user pressing a certain tab button.

Here’s my TABS html:

<div class="custom-tabs">
<button class="tabs" id="my-tabid1" data-target=".2019-METŲ-I-KETV">2019 METŲ I KETV.</button>
         <button class="tabs" id="my-tabid2"  data-target=".2018-METŲ-METINIS">
2018 METŲ METINIS</button>
         <button class="tabs" id="my-tabid3" data-target=".2018-METŲ-III-KETV">2018 METŲ III KETV.</button>
         
         </div>

PDF’s html:

<div class="2019-METŲ-I-KETV tab_content active" id="my-tab1">
           
        </div>

        <div class="2018-METŲ-METINIS tab_content" id="my-tab2">
          
        </div>

        <div class="2018-METŲ-III-KETV tab_content" id="my_tab3">
           
        </div>

And finally jQuery for this whole process:

var shortcodes = ( 
    '<?php echo do_shortcode ("(pafe-template id="823")"); ?>',
    
    '<?php echo do_shortcode ("(pafe-template id="890")"); ?>',
    
    '<?php echo do_shortcode ("(pafe-template id="893")"); ?>'
    
);

var target_strings = (
    
    '2019-METŲ-I-KETV',
    
    '2018-METŲ-METINIS',
    
    '2018-METŲ-III-KETV'
    
    );

jQuery('.tabs').on('click', function(){
          var target = jQuery(jQuery(this).data('target'));
          target.siblings().removeClass('active');
          target.addClass('active');
          console.log('test');
          var targettostring = target.attr('class');
          
          var i;
          for(i = 0; i < 3; i++){
              console.log('doing loop');
              console.log(targettostring);
              console.log(target_strings(i));
              if(targettostring.includes(target_strings(i))){
                  console.log('found a match');
                  jQuery(target).append(shortcodes(i));
                  
              }
              
          }
          
          
        });

At first in jQuery I only used shorter (pafe-template id="890") for “shortcodes” array. That’s before I’ve come across this Question:
call shortcode in javascript
I tried the php echo method for some reason before understanding that this goal is only achieved using AJAX method. This is the point where I need help.
I completely don’t understand the parts where @Douglas.Sesar wrote placeholders like:

jQuery.ajax({ url: yourSiteUrl + "/wp-admin/admin-ajax.php",

yourSiteUrl is literally my site url? It’s “https://ikiwi.website/telsiugaisrine” and it’s a placeholder which will change later (and + /veikla/ is the page of the website that has this whole pdf thing) so this means I’ll have to change yourSiteUrl and not that it’s a problem or anything but is there a way to automate this or something?

       'action':'your_ajax',
       'fn':'run_shortcode_function',
       'some_needed_value': jQuery('#input_for_needed_value').val()
       },

What is “data” here and what values do I write say in my case? What did he mean by #input_for_needed_value? Is this where I write my class or id of the desired div where I want to place and execute the shortcode template? I completely don’t understand what should I write here..

success: function(results){
        //do something with the results of the shortcode to the DOM
    },
    error: function(errorThrown){console.log(errorThrown);}
});// end of ajax

Do something with the results of the shortcode – is this something that’s optional to write like a console.log that I used in my jQuery before?

add_action('wp_ajax_nopriv_your_ajax', 'your_ajax_function');
add_action('wp_ajax_your_ajax', 'your_ajax_function');
function your_ajax_function(){ 

Didn’t I wrote back in data: action that my ajax is called “your_ajax”? Thats how I don’t understand any purpose and where do those lines in quotes come from because ‘your_ajax_function’ has extra ‘_function’ line especially everything else.
Same and even bigger questions in the next upcoming lines.

I’d greatly appreciate if someone could explain me how should I work with that example. Perhaps there is a Free Plugin that does this tabbing with ajax shortcodes? Haven’t really found one. I’m an absolute zero in php. I only know C and C++ well if we’re talking about back-end things. I get some sort of sense reading this php but it quickly fades with those ever changing and non repetitive quoted titles.

I hope I’m not asking too much or this isn’t cheesy in any way.
Appreciate any help regarding this!

tinymce – Adding image to visual editor popup for shortcode: changing image duplicates shortcode

I’ve written a small plugin to create a visual editor button and popup that inserts a shortcode representing a “media object”: image to right, text to left.

enter image description here

In the visual editor you click the button,

enter image description here

fill in the text in the popup,

enter image description here

choose the image

enter image description here

enter image description here

and hurrah:

enter image description here

The shortcode is correctly inserted into the editor, and the media view renders it nicely. (This is a reduced case for this question. The full popup has a heap of options.)

The only problem I have is if I want to edit the object and change the image.

If I edit the text, things are fine. If I change the image, then the whole thing inserts a second shortcode instead of replacing the first.

enter image description here

enter image description here

I suspect that clicking the Select Image button on the popup is changing the underlying insertion point or selection in the main editor, but I can’t for the life of me see how I can fix it.

Here’s my editor view JavaScript, taken from all the work done on shortcode popups by DT Baker a few years ago and still almost the only source of info on the Internet for this.

/* global tinyMCE */
(function($){
    var media = wp.media, shortcode_string = 'media_object';
    wp.mce = wp.mce "http://wordpress.stackexchange.com/" {};
    wp.mce.media_object = {
        shortcode_data: {},
        template: media.template( 'editor-media-object' ),
        getContent: function() {
            var options = this.shortcode.attrs.named;
            options.innercontent = this.shortcode.content;
            return this.template(options);
        },
        View: { // before WP 4.2:
            template: media.template( 'editor-media-object' ),
            postID: $('#post_ID').val(),
            initialize: function( options ) {
                this.shortcode = options.shortcode;
                wp.mce.media_object.shortcode_data = this.shortcode;
            },
            getHtml: function() {
                var options = this.shortcode.attrs.named;
                options.innercontent = this.shortcode.content;
                return this.template(options);
            }
        },
        edit: function( data ) {
            var shortcode_data = wp.shortcode.next(shortcode_string, data);
            var values = shortcode_data.shortcode.attrs.named;
            // var StrippedString = shortcode_data.shortcode.content.replace(/(<((^>)+)>)/ig,"http://wordpress.stackexchange.com/");
            var StrippedString = shortcode_data.shortcode.content.replace(/(<p(^>)+?>|<p>|</p>|<br>|</br>|<br/>|<br />)/img, "http://wordpress.stackexchange.com/");
            values.innercontent = StrippedString;
            // values.innercontent = shortcode_data.shortcode.content;
            values.imagehtml = '<img src="https://wordpress.stackexchange.com/" + values.image_url + "http://wordpress.stackexchange.com/" class="wp-image-' + values.image_id + "http://wordpress.stackexchange.com/" width=120 height=120 style="max-width: 120px; max-height: 120px;" />';
            wp.mce.media_object.popupwindow(tinyMCE.activeEditor, values);
        },
        // this is called from our tinymce plugin, also can call from our "edit" function above
        // wp.mce.boutique_banner.popupwindow(tinyMCE.activeEditor, "bird");
        popupwindow: function(editor, values, onsubmit_callback){
            values = values "http://wordpress.stackexchange.com/" ();
            if(typeof onsubmit_callback !== 'function'){
                onsubmit_callback = function( e ) {
                    // Insert content when the window form is submitted (this also replaces during edit, handy!)
                    var args = {
                            tag     : shortcode_string,
                            //type    : e.data.innercontent.length ? 'closed' : 'single',
                            content : e.data.innercontent,
                            type    : 'closed',
                            //type    : 'single',
                            //content : "http://wordpress.stackexchange.com/",
                            attrs : {
                                image_id    : e.data.image_id,
                                image_url   : e.data.image_url,
                                
                                
                            }
                        };
                    editor.insertContent( wp.shortcode.string( args ) );
                };
            }
            editor.windowManager.open( {
                title: 'Media Object',
                    body: (
                    
                    {
                        type: 'textbox',
                        name: 'innercontent',
                        multiline: true,
                        minWidth: 500,
                        minHeight: 100,
                        label: 'Main Text',
                        value: values.innercontent
                    },
                    
                    
                    {
                        type: 'textbox',
                        name: 'image_url',
                        label: 'Image',
                        id: 'my-image-box',
                        value: values.image_url
                    },
                    {
                        type: 'textbox',
                        name: 'imagehtml',
                        label: "http://wordpress.stackexchange.com/",
                        id: 'my-image-box-html',
                        hidden: true,
                        value: values.imagehtml
                    },
                    {
                        type: 'textbox',
                        name: 'image_id',
                        label: "http://wordpress.stackexchange.com/",
                        id: 'my-image-box-id',
                        hidden: true,
                        value: values.image_id
                    },
                    
{
                    type   : 'container',
                    minWidth: 120,
                    minHeight: 120,
                    
                    name   : 'container',
                    label  : "http://wordpress.stackexchange.com/",
                    id: 'my-image-container',
                    html   : values.imagehtml
                },
                
                    {
                        type: 'button',
                        name: 'selectimage',
                        text: 'Select Image',
                        onclick: function() {
                            window.mb = window.mb "http://wordpress.stackexchange.com/" {};

                            window.mb.frame = wp.media({
                                frame: 'post',
                                state: 'insert',
                                library : {
                                    type : 'image'
                                },
                                multiple: false
                            });

                            window.mb.frame.on('insert', function() {
                                var json = window.mb.frame.state().get('selection').first().toJSON();

                                if (0 > jQuery.trim(json.url.length)) {
                                    return;
                                }
console.log(json);
                                jQuery('#my-image-box-id').val(json.id);
                                jQuery('#my-image-box').val(json.sizes.medium.url);
                                //jQuery('#my-image-container').prepend('<img src="https://wordpress.stackexchange.com/" + json.url + "http://wordpress.stackexchange.com/" />');
                                jQuery('#my-image-container-body').empty().prepend('<img src="https://wordpress.stackexchange.com/" + json.sizes.medium.url + "http://wordpress.stackexchange.com/" width=120 height=120 style="max-width: 120px; max-height: 120px;" />');
                                imagehtml = '<img src="https://wordpress.stackexchange.com/" + json.sizes.medium.url + "http://wordpress.stackexchange.com/" class="wp-image-' + json.id + "http://wordpress.stackexchange.com/" />';
                                jQuery('#my-image-box-html').val(imagehtml);
                            });

                            window.mb.frame.open();
                        }
                    }),
                onsubmit: onsubmit_callback
            } );
        }
    };
    wp.mce.views.register( shortcode_string, wp.mce.media_object );
}(jQuery));

plugins – Shortcode don’t work ? An idea?

I want to create a shortcode where content is displayed if user meta is equal to a value

But i want multiple values possible

show content if usermeta firstname is cory or jeff or boris…

Exemple (usermeta_value usermeta=”firstname” uservalue=”Cory,Jeff,Boris”) show content (/usermeta_value)

function func_usermeta_value( $atts, $content = null )
if ( is_user_logged_in() ) { 
$user_meta = $atts('usermeta');
    $user_value = $atts('uservalue');
$allowed_value = explode(',', $user_value);

   
    $user_id = get_current_user_id(); 
    $user_data = get_userdata( $user_id ); 
    if ( strtolower($user_data->$user_meta) == strtolower($allowed_value) ) { 
        return do_shortcode($content); /* show content from shortcode */
    }
}
return '';
}
add_shortcode( 'usermeta_value', 'func_usermeta_value' );

Thx for your help

plugins – Shortcode to update user meta

Basically, you can’t show the button and update the meta at the same moment. This has to be done in two separate requests as follows:

  1. Show the button whereever you want. It needs to be a form that submits to the same page (or an ajax call to another URL, but let’s keep it simple for now).
  2. Read the value posted from the form.

Here is a simple implementation to make this work, but it can be way improved.

function wpses_385303_change_validate() {
    if (is_user_logged_in()) {
        $user_id = get_current_user_id();
        
        //If the form was posted (ie. the button was clicked) in a previous request
        if (isset($_POST('validate_user')) {
            if ($_POST('validate_user') == $user_id) {//A little bit of security
                if (update_user_meta( $user_id, 'User_meta_change', 'validated' )) {
                    return "<div class='user_updated'>Updated!</div>";
                } else {
                    return "<div class='user_updated error'>Not Updated!</div>";
                }
            }
        }
        
        //Show the form
        return "<form method='post'>
            <input type='hidden' name='validate_user' value='$user_id' />
            <input type='submit' value='Validate' />
            </form>";
        
    }
} 
add_shortcode('change_validate','wpses_385303_change_validate');

How can i display gallery shortcode output under Post text

so I have a shortcode for a gallery I’m using in the Single.php file for the single post pages.

The problem is that the gallery only shows either at the top of the page, or at the bottom.
I would like to show the gallery right under the text on the Single Post Page.

Is there a way to specify where the shortcode output displays? Thanks

Single.php:

if ( $post->post_status == 'publish' ) {
    $attachments = get_posts( array(
        'post_type' => 'attachment',
        'posts_per_page' => -1,
        'post_parent' => $post->ID,
        'exclude'     => get_post_thumbnail_id()
    ) );

    if ( $attachments ) {
        $atts = array();
        foreach ( $attachments as $attachment ) {
            $class = "post-attachment mime-" . sanitize_title( $attachment->post_mime_type );
            $thumbimg = wp_get_attachment_link( $attachment->ID, 'thumbnail-size', true );
            
            $atts() = $attachment->ID;                                  
        }
        $aantal = count($atts);

            echo do_shortcode('(av_gallery ids="' . implode(",", $atts) . '" type="slideshow" preview_size="large" crop_big_preview_thumbnail="avia-gallery-big-crop-thumb" thumb_size="portfolio" columns="' . implode(",", $aantal) . '" imagelink="lightbox" lazyload="avia_lazyload" av_uid="av-jgesnq4m" custom_class="av-gallery-style-")');
        
    }
}