How Do I Make a Shortcode Flexible In Classicpress

Devrealm_Guy · July 14, 2019, 3:19pm

I just created a custom shortcode in Classicpress where I would be able to implement a tabber functionality, I implemented the tabber functionality because it would be difficult to manage HTML tags.

This is how I structured the shortcode to display my preferred output in the editor:

[tabsdiv]

  [tabsnavul]
    [tabsnavli1]
    [/tabsnavli1]
    [tabsnavli2]
    [/tabsnavli2]
    [tabsnavli3]
    [/tabsnavli3]
  [/tabsnavul]

  [tabsul]
    [tabsli]*ClassicPress Community is the best...*[/tabsli]
    [tabsli2 id = "tab-cons"]...[/tabsli2]
    [tabsli2 id = "tab-opi"]...[/tabsli2]
   [/tabsul]  

[/tabsdiv]

And this is my output on the frontend:

My question: Is there some ways I can make the shortcode dynamic, for example; displaying a form where I would be able to input all this without adding lots of shortcodes as displayed above (not overkill thou).

What I would love to implement in my theme is a form in the classicpress editor where I would be able to input the description/text of the three tabs, and it would then automatically convert it into the shortcodes.

Hopefully, someone could point me in the right directions, so I will embark on my journey! Thanks

wadestriebel · July 14, 2019, 4:15pm

I think you can look at how @anon71687268 did his Timeless Text plugin, that allows you to do something like below (taken from the readme):

I'm [years-since y=1990 m=5 d=16] old.

Here is the link to the plugin page.

PS. I like the example opinions

Devrealm_Guy · July 14, 2019, 4:26pm

I just went through the readme, it’s neat but it’s not what I am looking for, I already completed the shortcodes, and they are working as you see in the example. Just need some type of form to fill in the dash.

E.g

Click some sort of button in the editor → form pop-up, → enter description for “Pros”
Click … for “Cons”
Click …for “Opi”

Then the shortcodes automatically fill themselves

Ps. The example opinion is simply true for me

anon71687268 · July 14, 2019, 4:37pm

It sounds to me like what you’re looking for is a shortcode button (for lack of a better term.)

This would place a button on the editor which, when clicked, would open a dialog containing your form. Populating the fields and submitting the form then causes the shortcode to be generated with your settings (from the form) and added to the post content.

If that is what you’re after, check Google for “wordpress custom shortcode button” (or similar). It’s been awhile since I’ve used the functionality, but, originally learned it from a random tutorial.

Devrealm_Guy · July 14, 2019, 4:40pm

Exactly what I am looking for, the issue is that I don’t the term to search, thanks! Gat to dig in

anon71687268 · July 14, 2019, 4:46pm

Note that this functionality should not be added to a theme. It should be added to a utility plugin.

Devrealm_Guy · July 14, 2019, 5:00pm

hmm, It’s a custom theme, and I am kinda hating on plugins nowadays, is there any downside to hard-coding it into my theme?

anon71687268 · July 14, 2019, 5:06pm

I mean, those are reasons…just, not good ones.

You are creating content (even though you’re also creating layout) – it belongs in a plugin. Shortcodes do not belong in themes. And yes, there are downsides. Read the article I previously linked and you’ll be up to speed.

Of course, you’re free to do it however you like. Just wanted to mention that putting it in a plugin is actually the right way to do it.

norske · July 14, 2019, 7:04pm

You can use custom fields. The most simple way is to install Advanced Custom Fields, make a wisiwig-field for each tab and then output that content using acf shortcode (or yout own custom function, or …).

Here is the relative example from one of my sites (don’t mind the language). I have 30+ custom fields there for a custom post type named ‘tour’. Fields are organized in several tabs: prices, hotels, programs etc. Some fields are connected to shortcodes. So I can insert one field to another in a very fluid manner.

Also don’t mind that single hotels are shortcodes in my case, it’s particular and I use crazy custom functionality there. You don’t need all that, just paste texts in 3 separate fields and use them as 3 shortcodes in main editor.

P.S. Actually, I don’t use default “[acf…]” shortcodes myself as I have custom alternative. But theoretically this method can solve your problem without writing any code at all.

Devrealm_Guy · July 14, 2019, 9:03pm

This looks great, would check it out, thanks.

fwolf · July 14, 2019, 9:04pm

Isnt the tab feature of ACF only available in ACF Pro? That’d be a useful info to point out.
Aside of that: Yep. Easily done.

cu, w0lf.

Devrealm_Guy · July 14, 2019, 9:07pm

oh I see, I have been figuring out some ways to implement the function, I’ll post here if I am successful

norske · July 14, 2019, 10:25pm

Those tabs are just slugs for grouping fields in admin area and they are available in free version (checked v5.8.0 non-pro). Unless you mean tabs inside the repeater block which is pro-only itself.

I supposed that frontend markup already exists and the question is about input, not output. But anyway, it can be generated within a single shortcode function. Kinda…

function my_shortcode( $atts ) {
    global $post;
    $atts = shortcode_atts( array(
        // ... some params ...
    ), $atts, 'my_shortcode' );

    $tab_fields = array(
        'Pros'     => get_field( 'pros', $post->ID ),
        'Cons'     => get_field( 'cons', $post->ID ),
        'Opinions' => get_field( 'opinions', $post->ID ),
    );
        
    $tabs = '';
    $headings = '';
    foreach ( $tab_fields as $heading => $content ) :
        $headings .= "<li>$heading</li>";
        $tabs .= "<div class='tab'>$content</div>";
    endforeach;
	
    return "<ul class='tab-headings'>$headings</ul><div class='tabs'>$tabs</div>";
}
add_shortcode( 'my-shortcode', 'my_shortcode' );

Then single [my-shortcode] outputs everything at once.

I mean, there is no real need in specific “tab field” functionality. Just 3 common fields with content (wisiwyg or textarea) and something that outputs them within prefered frontend markup (shortcode, template, block - whatever).

(This supposed to be an answer for your question @fwolf, but I also try to give some starting point to @Devrealm_Guy + I’m half asleep, so my apologize for writiing things that maybe obvious).

fwolf · July 15, 2019, 12:25am

Interesting. Guess the ACF folks must have added this at some point to the free. Cool

cu, w0lf.

Devrealm_Guy · July 15, 2019, 5:43am

Thanks for the snippet and the tips you gave me, I have been able to solve the editor’s button, Never knew it was somewhat easy (Obviously researching endlessly).

I still have a question at the bottom of this message, so I’ll give a detail on how I did it, hopefully, someone can help out.

I added the button into functions.php and included the js template URL where the control will be located.

/**-------------------------- TinyMCE Buttons For ChickenWingTabs --------------------------------*/

if ( ! function_exists( 'mytheme_buttons' ) ) {
    function mytheme_buttons() {
        if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
            return;
        }

        if ( get_user_option( 'rich_editing' ) !== 'true' ) {
            return;
        }

        add_filter( 'mce_external_plugins', 'mytheme_add_buttons' );
        add_filter( 'mce_buttons', 'mytheme_register_buttons' );
    }
}

if ( ! function_exists( 'mytheme_add_buttons' ) ) {
    function mytheme_add_buttons( $plugin_array ) {
        $plugin_array['mybutton'] = get_template_directory_uri().'/js/chickenwingstabs/tinymce_buttons.js';
        return $plugin_array;...................

I added the necessary controls to my button:

            body: [
                {
                    type   : 'textbox',
                    name   : 'textbox',
                    label  : 'Pros',
                    tooltip: 'Add something useful for the text',
                    value  : 'The Pros Goes on this one...'
                },
                
                {
                    type   : 'textbox',
                    name   : 'textbox2'....................

On closing the modal window the button should add (I have added lots of breaks and spacing, it seems I got something wrong, not sure):

onsubmit: function( e ) {
                        
            editor.insertContent( '[tabsdiv]' +
                                    ' <br> ' + ' <br> ' +          
                                ' &nbsp; ' + ' &nbsp; ' +
                                       ' [tabsnavul] ' +
                                      ' <br> ' +
                                  ' &nbsp; ' + ' &nbsp; ' + ' &nbsp; ' + ' &nbsp; ' +
                                        ' [tabsnavli1] ' 
                                          ..............
                                          ..............
                                        ' [/tabsnavul] ' +
                                    ' &nbsp; ' + ' &nbsp; ' +
                                              
/**------------------- Break, Now We Move To The Content Part ----------------------- */                              
                                              
                                  ' <br> ' +
                                    ' &nbsp; ' + ' &nbsp; ' +
                                        ' [tabsul] ' +
                                   ' <br> ' +
                                    ' &nbsp; ' + ' &nbsp; ' + ' &nbsp; ' + ' &nbsp; ' +
                                        ' [tabsli] ' +
                                    ' <br> ' +
                                   ' &nbsp; ' + ' &nbsp; ' + ' &nbsp; ' + ' &nbsp; ' 
                                           + e.data.textbox2 +
                                            ' <br> ' +
                                            ' &nbsp; ' + ' &nbsp; ' + ' &nbsp; ' + ' &nbsp; ' +
                                            ' [/tabsli] ' +
                                             ..............
                                             ..............
                                              
                                      ' <br> ' + ' <br> ' +
                                    '[/tabsdiv]'  );

Outputs:

The Shortcodes aligned as expected on clicking the OK button:

My Question is that: Why are the spaces removed whenever I reload the browser:

james · July 23, 2019, 5:49pm

My guess: wpautop() – Function | Developer.WordPress.org

I wish we could get rid of this, but it would be a very big job. In the meantime it is best not to rely on a specific indentation.

Devrealm_Guy · July 23, 2019, 8:34pm

No problem with that, I am already using it as is, I am not relying on any indentation for now, I was just curious about that. After Some research, it seems it is usual. Thanks!