1

I am trying to insert the result from a Get Param plugin and insert it into a calendly widget on a WP page.

In a code module, if I write the plugin syntax of: [urlparam param="Book" /]

-and- the url of the page is: https://www.example.com/booking/?Book=calendly.com/xxxxx

...it displays the result correctly: calendly.com/xxxxx

Now, when I try and place that plugin syntax in the same module within widget code, it doesn't honor the expected result. Widget code (notice the urlparam after data-url=):

<!-- Calendly inline widget begin -->
<div class="calendly-inline-widget" data-url="[urlparam param="Book" /]" style="min-width:320px;height:580px;"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>
<!-- Calendly inline widget end -->

Is there some kind of syntax I am missing for embedding this code within an inline widget code?

  • Thank you for the link. My apologies, I don't know PHP. Is PHP required in this case? – Bruce Christy Mar 13 '18 at 22:09
  • 1
    I think the underlying issue here is that shortcodes are not evaluated when placed inside HTML attributes. You could modify the template and output the necessary HTML using PHP and do_shortcode( '[urlparam param="Book" /]') as an alternative approach. – Dave Romsey Mar 13 '18 at 22:46
  • Thank you, Dave. I'm new to PHP but can get around inside Divi Builder with most code. The do_shortcode you suggested above—I assume—is not to be pasted into the calendly widget code, but somewhere in some PHP file? I appreciate your patience. – Bruce Christy Mar 13 '18 at 23:00
  • 1
    Yes, this code should be added to a template file. There are workarounds to execute PHP in widgets, but this is not recommended. Your code is close, but the results of do_shortcode() are returned, so they must be echo'd to appear as output. I've added a full example. – Dave Romsey Mar 13 '18 at 23:40
1

I think the underlying issue here is that shortcodes are not evaluated when placed inside HTML attributes. You could modify the template and output the necessary HTML using PHP and do_shortcode( '[urlparam param="Book" /]') as an alternative approach:

<!-- Calendly inline widget begin -->
<div class="calendly-inline-widget" data-url="<?php echo do_shortcode( '[urlparam param="Book" /]' ); ?>" style="min-width:320px;height:580px;"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>
<!-- Calendly inline widget end -->

Creating a plugin that contains a Calendly widget

Another approach is to create a widget that outputs the desired HTML.

The code below can then be wrapped into a plugin by saving it to a file named wpse-calendly.php in a directory named wpse-calendly. Then, copy our custom Calendly plugin into the plugins directory, activate the plugin, and add the widget to the desired widget area.

Note that this solution still relies on the urlparam shortcode to function properly.

/**
 * Register WPSE_Calendly widget.
 */
add_action( 'widgets_init', 'wpse_register_calendly_widget' );
function wpse_register_calendly_widget() {
    register_widget( 'WPSE_Calendly_Widget' );
}

/**
 * Adds WPSE_Calendly widget.
 */

/**
 * Core class used to implement a WPSE Calendly widget.
 *
 * @see WP_Widget
 */
class WPSE_Calendly_Widget extends WP_Widget {

    /**
     * Sets up a new WPSE Calendly widget instance.
     */
    public function __construct() {
        $widget_ops = array(
            'description' => __( 'Display Calendly Widget.', 'wpse_calendly' ),
        );
        parent::__construct( 'wpse_calendly', __( 'Calendly', 'wpse_calendly' ), $widget_ops );
    }

    /**
     * Outputs the content for the current Calendly widget instance.
     *
     * @param array $args     Display arguments including 'before_title', 'after_title',
     *                        'before_widget', and 'after_widget'.
     * @param array $instance Settings for the current Calendly widget instance.
     */
    public function widget( $args, $instance ) {
        if ( ! empty( $instance['title'] ) ) {
            $title = $instance['title'];
        }

        // Bail if the urlparam shortcode has not been registered.
        if ( ! shortcode_exists( 'urlparam' ) ) {
            return;
        }

        /** This filter is documented in wp-includes/widgets/class-wp-widget-pages.php */
        $title = apply_filters( 'widget_title', $title, $instance, $this->id_base );

        echo $args['before_widget'];
        if ( $title ) {
            echo $args['before_title'] . $title . $args['after_title'];
        }

        ?>
<!-- Calendly inline widget begin -->
<div class="calendly-inline-widget" data-url="<?php echo do_shortcode( '[urlparam param="Book" /]' ); ?>" style="min-width:320px;height:580px;"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>
<!-- Calendly inline widget end -->
        <?php

        echo $args['after_widget'];
    }

    /**
     * Handles updating settings for the current Calendly widget instance.
     *
     * @param array $new_instance New settings for this instance as input by the user via
     *                            WP_Widget::form().
     * @param array $old_instance Old settings for this instance.
     * @return array Settings to save or bool false to cancel saving.
     */
    public function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance['title'] = sanitize_text_field( $new_instance['title'] );

        return $instance;
    }

    /**
     * Outputs the Calendly widget settings form.
     *
     * @param array $instance Current settings.
     */
    public function form( $instance ) {
        $title_id = $this->get_field_id( 'title' );
        $instance['title'] = ! empty( $instance['title'] ) ? esc_attr( $instance['title'] ) : '';

        echo '<p><label for="' . $title_id .'">' . __( 'Title:', 'wpse_calendly' ) . '</label>
            <input type="text" class="widefat" id="' . $title_id .'" name="' . $this->get_field_name( 'title' ) .'" value="' . $instance['title'] .'" />
        </p>';
    }
}
  • So glad we are close. I am embarrassed to ask where I would use the code you provided in last thread. You mention template file, as in a page template file? I haven't used one, yet. This requires FTP'ing into the folders etc. Yes? – Bruce Christy Mar 14 '18 at 0:28
  • I should clarify that I shouldn't use the term "widget". This is just a plain ol' code module on a page. – Bruce Christy Mar 14 '18 at 1:24
  • Yes, FTP is required unless the theme is being deployed in some other manner. Each theme is different, but a good place to start would be the theme's sidebar.php file.Generally, you would copy the wrapper HTML used by widgets and place the this code within the wrapper markup. Also note that you should not edit a theme directly unless you have authored it yourself. Otherwise, the changes will be lost when the theme is updated. Instead use a child theme. – Dave Romsey Mar 14 '18 at 1:27
  • This particular matter may be above my abilities. May have to hire a guru like yourself to look into it. Thanks so much for your time, Dave. – Bruce Christy Mar 14 '18 at 2:00
  • 1
    I felt like things started getting a little hairy there, so I've update my answer with a plugin that will do all the work for you. I think it will do the trick (I verified that it does try and load a Calendy instance, but I don't use their service). – Dave Romsey Mar 14 '18 at 2:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.