WPShortcode

ND Shortcodes

Below, you’ll find a detailed guide on how to add the ND Shortcodes Shortcodes to your WordPress website, including their parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the ND Shortcodes Plugin shortcodes not to show or not to work correctly.

Before starting, here is an overview of the ND Shortcodes Plugin and the shortcodes it provides:

Plugin Icon
ND Shortcodes

"ND Shortcodes is a versatile WordPress plugin that adds a range of functionality to your site, allowing you to add custom shortcodes and enhance your site design and performance."

★★★✩✩ (11) Active Installs: 20000+ Tested with: 6.2.3 PHP Version: false
Included Shortcodes:
  • [nd_alert]
  • [nd_alert_message]
  • [nd_login]
  • [nd_social]
  • [nd_icon_text]
  • [nd_options_eventscalendar_post_grid]
  • [nd_options_woo_post_grid]
  • [nd_options_badge]
  • [nd_options_beforeafter]
  • [nd_options_button]
  • [nd_options_cf7]
  • [nd_column]
  • [nd_options_countdown]
  • [nd_options_counter]
  • [nd_options_divider]
  • [nd_options_focus_number]
  • [nd_options_image]
  • [nd_options_list]
  • [nd_options_magic_popup]
  • [nd_options_menu]
  • [nd_options_open_sidebar]
  • [nd_options_post_grid]
  • [nd_options_post_search]
  • [nd_options_prices]
  • [nd_price_row]
  • [nd_options_services]
  • [nd_options_service_pro]
  • [nd_options_spacer]
  • [nd_options_text]
  • [nd_options_toogle]
  • [nd_options_typewriter]
  • [nd_options_focus]
  • [nd_options_price]
  • [nd_options_progress]
  • [nd_options_service]
  • [nd_options_team]
  • [nd_options_testimonial]

ND [nd_alert] Shortcode

The nd-shortcodes plugin shortcode, ‘nd_alert’, is designed to create customizable alert messages on your WordPress site. It allows you to specify an image, class, float, ID, margin, dropdown background color, number background color, and number for the alert. The shortcode uses the function ‘nd_options_alert’, which enqueues the alert style, sets default values if none are provided, and constructs the alert message HTML. It also adds the alert style to the page dynamically.

Shortcode: [nd_alert]

Parameters

Here is a list of all possible nd_alert shortcode parameters and attributes:

  • image – URL of the image that will be displayed in the alert message.
  • class – CSS class to style the alert message.
  • float – Position of the alert message, either ‘left’ or ‘right’.
  • id – Unique identifier for the alert message.
  • margin – The margins around the alert message.
  • dropdown-bg-color – Background color of the dropdown alert message.
  • number-bg-color – Background color of the number displayed in the alert message.
  • number – Number that will be displayed in the alert message.

Examples and Usage

Basic example – Display an alert with a default image and message.

[nd_alert id="alert1"]This is a basic alert message.[/nd_alert]

Advanced examples

Display an alert with a custom image, custom dropdown background color, and a number.

[nd_alert id="alert2" image="http://example.com/custom-image.jpg" dropdown-bg-color="#ff0000" number="5"]This is an advanced alert message with a custom image, dropdown background color, and number.[/nd_alert]

Display an alert with a custom margin, custom class, and float direction.

[nd_alert id="alert3" margin="10px" class="custom-class" float="right"]This is an advanced alert message with a custom margin, class, and float direction.[/nd_alert]

Display an alert with a custom number background color.

[nd_alert id="alert4" number-bg-color="#00ff00" number="10"]This is an advanced alert message with a custom number background color.[/nd_alert]

PHP Function Code

In case you have difficulties debugging what causing issues with [nd_alert] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'nd_alert', 'nd_options_alert' );

Shortcode PHP function:

function nd_options_alert( $nd_options_atts, $nd_options_content = null ) {
    
    $nd_options_alert = shortcode_atts( 
    	array(
	        'image' => '',
            'class' => '',
            'float' => '',
            'id' => '',
            'margin' => '',
            'dropdown-bg-color' => '',
            'number-bg-color' => '',
            'number' => '',
    	), 
    $nd_options_atts );

    wp_enqueue_style( 'nd_options_alertt_style', esc_url( plugins_url( 'css/alertt.css', __FILE__ ) ) );

    //image
    if ( $nd_options_alert['image'] == '' ) { 
        $nd_options_alert['image'] = esc_url(plugins_url('img/icon-message.svg', __FILE__ )); 
    }else{ 
        $nd_options_alert['image'] = $nd_options_alert['image']; 
    }

    //float
    if ( $nd_options_alert['float'] == '' ) { $nd_options_alert_float = 'left'; }

    //dropdown color
    if ( $nd_options_alert['dropdown-bg-color'] == '' ) { 
        $nd_options_alert_dropdown_bg_color = '#fff'; 
    }else{
        $nd_options_alert_dropdown_bg_color = $nd_options_alert['dropdown-bg-color']; 
    }
    
    $nd_options_str = '';
    $nd_options_str .= '

        <div style="margin:'.$nd_options_alert['margin'].';" id="'.$nd_options_alert['id'].'" class=" '.$nd_options_alert['class'].' nd_options_position_relative nd_options_float_'.$nd_options_alert['float'].' ">
            
            <div id="'.$nd_options_alert['id'].'_icon" class="nd_options_position_relative">
                <p class="nd_options_position_absolute nd_options_color_white nd_options_font_size_10" style="line-height: 10px; padding: 2px 3px; left: 13px; top: -7px; background-color:'.$nd_options_alert['number-bg-color'].'; ">'.$nd_options_alert['number'].'</p>
                <img alt="" class="nd_options_float_left" width="20" src="'.$nd_options_alert['image'].'">
            </div>

            <div id="'.$nd_options_alert['id'].'_messages" class="nd_options_display_none">

                <div class="triangle-up"></div>

                <div style="background-color:'.$nd_options_alert_dropdown_bg_color.';" class="nd_options_box_sizing_border_box nd_options_padding_10 nd_options_section nd_options_text_align_left">
                    
                    '.do_shortcode($nd_options_content).'

                </div>
            </div>

        </div>
    ';


    $nd_options_style = '

        #'.$nd_options_alert['id'].':hover #'.$nd_options_alert['id'].'_messages { display: block; }  
        #'.$nd_options_alert['id'].'_messages { 
            width: 250px;
            position: absolute;
            left: -115px;
            top: 0px;
            padding-top:35px;
            z-index: 9;
        }

        .triangle-up {
            width: 100%;
            overflow: hidden;
            box-sizing: border-box;
            text-align: center;
            line-height: 10px;
        }
        .triangle-up:after {
            content: "";
            display: inline-block;
            width: 0px;
            height: 0px;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid '.$nd_options_alert_dropdown_bg_color.';
            line-height: 10px;
        }

    ';
    wp_add_inline_style('nd_options_alertt_style',$nd_options_style);
    

    $nd_options_str_secure = wp_kses_post( $nd_options_str );
    return $nd_options_str_secure;


}

Code file location:

nd-shortcodes/nd-shortcodes/addons/customizer/shortcodes/alert/index.php

ND Shortcodes [nd_alert_message] Shortcode

The ‘nd_alert_message’ shortcode from the nd-shortcodes plugin is designed to generate customizable alert messages. It allows you to specify parameters like image, class, title, title-color, description, description-color, and href. This shortcode creates an alert message box with optional image and hyperlink. The title and description can be colored as per user preference. The ‘class’ parameter allows for additional CSS styling.

Shortcode: [nd_alert_message]

Parameters

Here is a list of all possible nd_alert_message shortcode parameters and attributes:

  • image – The URL of the image to display in the alert message.
  • class – A CSS class to apply to the alert message for styling purposes.
  • title – The title text of the alert message.
  • title-color – The color of the title text in the alert message.
  • description – The main content of the alert message.
  • description-color – The color of the description text in the alert message.
  • href – The hyperlink attached to the title and description of the alert message.

Examples and Usage

Basic example – Display an alert message with a title and description.

[nd_alert_message title="Important Notice" description="Please be aware of the changes in our policy." /]

Advanced examples

Display an alert message with a title, description, and a custom class for styling.

[nd_alert_message title="Important Notice" description="Please be aware of the changes in our policy." class="custom-alert-class" /]

Display an alert message with a title, description, a custom class for styling, and a link to a specific URL.

[nd_alert_message title="Important Notice" description="Please be aware of the changes in our policy." class="custom-alert-class" href="https://www.example.com/policy" /]

Display an alert message with a title, description, a custom class for styling, a link to a specific URL, and a specific color for the title and description.

[nd_alert_message title="Important Notice" title-color="#FF0000" description="Please be aware of the changes in our policy." description-color="#0000FF" class="custom-alert-class" href="https://www.example.com/policy" /]

Display an alert message with a title, description, a custom class for styling, a link to a specific URL, a specific color for the title and description, and an image.

[nd_alert_message image="https://www.example.com/image.jpg" title="Important Notice" title-color="#FF0000" description="Please be aware of the changes in our policy." description-color="#0000FF" class="custom-alert-class" href="https://www.example.com/policy" /]

PHP Function Code

In case you have difficulties debugging what causing issues with [nd_alert_message] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'nd_alert_message', 'nd_options_alert_message' );

Shortcode PHP function:

function nd_options_alert_message( $nd_options_atts ) {
    
    $nd_options_alert_message = shortcode_atts( 
        array(
            'image' => '',
            'class' => '',
            'title' => '',
            'title-color' => '',
            'description' => '',
            'description-color' => '',
            'href' => '',
        ), 
    $nd_options_atts );

    //image
    if ( $nd_options_alert_message['image'] == '' ) { 
        $nd_options_alert_message_image = '' ; 
        $nd_options_alert_message_image_padding = '';
    }else{
        $nd_options_alert_message_image = '<img alt="" class="nd_options_position_absolute" width="50" src="'.$nd_options_alert_message['image'].'">';
        $nd_options_alert_message_image_padding = 'nd_options_padding_left_70';
    }

    //title
    if ( $nd_options_alert_message['title'] == '' ) {
        $nd_options_alert_message_title = '';
    }else{

        $nd_options_alert_message_title = '<div class="nd_options_section nd_options_height_10"></div>';

        if ( $nd_options_alert_message['title-color'] == '' ) {
            $nd_options_alert_message_title .= '<a href="'.$nd_options_alert_message['href'].'"><h6>'.$nd_options_alert_message['title'].'</h6></a>';
        }else{
            $nd_options_alert_message_title .= '<a href="'.$nd_options_alert_message['href'].'"><h6 style="color:'.$nd_options_alert_message['title-color'].';">'.$nd_options_alert_message['title'].'</h6></a>'; 
        }

    }


    //description
    if ( $nd_options_alert_message['description'] == '' ) {
        $nd_options_alert_message_description = '';
    }else{


        $nd_options_alert_message_description = '<div class="nd_options_section nd_options_height_10"></div>';

        if ( $nd_options_alert_message['description-color'] == '' ) {
            $nd_options_alert_message_description .= '<a href="'.$nd_options_alert_message['href'].'"><p class="nd_options_font_size_10">'.$nd_options_alert_message['description'].'</p></a>';
        }else{
            $nd_options_alert_message_description .= '<a href="'.$nd_options_alert_message['href'].'"><p class="nd_options_font_size_10" style="color:'.$nd_options_alert_message['description-color'].';">'.$nd_options_alert_message['description'].'</p></a>'; 
        }

    }
    

    //result
    $nd_options_str = '';
    $nd_options_str .= '

        <div class=" '.$nd_options_alert_message['class'].' nd_options_section nd_options_position_relative nd_options_box_sizing_border_box nd_options_padding_10 nd_options_min_height_70">
            '.$nd_options_alert_message_image.'
            <div class="nd_options_section '.$nd_options_alert_message_image_padding.' nd_options_box_sizing_border_box">
                '.$nd_options_alert_message_title.'
                '.$nd_options_alert_message_description.'    
            </div>
        </div>

    ';
    

    

    $nd_options_str_secure = wp_kses_post( $nd_options_str );
    return $nd_options_str_secure;

}

Code file location:

nd-shortcodes/nd-shortcodes/addons/customizer/shortcodes/alert/index.php

ND Shortcodes [nd_login] Shortcode

The nd_login shortcode is part of the nd-shortcodes plugin. It facilitates user login functionality by displaying a login or logout link based on the user’s status. The shortcode checks if a user is logged in. If so, it displays the user’s avatar and a logout link. If not, it displays a default avatar image and a login link. The shortcode also allows customization of the login/logout section’s appearance.

Shortcode: [nd_login]

Parameters

Here is a list of all possible nd_login shortcode parameters and attributes:

  • class – Adds a custom CSS class to the login form.
  • float – Determines the alignment of the login form, default is left.
  • bg_color – Sets the background color of the login form.
  • id – Gives a unique identifier to the login form.
  • href – Specifies the URL for the login/logout link.

Examples and Usage

Basic example – The basic usage of the nd_login shortcode allows you to display a login/logout button on your WordPress site. The button will display ‘LOG IN’ if the user is not logged in and ‘LOG OUT’ if the user is logged in. 

[nd_login /]

Advanced examples

Using the shortcode to display a login/logout button with a specific class and float direction. The class parameter allows you to add custom CSS classes to further style the button, and the float parameter allows you to specify the alignment of the button. In this example, the button is assigned the ‘my_custom_class’ class and is floated to the right.

[nd_login class="my_custom_class" float="right" /]

Using the shortcode to display a login/logout button with a specific background color and href. The bg_color parameter allows you to specify the background color of the button, and the href parameter allows you to specify the URL that the button will redirect to when clicked. In this example, the button’s background color is set to red, and it redirects to the home page when clicked.

[nd_login bg_color="red" href="http://www.yoursite.com" /]

Using the shortcode to display a login/logout button with a specific id. The id parameter allows you to assign a unique identifier to the button for further customization with CSS or JavaScript. In this example, the button is assigned the id ‘my_custom_id’.

[nd_login id="my_custom_id" /]

PHP Function Code

In case you have difficulties debugging what causing issues with [nd_login] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'nd_login', 'nd_options_login' );

Shortcode PHP function:

function nd_options_login( $nd_options_atts ) {
    
    $nd_options_login = shortcode_atts( 
    	array(
            'class' => '',
            'float' => '',
            'bg_color' => '',
            'id' => '',
            'href' => '',
    	), 
    $nd_options_atts );


    if (is_user_logged_in() == 1){

        $nd_options_current_user = wp_get_current_user();
        $nd_options_account_avatar_url_args = array( 'size'   => 60 );
        $nd_options_account_avatar_url = get_avatar_url($nd_options_current_user->user_email, $nd_options_account_avatar_url_args);
        $nd_options_log_link = wp_logout_url( get_permalink() );
        $nd_options_log_name = __('LOG OUT','nd-shortcodes');
        $nd_options_link_page = $nd_options_login['href'];

    }else{

        $nd_options_account_avatar_url = esc_url(plugins_url('img/avatar.jpg', __FILE__ ));
        $nd_options_log_link = $nd_options_login['href'];
        $nd_options_link_page = $nd_options_login['href'];
        $nd_options_log_name = __('LOG IN','nd-shortcodes');

    }


    //define
    if ( $nd_options_login['float'] == '' ) { $nd_options_login_float = 'left'; }


    //define
    $nd_options_str = '';
    

   	$nd_options_str .= '

        <div id="'.$nd_options_login['id'].'" style="background-color:'.$nd_options_login['bg_color'].';" class=" '.$nd_options_login['class'].' nd_options_display_table nd_options_float_'.$nd_options_login['float'].' nd_options_padding_10_20 nd_options_margin_right_15">
            <a href="'.$nd_options_link_page.'"><img alt="" class="nd_options_margin_right_10 nd_options_display_table_cell nd_options_vertical_align_middle nd_options_border_radius_100_percentage" width="30" src="'.$nd_options_account_avatar_url.'"></a>
            <div class="nd_options_display_table_cell nd_options_vertical_align_middle">
                <p class="nd_options_font_size_12 nd_options_text_align_left"><a class="nd_options_color_white nd_options_first_font" href="'.$nd_options_link_page.'">'.__('My Account','nd-shortcodes').'</a></p>
                <div class="nd_options_section nd_options_height_5"></div>
                <h6 class="nd_options_font_size_10 nd_options_text_align_left nd_options_color_white nd_options_second_font"><a class="nd_options_color_white" href="'.$nd_options_log_link.'">'.$nd_options_log_name.'</a></h6>
            </div>
            
        </div>

    ';

    $nd_options_str_secure = wp_kses_post( $nd_options_str );
    return $nd_options_str_secure;
    
}

Code file location:

nd-shortcodes/nd-shortcodes/addons/customizer/shortcodes/login/index.php

ND Shortcodes [nd_social] Shortcode

The ‘nd_social’ shortcode from the nd-shortcodes plugin is designed to display social media icons. It accepts three parameters: ‘social’, ‘image’, and ‘link’. The ‘social’ parameter specifies the type of social media. The ‘image’ parameter allows you to use a custom image for the icon. If no image is specified, it defaults to a standard SVG image for the specified social media. The ‘link’ parameter is the URL of your social media profile. The shortcode generates an HTML link with the social media icon as the link’s content. The icon links to the specified URL and opens in a new tab. The output is sanitized for security using wp_kses_post.

Shortcode: [nd_social]

Parameters

Here is a list of all possible nd_social shortcode parameters and attributes:

  • social – Defines the social media platform name
  • image – Sets a custom image URL for the social icon
  • link – Provides the target URL for the social media link

Examples and Usage

Basic example – The following shortcode is a simple usage of the ‘nd_social’ shortcode. It displays a social media icon by referencing a social media platform. The icon links to the specified URL.

[nd_social social="facebook" link="https://www.facebook.com/yourpage/"]

Advanced examples

Using the shortcode to display a custom image as a social media icon. The image will be displayed instead of the default icon, and the link will lead to the specified URL.

[nd_social social="facebook" image="https://yourwebsite.com/yourimage.jpg" link="https://www.facebook.com/yourpage/"]

Using the shortcode to display multiple social media icons. Each icon links to the respective social media page. The icons are displayed in the order they are added in the shortcode.

[nd_social social="facebook" link="https://www.facebook.com/yourpage/"]
[nd_social social="twitter" link="https://twitter.com/yourprofile/"]
[nd_social social="instagram" link="https://www.instagram.com/yourprofile/"]

PHP Function Code

In case you have difficulties debugging what causing issues with [nd_social] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'nd_social', 'nd_options_social' );

Shortcode PHP function:

function nd_options_social( $nd_options_atts ) {
    
    $nd_options_social = shortcode_atts( 
    	array(
	        'social' => '',
	        'image' => '',
	        'link' => '',
    	), 
    $nd_options_atts );

    //start
    $nd_options_str = '';

    
    //image
    if ( $nd_options_social['image'] == '' ) { 

        $nd_options_image_path = 'img/'.$nd_options_social['social'].'.svg';
    	$nd_options_social_image = esc_url(plugins_url($nd_options_image_path, __FILE__ ));

    }else {

    	$nd_options_social_image = $nd_options_social['image'];

    }


   	$nd_options_str .= '<a target="_blank" href="'.$nd_options_social['link'].'"><img alt="" width="40" height="40" class="nd_options_margin_5" src="'.$nd_options_social_image.'"></a>';

    $nd_options_str_secure = wp_kses_post( $nd_options_str );
    return $nd_options_str_secure;
    
}

Code file location:

nd-shortcodes/nd-shortcodes/addons/customizer/shortcodes/social/index.php

ND Shortcodes [nd_icon_text] Shortcode

The nd-shortcodes plugin’s ‘nd_icon_text’ shortcode allows you to add icons or images with text to your WordPress site. It provides customization options like text color, font, and link. . You can align the icon and text to the left or right and adjust the margins. It also lets you specify the width of the image. If no icon or image is specified, it will simply display the text.

Shortcode: [nd_icon_text]

Parameters

Here is a list of all possible nd_icon_text shortcode parameters and attributes:

  • icon – Defines the icon to be used from the img folder
  • image – Allows you to insert an image instead of an icon
  • text – The text that is displayed next to the icon or image
  • text-color – Sets the color of the text
  • link – The URL where the user will be redirected when clicked
  • float – Determines if the element floats to the left or right
  • image-width – Sets the width of the image
  • class – Adds a CSS class to the element for styling
  • margin – Sets the space around the element
  • font – Specifies the font of the text

Examples and Usage

Basic example – Display a text with a link and an icon.

[nd_icon_text icon="my-icon" text="Click here" link="http://example.com/"]

Advanced examples

Display a text with a link, an icon and customize the text color, float direction, and margin.

[nd_icon_text icon="my-icon" text="Click here" link="http://example.com/" text-color="#ff0000" float="right" margin="10px"]

Display a text with a link, an image instead of an icon and customize the image width, float direction, and margin.

[nd_icon_text image="http://example.com/my-image.jpg" text="Click here" link="http://example.com/" image-width="30" float="left" margin="20px"]

Display a text with a link, an icon and customize the text color, float direction, margin and add a custom class.

[nd_icon_text icon="my-icon" text="Click here" link="http://example.com/" text-color="#ff0000" float="right" margin="10px" class="my-custom-class"]

PHP Function Code

In case you have difficulties debugging what causing issues with [nd_icon_text] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'nd_icon_text', 'nd_options_icon_text' );

Shortcode PHP function:

function nd_options_icon_text( $nd_options_atts ) {
    
    $nd_options_icon_text = shortcode_atts( 
    	array(
	        'icon' => '',
            'image' => '',
	        'text' => '',
            'text-color' => '',
	        'link' => '',
            'float' => '',
            'image-width' => '',
            'class' => '',
            'margin' => '',
            'font' => '',
    	), 
    $nd_options_atts );

    //define
    $nd_options_str = '';
    

    


    //float and margin
    if ( $nd_options_icon_text['float'] == '' ) { 
        $nd_options_icon_text_float = "left";
        $nd_options_text_margin = "nd_options_margin_right_20";
        $nd_options_icon_margin = "nd_options_margin_right_10";
    }else{
        $nd_options_icon_text_float = $nd_options_icon_text['float'];
        $nd_options_text_margin = "nd_options_margin_left_10";
        $nd_options_icon_margin = "nd_options_margin_left_20"; 
    }



    //icon text
    if ( $nd_options_icon_text['text'] == '' ) {
        $nd_options_icon_text_text = '';
    }else {
        
        $nd_options_icon_text_color = $nd_options_icon_text['text-color'];
        if ( $nd_options_icon_text_color == '' ) { $nd_options_icon_text_color == ''; }

        $nd_options_icon_text_text = '
        
            <div class="nd_options_display_table_cell nd_options_vertical_align_middle    ">
                <a style="color:'.$nd_options_icon_text_color.';" class="'.$nd_options_text_margin.' nd_options_'.$nd_options_icon_text['font'].'_font " href="'.$nd_options_icon_text['link'].'">'.$nd_options_icon_text['text'].'</a>
            </div>

        ';

    }



    //icon image or empty
    if ( $nd_options_icon_text['icon'] != '' ) {


        $nd_options_icon_path = 'img/'.$nd_options_icon_text['icon'].'.svg';
        $nd_options_icon_text_image = esc_url(plugins_url($nd_options_icon_path, __FILE__ ));


        $nd_options_icon_text_icon = '
        
            <div class="nd_options_display_table_cell nd_options_vertical_align_middle    ">
                <a href="'.$nd_options_icon_text['link'].'"><img alt="" width="15" height="15" class="'.$nd_options_icon_margin.' nd_options_float_left" src="'.$nd_options_icon_text_image.'"></a>
            </div>

        ';


    }elseif ( $nd_options_icon_text['image'] != '' ){

        $nd_options_icon_text_image_width = $nd_options_icon_text['image-width'];
        if ( $nd_options_icon_text_image_width == '' ) { $nd_options_image_width = 15; }else { $nd_options_image_width = $nd_options_icon_text_image_width; }

        $nd_options_icon_text_image = $nd_options_icon_text['image'];

        $nd_options_icon_text_icon = '
        
            <div class="nd_options_display_table_cell nd_options_vertical_align_middle    ">
                <a href="'.$nd_options_icon_text['link'].'"><img alt="" width="'.$nd_options_image_width.'" class="'.$nd_options_icon_margin.' nd_options_float_left" src="'.$nd_options_icon_text_image.'"></a>
            </div>

        ';  

    }else{

        $nd_options_icon_text_icon = '';

    }


   	$nd_options_str .= '

        <div style="margin:'.$nd_options_icon_text['margin'].';" class=" '.$nd_options_icon_text['class'].' nd_options_display_table nd_options_float_'.$nd_options_icon_text_float.'">
            '.$nd_options_icon_text_icon.'
            '.$nd_options_icon_text_text.'    
        </div>

    ';


    $nd_options_str_secure = wp_kses_post( $nd_options_str );
    return $nd_options_str_secure;


}

Code file location:

nd-shortcodes/nd-shortcodes/addons/customizer/shortcodes/top-header/index.php

ND Shortcodes [nd_options_eventscalendar_post_grid] Shortcode

The ‘nd_options_eventscalendar_post_grid’ shortcode from the nd-shortcodes plugin is designed to create a customizable grid layout for event posts. It enables users to set specific parameters such as layout, width, quantity, ID, order, and orderby, allowing for a personalized display of event posts. The shortcode also includes a script for a post-grid-eventscalendar.js file, further enhancing its functionality. The shortcode queries event posts (‘tribe_events’) based on the set parameters and displays them in the chosen layout. Default values are provided for certain parameters if they are not specified. The layout file is included from the ‘layout’ directory based on the layout specified. Finally, the shortcode output is sanitized and filtered before being returned, ensuring secure and clean code.

Shortcode: [nd_options_eventscalendar_post_grid]

Parameters

Here is a list of all possible nd_options_eventscalendar_post_grid shortcode parameters and attributes:

  • nd_options_class – specifies the CSS class of the event calendar post grid.
  • nd_options_layout – defines the layout style for the event calendar post grid.
  • nd_options_width – sets the width of the event calendar post grid.
  • nd_options_qnt – determines the number of posts to display on the grid.
  • nd_options_id – unique identifier of the specific event post to display.
  • nd_options_order – sets the order of the posts, either ascending (ASC) or descending (DESC).
  • nd_options_orderby – determines the parameter to order the posts by, such as date, title, etc.

Examples and Usage

Basic Example – Displays a grid of posts from the ‘tribe_events’ post type with default settings.

[nd_options_eventscalendar_post_grid]

Advanced Examples – Showcases the flexibility and customization options of the shortcode by altering the default attributes.

Display a grid of ‘tribe_events’ posts in ‘layout-2’, with a width of 50% and a maximum of 5 posts.

[nd_options_eventscalendar_post_grid nd_options_layout="layout-2" nd_options_width="nd_options_width_50_percentage" nd_options_qnt="5"]

Display a single ‘tribe_events’ post with the id of 10, ordered by ‘title’ in ascending order.

[nd_options_eventscalendar_post_grid nd_options_id="10" nd_options_order="ASC" nd_options_orderby="title"]

Display a grid of ‘tribe_events’ posts in ‘layout-3’, with a width of 100%, unlimited quantity, ordered by ‘date’ in descending order.

[nd_options_eventscalendar_post_grid nd_options_layout="layout-3" nd_options_width="nd_options_width_100_percentage" nd_options_qnt="-1" nd_options_order="DESC" nd_options_orderby="date"]

PHP Function Code

In case you have difficulties debugging what causing issues with [nd_options_eventscalendar_post_grid] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('nd_options_eventscalendar_post_grid', 'nd_options_shortcode_eventscalendar_post_grid');

Shortcode PHP function:

function nd_options_shortcode_eventscalendar_post_grid($atts, $content = null)
{  

  $atts = shortcode_atts(
  array(
    'nd_options_class' => '',
    'nd_options_layout' => '',
    'nd_options_width' => '',
    'nd_options_qnt' => '',
    'nd_options_id' => '',
    'nd_options_order' => '',
    'nd_options_orderby' => '',
  ), $atts);

  wp_enqueue_script( 'nd_options_post_grid_eventscalendar', esc_url( plugins_url( 'js/post-grid-eventscalendar.js', __FILE__ ) ) );

  $str = '';

  //get variables
  $nd_options_class = $atts['nd_options_class'];
  $nd_options_layout = $atts['nd_options_layout'];
  $nd_options_width = $atts['nd_options_width'];
  $nd_options_qnt = $atts['nd_options_qnt'];
  $nd_options_id = $atts['nd_options_id'];
  $nd_options_order = $atts['nd_options_order'];
  $nd_options_orderby = $atts['nd_options_orderby'];


  //default value
  if ($nd_options_layout == '') { $nd_options_layout = "layout-1"; }
  if ($nd_options_width == '') { $nd_options_width = "nd_options_width_100_percentage"; }
  if ($nd_options_qnt == '') { $nd_options_qnt = -1; }
  if ($nd_options_order == '') { $nd_options_order = 'DESC'; }
  if ($nd_options_orderby == '') { $nd_options_orderby = 'date'; }



  $args = array(
    'post_type' => 'tribe_events',
    'posts_per_page' => $nd_options_qnt,
    'order' => $nd_options_order,
    'orderby' => $nd_options_orderby,
    'p' => $nd_options_id
  );

  $the_query = new WP_Query( $args );

  
  // the layout selected
  $nd_options_layout = sanitize_key($nd_options_layout);
  $nd_options_layout_selected = dirname( __FILE__ ).'/layout/'.$nd_options_layout.'.php';
  include realpath($nd_options_layout_selected);


  wp_reset_postdata();

  $nd_options_str_shortcode = wp_kses_post( $str ); 
  return apply_filters('uds_shortcode_out_filter', $nd_options_str_shortcode);
}

Code file location:

nd-shortcodes/nd-shortcodes/addons/eventscalendar/vc/index.php

ND Shortcodes [nd_options_woo_post_grid] Shortcode

The ‘nd_options_woo_post_grid’ shortcode from the nd-shortcodes plugin is designed to create a customizable grid of WooCommerce products. It allows you to specify layout, width, quantity, order, and order by parameters. It also enqueues a JavaScript file for additional functionality. The shortcode queries for products based on these parameters and displays them in a grid layout.

Shortcode: [nd_options_woo_post_grid]

Parameters

Here is a list of all possible nd_options_woo_post_grid shortcode parameters and attributes:

  • nd_options_class – specifies a unique class for the post grid
  • nd_options_layout – determines the layout of the post grid
  • nd_options_width – sets the width of the post grid
  • nd_options_qnt – defines the quantity of posts in the grid
  • nd_options_id – selects a specific product by its ID
  • nd_options_order – controls the order of posts (ASC/DESC)
  • nd_options_orderby – sets the attribute posts are ordered by

Examples and Usage

Basic example – Displaying a grid of WooCommerce products using the default parameters.

[nd_options_woo_post_grid]

Advanced examples

Displaying a grid of WooCommerce products with a specific layout, width, quantity, order, and order by parameters.

[nd_options_woo_post_grid nd_options_layout="layout-2" nd_options_width="nd_options_width_50_percentage" nd_options_qnt="5" nd_options_order="ASC" nd_options_orderby="title"]

Displaying a grid of a specific WooCommerce product by ID with a customized layout and width.

[nd_options_woo_post_grid nd_options_id="123" nd_options_layout="layout-3" nd_options_width="nd_options_width_75_percentage"]

Displaying a grid of WooCommerce products ordered by date in descending order.

[nd_options_woo_post_grid nd_options_order="DESC" nd_options_orderby="date"]

PHP Function Code

In case you have difficulties debugging what causing issues with [nd_options_woo_post_grid] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('nd_options_woo_post_grid', 'nd_options_shortcode_woo_post_grid');

Shortcode PHP function:

function nd_options_shortcode_woo_post_grid($atts, $content = null)
{  

  $atts = shortcode_atts(
  array(
    'nd_options_class' => '',
    'nd_options_layout' => '',
    'nd_options_width' => '',
    'nd_options_qnt' => '',
    'nd_options_id' => '',
    'nd_options_order' => '',
    'nd_options_orderby' => '',
  ), $atts);

  wp_enqueue_script( 'nd_options_post_grid_woo', esc_url( plugins_url( 'js/post-grid-woo.js', __FILE__ ) ) );

  $str = '';

  //get variables
  $nd_options_class = $atts['nd_options_class'];
  $nd_options_layout = $atts['nd_options_layout'];
  $nd_options_width = $atts['nd_options_width'];
  $nd_options_qnt = $atts['nd_options_qnt'];
  $nd_options_id = $atts['nd_options_id'];
  $nd_options_order = $atts['nd_options_order'];
  $nd_options_orderby = $atts['nd_options_orderby'];


  //default value
  if ($nd_options_layout == '') { $nd_options_layout = "layout-1"; }
  if ($nd_options_width == '') { $nd_options_width = "nd_options_width_100_percentage"; }
  if ($nd_options_qnt == '') { $nd_options_qnt = -1; }
  if ($nd_options_order == '') { $nd_options_order = 'DESC'; }
  if ($nd_options_orderby == '') { $nd_options_orderby = 'date'; }



  $args = array(
    'post_type' => 'product',
    'posts_per_page' => $nd_options_qnt,
    'order' => $nd_options_order,
    'orderby' => $nd_options_orderby,
    'p' => $nd_options_id
  );

  $the_query = new WP_Query( $args );

  
  // the layout selected
  $nd_options_layout = sanitize_key($nd_options_layout);
  $nd_options_layout_selected = dirname( __FILE__ ).'/layout/'.$nd_options_layout.'.php';
  include realpath($nd_options_layout_selected);


  wp_reset_postdata();

  $nd_options_str_shortcode = wp_kses_post( $str ); 
  return apply_filters('uds_shortcode_out_filter', $nd_options_str_shortcode);

}

Code file location:

nd-shortcodes/nd-shortcodes/addons/woocommerce/vc/index.php

ND Shortcodes [nd_options_badge] Shortcode

The ‘nd_options_badge’ shortcode is a versatile tool that allows customization of text badges. It provides the ability to alter text, color, font, and alignment for two text sections within a badge.

Shortcode: [nd_options_badge]

Parameters

Here is a list of all possible nd_options_badge shortcode parameters and attributes:

  • nd_options_class – Specifies the CSS class of the badge
  • nd_options_left_text – Sets the left text on the badge
  • nd_options_left_text_color – Defines the color of the left text
  • nd_options_right_text – Sets the right text on the badge
  • nd_options_right_text_color – Defines the color of the right text
  • nd_options_advanced_settings – Allows for additional settings
  • nd_options_left_text_tag – Defines the HTML tag for the left text
  • nd_options_left_text_font – Specifies the font of the left text
  • nd_options_right_text_tag – Defines the HTML tag for the right text
  • nd_options_right_text_font – Specifies the font of the right text

Examples and Usage

Basic example – The basic usage of the ‘nd_options_badge’ shortcode displays a badge with default settings.

[nd_options_badge /]

Advanced examples:

Example 1 – This example showcases how to use the shortcode to display a badge with custom left and right text. The text color for both sides can also be customized.

[nd_options_badge nd_options_left_text="Left Text" nd_options_left_text_color="#000000" nd_options_right_text="Right Text" nd_options_right_text_color="#FFFFFF" /]

Example 2 – This example demonstrates the usage of the shortcode with advanced settings. The text tags for both sides are set to ‘h2’, and the text fonts are customized. The class attribute is also used for additional CSS styling.

[nd_options_badge nd_options_class="custom-class" nd_options_left_text="Left Text" nd_options_left_text_tag="h2" nd_options_left_text_font="Arial" nd_options_right_text="Right Text" nd_options_right_text_tag="h2" nd_options_right_text_font="Verdana" nd_options_advanced_settings="1" /]

PHP Function Code

In case you have difficulties debugging what causing issues with [nd_options_badge] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('nd_options_badge', 'nd_options_shortcode_badge');

Shortcode PHP function:

function nd_options_shortcode_badge($atts, $content = null)
{  

  $atts = shortcode_atts(
  array(
    'nd_options_class' => '',
    'nd_options_left_text' => '',
    'nd_options_left_text_color' => '',
    'nd_options_right_text' => '',
    'nd_options_right_text_color' => '',
    'nd_options_advanced_settings' => '',
    'nd_options_left_text_tag' => '',
    'nd_options_left_text_font' => '',
    'nd_options_right_text_tag' => '',
    'nd_options_right_text_font' => '',
  ), $atts);

  $str = '';

  //get variables
  $nd_options_class = $atts['nd_options_class'];
  $nd_options_left_text = $atts['nd_options_left_text'];
  $nd_options_left_text_color = $atts['nd_options_left_text_color'];
  $nd_options_right_text = $atts['nd_options_right_text'];
  $nd_options_right_text_color = $atts['nd_options_right_text_color'];
  $nd_options_left_text_tag = $atts['nd_options_left_text_tag'];
  $nd_options_left_text_font = $atts['nd_options_left_text_font'];
  $nd_options_right_text_tag = $atts['nd_options_right_text_tag'];
  $nd_options_right_text_font = $atts['nd_options_right_text_font'];
  $nd_options_advanced_settings = $atts['nd_options_advanced_settings'];

  //default values
  if ( $nd_options_right_text_tag == '' ) { $nd_options_right_text_tag = 'p'; }
  if ( $nd_options_left_text_tag == '' ) { $nd_options_left_text_tag = 'p'; }

  
  $str .= '


  <div class="nd_options_section '.$nd_options_class.' nd_options_display_table ">
    <div class="nd_options_display_table_cell nd_options_vertical_align_middle nd_options_width_50_percentage nd_options_text_align_left nd_options_padding_10 nd_options_box_sizing_border_box">
      <'.$nd_options_left_text_tag.' class=" '.$nd_options_left_text_font.' nd_options_margin_0 nd_options_padding_0" style="color:'.$nd_options_left_text_color.';">'.$nd_options_left_text.'</'.$nd_options_left_text_tag.'>
    </div>
    <div class="nd_options_display_table_cell nd_options_vertical_align_middle nd_options_width_50_percentage nd_options_text_align_right nd_options_padding_10 nd_options_box_sizing_border_box">
      <'.$nd_options_right_text_tag.' class=" '.$nd_options_right_text_font.' nd_options_margin_0 nd_options_padding_0" style="color:'.$nd_options_right_text_color.';">'.$nd_options_right_text.'</'.$nd_options_right_text_tag.'>
    </div>
  </div>


   ';


   $nd_options_str_shortcode = wp_kses_post( $str );
   return apply_filters('uds_shortcode_out_filter', $nd_options_str_shortcode);
}

Code file location:

nd-shortcodes/nd-shortcodes/shortcodes/custom/badge/index.php

ND Shortcodes [nd_options_beforeafter] Shortcode

The ‘nd_options_beforeafter’ shortcode from the nd-shortcodes plugin displays a before and after image slider. It allows customization of slider color and images. . This shortcode fetches two images based on the input attributes ‘nd_options_image_before’ and ‘nd_options_image_after’. These images are then displayed in a slider interface, with the color of the slider being customizable. The shortcode also enqueues necessary scripts and styles for the slider to function correctly. The ‘nd_options_class’ attribute allows for additional CSS classes.

Shortcode: [nd_options_beforeafter]

Parameters

Here is a list of all possible nd_options_beforeafter shortcode parameters and attributes:

  • nd_options_class – Specifies the CSS class for styling the component
  • nd_options_color – Defines the color of the slider handle and its hover state
  • nd_options_image_before – Image displayed on the left side of the slider
  • nd_options_image_after – Image displayed on the right side of the slider

Examples and Usage

Basic example – Displays a before and after image comparison slider with default settings.

[nd_options_beforeafter nd_options_image_before=1 nd_options_image_after=2]

Advanced examples

Displays a before and after image comparison slider with custom color for the slider handle and a custom class added to the section.

[nd_options_beforeafter nd_options_image_before=1 nd_options_image_after=2 nd_options_color="#ff0000" nd_options_class="custom-class"]

Displays a before and after image comparison slider with custom color for the slider handle. The images are fetched using their attachment IDs, and a custom class is added to the section.

[nd_options_beforeafter nd_options_image_before=3 nd_options_image_after=4 nd_options_color="#00ff00" nd_options_class="another-custom-class"]

Note: The image attachment IDs can be found in your WordPress media library. The color should be a valid CSS color value. The class is optional and can be any valid CSS class name.

PHP Function Code

In case you have difficulties debugging what causing issues with [nd_options_beforeafter] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('nd_options_beforeafter', 'nd_options_shortcode_beforeafter');

Shortcode PHP function:

function nd_options_shortcode_beforeafter($atts, $content = null)
{  

  $atts = shortcode_atts(
  array(
  	'nd_options_class' => '',
    'nd_options_color' => '',
    'nd_options_image_before' => '',
    'nd_options_image_after' => '',
  ), $atts);

  $str = '';

  //get variables
  $nd_options_color = $atts['nd_options_color']; if ( $nd_options_color == '' ) { $nd_options_color = '#000'; }
  $nd_options_image_before = wp_get_attachment_image_src($atts['nd_options_image_before'],'large');
  $nd_options_image_after = wp_get_attachment_image_src($atts['nd_options_image_after'],'large');
  $nd_options_class = $atts['nd_options_class'];

  wp_enqueue_script('jquery-ui-slider');
  wp_enqueue_script('jquery-ui-slider');
  wp_enqueue_style( 'nd_options_before_after_style', esc_url( plugins_url( 'css/before-after.css', __FILE__ ) ) );
  wp_enqueue_script( 'nd_options_before_after_script', esc_url( plugins_url( 'js/before-after.js', __FILE__ ) ) );


  $nd_options_style = '
  #nd_options_beforeafter_component .ui-slider-range {
    background-image: url('.$nd_options_image_after[0].');
  }

  #nd_options_beforeafter_component .ui-slider-handle {
    background-color: '.$nd_options_color.'; 
  }

  #nd_options_beforeafter_component .ui-slider-handle::after {
    background-color: '.$nd_options_color.';
    background-image:url('.esc_url(plugins_url('ico.png', __FILE__ )).');
  }
  ';
  wp_add_inline_style('nd_options_before_after_style',$nd_options_style);
  
  $str .= '
  <div class="'.$nd_options_class.' nd_options_section">
	  <div id="nd_options_beforeafter_component">
	    <img src="'.$nd_options_image_before[0].'">
	  </div>
  </div>';

  $nd_options_str_shortcode = wp_kses_post( $str );
  return apply_filters('uds_shortcode_out_filter', $str);

}

Code file location:

nd-shortcodes/nd-shortcodes/shortcodes/custom/beforeafter/index.php

ND Shortcodes [nd_options_button] Shortcode

The nd-shortcodes plugin shortcode, ‘nd_options_button’, is designed to create customizable buttons. It offers a wide array of options for button customization, including class, layout, link, image, text color, background color, padding, margin, font family, font size, border radius, border color, border width, font weight, letter spacing, and alignment. This shortcode accepts various parameters, which are then used in the function ‘nd_options_shortcode_button’. The function retrieves the parameters, assigns default values if necessary, and constructs the button accordingly. The button’s alignment, image, and link are handled separately. The function also accounts for different layouts, sanitizing the chosen layout before including the corresponding PHP file. The final result is returned after being filtered for unsafe content.

Shortcode: [nd_options_button]

Parameters

Here is a list of all possible nd_options_button shortcode parameters and attributes:

  • nd_options_class – Specifies the CSS class of the button.
  • nd_options_layout – Defines the layout of the button.
  • nd_options_link – Sets the URL the button will direct to.
  • nd_options_image – Assigns an image to the button.
  • nd_options_image_width – Determines the width of the button image.
  • nd_options_text_color – Sets the text color of the button.
  • nd_options_bg_color – Specifies the background color of the button.
  • nd_options_padding – Adjusts the padding around the button.
  • nd_options_margin – Modifies the margin around the button.
  • nd_options_font_family – Sets the typeface for the button text.
  • nd_options_font_size – Determines the size of the button text.
  • nd_options_border_radius – Adjusts the roundness of the button corners.
  • nd_options_border_color – Specifies the color of the button border.
  • nd_options_border_width – Sets the thickness of the button border.
  • nd_options_font_weight – Controls the boldness of the button text.
  • nd_options_letter_spacing – Adjusts the spacing between letters in the button text.
  • nd_options_align – Determines the alignment of the button.

Examples and Usage

Basic example – Display a button with default settings.

[nd_options_button nd_options_link="url:#|title:Click Me|target:_self"]

Advanced examples

Display a button with custom text color, background color, padding, and margin.

[nd_options_button nd_options_text_color="#ffffff" nd_options_bg_color="#000000" nd_options_padding="10px 20px" nd_options_margin="10px" nd_options_link="url:#|title:Custom Button|target:_self"]

Display a button with custom font size, border radius, and alignment.

[nd_options_button nd_options_font_size="16px" nd_options_border_radius="5px" nd_options_align="center" nd_options_link="url:#|title:Styled Button|target:_self"]

Display a button with an image, custom image width and letter spacing.

[nd_options_button nd_options_image="123" nd_options_image_width="50px" nd_options_letter_spacing="2px" nd_options_link="url:#|title:Image Button|target:_self"]

PHP Function Code

In case you have difficulties debugging what causing issues with [nd_options_button] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('nd_options_button', 'nd_options_shortcode_button');

Shortcode PHP function:

function nd_options_shortcode_button($atts, $content = null)
{  

  $atts = shortcode_atts(
  array(
    'nd_options_class' => '',
    'nd_options_layout' => '',
    'nd_options_link' => '',
    'nd_options_image' => '',
    'nd_options_image_width' => '',
    'nd_options_text_color' => '',
    'nd_options_bg_color' => '',
    'nd_options_padding' => '',
    'nd_options_margin' => '',
    'nd_options_font_family' => '',
    'nd_options_font_size' => '',
    'nd_options_border_radius' => '',
    'nd_options_border_color' => '',
    'nd_options_border_width' => '',
    'nd_options_font_weight' => '',
    'nd_options_letter_spacing' => '',
    'nd_options_align' => '',
  ), $atts);

  $str = '';

  //get variables
  $nd_options_class = $atts['nd_options_class'];
  $nd_options_layout = $atts['nd_options_layout'];
  $nd_options_border_color = $atts['nd_options_border_color'];
  $nd_options_border_width = $atts['nd_options_border_width'];
  $nd_options_text_color = $atts['nd_options_text_color'];
  $nd_options_bg_color = $atts['nd_options_bg_color'];
  $nd_options_padding = $atts['nd_options_padding'];
  $nd_options_margin = $atts['nd_options_margin'];
  $nd_options_font_family = $atts['nd_options_font_family'];
  $nd_options_font_size = $atts['nd_options_font_size'];
  $nd_options_border_radius = $atts['nd_options_border_radius'];
  $nd_options_image_width = $atts['nd_options_image_width'];
  $nd_options_font_weight = $atts['nd_options_font_weight'];
  $nd_options_letter_spacing = $atts['nd_options_letter_spacing'];
  

  //align
  $nd_options_align = $atts['nd_options_align']; 
  if ( $nd_options_align == '' ) { $nd_options_align = 'left'; }
  if ( $nd_options_align == 'center' ) {
    $nd_options_align_top = '<div class="nd_options_section nd_options_text_align_center">'; 
    $nd_options_align_bottom = '</div>'; 
    $nd_options_align_class = '';  
  }else{
    $nd_options_align_top = ''; 
    $nd_options_align_bottom = ''; 
    $nd_options_align_class = 'nd_options_float_'.$nd_options_align;   
  }


  //nd_options_image
  $nd_options_image_src = wp_get_attachment_image_src($atts['nd_options_image'],'large');


  //nd_options_link 
  $nd_options_link = vc_build_link( $atts['nd_options_link'] );
  $nd_options_link_url = $nd_options_link['url'];
  $nd_options_link_title = $nd_options_link['title'];
  $nd_options_link_target = $nd_options_link['target'];
  $nd_options_link_rel = $nd_options_link['rel'];


  //target attr
  if ( $nd_options_link_target == '' ) {
    $nd_options_link_target_output = '';
  }else{
    $nd_options_link_target_output = 'target="'.$nd_options_link_target.'"';
  }

  
  //default value for avoid error 
  if ($nd_options_layout == '') { $nd_options_layout = "layout-1"; }

  // the layout selected
  $nd_options_layout = sanitize_key($nd_options_layout);
  $nd_options_layout_selected = dirname( __FILE__ ).'/layout/'.$nd_options_layout.'.php';
  include realpath($nd_options_layout_selected);


  $nd_options_str_shortcode = wp_kses_post( $str );
  return apply_filters('uds_shortcode_out_filter', $nd_options_str_shortcode);
  
}

Code file location:

nd-shortcodes/nd-shortcodes/shortcodes/custom/button/index.php

ND Shortcodes [nd_options_cf7] Shortcode

The ‘nd_options_cf7’ shortcode from the nd-shortcodes plugin is designed to customize the appearance of Contact Form 7. It allows users to modify various elements such as layout, label color, and label text. This shortcode also enqueues a CSS file for styling and includes different layout options. It sanitizes the layout key and includes the selected layout file. The shortcode ensures data security by allowing only specified HTML tags.

Shortcode: [nd_options_cf7]

Parameters

Here is a list of all possible nd_options_cf7 shortcode parameters and attributes:

  • nd_options_class – Adds a custom CSS class to the contact form.
  • nd_options_layout – Defines the layout of the contact form.
  • nd_options_label_color – Sets the color of the contact form labels.
  • nd_options_label_text – Defines the text of the contact form labels.
  • nd_options_title – Sets the title of the contact form.
  • nd_options_cf7 – Specifies the Contact Form 7 form to display.
  • nd_options_fields_full_width – Determines if form fields should span full width.

Examples and Usage

Basic example – Display a contact form with a specific ID

[nd_options_cf7 nd_options_cf7="1" /]

Advanced examples

Display a contact form with a specific ID, and customize the layout, label color, and label text. In this example, the layout is set to “layout-2”, the label color is set to “#000000”, and the label text is set to “Contact Us”.

[nd_options_cf7 nd_options_cf7="1" nd_options_layout="layout-2" nd_options_label_color="#000000" nd_options_label_text="Contact Us" /]

Display a contact form with a specific ID, and customize the title and fields full width. In this example, the title is set to “Get in touch” and the fields full width is set to “yes”.

[nd_options_cf7 nd_options_cf7="1" nd_options_title="Get in touch" nd_options_fields_full_width="yes" /]

Display a contact form with a specific ID, and apply a custom CSS class. In this example, the CSS class is set to “custom-class”.

[nd_options_cf7 nd_options_cf7="1" nd_options_class="custom-class" /]

PHP Function Code

In case you have difficulties debugging what causing issues with [nd_options_cf7] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('nd_options_cf7', 'nd_options_shortcode_cf7');

Shortcode PHP function:

function nd_options_shortcode_cf7($atts, $content = null)
{  

  $atts = shortcode_atts(
  array(
    'nd_options_class' => '',
    'nd_options_layout' => '',
    'nd_options_label_color' => '',
    'nd_options_label_text' => '',
    'nd_options_title' => '',
    'nd_options_cf7' => '',
    'nd_options_fields_full_width' => '',
  ), $atts);

  wp_enqueue_style( 'nd_options_cf7_style', esc_url( plugins_url( 'css/cf7.css', __FILE__ ) ) );

  $str = '';

  //get variables
  $nd_options_class = $atts['nd_options_class'];
  $nd_options_layout = $atts['nd_options_layout'];
  $nd_options_label_color = $atts['nd_options_label_color'];
  $nd_options_label_text = $atts['nd_options_label_text'];
  $nd_options_title = $atts['nd_options_title'];
  $nd_options_cf7 = $atts['nd_options_cf7'];
  $nd_options_fields_full_width = $atts['nd_options_fields_full_width'];



  //default value for avoid error 
  if ($nd_options_layout == '') { $nd_options_layout = "layout-1"; }

  // the layout selected
  $nd_options_layout = sanitize_key($nd_options_layout);
  $nd_options_layout_selected = dirname( __FILE__ ).'/layout/'.$nd_options_layout.'.php';
  include realpath($nd_options_layout_selected);


  //check datas
  $nd_options_allowed_html = [
    'div'      => [ 
 'id' => [],
 'class' => [],
 'style' => [],
 'lang' => [],
 'dir' => [],
 'aria-hidden' => [],
],
'h6'      => [  
 'id' => [],
 'class' => [],
 'style' => [],
 ],       
'h1'      => [  
 'id' => [],
 'class' => [],
 'style' => [],
],
'strong'      => [ 
 'id' => [],
 'class' => [],
 'style' => [], 
 ],     
'p'      => [ 
 'id' => [],
 'class' => [],
 'style' => [],
 'role' => [],
 'aria-live' => [],
 'aria-atomic' => [],
],
'ul'      => [ 
 'id' => [],
 'class' => [],
 'style' => [],
],
'li'      => [ 
 'id' => [],
 'class' => [],
 'style' => [],
],
'form'      => [  
 'id' => [],
 'class' => [],
 'style' => [],
 'action' => [],
 'method' => [],
 'aria-label' => [],
 'novalidate' => [],
 'data-status' => [],
],
'input'      => [  
 'id' => [],
 'class' => [],
 'style' => [],
 'type' => [],
 'name' => [],
 'value' => [],
 'size' => [],
 'autocomplete' => [],
 'aria-required' => [],
 'aria-invalid' => [],
],
'label'      => [ 
 'id' => [],
 'class' => [],
 'style' => [],
],
'br'      => [ 
 'id' => [],
 'class' => [],
 'style' => [],
],
'span'      => [  
 'id' => [],
 'class' => [],
 'style' => [],
 'data-name' => [],
],
'textarea'      => [
 'id' => [],
 'class' => [],
 'style' => [],
 'cols' => [],
 'rows' => [],
 'aria-invalid' => [],
 'name' => [],
],
  ];

  $str = wp_kses( $str, $nd_options_allowed_html );
  return apply_filters('uds_shortcode_out_filter', $str);
  
}

Code file location:

nd-shortcodes/nd-shortcodes/shortcodes/custom/cf7/index.php

ND Shortcodes [nd_column] Shortcode

The ‘nd_column’ shortcode from the nd-shortcodes plugin is designed to create a responsive column layout. It allows the user to set the width and padding of the column. The shortcode takes two parameters – ‘width’ and ‘padding’. If these are not provided, default values are set – 100% for width and 10px for padding. The content within the shortcode is then wrapped in a div, creating a column with the specified properties.

Shortcode: [nd_column]

Parameters

Here is a list of all possible nd_column shortcode parameters and attributes:

  • width – defines the width of the content area.
  • padding – sets the space between the content and its border.

Examples and Usage

Basic example – A simple implementation of the ‘nd_column’ shortcode without specifying any parameters/atts. By default, the width will be set to 100% and padding to 10px.

[nd_column /]

Advanced examples

Use the ‘nd_column’ shortcode to create a column with a specific width and padding. The ‘width’ and ‘padding’ parameters/atts allow you to customize the dimensions of the column.

[nd_column width="50%" padding="20px" /]

Use the ‘nd_column’ shortcode to wrap other content. In this example, a paragraph of text is wrapped inside the column. The text will inherit the width and padding specified in the ‘nd_column’ shortcode.

[nd_column width="75%" padding="15px"]
Your content here
[/nd_column]

Use the ‘nd_column’ shortcode to create multiple columns in a row. Each column will have its own width and padding. This can be useful for creating layouts with multiple columns of content.

[nd_column width="30%" padding="10px"]
First column content
[/nd_column]
[nd_column width="30%" padding="10px"]
Second column content
[/nd_column]
[nd_column width="30%" padding="10px"]
Third column content
[/nd_column]

PHP Function Code

In case you have difficulties debugging what causing issues with [nd_column] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'nd_column', 'nd_options_columns' );

Shortcode PHP function:

function nd_options_columns( $nd_options_atts, $nd_options_content = null ) {
    
    $nd_options_column = shortcode_atts( 
    	array(
	        'width' => '',
            'padding' => '',
    	), 
    $nd_options_atts );


    $nd_options_width = $nd_options_column['width'];
    $nd_options_padding = $nd_options_column['padding'];
    
    if ( $nd_options_column['width'] == '' ) { $nd_options_width = '100%'; }
    if ( $nd_options_column['padding'] == '' ) { $nd_options_padding = '10px'; }


    $str = '<div class="nd_options_float_left nd_options_box_sizing_border_box nd_options_width_100_percentage_all_iphone_important nd_options_padding_0_right_important_all_iphone nd_options_padding_0_left_important_all_iphone " style="padding: '.$nd_options_padding.'; width:'.$nd_options_width.';" >'.do_shortcode($nd_options_content).'</div>';

    $nd_options_str_shortcode = wp_kses_post( $str );
    return $nd_options_str_shortcode;
    
}

Code file location:

nd-shortcodes/nd-shortcodes/shortcodes/custom/column/index.php

ND Shortcodes [nd_options_countdown] Shortcode

The nd-shortcodes plugin’s ‘nd_options_countdown’ shortcode is used to create a customizable countdown timer on a WordPress site. It allows you to set specific attributes like layout, date, width, and color for numbers, years, days, hours, minutes, and seconds.

Shortcode: [nd_options_countdown]

Parameters

Here is a list of all possible nd_options_countdown shortcode parameters and attributes:

  • nd_options_class – Specifies the CSS class for the countdown.
  • nd_options_layout – Defines the layout style of the countdown.
  • nd_options_date – Sets the target date for the countdown.
  • nd_options_width – Determines the width of the countdown.
  • nd_options_number_color – Sets the color of the numbers in the countdown.
  • nd_options_display_years – Controls whether to display years in the countdown.
  • nd_options_years_color – Sets the color of the years text.
  • nd_options_years_bg_color – Defines the background color of the years section.
  • nd_options_display_days – Controls whether to display days in the countdown.
  • nd_options_days_color – Sets the color of the days text.
  • nd_options_days_bg_color – Defines the background color of the days section.
  • nd_options_display_hours – Controls whether to display hours in the countdown.
  • nd_options_hours_color – Sets the color of the hours text.
  • nd_options_hours_bg_color – Defines the background color of the hours section.
  • nd_options_display_minutes – Controls whether to display minutes in the countdown.
  • nd_options_minutes_color – Sets the color of the minutes text.
  • nd_options_minutes_bg_color – Defines the background color of the minutes section.
  • nd_options_display_seconds – Controls whether to display seconds in the countdown.
  • nd_options_seconds_color – Sets the color of the seconds text.
  • nd_options_seconds_bg_color – Defines the background color of the seconds section.

Examples and Usage

Basic example – Displays a countdown to a specific date with default settings.

[nd_options_countdown nd_options_date="2023-12-31" /]

Advanced examples

Displays a countdown to a specific date with custom colors for numbers and background, and hides the years and seconds from the countdown.

[nd_options_countdown nd_options_date="2023-12-31" nd_options_number_color="#000000" nd_options_days_bg_color="#ffffff" nd_options_display_years="no" nd_options_display_seconds="no" /]

Displays a countdown in a custom layout to a specific date, with a custom width and hides the minutes from the countdown.

[nd_options_countdown nd_options_date="2023-12-31" nd_options_layout="layout-2" nd_options_width="500px" nd_options_display_minutes="no" /]

Displays a countdown to a specific date, with custom colors for each time unit, and hides the hours and years from the countdown.

[nd_options_countdown nd_options_date="2023-12-31" nd_options_days_color="#ff0000" nd_options_hours_color="#00ff00" nd_options_minutes_color="#0000ff" nd_options_seconds_color="#ff00ff" nd_options_display_hours="no" nd_options_display_years="no" /]

PHP Function Code

In case you have difficulties debugging what causing issues with [nd_options_countdown] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('nd_options_countdown', 'nd_options_shortcode_countdown');

Shortcode PHP function:

function nd_options_shortcode_countdown($atts, $content = null)
{  

  $atts = shortcode_atts(
  array(
    'nd_options_class' => '',
    'nd_options_layout' => '',
    'nd_options_date' => '',
    'nd_options_width' => '',
    'nd_options_number_color' => '',
    'nd_options_display_years' => '',
    'nd_options_years_color' => '',
    'nd_options_years_bg_color' => '',
    'nd_options_display_days' => '',
    'nd_options_days_color' => '',
    'nd_options_days_bg_color' => '',
    'nd_options_display_hours' => '',
    'nd_options_hours_color' => '',
    'nd_options_hours_bg_color' => '',
    'nd_options_display_minutes' => '',
    'nd_options_minutes_color' => '',
    'nd_options_minutes_bg_color' => '',
    'nd_options_display_seconds' => '',
    'nd_options_seconds_color' => '',
    'nd_options_seconds_bg_color' => '',
  ), $atts);

  $str = '';

  //get variables
  $nd_options_class = $atts['nd_options_class'];
  $nd_options_layout = $atts['nd_options_layout'];
  $nd_options_date = $atts['nd_options_date'];
  $nd_options_width = $atts['nd_options_width'];
  $nd_options_number_color = $atts['nd_options_number_color'];
  $nd_options_display_years = $atts['nd_options_display_years'];
  $nd_options_years_color = $atts['nd_options_years_color'];
  $nd_options_years_bg_color = $atts['nd_options_years_bg_color'];
  $nd_options_display_days = $atts['nd_options_display_days'];
  $nd_options_days_color = $atts['nd_options_days_color'];
  $nd_options_days_bg_color = $atts['nd_options_days_bg_color'];
  $nd_options_display_hours = $atts['nd_options_display_hours'];
  $nd_options_hours_color = $atts['nd_options_hours_color'];
  $nd_options_hours_bg_color = $atts['nd_options_hours_bg_color'];
  $nd_options_display_minutes = $atts['nd_options_display_minutes'];
  $nd_options_minutes_color = $atts['nd_options_minutes_color'];
  $nd_options_minutes_bg_color = $atts['nd_options_minutes_bg_color'];
  $nd_options_display_seconds = $atts['nd_options_display_seconds'];
  $nd_options_seconds_color = $atts['nd_options_seconds_color'];
  $nd_options_seconds_bg_color = $atts['nd_options_seconds_bg_color'];

  //display
  if ( $nd_options_display_years != 'yes' ) { $nd_options_display_years = 'nd_options_display_none'; }
  if ( $nd_options_display_days != 'yes' ) { $nd_options_display_days = 'nd_options_display_none'; }
  if ( $nd_options_display_hours != 'yes' ) { $nd_options_display_hours = 'nd_options_display_none'; }
  if ( $nd_options_display_minutes != 'yes' ) { $nd_options_display_minutes = 'nd_options_display_none'; }
  if ( $nd_options_display_seconds != 'yes' ) { $nd_options_display_seconds = 'nd_options_display_none'; }

  //translate
  $nd_options_text_years = __('YEARS','nd-shortcodes');
  $nd_options_text_days = __('DAYS','nd-shortcodes');
  $nd_options_text_hours = __('HOURS','nd-shortcodes');
  $nd_options_text_minutes = __('MINUTES','nd-shortcodes');
  $nd_options_text_seconds = __('SECONDS','nd-shortcodes');

  //add script
  wp_enqueue_script( 'nd_options_countdown_plugin', esc_url( plugins_url( 'js/countdown.js', __FILE__ ) ) );
  wp_enqueue_style( 'nd_options_countdown_style', esc_url( plugins_url( 'css/countdown.css', __FILE__ ) ) );




  //default value for avoid error 
  if ($nd_options_layout == '') { $nd_options_layout = "layout-1"; }

  // the layout selected
  $nd_options_layout = sanitize_key($nd_options_layout);
  $nd_options_layout_selected = dirname( __FILE__ ).'/layout/'.$nd_options_layout.'.php';
  include realpath($nd_options_layout_selected);

  $str .= '<div class="nd_options_countdown"></div>';

  $nd_options_str_shortcode = wp_kses_post( $str );
  return apply_filters('uds_shortcode_out_filter', $nd_options_str_shortcode);
}

Code file location:

nd-shortcodes/nd-shortcodes/shortcodes/custom/countdown/index.php

ND Shortcodes [nd_options_counter] Shortcode

The ‘nd_options_counter’ shortcode from the nd-shortcodes plugin is designed to create a customizable counter on your WordPress site. It allows you to specify class, layout, number, padding, number color, background color, number font size, and text alignment. . The shortcode uses jQuery to start the counter and includes a default layout to avoid errors. It also sanitizes the layout key for security. The counter is implemented through the ‘counter.js’ script.

Shortcode: [nd_options_counter]

Parameters

Here is a list of all possible nd_options_counter shortcode parameters and attributes:

  • nd_options_class – Assigns a specific CSS class to the counter.
  • nd_options_layout – Determines the layout of the counter.
  • nd_options_number – Sets the number to be displayed by the counter.
  • nd_options_padding – Controls the padding around the counter.
  • nd_options_number_color – Defines the color of the counter’s number.
  • nd_options_bg_color – Chooses the background color of the counter.
  • nd_options_number_font_size – Sets the font size of the counter’s number.
  • nd_options_text_align – Adjusts the alignment of the counter’s text.

Examples and Usage

Basic example – Depicts a simple usage of the counter shortcode with minimum parameters.

[nd_options_counter nd_options_number="100" /]

Advanced examples – Illustrates the usage of the counter shortcode with multiple parameters, allowing for greater customization.

Creating a counter with a specific layout, padding, and alignment. The counter will start from 0 and count up to the specified number (500), with the text color and background color also specified.

[nd_options_counter nd_options_layout="layout-2" nd_options_number="500" nd_options_padding="20px" nd_options_number_color="#000000" nd_options_bg_color="#FFFFFF" nd_options_text_align="center" /]

Displaying a counter with a custom class, allowing for additional CSS styling. The counter will count up to the specified number (1000), with a specific font size for the number.

[nd_options_counter nd_options_class="custom-counter" nd_options_number="1000" nd_options_number_font_size="32px" /]

PHP Function Code

In case you have difficulties debugging what causing issues with [nd_options_counter] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('nd_options_counter', 'nd_options_shortcode_counter');

Shortcode PHP function:

function nd_options_shortcode_counter($atts, $content = null)
{  

  $atts = shortcode_atts(
  array(
    'nd_options_class' => '',
    'nd_options_layout' => '',
    'nd_options_number' => '',
    'nd_options_padding' => '',
    'nd_options_number_color' => '',
    'nd_options_bg_color' => '',
    'nd_options_number_font_size' => '',
    'nd_options_text_align' => '',
  ), $atts);

  $str = '';

  //get variables
  $nd_options_class = $atts['nd_options_class'];
  $nd_options_layout = $atts['nd_options_layout'];
  $nd_options_number = $atts['nd_options_number'];
  $nd_options_padding = $atts['nd_options_padding'];
  $nd_options_number_color = $atts['nd_options_number_color'];
  $nd_options_number_font_size = $atts['nd_options_number_font_size'];
  $nd_options_text_align = $atts['nd_options_text_align'];
  $nd_options_bg_color = $atts['nd_options_bg_color'];

  wp_enqueue_script( 'nd_options_counter_plugin', esc_url( plugins_url( 'js/counter.js', __FILE__ ) ) );

  $nd_options_script = '

  jQuery(document).ready(function() {

      //START counter
      jQuery(function ($) {
        
        // start all the timers
        $(".nd_options_counter").each(count);
        
        function count(options) {
            var $this = $(this);
            options = $.extend({}, options || {}, $this.data("countToOptions") || {});
            $this.countTo(options);
        }

      });
      //END counter

    });  

  ';

  wp_add_inline_script('nd_options_counter_plugin',$nd_options_script);

  $str .='';

  //default value for avoid error 
  if ($nd_options_layout == '') { $nd_options_layout = "layout-1"; }

  // the layout selected
  $nd_options_layout = sanitize_key($nd_options_layout);
  $nd_options_layout_selected = dirname( __FILE__ ).'/layout/'.$nd_options_layout.'.php';
  include realpath($nd_options_layout_selected);

  $nd_options_str_shortcode = wp_kses_post( $str );
  return apply_filters('uds_shortcode_out_filter', $nd_options_str_shortcode);
  
}

Code file location:

nd-shortcodes/nd-shortcodes/shortcodes/custom/counter/index.php

ND Shortcodes [nd_options_divider] Shortcode

The ‘nd_options_divider’ shortcode is used to insert a customizable divider in your WordPress content. You can adjust its class, layout, height, width, color, and alignment. This shortcode allows you to create a divider with unique styles and dimensions. It also provides a default layout and color if none is specified.

Shortcode: [nd_options_divider]

Parameters

Here is a list of all possible nd_options_divider shortcode parameters and attributes:

  • nd_options_class – adds a CSS class to the divider
  • nd_options_layout – determines the layout style of the divider
  • nd_options_height – sets the height of the divider, default is ‘2px’
  • nd_options_width – sets the width of the divider, default is ’30px’
  • nd_options_color – sets the color of the divider, default is ‘#f1f1f1’
  • nd_options_align – sets the alignment of the divider, default is ‘center’

Examples and Usage

Basic example – A simple division line with default settings

[nd_options_divider /]

Advanced examples – Customizing the divider with specific parameters/attributes

Example 1: Adjusting the height and width of the divider

[nd_options_divider nd_options_height="5px" nd_options_width="50px" /]

Example 2: Changing the color and alignment of the divider

[nd_options_divider nd_options_color="#000000" nd_options_align="nd_options_text_align_left" /]

Example 3: Applying a custom class to the divider

[nd_options_divider nd_options_class="myCustomClass" /]

Example 4: Combining multiple parameters for a fully customized divider

[nd_options_divider nd_options_class="myCustomClass" nd_options_height="5px" nd_options_width="50px" nd_options_color="#000000" nd_options_align="nd_options_text_align_left" /]

PHP Function Code

In case you have difficulties debugging what causing issues with [nd_options_divider] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('nd_options_divider', 'nd_options_shortcode_divider');

Shortcode PHP function:

function nd_options_shortcode_divider($atts, $content = null)
{  

  $atts = shortcode_atts(
  array(
    'nd_options_class' => '',
    'nd_options_layout' => '',
    'nd_options_height' => '',
    'nd_options_width' => '',
    'nd_options_color' => '',
    'nd_options_align' => '',
  ), $atts);

  $str = '';

  //get variables
  $nd_options_class = $atts['nd_options_class'];
  $nd_options_layout = $atts['nd_options_layout'];
  $nd_options_height = $atts['nd_options_height']; if ( $nd_options_height == '' ) { $nd_options_height = '2px'; }
  $nd_options_width = $atts['nd_options_width']; if ( $nd_options_width == '' ) { $nd_options_width = '30px'; }
  $nd_options_color = $atts['nd_options_color']; if ( $nd_options_color == '' ) { $nd_options_color = '#f1f1f1'; }
  $nd_options_align = $atts['nd_options_align']; if ( $nd_options_align == '' ) { $nd_options_align = 'nd_options_text_align_center'; }

  //default value for avoid error 
  if ($nd_options_layout == '') { $nd_options_layout = "layout-1"; }

  // the layout selected
  $nd_options_layout = sanitize_key($nd_options_layout);
  $nd_options_layout_selected = dirname( __FILE__ ).'/layout/'.$nd_options_layout.'.php';
  include realpath($nd_options_layout_selected);


  $nd_options_str_shortcode = wp_kses_post( $str );
  return apply_filters('uds_shortcode_out_filter', $nd_options_str_shortcode);
  
}

Code file location:

nd-shortcodes/nd-shortcodes/shortcodes/custom/divider/index.php

ND Shortcodes [nd_options_focus_number] Shortcode

The ‘nd_options_focus_number’ shortcode from the nd-shortcodes plugin allows users to display a focus number with a customizable layout. It offers parameters to adjust the class, title, description, number, text color, background color, and background image.

Shortcode: [nd_options_focus_number]

Parameters

Here is a list of all possible nd_options_focus_number shortcode parameters and attributes:

  • nd_options_class – Allows customization of the class for CSS styling.
  • nd_options_layout – Sets the layout type, default is “layout-1”.
  • nd_options_title – Specifies the title for the focus number section.
  • nd_options_description – Provides a description for the focus number section.
  • nd_options_number – Sets the number to be displayed in the focus number section.
  • nd_options_text_color – Sets the color of the text, default is white.
  • nd_options_bg_color – Sets the background color, default is black.
  • nd_options_image_bg – Adds a background image to the focus number section.

Examples and Usage

Basic example – Utilizing the shortcode to display a focus number with a specific layout, title, and description.

[nd_options_focus_number nd_options_layout="layout-1" nd_options_title="Focus Title" nd_options_description="This is a focus description." /]

Advanced examples

Using the shortcode to display a focus number with a specific layout, title, description, and a unique number. Additionally, it includes text color and background color customizations.

[nd_options_focus_number nd_options_layout="layout-2" nd_options_title="Advanced Focus Title" nd_options_description="This is an advanced focus description." nd_options_number="5" nd_options_text_color="#000" nd_options_bg_color="#fff" /]

Utilizing the shortcode to display a focus number with a specific layout, title, description, number, and a background image. The background image is referenced by its attachment ID in the WordPress media library.

[nd_options_focus_number nd_options_layout="layout-3" nd_options_title="Image Focus Title" nd_options_description="This is an image focus description." nd_options_number="10" nd_options_image_bg="123" /]

PHP Function Code

In case you have difficulties debugging what causing issues with [nd_options_focus_number] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('nd_options_focus_number', 'nd_options_shortcode_focus_number');

Shortcode PHP function:

function nd_options_shortcode_focus_number($atts, $content = null)
{  

  $atts = shortcode_atts(
  array(
    'nd_options_class' => '',
    'nd_options_layout' => '',
    'nd_options_title' => '',
    'nd_options_description' => '',
    'nd_options_number' => '',
    'nd_options_text_color' => '',
    'nd_options_bg_color' => '',
    'nd_options_image_bg' => '',
  ), $atts);

  wp_enqueue_style( 'nd_options_focus_number_style', esc_url( plugins_url( 'css/focus-number.css', __FILE__ ) ) );

  $str = '';

  //get variables
  $nd_options_class = $atts['nd_options_class'];
  $nd_options_layout = $atts['nd_options_layout'];
  $nd_options_title = $atts['nd_options_title'];
  $nd_options_description = $atts['nd_options_description'];
  $nd_options_number = $atts['nd_options_number'];
  $nd_options_text_color = $atts['nd_options_text_color'];
  $nd_options_bg_color = $atts['nd_options_bg_color'];
  $nd_options_image_src = wp_get_attachment_image_src($atts['nd_options_image_bg'],'large');

  //default value for avoid error 
  if ($nd_options_layout == '') { $nd_options_layout = "layout-1"; }
  if ($nd_options_text_color == '') { $nd_options_text_color = "#fff"; }
  if ($nd_options_bg_color == '') { $nd_options_bg_color = "#000"; }

  if ($nd_options_image_src[0] == '') { 
    $nd_options_bg_style = ' background-color: '.$nd_options_bg_color.' ';
  }else{ 
    $nd_options_bg_style = ' background-image:url('.$nd_options_image_src[0].'); '; 
  }

  // the layout selected
  $nd_options_layout = sanitize_key($nd_options_layout);
  $nd_options_layout_selected = dirname( __FILE__ ).'/layout/'.$nd_options_layout.'.php';
  include realpath($nd_options_layout_selected);

  $nd_options_str_shortcode = wp_kses_post( $str );
  return apply_filters('uds_shortcode_out_filter', $nd_options_str_shortcode);
  
}

Code file location:

nd-shortcodes/nd-shortcodes/shortcodes/custom/focus-number/index.php

ND Shortcodes [nd_options_image] Shortcode

The nd-shortcodes plugin shortcode, ‘nd_options_image’, is designed to embed images into a webpage. It allows users to customize the image’s alignment, width, and CSS class. This shortcode uses various parameters like ‘nd_options_class’ for CSS styling, ‘nd_options_image’ for the image source, ‘nd_options_width’ for setting image width, and ‘nd_options_align’ for image alignment. The function ‘nd_options_shortcode_image’ extracts these attributes, creates an HTML string with them, and returns the filtered output. This way, users can easily tailor images to fit their page design.

Shortcode: [nd_options_image]

Parameters

Here is a list of all possible nd_options_image shortcode parameters and attributes:

  • nd_options_class – defines the CSS class for the image
  • nd_options_image – sets the image source from the WordPress media library
  • nd_options_width – controls the width of the image
  • nd_options_align – specifies the alignment of the image

Examples and Usage

Basic example – The shortcode allows you to add an image with a specified class and alignment. In this example, we are adding an image with the ID 123, class ‘my-image’, width ‘100%’ and alignment ‘center’.

[nd_options_image nd_options_class='my-image' nd_options_image='123' nd_options_width='100%' nd_options_align='center']

Advanced examples

Using the shortcode to add an image with a specified class, width, and alignment. This time, we are also adding a custom style to the image. Note that the image ID, class, width, and alignment are specified in the shortcode attributes.

[nd_options_image nd_options_class='custom-style' nd_options_image='456' nd_options_width='50%' nd_options_align='left']

In this next example, we are using the shortcode to add an image without specifying a class or alignment. Instead, we are only specifying the image ID and width. The image will be displayed with the default alignment (left) and without any additional styling.

[nd_options_image nd_options_image='789' nd_options_width='75%']

PHP Function Code

In case you have difficulties debugging what causing issues with [nd_options_image] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('nd_options_image', 'nd_options_shortcode_image');

Shortcode PHP function:

function nd_options_shortcode_image($atts, $content = null)
{  

  $atts = shortcode_atts(
  array(
    'nd_options_class' => '',
    'nd_options_image' => '',
    'nd_options_width' => '',
    'nd_options_align' => '',
  ), $atts);

  $str = '';

  //get variables
  $nd_options_class = $atts['nd_options_class'];
  $nd_options_width = $atts['nd_options_width'];
  $nd_options_align = $atts['nd_options_align'];
  $nd_options_image = wp_get_attachment_image_src($atts['nd_options_image'],'large');

  
  $str .= '
    <div style="text-align:'.$nd_options_align.';" class="nd_options_section">
      <img alt="" style="width:'.$nd_options_width.';" class="'.$nd_options_class.' nd_options_margin_0 nd_options_padding_0 " src="'.$nd_options_image[0].'">
    </div>
   ';

   $nd_options_str_shortcode = wp_kses_post( $str );
   return apply_filters('uds_shortcode_out_filter', $nd_options_str_shortcode);
   
}

Code file location:

nd-shortcodes/nd-shortcodes/shortcodes/custom/image/index.php

ND Shortcodes [nd_options_list] Shortcode

The ‘nd_options_list’ shortcode from the nd-shortcodes plugin is designed to create a customizable list element in your WordPress site. The shortcode accepts various parameters like ‘nd_options_class’, ‘nd_options_image’, ‘nd_options_title’, ‘nd_options_price’, ‘nd_options_description’, ‘nd_options_label’, and ‘nd_options_label_color’. These parameters allow you to customize the look and content of the list element. The function ‘nd_options_shortcode_list’ handles the logic for the shortcode. It first sets default values for the parameters. Then it retrieves the values provided by the user. If an image is provided, it adds it to the list element. Finally, it constructs the HTML for the list element and returns it. This shortcode provides a flexible way to add styled list elements to your WordPress site.

Shortcode: [nd_options_list]

Parameters

Here is a list of all possible nd_options_list shortcode parameters and attributes:

  • nd_options_class – Adds a custom CSS class to the list item
  • nd_options_image – Specifies the ID of the image to be displayed
  • nd_options_title – Sets the title of the list item
  • nd_options_price – Sets the price value for the list item
  • nd_options_description – Provides a description for the list item
  • nd_options_label – Sets a label for the list item
  • nd_options_label_color – Defines the background color of the label

Examples and Usage

Basic example – Display a list item with a title and description.

[nd_options_list nd_options_title="List Title" nd_options_description="This is a description." /]

Advanced examples:

Display a list item with a title, description, price, and a custom label.

[nd_options_list nd_options_title="List Title" nd_options_description="This is a description." nd_options_price="$100" nd_options_label="Custom Label" /]

Display a list item with a title, description, price, custom label, and a label color.

[nd_options_list nd_options_title="List Title" nd_options_description="This is a description." nd_options_price="$100" nd_options_label="Custom Label" nd_options_label_color="#ff0000" /]

Display a list item with a title, description, price, custom label, label color, and a custom class.

[nd_options_list nd_options_title="List Title" nd_options_description="This is a description." nd_options_price="$100" nd_options_label="Custom Label" nd_options_label_color="#ff0000" nd_options_class="custom-class" /]

Display a list item with a title, description, price, custom label, label color, custom class, and an image.

[nd_options_list nd_options_title="List Title" nd_options_description="This is a description." nd_options_price="$100" nd_options_label="Custom Label" nd_options_label_color="#ff0000" nd_options_class="custom-class" nd_options_image="image.jpg" /]

PHP Function Code

In case you have difficulties debugging what causing issues with [nd_options_list] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('nd_options_list', 'nd_options_shortcode_list');

Shortcode PHP function:

function nd_options_shortcode_list($atts, $content = null)
{  

  $atts = shortcode_atts(
  array(
    'nd_options_class' => '',
    'nd_options_image' => '',
    'nd_options_title' => '',
    'nd_options_price' => '',
    'nd_options_description' => '',
    'nd_options_label' => '',
    'nd_options_label_color' => '',
  ), $atts);

  $str = '';

  //get variables
  $nd_options_class = $atts['nd_options_class'];
  $nd_options_title = $atts['nd_options_title'];
  $nd_options_price = $atts['nd_options_price'];
  $nd_options_description = $atts['nd_options_description'];
  $nd_options_label = $atts['nd_options_label'];

  //label color
  $nd_options_label_color = $atts['nd_options_label_color'];
  if ( $nd_options_label_color == '' ) {
    $nd_options_label_class = 'nd_options_color_grey nd_options_border_1_solid_grey';
  }else{
    $nd_options_label_class = 'nd_options_color_white';
  }

  //declare variables
  $nd_options_image_padding = '';

  //nd_options_image
  $nd_options_image_src = wp_get_attachment_image_src($atts['nd_options_image'],'large');
  if ( $nd_options_image_src != '' ) {
    $nd_options_output_image = '<img alt="" class="nd_options_position_absolute nd_options_left_0 nd_options_position_initial_all_iphone nd_options_width_100_percentage_all_iphone nd_options_z_index_9" width="80" src="'.$nd_options_image_src[0].'">';
    $nd_options_image_padding = 'nd_options_padding_left_100 nd_options_padding_0_all_iphone';
  }else{
    $nd_options_output_image = ''; 
  }


  
  $str .= '
    <div class=" nd_options_list_component_l1 nd_options_section nd_options_position_relative '.$nd_options_class.' ">

        '.$nd_options_output_image.'
        
        <div class="nd_options_section nd_options_height_15"></div>
        <div class="nd_options_section nd_options_position_relative">
            <div class="nd_options_position_absolute nd_options_height_3 nd_options_width_100_percentage nd_options_bottom_2 nd_options_border_bottom_2_dotted_grey"></div>
            <h4 class=" '.$nd_options_image_padding.' nd_options_bg_white nd_options_float_left nd_options_position_relative nd_options_padding_right_10"><strong>'.$nd_options_title.'</strong></h4>
            <h4 class="nd_options_bg_white nd_options_float_right nd_options_position_relative nd_options_padding_left_10"><strong>'.$nd_options_price.'</strong></h4>
        </div>
        <div class="nd_options_section nd_options_height_10"></div>
        <div class="nd_options_section">
            <p class=" '.$nd_options_image_padding.' nd_options_font_weight_lighter nd_options_float_left">'.$nd_options_description.'</p>
            <p style="background-color:'.$nd_options_label_color.';" class=" '.$nd_options_label_class.' nd_options_display_inline_block nd_options_first_font nd_options_padding_5_10 nd_options_border_radius_15 nd_options_float_right nd_options_font_size_13">'.$nd_options_label.'</p>
        </div>
    </div>
  ';

  $nd_options_str_shortcode = wp_kses_post( $str );
  return apply_filters('uds_shortcode_out_filter', $nd_options_str_shortcode);
  
}

Code file location:

nd-shortcodes/nd-shortcodes/shortcodes/custom/list/index.php

ND Shortcodes [nd_options_magic_popup] Shortcode

The nd-shortcodes plugin’s ‘nd_options_magic_popup’ shortcode enables the creation of a customizable popup. This popup can include images, titles, subtitles, prices, labels, descriptions, and links. The shortcode allows for extensive customization, including font, color, and size adjustments for titles and links, as well as options for background icons and links. It also supports different layout and type options.

Shortcode: [nd_options_magic_popup]

Parameters

Here is a list of all possible nd_options_magic_popup shortcode parameters and attributes:

  • nd_options_class – Adds a custom CSS class to the popup
  • nd_options_layout – Chooses the layout style of the popup
  • nd_options_type – Sets the type of the popup (e.g., gallery or link)
  • nd_options_image – Sets the image to be displayed in the popup
  • nd_options_image_width – Adjusts the width of the image in the popup
  • nd_options_title – Sets the title text of the popup
  • nd_options_subtitle – Sets the subtitle text of the popup
  • nd_options_price – Displays a price in the popup
  • nd_options_label_text – Sets the text for a label in the popup
  • nd_options_label_color – Sets the color for the label text in the popup
  • nd_options_description – Adds a description to the popup
  • nd_options_title_adv_options – Sets advanced options for the title
  • nd_options_title_font – Sets the font for the popup title
  • nd_options_title_size – Adjusts the font size of the popup title
  • nd_options_title_color – Sets the color of the popup title
  • nd_options_link – Creates a link in the popup
  • nd_options_link_adv_options – Sets advanced options for the popup link
  • nd_options_link_size – Adjusts the font size of the popup link
  • nd_options_link_font – Sets the font for the popup link
  • nd_options_link_color – Sets the color of the popup link
  • nd_options_icon – Adds an icon to the popup
  • nd_options_bg_icon – Sets a background image for the icon in the popup
  • nd_options_bg_link – Sets a background image for the link in the popup
  • nd_options_link_type – Determines the type of the link in the popup

Examples and Usage

Basic example – Display a magic pop-up with a specified title and image.

[nd_options_magic_popup nd_options_title="My Popup" nd_options_image="123" /]

Advanced examples

Display a magic pop-up with a specific layout, image width, and custom link. The pop-up will have a title, subtitle, and a price. The link will have custom font size and color.

[nd_options_magic_popup nd_options_layout="layout-2" nd_options_image_width="70%" nd_options_title="My Popup" nd_options_subtitle="Subtitle Here" nd_options_price="$99" nd_options_link="{'url':'http://example.com','title':'Visit Site','target':'_blank'}" nd_options_link_font="Open Sans" nd_options_link_size="20" nd_options_link_color="#000" /]

Display a magic pop-up with a custom class, type, and background icon. The pop-up will also have a label text and color, as well as a description. The title will have advanced options with a specified font, size, and color.

[nd_options_magic_popup nd_options_class="myClass" nd_options_type="nd_options_mpopup_gallery" nd_options_bg_icon="456" nd_options_label_text="Label Here" nd_options_label_color="#f00" nd_options_description="This is a description." nd_options_title_adv_options="{'font':'Arial','size':'30','color':'#00f'}" /]

PHP Function Code

In case you have difficulties debugging what causing issues with [nd_options_magic_popup] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('nd_options_magic_popup', 'nd_options_shortcode_magic_popup');

Shortcode PHP function:

function nd_options_shortcode_magic_popup($atts, $content = null)
{  

  $atts = shortcode_atts(
  array(
    'nd_options_class' => '',
    'nd_options_layout' => '',
    'nd_options_type' => '',
    'nd_options_image' => '',
    'nd_options_image_width' => '',
    'nd_options_title' => '',
    'nd_options_subtitle' => '',
    'nd_options_price' => '',
    'nd_options_label_text' => '',
    'nd_options_label_color' => '',
    'nd_options_description' => '',
    'nd_options_title_adv_options' => '',
    'nd_options_title_font' => '',
    'nd_options_title_size' => '',
    'nd_options_title_color' => '',
    'nd_options_link' => '',
    'nd_options_link_adv_options' => '',
    'nd_options_link_size' => '',
    'nd_options_link_font' => '',
    'nd_options_link_color' => '',
    'nd_options_icon' => '',
    'nd_options_bg_icon' => '',
    'nd_options_bg_link' => '',
    'nd_options_link_type' => '',

  ), $atts);

  $str = '';

  //get variables
  $nd_options_bg_icon = $atts['nd_options_bg_icon']; 
  $nd_options_bg_link = $atts['nd_options_bg_link'];
  $nd_options_class = $atts['nd_options_class'];
  $nd_options_layout = $atts['nd_options_layout'];
  $nd_options_type = $atts['nd_options_type']; if ( $nd_options_type == '' ) { $nd_options_type = 'nd_options_mpopup_gallery'; }
  $nd_options_link_type = $atts['nd_options_link_type'];
  $nd_options_title = $atts['nd_options_title'];
  $nd_options_subtitle = $atts['nd_options_subtitle'];
  $nd_options_price = $atts['nd_options_price'];
  $nd_options_label_text = $atts['nd_options_label_text'];
  $nd_options_label_color = $atts['nd_options_label_color'];
  $nd_options_description = $atts['nd_options_description'];
  $nd_options_image_width = $atts['nd_options_image_width'];
  $nd_options_title_adv_options = $atts['nd_options_title_adv_options'];
  $nd_options_title_font = $atts['nd_options_title_font']; 
  $nd_options_title_size = $atts['nd_options_title_size']; if ( $nd_options_title_size == '' ) { $nd_options_title_size = '17'; }
  $nd_options_title_color = $atts['nd_options_title_color']; if ( $nd_options_title_color == '' ) { $nd_options_title_color = '#fff'; }
  $nd_options_link_adv_options = $atts['nd_options_link_adv_options'];
  $nd_options_link_font = $atts['nd_options_link_font'];
  $nd_options_link_size = $atts['nd_options_link_size']; if ( $nd_options_link_size == '' ) { $nd_options_link_size = '15'; }
  $nd_options_link_color = $atts['nd_options_link_color']; if ( $nd_options_link_color == '' ) { $nd_options_link_color = '#fff'; }
  $nd_options_image_src = wp_get_attachment_image_src($atts['nd_options_image'],'large');
  $nd_options_icon_src = wp_get_attachment_image_src($atts['nd_options_icon'],'large');

  //nd_options_link 
  $nd_options_link = vc_build_link( $atts['nd_options_link'] );
  $nd_options_link_url = $nd_options_link['url'];
  $nd_options_link_title = $nd_options_link['title'];
  $nd_options_link_target = $nd_options_link['target'];
  $nd_options_link_rel = $nd_options_link['rel'];

  if ( $nd_options_type == 'nd_options_mpopup_gallery' ){
    $nd_options_link_output = '<div class="'.$nd_options_type.'"><a style="font-size:'.$nd_options_link_size.'px; line-height:'.$nd_options_link_size.'px; color:'.$nd_options_link_color.';" class=" nd_options_outline_0 '.$nd_options_link_font.' '.$nd_options_type.'" href="'.$nd_options_image_src[0].'">'.$nd_options_link_title.'</a></div>';
  }else{
    $nd_options_link_output = '<a style="font-size:'.$nd_options_link_size.'px; line-height:'.$nd_options_link_size.'px; color:'.$nd_options_link_color.';" class=" nd_options_outline_0 '.$nd_options_link_font.' '.$nd_options_type.'" href="'.$nd_options_link_url.'">'.$nd_options_link_title.'</a>';  
  }
  
  wp_enqueue_script( 'nd_options_magnific_popup_plugin', esc_url( plugins_url( 'js/jquery.magnific-popup.min.js', __FILE__ ) ) );
  wp_enqueue_style( 'nd_options_magnific_popup_style', esc_url( plugins_url( 'css/magnific-popup.css', __FILE__ ) ) );

  //default value for avoid error include
  if ($nd_options_image_width == '') { $nd_options_image_width = "100%"; }
  if ($nd_options_layout == '') { $nd_options_layout = "layout-1"; }

  //include the layout selected
  $nd_options_layout = sanitize_key($nd_options_layout);
  $nd_options_layout_selected = dirname( __FILE__ ).'/layout/'.$nd_options_layout.'.php';
  include realpath($nd_options_layout_selected);

  $nd_options_str_shortcode = wp_kses_post( $str );
  return apply_filters('uds_shortcode_out_filter', $nd_options_str_shortcode);
  
}

Code file location:

nd-shortcodes/nd-shortcodes/shortcodes/custom/magic-popup/index.php

ND Shortcodes [nd_options_menu] Shortcode

The ‘nd_options_menu’ shortcode from the nd-shortcodes plugin is designed to create a custom menu in WordPress. It allows users to specify various attributes such as class, menu name, color, weight, font size, letter spacing, font family, alignment, and padding. This shortcode is flexible and highly customizable, enabling users to create menus that suit their specific design requirements. It also includes default values and fallback options, ensuring the menu displays correctly even if certain attributes are not specified.

Shortcode: [nd_options_menu]

Parameters

Here is a list of all possible nd_options_menu shortcode parameters and attributes:

  • nd_options_class – sets the CSS class for the menu
  • nd_options_menu – sets the name of the menu to display
  • nd_options_menu_color – sets the color of the menu text
  • nd_options_menu_weight – sets the weight of the menu text
  • nd_options_menu_font_size – sets the size of the menu text
  • nd_options_menu_letter_spacing – sets the spacing between letters in the menu
  • nd_options_menu_family – sets the font family of the menu text
  • nd_options_menu_align – sets the alignment of the menu text
  • nd_options_menu_padding – sets the padding around the menu

Examples and Usage

Basic example – Display a menu with default settings using its id or slug

[nd_options_menu nd_options_menu='main-menu' /]

Advanced examples

Display a menu with specific styling. This will display the ‘main-menu’ with the text aligned to the right, font size of 16 pixels, letter spacing of 2 pixels, and padding of 30 pixels.

[nd_options_menu nd_options_menu='main-menu' nd_options_menu_align='right' nd_options_menu_font_size='16' nd_options_menu_letter_spacing='2' nd_options_menu_padding='30' /]

Display a menu with a custom class. This can be helpful if you want to add specific CSS styles to the menu. In this example, the added class is ‘my-custom-menu’.

[nd_options_menu nd_options_menu='main-menu' nd_options_class='my-custom-menu' /]

Display a menu with a specific font family. This will display the ‘main-menu’ with the second font family defined in the theme customizer.

[nd_options_menu nd_options_menu='main-menu' nd_options_menu_family='nd_options_second_font' /]

PHP Function Code

In case you have difficulties debugging what causing issues with [nd_options_menu] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('nd_options_menu', 'nd_options_shortcode_menu');

Shortcode PHP function:

function nd_options_shortcode_menu($atts, $content = null)
{  

  $atts = shortcode_atts(
  array(
    'nd_options_class' => '',
    'nd_options_menu' => '',
    'nd_options_menu_color' => '',
    'nd_options_menu_weight' => '',
    'nd_options_menu_font_size' => '',
    'nd_options_menu_letter_spacing' => '',
    'nd_options_menu_family' => '',
    'nd_options_menu_align' => '',
    'nd_options_menu_padding' => '',
  ), $atts);

  wp_enqueue_style( 'nd_options_menu_style', esc_url( plugins_url( 'css/menu.css', __FILE__ ) ) );

  $str = '';

  //get variables
  $nd_options_class = $atts['nd_options_class'];
  $nd_options_menu = $atts['nd_options_menu'];
  $nd_options_menu_color = $atts['nd_options_menu_color'];
  $nd_options_menu_weight = $atts['nd_options_menu_weight'];
  $nd_options_menu_font_size = $atts['nd_options_menu_font_size'];
  $nd_options_menu_letter_spacing = $atts['nd_options_menu_letter_spacing'];
  $nd_options_menu_family = $atts['nd_options_menu_family'];
  $nd_options_menu_align = $atts['nd_options_menu_align'];
  $nd_options_menu_padding = $atts['nd_options_menu_padding'];
  $nd_options_menu_id = rand(0, 1000);

  //default
  if ( $nd_options_menu_color == '') { $nd_options_menu_color = '#000'; } 
  if ( $nd_options_menu_weight == '') { $nd_options_menu_weight = 'normal'; } 
  if ( $nd_options_menu_font_size == '') { $nd_options_menu_font_size = '14'; } 
  if ( $nd_options_menu_letter_spacing == '') { $nd_options_menu_letter_spacing = '0'; } 
  if ( $nd_options_menu_family == '') { $nd_options_menu_family = 'nd_options_first_font'; } 
  if ( $nd_options_menu_align == '') { $nd_options_menu_align = 'left'; } 
  if ( $nd_options_menu_padding == '') { $nd_options_menu_padding = '20'; } 


  //get fonts
  //get font family H
  $nd_options_customizer_font_family_h = get_option( 'nd_options_customizer_font_family_h', 'Montserrat:400,700' );
  $nd_options_font_family_h_array = explode(":", $nd_options_customizer_font_family_h);
  $nd_options_font_family_h = str_replace("+"," ",$nd_options_font_family_h_array[0]);
  //get font family P
  $nd_options_customizer_font_family_p = get_option( 'nd_options_customizer_font_family_p', 'Montserrat:400,700' );
  $nd_options_font_family_p_array = explode(":", $nd_options_customizer_font_family_p);
  $nd_options_font_family_p = str_replace("+"," ",$nd_options_font_family_p_array[0]);
  //get font family third
  $nd_options_customizer_font_family_third = get_option( 'nd_options_customizer_font_family_third', 'Montserrat:400,700' );
  $nd_options_font_family_third_array = explode(":", $nd_options_customizer_font_family_third);
  $nd_options_font_family_third = str_replace("+"," ",$nd_options_font_family_third_array[0]);

  if ( $nd_options_menu_family == 'nd_options_first_font' ){
    $nd_options_menu_font = $nd_options_font_family_h;
  }elseif ( $nd_options_menu_family == 'nd_options_second_font' ) {
    $nd_options_menu_font = $nd_options_font_family_p;
  }else{
    $nd_options_menu_font = $nd_options_font_family_third;
  }

  //get color p
  $nd_options_customizer_font_color_p = get_option( 'nd_options_customizer_font_color_p', '#a3a3a3' );


  $args = array(
    'menu'   => $nd_options_menu,
    'echo' => false
  );

  $str .= '<div class=" '.$nd_options_class.' nd_options_menu_component nd_options_section nd_options_menu_component_'.$nd_options_menu_id.'">'.wp_nav_menu( $args ).'</div>';

  $str .= '';


  $nd_options_style = '';
  $nd_options_style .= '


  .nd_options_menu_component_'.$nd_options_menu_id.' ul.menu{
    margin:0px;
    padding:0px;
    list-style:none;
    display:inline-block;
  }

  .nd_options_menu_component_'.$nd_options_menu_id.' > div{
    float:left;
    width:100%;
    text-align:'.$nd_options_menu_align.'; 
  }

  .nd_options_menu_component_'.$nd_options_menu_id.' ul.menu > li{
    margin:0px;
    padding:0px;
    display:inline-block;
  }

  .nd_options_menu_component_'.$nd_options_menu_id.' ul.menu > li a{
    color:'.$nd_options_menu_color.';
    font-weight:'.$nd_options_menu_weight.';
    font-size:'.$nd_options_menu_font_size.'px;
    line-height:'.$nd_options_menu_font_size.'px;
    letter-spacing:'.$nd_options_menu_letter_spacing.'px;
    padding:'.$nd_options_menu_padding.'px;
    display:inline-block;
    font-family:'.$nd_options_menu_font.';
  }';


  //adjust padding based on aligm
  if ( $nd_options_menu_align == 'left' ) {
    $nd_options_style .= '.nd_options_menu_component_'.$nd_options_menu_id.' ul.menu > li:first-child a{ padding-left: 0px; }';
  }elseif ( $nd_options_menu_align == 'right' ) {
    $nd_options_style .= '.nd_options_menu_component_'.$nd_options_menu_id.' ul.menu > li:last-child a{ padding-right: 0px; }';
  }

  $nd_options_style .= '
  #nd_options_header_5 .vc_row[data-vc-full-width] { overflow:visible; }


  /*dropdown*/
  .nd_options_menu_component_'.$nd_options_menu_id.' div > ul li:hover > ul.sub-menu { display: block; }
  .nd_options_menu_component_'.$nd_options_menu_id.' div > ul li > ul.sub-menu { margin-left: 0px; padding-top: 0px; width: 195px; z-index: 999; position: absolute; margin: 0px; padding: 0px; list-style: none; display: none; }
  
  .nd_options_menu_component_'.$nd_options_menu_id.' div > ul li > ul.sub-menu > li { padding: 15px 25px; border-bottom: 1px solid #f1f1f1; text-align: left; background-color: #fff; position: relative; box-shadow: 0px 2px 5px #f1f1f1; float: left; width: 100%; box-sizing:border-box; }
  .nd_options_menu_component_'.$nd_options_menu_id.' div > ul li > ul.sub-menu > li:hover { background-color: #f9f9f9;  }
  .nd_options_menu_component_'.$nd_options_menu_id.' div > ul li > ul.sub-menu > li:last-child { border-bottom: 0px solid #000; }

  .nd_options_menu_component_'.$nd_options_menu_id.' div > ul li > ul.sub-menu li a { font-size: 14px; float: left; width: 100%; margin:0px; padding:0px; font-weight:normal; letter-spacing:1px; color:'.$nd_options_customizer_font_color_p.'; }
  
  .nd_options_menu_component_'.$nd_options_menu_id.' div > ul li > ul.sub-menu li > ul.sub-menu { margin-left: 165px; top: 0; padding-top: 0; padding-left: 25px; }


  /*arrow for item has children*/
  .nd_options_menu_component_'.$nd_options_menu_id.' div > ul li > ul.sub-menu li.menu-item-has-children > a:after { content:""; float: right; border-style: solid; border-width: 5px 0 5px 5px; border-color: transparent transparent transparent '.$nd_options_customizer_font_color_p.'; margin-top: 1px; }




  ';
  wp_add_inline_style('nd_options_menu_style',$nd_options_style);



  $nd_options_str_shortcode = wp_kses_post( $str );
  return apply_filters('uds_shortcode_out_filter', $nd_options_str_shortcode);
  
}

Code file location:

nd-shortcodes/nd-shortcodes/shortcodes/custom/menu/index.php

ND Shortcodes [nd_options_open_sidebar] Shortcode

The ‘nd_options_open_sidebar’ shortcode from the nd-shortcodes plugin allows you to create a customizable sidebar in your WordPress site. This sidebar can be opened or closed with a click, and its appearance can be tailored with various attributes. This shortcode enables you to define the sidebar’s width, alignment, background color, and the image used to close the sidebar. You can also specify the pages where this sidebar should appear. It’s a powerful tool for enhancing website navigation and design.

Shortcode: [nd_options_open_sidebar]

Parameters

Here is a list of all possible nd_options_open_sidebar shortcode parameters and attributes:

  • nd_options_class – CSS class to customize the shortcode’s style.
  • nd_options_image – Image to be displayed when the sidebar is closed.
  • nd_options_image_close – Image to be displayed when the sidebar is open.
  • nd_options_image_close_width – Width of the image when the sidebar is open.
  • nd_options_width – Width of the sidebar.
  • nd_options_align – Alignment of the sidebar on the page.
  • nd_options_pages – Pages where the sidebar will be displayed.
  • nd_options_bg_color – Background color of the sidebar.
  • nd_options_sidebar_width – Width of the sidebar when open.
  • nd_options_image_close_position – Position of the close image on the sidebar.

Examples and Usage

Basic example – A simple usage of the nd-shortcodes plugin to open a sidebar with default settings.

[nd_options_open_sidebar]

Advanced examples

Using the shortcode to open a sidebar with a custom class, image, and width. This example also aligns the sidebar to the right and sets a custom background color.

[nd_options_open_sidebar nd_options_class="custom-class" nd_options_image="image.jpg" nd_options_width="400" nd_options_align="right" nd_options_bg_color="#f0f0f0"]

Using the shortcode to open a sidebar with a custom close image, close image width, and close image position. This example also sets a custom sidebar width and displays content from a specific page in the sidebar.

[nd_options_open_sidebar nd_options_image_close="close.jpg" nd_options_image_close_width="30" nd_options_image_close_position="10 10" nd_options_sidebar_width="500" nd_options_pages="123"]

PHP Function Code

In case you have difficulties debugging what causing issues with [nd_options_open_sidebar] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('nd_options_open_sidebar', 'nd_options_shortcode_open_sidebar');

Shortcode PHP function:

function nd_options_shortcode_open_sidebar($atts, $content = null)
{  

  $atts = shortcode_atts(
  array(
    'nd_options_class' => '',
    'nd_options_image' => '',
    'nd_options_image_close' => '',
    'nd_options_image_close_width' => '',
    'nd_options_width' => '',
    'nd_options_align' => '',
    'nd_options_pages' => '',
    'nd_options_bg_color' => '',
    'nd_options_sidebar_width' => '',
    'nd_options_image_close_position' => '',
  ), $atts);

  wp_enqueue_script( 'nd_options_open_sidebar_plugin', esc_url( plugins_url( 'js/open-sidebar.js', __FILE__ ) ) );

  $str = '';

  //get variables
  $nd_options_class = $atts['nd_options_class'];
  $nd_options_width = $atts['nd_options_width'];
  $nd_options_align = $atts['nd_options_align'];
  $nd_options_pages = $atts['nd_options_pages'];
  $nd_options_image_close_position = $atts['nd_options_image_close_position'];
  $nd_options_bg_color = $atts['nd_options_bg_color'];
  $nd_options_sidebar_width = $atts['nd_options_sidebar_width'];
  $nd_options_image = wp_get_attachment_image_src($atts['nd_options_image'],'large');
  $nd_options_image_close = wp_get_attachment_image_src($atts['nd_options_image_close'],'large');
  $nd_options_image_close_width = $atts['nd_options_image_close_width'];
  $nd_options_id_open_sidebar = rand(0, 1000);

  //default
  if ( $nd_options_bg_color == '' ) { $nd_options_bg_color = '#fff'; }
  if ( $nd_options_sidebar_width == '' ) { $nd_options_sidebar_width = '300'; }
  
  if ( $nd_options_image_close[0] == '' ) { 
    $nd_options_image_close_src = esc_url(plugins_url('icon-close-white.svg', __FILE__ ));
  }else{ 
    $nd_options_image_close_src = $nd_options_image_close[0]; 
  }

  if ( $nd_options_image_close_width == '' ) { $nd_options_image_close_width = '20'; }
  if ( $nd_options_image_close_position == '' ) { $nd_options_image_close_position = '20 20'; }
  if ( $nd_options_width == '' ) { $nd_options_width = '25px'; }

  //get position
  $nd_options_icon_positions = explode(" ", $nd_options_image_close_position);
  $nd_options_icon_position_right = $nd_options_icon_positions[0];
  $nd_options_icon_position_top = $nd_options_icon_positions[1];

  $nd_options_script = '

  jQuery(document).ready(function() {

      
      //START
      jQuery(function ($) {
        
        //OPEN sidebar content ( navigation 2 )
        $(".nd_options_open_sidebar_'.$nd_options_id_open_sidebar.'").on("click",function(event){

          //add rule to main container only if the component is in header
          if ( $( "#nd_options_header_5 .nd_options_open_sidebar_content_'.$nd_options_id_open_sidebar.', #nd_options_header_5_mobile .nd_options_open_sidebar_content_'.$nd_options_id_open_sidebar.'" ).length ) {
            $(".nicdark_site > .nd_options_container").css({ "position": "relative", "z-index": "0"});
          }
          
          //open sidebar
          $(".nd_options_open_sidebar_content_'.$nd_options_id_open_sidebar.'").css({ "right": "0px",});

        });
        
        //CLOSE sidebar content ( navigation 2 )
        $(".nd_options_close_sidebar_'.$nd_options_id_open_sidebar.'").on("click",function(event){

          $(".nd_options_open_sidebar_content_'.$nd_options_id_open_sidebar.'").css({ "right": "-'.$nd_options_sidebar_width.'px" });

          //add rule to main container only if the component is in header
          if ( $( "#nd_options_header_5 .nd_options_open_sidebar_content_'.$nd_options_id_open_sidebar.', #nd_options_header_5_mobile .nd_options_open_sidebar_content_'.$nd_options_id_open_sidebar.'" ).length ) {
            
            function nd_options_remove_style(){
              $(".nicdark_site > .nd_options_container").css({ "position": "", "z-index": ""});
            }
            setTimeout(nd_options_remove_style, 1000);

          }

        });


      });
      //END

    });

  ';

  wp_add_inline_script('nd_options_open_sidebar_plugin',$nd_options_script);

  
  $str .= '

    <div style="text-align:'.$nd_options_align.';" class="nd_options_section">
      <img alt="" style="width:'.$nd_options_width.';" class="'.$nd_options_class.' nd_options_cursor_pointer nd_options_open_sidebar_'.$nd_options_id_open_sidebar.' nd_options_margin_0 nd_options_padding_0 " src="'.$nd_options_image[0].'">
    </div>


    <!--START sidebar-->
    <div style="background-color:'.$nd_options_bg_color.'; width:'.$nd_options_sidebar_width.'px; right:-'.$nd_options_sidebar_width.'px;" class="nd_options_open_sidebar_contentt nd_options_open_sidebar_content_'.$nd_options_id_open_sidebar.' nd_options_box_sizing_border_box nd_options_overflow_hidden nd_options_overflow_y_auto nd_options_transition_all_08_ease nd_options_height_100_percentage nd_options_position_fixed nd_options_top_0 nd_options_z_index_999">

        <img style="right:'.$nd_options_icon_position_right.'px; top:'.$nd_options_icon_position_top.'px;" alt="" width="'.$nd_options_image_close_width.'" class="nd_options_close_sidebar_'.$nd_options_id_open_sidebar.' nd_options_cursor_pointer nd_options_z_index_9 nd_options_position_absolute" src="'.$nd_options_image_close_src.'">

        <div class="nd_options_section">';

          //insert page on sidebar
          $nd_options_post_h   = get_post($nd_options_pages);
          $nd_options_post_output_h =  apply_filters( 'the_content', $nd_options_post_h->post_content );

          //all page
          $str .= $nd_options_post_output_h;

          $nd_options_strings_h  = $nd_options_post_h->post_content;
          $nd_options_pieces_h = explode('css=".vc_custom_', $nd_options_strings_h);

          //get how many styles inserted
          $nd_options_qnt_styles_h = count($nd_options_pieces_h)-1;

          //style
          $str .= '<style>';
          for ($nd_options_i_h = 1; $nd_options_i_h <= $nd_options_qnt_styles_h; $nd_options_i_h++) {
            $nd_options_tests_h = explode(';}"][', $nd_options_pieces_h[$nd_options_i_h]);
            $str .= '.vc_custom_'.$nd_options_tests_h[0].';}

Code file location:

nd-shortcodes/nd-shortcodes/shortcodes/custom/open-sidebar/index.php

ND Shortcodes [nd_options_post_grid] Shortcode

The ‘nd_options_post_grid’ shortcode from the nd-shortcodes plugin enables the creation of a customizable post grid on your WordPress website. It provides various attributes to define the grid’s appearance and content. You can specify the grid’s layout, width, image width, image alignment, quantity of posts, category, order, and padding. It also enqueues the ‘post-grid.js’ script for additional functionality. The shortcode fetches posts based on the provided parameters and displays them in the chosen layout. This shortcode offers great flexibility for displaying posts in a grid format, making your website more dynamic and engaging.

Shortcode: [nd_options_post_grid]

Parameters

Here is a list of all possible nd_options_post_grid shortcode parameters and attributes:

  • nd_options_class – Class to apply custom CSS styles to the post grid.
  • nd_options_layout – Sets the layout of the post grid, default is ‘layout-1’.
  • nd_options_width – Defines the width of the post grid, default is full width.
  • nd_options_image_width – Sets the width of the image in the post, default is ’50’.
  • nd_options_image_align – Aligns the image either to the left or right, default is ‘left’.
  • nd_options_qnt – Determines the number of posts to display, default is all posts.
  • nd_options_category_slug – Filters posts by specific category slug.
  • nd_options_id – Specifies a single post to display by its unique ID.
  • nd_options_order – Sets the post order, default is descending (DESC).
  • nd_options_orderby – Orders posts by a specific parameter, default is by ‘date’.
  • nd_options_padding – Adds padding around the post grid.

Examples and Usage

Basic example – A simple usage of the nd_options_post_grid shortcode to display posts in a grid layout.

[nd_options_post_grid]

Advanced examples

Displaying a post grid with a specific layout, width, and image alignment. In this example, the layout is set to “layout-2”, the width is set to “nd_options_width_80_percentage”, and the image alignment is set to “right”.

[nd_options_post_grid nd_options_layout="layout-2" nd_options_width="nd_options_width_80_percentage" nd_options_image_align="right"]

Displaying a post grid with a specific quantity of posts, ordered by date in ascending order, and filtered by a specific category slug. In this example, the quantity is set to 5, the order is set to “ASC”, and the category slug is “news”.

[nd_options_post_grid nd_options_qnt="5" nd_options_order="ASC" nd_options_category_slug="news"]

Displaying a post grid with a specific padding. In this example, the padding is set to “20px”.

[nd_options_post_grid nd_options_padding="20px"]

PHP Function Code

In case you have difficulties debugging what causing issues with [nd_options_post_grid] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('nd_options_post_grid', 'nd_options_shortcode_post_grid');

Shortcode PHP function:

function nd_options_shortcode_post_grid($atts, $content = null)
{  

  $atts = shortcode_atts(
  array(
    'nd_options_class' => '',
    'nd_options_layout' => '',
    'nd_options_width' => '',
    'nd_options_image_width' => '',
    'nd_options_image_align' => '',
    'nd_options_qnt' => '',
    'nd_options_category_slug' => '',
    'nd_options_id' => '',
    'nd_options_order' => '',
    'nd_options_orderby' => '',
    'nd_options_padding' => '',
  ), $atts);

  wp_enqueue_script( 'nd_options_post_grid_plugin', esc_url( plugins_url( 'js/post-grid.js', __FILE__ ) ) );

  $str = '';

  //get variables
  $nd_options_class = $atts['nd_options_class'];
  $nd_options_layout = $atts['nd_options_layout'];
  $nd_options_width = $atts['nd_options_width'];
  $nd_options_image_width = $atts['nd_options_image_width'];
  $nd_options_image_align = $atts['nd_options_image_align'];
  $nd_options_qnt = $atts['nd_options_qnt'];
  $nd_options_category_slug = $atts['nd_options_category_slug'];
  $nd_options_id = $atts['nd_options_id'];
  $nd_options_order = $atts['nd_options_order'];
  $nd_options_orderby = $atts['nd_options_orderby'];
  $nd_options_padding = $atts['nd_options_padding'];


  //default value
  if ($nd_options_layout == '') { $nd_options_layout = "layout-1"; }
  if ($nd_options_width == '') { $nd_options_width = "nd_options_width_100_percentage"; }
  if ($nd_options_image_width == '') { $nd_options_image_width = "50"; }
  if ($nd_options_image_align == '') { $nd_options_image_align = "left"; }
  if ($nd_options_qnt == '') { $nd_options_qnt = -1; }
  if ($nd_options_category_slug == '') { $nd_options_category_slug = ''; }
  if ($nd_options_order == '') { $nd_options_order = 'DESC'; }
  if ($nd_options_orderby == '') { $nd_options_orderby = 'date'; }



  $args = array(
    'post_type' => 'post',
    'category_name' => $nd_options_category_slug,
    'posts_per_page' => $nd_options_qnt,
    'order' => $nd_options_order,
    'orderby' => $nd_options_orderby,
    'p' => $nd_options_id
  );

  $the_query = new WP_Query( $args );

  
  // the layout selected
  $nd_options_layout = sanitize_key($nd_options_layout);
  $nd_options_layout_selected = dirname( __FILE__ ).'/layout/'.$nd_options_layout.'.php';
  include realpath($nd_options_layout_selected);


  wp_reset_postdata();

   $nd_options_str_shortcode = wp_kses_post( $str );
   return apply_filters('uds_shortcode_out_filter', $nd_options_str_shortcode);

}

Code file location:

nd-shortcodes/nd-shortcodes/shortcodes/custom/post-grid/index.php

ND Shortcodes [nd_options_post_search] Shortcode

The nd-shortcodes plugin shortcode ‘nd_options_post_search’ enables users to search for posts on your WordPress site. It takes parameters for class, layout, and category slug. It uses AJAX to fetch search results, ensuring a smooth user experience. The layout can be customized, and a default layout is provided if none is specified. The shortcode also includes a counter and search result display control. This shortcode is ideal for enhancing site navigation and user engagement, by making your posts more accessible and easier to find.

Shortcode: [nd_options_post_search]

Parameters

Here is a list of all possible nd_options_post_search shortcode parameters and attributes:

  • nd_options_class – Specifies additional CSS classes for the search form.
  • nd_options_layout – Determines the layout style of the search form.
  • nd_options_category_slug – Filters the search results by a specific category.

Examples and Usage

Basic Example – A simple usage of the nd_options_post_search shortcode to display a search form with default settings.

[nd_options_post_search /]

Advanced Examples

Customizing the shortcode to display a search form with a specific layout and category slug. This allows you to tailor the search form to fit a specific category and layout style.

[nd_options_post_search nd_options_layout="layout-2" nd_options_category_slug="category-slug" /]

Adding a custom class to the search form. This allows you to further customize the look and feel of the search form using CSS.

[nd_options_post_search nd_options_class="custom-class" /]

Combining all parameters to create a fully customized search form. This example includes a custom layout, category slug, and class.

[nd_options_post_search nd_options_class="custom-class" nd_options_layout="layout-2" nd_options_category_slug="category-slug" /]

PHP Function Code

In case you have difficulties debugging what causing issues with [nd_options_post_search] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('nd_options_post_search', 'nd_options_shortcode_post_search');

Shortcode PHP function:

function nd_options_shortcode_post_search($atts, $content = null)
{  

  $atts = shortcode_atts(
  array(
    'nd_options_class' => '',
    'nd_options_layout' => '',
    'nd_options_category_slug' => '',
  ), $atts);

  $str = '';

  //get variables
  $nd_options_class = $atts['nd_options_class'];
  $nd_options_layout = $atts['nd_options_layout'];
  $nd_options_category_slug = $atts['nd_options_category_slug'];

  //default value
  if ($nd_options_category_slug == '') { $nd_options_category_slug = ''; }

  //ajax results
  $nd_options_get_search_results_params = array(
      'nd_options_ajaxurl_get_search_results' => admin_url('admin-ajax.php'),
      'nd_options_ajaxnonce_get_search_results' => wp_create_nonce('nd_options_get_search_results_nonce'),
  );

  wp_enqueue_style( 'nd_options_post_search_style', esc_url( plugins_url( 'css/post-search.css', __FILE__ ) ) );
  wp_enqueue_script( 'nd_options_post_search_plugin', esc_url( plugins_url( 'js/post_search.js', __FILE__ ) ), array( 'jquery' ) ); 
  wp_localize_script( 'nd_options_post_search_plugin', 'nd_options_my_vars_get_search_results', $nd_options_get_search_results_params ); 


  //default value for avoid error 
  if ($nd_options_layout == '') { $nd_options_layout = "layout-1"; }

  // the layout selected
  $nd_options_layout = sanitize_key($nd_options_layout);
  $nd_options_layout_selected = dirname( __FILE__ ).'/layout/'.$nd_options_layout.'.php';
  include realpath($nd_options_layout_selected);


  $nd_options_script = '

  jQuery(document).ready(function() {

      //START counter
      jQuery(function ($) {
        
        $("#nd_options_autocomplete_search").on("click", function () { 
          $( "#nd_options_site_filter" ).addClass("nd_options_active");
          $( "#nd_options_autocomplete_search_result" ).css("display","block");
        });

        $( "#nd_options_site_filter" ).on( "click", function() {
          $( "#nd_options_site_filter" ).removeClass("nd_options_active");
          $( "#nd_options_autocomplete_search_result" ).css("display","none");
        });
        
        $("#nd_options_autocomplete_search").on("input",function(e){
            var nd_options_keyword = $( this ).val();
            var nd_options_category_slug = $("#nd_options_autocomplete_search_category_slug").val();
            nd_options_get_ajax_search_results(nd_options_keyword,nd_options_category_slug);
        });

      });
      //END counter

    });

  ';

  wp_add_inline_script('nd_options_post_search_plugin',$nd_options_script);


  
  //check datas
  $nd_options_allowed_html = [
    'div'      => [ 
      'id' => [],
      'class' => [],
      'style' => [],
    ],
    'form'      => [
      'method' => [],
      'action' => [],
    ],
    'input'      => [ 
      'id' => [],
      'autocomplete' => [],
      'value' => [],
      'name' => [],
      'class' => [],
      'type' => [],
      'placeholder' => [],
    ],
    'h4'      => [ 
      'class' => [],
    ],
    'a'      => [ 
      'class' => [],
      'href' => [],
    ],
    'p'      => [
      'class' => [],
    ],
  ];

  $str = wp_kses( $str, $nd_options_allowed_html );



   return apply_filters('uds_shortcode_out_filter', $str);
}

Code file location:

nd-shortcodes/nd-shortcodes/shortcodes/custom/post-search/index.php

ND Shortcodes [nd_options_prices] Shortcode

The ‘nd_options_prices’ shortcode is designed to create a pricing table on a WordPress site. It supports customization of layout, title, subtitle, price, currency, description, link, and color. This shortcode fetches data from the WordPress database and displays it in a structured format. It uses the ‘vc_build_link’ function to create links, and ‘wp_get_attachment_image_src’ to fetch images.

Shortcode: [nd_options_prices]

Parameters

Here is a list of all possible nd_options_prices shortcode parameters and attributes:

  • nd_options_class – Designates the CSS class of the price block.
  • nd_options_layout – Specifies the layout style for the price block.
  • nd_options_image – Sets the image for the price block.
  • nd_options_image_price – Determines the image for the price section.
  • nd_options_title – Defines the title for the price block.
  • nd_options_sub_title – Specifies the subtitle for the price block.
  • nd_options_price – Sets the price value for the block.
  • nd_options_currency – Defines the currency for the price.
  • nd_options_description – Provides a description for the price block.
  • nd_options_description_2 – Offers an additional description for the block.
  • nd_options_link – Specifies a link for the price block.
  • nd_options_color_header_bg – Sets the background color of the header.
  • nd_options_bg_color – Determines the background color of the block.
  • nd_options_color – Defines the text color within the block.

Examples and Usage

Basic example – Displaying a pricing table with the default layout and basic pricing information.

[nd_options_prices nd_options_title="Basic Plan" nd_options_price="$19" nd_options_currency="USD" nd_options_description="This is our basic plan." /]

Advanced examples

Using the shortcode to display a pricing table with a custom layout, specific class, and additional details. The pricing table will include an image, subtitle, second description, and a link. The header background color, background color, and text color will be customized.

[nd_options_prices nd_options_class="custom-class" nd_options_layout="layout-2" nd_options_image="123" nd_options_image_price="456" nd_options_title="Premium Plan" nd_options_sub_title="Best Value" nd_options_price="$49" nd_options_currency="USD" nd_options_description="This is our premium plan." nd_options_description_2="Includes additional features." nd_options_link="url:%20http%3A//example.com%7Ctitle:More%20Info%7Ctarget:%20_blank" nd_options_color_header_bg="#000000" nd_options_bg_color="#ffffff" nd_options_color="#000000" /]

Using the shortcode to display a pricing table with a different layout, without an image, and with encoded description. The pricing table will have a custom class, subtitle, link, and customized colors.

[nd_options_prices nd_options_class="another-class" nd_options_layout="layout-3" nd_options_title="Enterprise Plan" nd_options_sub_title="For Large Businesses" nd_options_price="$99" nd_options_currency="USD" nd_options_description="VGhpcyBpcyBvdXIgZW50ZXJwcmlzZSBwbGFuLg==" nd_options_link="url:%20http%3A//example.com%7Ctitle:Learn%20More%7Ctarget:%20_blank" nd_options_color_header_bg="#333333" nd_options_bg_color="#cccccc" nd_options_color="#333333" /]

PHP Function Code

In case you have difficulties debugging what causing issues with [nd_options_prices] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('nd_options_prices', 'nd_options_shortcode_prices');

Shortcode PHP function:

function nd_options_shortcode_prices($atts, $content = null)
{  

  $atts = shortcode_atts(
  array(
    'nd_options_class' => '',
    'nd_options_layout' => '',
    'nd_options_image' => '',
    'nd_options_image_price' => '',
    'nd_options_title' => '',
    'nd_options_sub_title' => '',
    'nd_options_price' => '',
    'nd_options_currency' => '',
    'nd_options_description' => '',
    'nd_options_description_2' => '',
    'nd_options_link' => '',
    'nd_options_color_header_bg' => '',
    'nd_options_bg_color' => '',
    'nd_options_color' => '',
  ), $atts);

  $str = '';

  //get variables
  $nd_options_class = $atts['nd_options_class'];
  $nd_options_layout = $atts['nd_options_layout'];
  $nd_options_title = $atts['nd_options_title'];
  $nd_options_sub_title = $atts['nd_options_sub_title'];
  $nd_options_price = $atts['nd_options_price'];
  $nd_options_currency = $atts['nd_options_currency'];
  $nd_options_description =  htmlentities( rawurldecode( base64_decode( strip_tags( $atts['nd_options_description'] ) ) ), ENT_COMPAT, 'UTF-8' );
  $nd_options_description_2 = $atts['nd_options_description_2'];
  $nd_options_color = $atts['nd_options_color'];
  $nd_options_color_header_bg = $atts['nd_options_color_header_bg'];
  $nd_options_bg_color = $atts['nd_options_bg_color'];

  //nd_options_link 
  $nd_options_link = vc_build_link( $atts['nd_options_link'] );
  $nd_options_link_url = $nd_options_link['url'];
  $nd_options_link_title = $nd_options_link['title'];
  $nd_options_link_target = $nd_options_link['target'];
  $nd_options_link_rel = $nd_options_link['rel'];

  //target attr
  if ( $nd_options_link_target == '' ) {
    $nd_options_link_target_output = '';
  }else{
    $nd_options_link_target_output = 'target="'.$nd_options_link_target.'"';
  }

  //nd_options_image
  $nd_options_image_src = wp_get_attachment_image_src($atts['nd_options_image'],'large');
  $nd_options_image_price_src = wp_get_attachment_image_src($atts['nd_options_image_price'],'large');



  //default value for avoid error 
  if ($nd_options_layout == '') { $nd_options_layout = "layout-1"; }

  // the layout selected
  $nd_options_layout = sanitize_key($nd_options_layout);
  $nd_options_layout_selected = dirname( __FILE__ ).'/layout/'.$nd_options_layout.'.php';
  include realpath($nd_options_layout_selected);
      

   $nd_options_str_shortcode = wp_kses_post( $str );
   return apply_filters('uds_shortcode_out_filter', $nd_options_str_shortcode);
   
}

Code file location:

nd-shortcodes/nd-shortcodes/shortcodes/custom/price/index.php

ND Shortcodes [nd_price_row] Shortcode

The ‘nd_price_row’ shortcode from the nd-shortcodes plugin is designed to create a customizable price row. This shortcode can be used to display a product image, description, and price in a highly customizable row format. This shortcode allows you to set image, text, image size, border style, text size, and text color. The default values are set for image size, border, and text size if none are provided. The shortcode can handle three scenarios: when an image is provided, when no image is provided, and when ‘yes’ or ‘not’ is specified for the image. In the latter case, it fetches the image from the plugin’s img directory. The output is a div with the specified image, text, and styling.

Shortcode: [nd_price_row]

Parameters

Here is a list of all possible nd_price_row shortcode parameters and attributes:

  • image – Specifies the image to be used in the price row.
  • text – Defines the text content of the price row.
  • imagesize – Determines the width of the image in the price row.
  • border – Sets the width of the border at the bottom of the price row.
  • textsize – Determines the font size of the text in the price row.
  • textcolor – Sets the color of the text in the price row.

Examples and Usage

Basic example – The following shortcode displays a price row with default settings. It uses the default image size, border, text size, and text color. The text content is set to “Basic Price Row”.

[nd_price_row text="Basic Price Row" /]

Advanced examples

Displaying a price row with a specific image, custom border thickness, text size, and color. In this example, we’re using an image with the name “custom-image”, a border thickness of 3, a text size of 20px, and a text color of red. The text content is set to “Advanced Price Row”.

[nd_price_row image="custom-image" border="3" textsize="20" textcolor="red" text="Advanced Price Row" /]

Another advanced example is to display a price row without an image. In this case, we’re also customizing the border thickness, text size, and color. The text content is set to “Price Row without Image”.

[nd_price_row image="not" border="4" textsize="18" textcolor="blue" text="Price Row without Image" /]

Note: The image parameter in the shortcode accepts either a specific image name or the values “yes” or “not”. If “yes” is used, it will display a default image. If “not” is used, no image will be displayed.

PHP Function Code

In case you have difficulties debugging what causing issues with [nd_price_row] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'nd_price_row', 'nd_options_price_row' );

Shortcode PHP function:

function nd_options_price_row( $nd_options_atts ) {
    
    $nd_options_price_row = shortcode_atts( 
      array(
          'image' => '',
          'text' => '',
          'imagesize' => '',
          'border' => '',
          'textsize' => '',
          'textcolor' => '',
      ), 
    $nd_options_atts );

    //start
    $nd_options_str = '';

    if ( $nd_options_price_row['imagesize'] == '') { 
      $nd_options_price_row_image_size = 13; 
    }else{
      $nd_options_price_row_image_size = $nd_options_price_row['imagesize']; 
    }

    //border
    if ( $nd_options_price_row['border'] == '') { 
      $nd_options_price_row_border = 2; 
    }else{
      $nd_options_price_row_border = $nd_options_price_row['border']; 
    }


    //textsize
    if ( $nd_options_price_row['textsize'] == '') { 
      $nd_options_price_row_textsize = 16; 
    }else{
      $nd_options_price_row_textsize = $nd_options_price_row['textsize']; 
    }

    //textcolor
    if ( $nd_options_price_row['textcolor'] == '') { 
      $nd_options_price_row_textcolor = ''; 
    }else{
      $nd_options_price_row_textcolor = $nd_options_price_row['textcolor']; 
    }

    
    //image
    if ( $nd_options_price_row['image'] == 'yes' OR $nd_options_price_row['image'] == 'not' ) { 

      $nd_options_img_path = 'img/'.$nd_options_price_row['image'].'.svg';

      $nd_options_str .= '

      <div class=" nicdark_border_bottom_'.$nd_options_price_row_border.'_solid_grey nd_options_padding_5 nd_options_section nd_options_box_sizing_border_box">
        <img alt="" class="nd_options_display_inline_block nd_options_margin_right_10" width="'.$nd_options_price_row_image_size.'" src="'.esc_url(plugins_url($nd_options_img_path, __FILE__ )).'">
        <p style="font-size: '.$nd_options_price_row_textsize.'px; color:'.$nd_options_price_row_textcolor.'" class="nd_options_display_inline_block">'.$nd_options_price_row['text'].'</p>
      </div>'; 

    }elseif ( $nd_options_price_row['image'] == '' ){

      $nd_options_str .= '

      <div class=" nicdark_border_bottom_'.$nd_options_price_row_border.'_solid_grey nd_options_padding_5 nd_options_section nd_options_box_sizing_border_box">
        <p style="font-size: '.$nd_options_price_row_textsize.'px; color:'.$nd_options_price_row_textcolor.'" class="nd_options_display_inline_block">'.$nd_options_price_row['text'].'</p>
      </div>'; 

    }else {

      $nd_options_str .= '

        <div class=" nicdark_border_bottom_'.$nd_options_price_row_border.'_solid_grey nd_options_padding_5 nd_options_section nd_options_box_sizing_border_box">
        <img alt="" class="nd_options_display_inline_block nd_options_margin_right_10" width="'.$nd_options_price_row_image_size.'" src="'.$nd_options_price_row['image'].'">
        <p style="font-size: '.$nd_options_price_row_textsize.'px; color:'.$nd_options_price_row_textcolor.'" class="nd_options_display_inline_block">'.$nd_options_price_row['text'].'</p>
      </div>

      ';

    }

    $nd_options_str_secure = wp_kses_post( $nd_options_str );
    return $nd_options_str_secure;

}

Code file location:

nd-shortcodes/nd-shortcodes/shortcodes/custom/price/index.php

ND Shortcodes [nd_options_services] Shortcode

The ‘nd_options_services’ shortcode from the nd-shortcodes plugin is designed to create customizable service blocks. It allows users to define layout, class, image, number, title, description, and button attributes. This shortcode also supports link creation with target attributes, image attachment, and layout selection. The layout file is included from the layout directory based on the layout key provided. It returns the HTML code for the service block.

Shortcode: [nd_options_services]

Parameters

Here is a list of all possible nd_options_services shortcode parameters and attributes:

  • nd_options_layout – Chooses the layout for the service section
  • nd_options_class – Assigns a custom CSS class to the service section
  • nd_options_image – Sets the image for the service section
  • nd_options_number – Assigns a number to the service section
  • nd_options_number_color – Sets the color for the service number
  • nd_options_title – Defines the title for the service section
  • nd_options_title_color – Sets the color for the service title
  • nd_options_description – Provides a description for the service section
  • nd_options_description_color – Sets the color for the service description
  • nd_options_link – Specifies the link for the service section
  • nd_options_button_bg – Determines the background color of the button
  • nd_options_button_text_color – Sets the color of the button text
  • nd_options_button_border_color – Determines the border color of the button

Examples and Usage

Basic example – Displaying a service with a specific layout, title, and description.

[nd_options_services nd_options_layout="layout-1" nd_options_title="Our Service" nd_options_description="This is a description of our service." /]

Advanced examples:

Displaying a service with a specific layout, title, description, and a link to a specific URL. The button background, text color, and border color are also customized.

[nd_options_services nd_options_layout="layout-1" nd_options_title="Our Service" nd_options_description="This is a description of our service." nd_options_link="url:http%3A%2F%2Fexample.com%2Fservice|title:Read%20More|target:%20_blank|rel:nofollow" nd_options_button_bg="#ff0000" nd_options_button_text_color="#ffffff" nd_options_button_border_color="#000000" /]

Displaying a service with a specific layout, title, description, and an image. The number and its color are also specified.

[nd_options_services nd_options_layout="layout-1" nd_options_title="Our Service" nd_options_description="This is a description of our service." nd_options_image="123" nd_options_number="1" nd_options_number_color="#000000" /]

PHP Function Code

In case you have difficulties debugging what causing issues with [nd_options_services] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('nd_options_services', 'nd_options_shortcode_services');

Shortcode PHP function:

function nd_options_shortcode_services($atts, $content = null)
{  

  $atts = shortcode_atts(
  array(
    'nd_options_layout' => '',
    'nd_options_class' => '',
    'nd_options_image' => '',
    'nd_options_number' => '',
    'nd_options_number_color' => '',
    'nd_options_title' => '',
    'nd_options_title_color' => '',
    'nd_options_description' => '',
    'nd_options_description_color' => '',
    'nd_options_link' => '',
    'nd_options_button_bg' => '',
    'nd_options_button_text_color' => '',
    'nd_options_button_border_color' => '',
  ), $atts);

  $str = '';

  //get variables
  $nd_options_layout = $atts['nd_options_layout'];
  $nd_options_class = $atts['nd_options_class'];
  $nd_options_title = $atts['nd_options_title'];
  $nd_options_title_color = $atts['nd_options_title_color'];
  $nd_options_description = $atts['nd_options_description'];
  $nd_options_description_color = $atts['nd_options_description_color'];
  $nd_options_button_bg = $atts['nd_options_button_bg'];
  $nd_options_button_text_color = $atts['nd_options_button_text_color'];
  $nd_options_button_border_color = $atts['nd_options_button_border_color'];
  $nd_options_number = $atts['nd_options_number'];
  $nd_options_number_color = $atts['nd_options_number_color'];

  //nd_options_link 
  $nd_options_link = vc_build_link( $atts['nd_options_link'] );
  $nd_options_link_url = $nd_options_link['url'];
  $nd_options_link_title = $nd_options_link['title'];
  $nd_options_link_target = $nd_options_link['target'];
  $nd_options_link_rel = $nd_options_link['rel'];

  //target attr
  if ( $nd_options_link_target == '' ) {
    $nd_options_link_target_output = '';
  }else{
    $nd_options_link_target_output = 'target="'.$nd_options_link_target.'"';
  }

  //nd_options_image
  $nd_options_image_src = wp_get_attachment_image_src($atts['nd_options_image'],'large');


  //default value for avoid error 
  if ($nd_options_layout == '') { $nd_options_layout = "layout-1"; }

  // the layout selected
  $nd_options_layout = sanitize_key($nd_options_layout);
  $nd_options_layout_selected = dirname( __FILE__ ).'/layout/'.$nd_options_layout.'.php';
  include realpath($nd_options_layout_selected);

  //return the code
  $nd_options_str_shortcode = wp_kses_post( $str );
  return apply_filters('uds_shortcode_out_filter', $nd_options_str_shortcode);

}

Code file location:

nd-shortcodes/nd-shortcodes/shortcodes/custom/service/index.php

ND Shortcodes [nd_options_service_pro] Shortcode

The ‘nd_options_service_pro’ shortcode from the nd-shortcodes plugin is designed to create a customizable service box. This shortcode allows you to set the layout, image, alignment, title, description, and link, among other attributes. You can adjust the image width, margin top, title text color, title size and margin, description text color, size, and margin, and link font, padding, text color, background color, border color and width, border radius, and class. The shortcode uses the Visual Composer’s link builder function, ‘vc_build_link’, to create the link. It also retrieves the image from the WordPress media library using the ‘wp_get_attachment_image_src’ function. This shortcode is perfect for adding services to your WordPress site with full control over the design and layout.

Shortcode: [nd_options_service_pro]

Parameters

Here is a list of all possible nd_options_service_pro shortcode parameters and attributes:

  • nd_options_layout – Determines the layout of the service pro.
  • nd_options_image – Sets the image for the service pro.
  • nd_options_align – Aligns the text inside the service pro.
  • nd_options_title – Sets the title of the service pro.
  • nd_options_description – Adds a description to the service pro.
  • nd_options_link – Adds a link to the service pro.
  • nd_options_image_adv_options – Sets the advanced image options.
  • nd_options_image_width – Adjusts the width of the image.
  • nd_options_image_margin_top – Adds a margin at the top of the image.
  • nd_options_title_adv_options – Sets the advanced title options.
  • nd_options_title_text_color – Changes the color of the title text.
  • nd_options_title_size – Changes the size of the title.
  • nd_options_title_font – Changes the font of the title.
  • nd_options_title_margin – Adds a margin to the title.
  • nd_options_title_class – Adds a CSS class to the title.
  • nd_options_description_adv_options – Sets the advanced description options.
  • nd_options_description_text_color – Changes the color of the description text.
  • nd_options_description_size – Changes the size of the description.
  • nd_options_description_font – Changes the font of the description.
  • nd_options_description_margin – Adds a margin to the description.
  • nd_options_description_class – Adds a CSS class to the description.
  • nd_options_link_adv_options – Sets the advanced link options.
  • nd_options_link_font – Changes the font of the link.
  • nd_options_link_padding – Adds padding to the link.
  • nd_options_link_text_color – Changes the color of the link text.
  • nd_options_link_bg_color – Changes the background color of the link.
  • nd_options_link_border_color – Changes the border color of the link.
  • nd_options_link_size – Changes the size of the link.
  • nd_options_link_border_width – Changes the border width of the link.
  • nd_options_link_border_radius – Changes the border radius of the link.
  • nd_options_class – Adds a CSS class to the service pro.

Examples and Usage

Basic Example – Display a service with a title and description.

[nd_options_service_pro nd_options_title="Service Title" nd_options_description="This is a description of the service." /]

Advanced Examples

Display a service with a title, description, and a link to a specific URL.

[nd_options_service_pro nd_options_title="Service Title" nd_options_description="This is a description of the service." nd_options_link="url:http://example.com|||" /]

Display a service with a title, description, custom text color, and font size for the title.

[nd_options_service_pro nd_options_title="Service Title" nd_options_description="This is a description of the service." nd_options_title_text_color="#000000" nd_options_title_size="24" /]

Display a service with a title, description, custom image, and alignment.

[nd_options_service_pro nd_options_title="Service Title" nd_options_description="This is a description of the service." nd_options_image="1" nd_options_align="center" /]

Display a service with a title, description, and a custom class for additional CSS styling.

[nd_options_service_pro nd_options_title="Service Title" nd_options_description="This is a description of the service." nd_options_class="custom-class" /]

PHP Function Code

In case you have difficulties debugging what causing issues with [nd_options_service_pro] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('nd_options_service_pro', 'nd_options_shortcode_service_pro');

Shortcode PHP function:

function nd_options_shortcode_service_pro($atts, $content = null)
{  

  $atts = shortcode_atts(
  array(
    'nd_options_layout' => '',
    'nd_options_image' => '',
    'nd_options_align' => '',
    'nd_options_title' => '',
    'nd_options_description' => '',
    'nd_options_link' => '',
    'nd_options_image_adv_options' => '',
    'nd_options_image_width' => '',
    'nd_options_image_margin_top' => '',
    'nd_options_title_adv_options' => '',
    'nd_options_title_text_color' => '',
    'nd_options_title_size' => '',
    'nd_options_title_font' => '',
    'nd_options_title_margin' => '',
    'nd_options_title_class' => '',
    'nd_options_description_adv_options' => '',
    'nd_options_description_text_color' => '',
    'nd_options_description_size' => '',
    'nd_options_description_font' => '',
    'nd_options_description_margin' => '',
    'nd_options_description_class' => '',
    'nd_options_link_adv_options' => '',
    'nd_options_link_font' => '',
    'nd_options_link_padding' => '',
    'nd_options_link_text_color' => '',
    'nd_options_link_bg_color' => '',
    'nd_options_link_border_color' => '',
    'nd_options_link_size' => '',
    'nd_options_link_border_width' => '',
    'nd_options_link_border_radius' => '',
    'nd_options_class' => '',
  ), $atts);

  $str = '';

  //get variables
  $nd_options_layout = $atts['nd_options_layout'];
  $nd_options_class = $atts['nd_options_class'];
  $nd_options_align = $atts['nd_options_align']; if ($nd_options_align == '') { $nd_options_align = 'nd_options_text_align_left'; }
  $nd_options_title = $atts['nd_options_title'];
  $nd_options_description = $atts['nd_options_description'];
  $nd_options_image_adv_options = $atts['nd_options_image_adv_options'];
  $nd_options_image_width = $atts['nd_options_image_width']; if ($nd_options_image_width == '') { $nd_options_image_width = "50"; }
  $nd_options_image_margin_top = $atts['nd_options_image_margin_top'];
  $nd_options_title_adv_options = $atts['nd_options_title_adv_options'];
  $nd_options_title_text_color = $atts['nd_options_title_text_color'];
  $nd_options_title_size = $atts['nd_options_title_size'];
  $nd_options_title_font = $atts['nd_options_title_font'];
  $nd_options_title_margin = $atts['nd_options_title_margin'];
  $nd_options_title_class = $atts['nd_options_title_class'];
  $nd_options_description_adv_options = $atts['nd_options_description_adv_options'];
  $nd_options_description_text_color = $atts['nd_options_description_text_color'];
  $nd_options_description_size = $atts['nd_options_description_size'];
  $nd_options_description_font = $atts['nd_options_description_font'];
  $nd_options_description_margin = $atts['nd_options_description_margin']; if ($nd_options_description_margin == '') { $nd_options_description_margin = "20px 0px"; }
  $nd_options_description_class = $atts['nd_options_description_class'];
  $nd_options_link_adv_options = $atts['nd_options_link_adv_options'];
  $nd_options_link_font = $atts['nd_options_link_font'];
  $nd_options_link_padding = $atts['nd_options_link_padding'];
  $nd_options_link_text_color = $atts['nd_options_link_text_color'];
  $nd_options_link_bg_color = $atts['nd_options_link_bg_color'];
  $nd_options_link_border_color = $atts['nd_options_link_border_color'];
  $nd_options_link_size = $atts['nd_options_link_size'];
  $nd_options_link_border_width = $atts['nd_options_link_border_width'];
  $nd_options_link_border_radius = $atts['nd_options_link_border_radius'];

  //nd_options_link 
  $nd_options_link = vc_build_link( $atts['nd_options_link'] );
  $nd_options_link_url = $nd_options_link['url'];
  $nd_options_link_title = $nd_options_link['title'];
  $nd_options_link_target = $nd_options_link['target'];
  $nd_options_link_rel = $nd_options_link['rel'];
  //target attr
  if ( $nd_options_link_target == '' ) { $nd_options_link_target_output = ''; }else{ $nd_options_link_target_output = 'target="'.$nd_options_link_target.'"'; }
  //link output
  if ( $nd_options_link_title == '' ) {  
    $nd_options_link_output = '';
  }else{
    $nd_options_link_output = '<a class="'.$nd_options_link_font.' nd_options_display_inline_block " style="font-size:'.$nd_options_link_size.'px; line-height:'.$nd_options_link_size.'px; border-radius:'.$nd_options_link_border_radius.'; border:'.$nd_options_link_border_width.' solid '.$nd_options_link_border_color.'; background-color:'.$nd_options_link_bg_color.'; padding:'.$nd_options_link_padding.'; color:'.$nd_options_link_text_color.';" rel="'.$nd_options_link_rel.'" '.$nd_options_link_target_output.' href="'.$nd_options_link_url.'">'.$nd_options_link_title.'</a>';
  }

  //nd_options_image
  $nd_options_image_src = wp_get_attachment_image_src($atts['nd_options_image'],'large');

  //output values
  if ($nd_options_title == '') { $nd_options_title_output = ''; }else{ $nd_options_title_output = '<h3 class="'.$nd_options_title_font.' '.$nd_options_title_class.' " style="margin:'.$nd_options_title_margin.'; color:'.$nd_options_title_text_color.'; font-size:'.$nd_options_title_size.'px;line-height:'.$nd_options_title_size.'px;">'.$nd_options_title.'</h3>'; }
  if ($nd_options_description == '') { $nd_options_description_output = ''; }else{ $nd_options_description_line_height = $nd_options_description_size + 10; $nd_options_description_output = '<p class="'.$nd_options_description_font.' '.$nd_options_description_class.' " style="margin:'.$nd_options_description_margin.'; color:'.$nd_options_description_text_color.'; font-size:'.$nd_options_description_size.'px;line-height:'.$nd_options_description_line_height.'px;">'.$nd_options_description.'</p>'; }
  if ($nd_options_image_src[0] == '') { 
    $nd_options_image_src_ouput = '';
    $nd_options_image_src_ouput_2 = ''; 
  }else{ 
    $nd_options_image_src_ouput = '<img style="top:'.$nd_options_image_margin_top.'px;" alt="" class="nd_options_position_absolute nd_options_left_0" width="'.$nd_options_image_width.'" src="'.$nd_options_image_src[0].'">'; 
    $nd_options_image_src_ouput_2 = '<img style="margin-top:'.$nd_options_image_margin_top.'px;" alt="" width="'.$nd_options_image_width.'" src="'.$nd_options_image_src[0].'">'; 
  }

  //default value for avoid error 
  if ($nd_options_layout == '') { $nd_options_layout = "layout-1"; }

  // the layout selected
  $nd_options_layout = sanitize_key($nd_options_layout);
  $nd_options_layout_selected = dirname( __FILE__ ).'/layout/'.$nd_options_layout.'.php';
  include realpath($nd_options_layout_selected);

  //return the code
  $nd_options_str_shortcode = wp_kses_post( $str );
  return apply_filters('uds_shortcode_out_filter', $nd_options_str_shortcode);

}

Code file location:

nd-shortcodes/nd-shortcodes/shortcodes/custom/service-pro/index.php

ND Shortcodes [nd_options_spacer] Shortcode

The ‘nd_options_spacer’ shortcode from the nd-shortcodes plugin is designed to create a customizable space within your content. This shortcode allows you to adjust the height and background color of the space, providing flexibility in your page design. It also lets you assign a specific class to the space for further customization.

Shortcode: [nd_options_spacer]

Parameters

Here is a list of all possible nd_options_spacer shortcode parameters and attributes:

  • nd_options_class – specifies the additional CSS class for the spacer.
  • nd_options_height – defines the height of the spacer in pixels.
  • nd_options_bg – sets the background color of the spacer.

Examples and Usage

Basic example – The shortcode ‘nd_options_spacer’ is used to create a space with a specified height and background color. The height and background color are customizable by the user.

[nd_options_spacer nd_options_height="50" nd_options_bg="#ffffff"]

Advanced examples

Using the shortcode to create a spacer with a specific class. This can be useful when you want to apply additional CSS styling to the spacer.

[nd_options_spacer nd_options_class="my_custom_class" nd_options_height="100" nd_options_bg="#000000"]

Creating a spacer without specifying a background color. In this case, the spacer will use the default background color defined in the theme.

[nd_options_spacer nd_options_height="150"]

PHP Function Code

In case you have difficulties debugging what causing issues with [nd_options_spacer] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('nd_options_spacer', 'nd_options_shortcode_spacer');

Shortcode PHP function:

function nd_options_shortcode_spacer($atts, $content = null)
{  

  $atts = shortcode_atts(
  array(
    'nd_options_class' => '',
    'nd_options_height' => '',
    'nd_options_bg' => '',
  ), $atts);

  $str = '';

  //get variables
  $nd_options_class = $atts['nd_options_class'];
  $nd_options_height = $atts['nd_options_height'];
  $nd_options_bg = $atts['nd_options_bg'];

  
  $str .= '<div style="background-color:'.$nd_options_bg.'; height: '.$nd_options_height.'px;" class="nicdark_section '.$nd_options_class.' "></div>';

    $nd_options_str_shortcode = wp_kses_post( $str );
    return apply_filters('uds_shortcode_out_filter', $nd_options_str_shortcode);
}

Code file location:

nd-shortcodes/nd-shortcodes/shortcodes/custom/spacer/index.php

ND Shortcodes [nd_options_text] Shortcode

The nd-shortcodes plugin shortcode, ‘nd_options_text’, allows users to customize the appearance of text elements on their WordPress site. This shortcode supports various attributes like text color, alignment, font size, weight, line height, padding, and more. This shortcode also includes an underline effect option, allowing users to add a stylish underline to their text. The color of the underline can be customized as per user preference. The shortcode dynamically generates CSS styles and applies them to the specified text elements, enhancing the visual appeal of the website content.

Shortcode: [nd_options_text]

Parameters

Here is a list of all possible nd_options_text shortcode parameters and attributes:

  • nd_options_class – Defines custom class for styling the text.
  • nd_options_text – The actual text content to be displayed.
  • nd_options_text_tag – HTML tag used for the text (e.g., h1, h2, p).
  • nd_options_text_color – Sets the color of the text.
  • nd_options_text_weight – Determines the boldness of the text.
  • nd_options_text_font_size – Adjusts the size of the text.
  • nd_options_text_line_height – Controls the space between lines of text.
  • nd_options_text_letter_spacing – Adjusts the spacing between letters in the text.
  • nd_options_text_family – Sets the font family of the text.
  • nd_options_text_align – Controls the alignment of the text (e.g., left, right, center).
  • nd_options_text_padding – Adds space around the text.
  • nd_options_underline_effect_color – Sets the color for the underline effect.
  • nd_options_underline_effect – If set to ‘yes’, applies an underline effect to the text.

Examples and Usage

Basic example – A simple usage of the shortcode to add custom text to a post or page.

[nd_options_text nd_options_text="Hello, World!" /]

Advanced examples

Using the shortcode to display a custom text with specific font size, color, and alignment. This allows users to customize the appearance of the text on their website without having to write any CSS code.

[nd_options_text nd_options_text="Hello, World!" nd_options_text_color="#FF0000" nd_options_text_font_size="24" nd_options_text_align="center" /]

Using the shortcode to display a custom text with underline effect. This can be used to highlight important information or to create a unique design element on the page.

[nd_options_text nd_options_text="Hello, World!" nd_options_underline_effect="yes" nd_options_underline_effect_color="#0000FF" /]

Using the shortcode to display a custom text with specific padding. This can be used to control the space around the text, which can help to improve the layout and readability of the content.

[nd_options_text nd_options_text="Hello, World!" nd_options_text_padding="10" /]

PHP Function Code

In case you have difficulties debugging what causing issues with [nd_options_text] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('nd_options_text', 'nd_options_shortcode_text');

Shortcode PHP function:

function nd_options_shortcode_text($atts, $content = null)
{  


  $atts = shortcode_atts(
  array(
    'nd_options_class' => '',
    'nd_options_text' => '',
    'nd_options_text_tag' => '',
    'nd_options_text_color' => '',
    'nd_options_text_weight' => '',
    'nd_options_text_font_size' => '',
    'nd_options_text_line_height' => '',
    'nd_options_text_letter_spacing' => '',
    'nd_options_text_family' => '',
    'nd_options_text_align' => '',
    'nd_options_text_padding' => '',
    'nd_options_underline_effect_color' => '',
    'nd_options_underline_effect' => '',
  ), $atts);

  wp_enqueue_style( 'nd_options_text_style', esc_url( plugins_url( 'css/text.css', __FILE__ ) ) );

  $str = '';

  //get variables
  $nd_options_class = $atts['nd_options_class'];
  $nd_options_text = $atts['nd_options_text'];
  $nd_options_text_tag = $atts['nd_options_text_tag'];
  $nd_options_text_color = $atts['nd_options_text_color'];
  $nd_options_text_weight = $atts['nd_options_text_weight'];
  $nd_options_text_font_size = $atts['nd_options_text_font_size'];
  $nd_options_text_line_height = $atts['nd_options_text_line_height'];
  $nd_options_text_letter_spacing = $atts['nd_options_text_letter_spacing'];
  $nd_options_text_family = $atts['nd_options_text_family'];
  $nd_options_text_align = $atts['nd_options_text_align'];
  $nd_options_text_padding = $atts['nd_options_text_padding'];

  //underline

  $nd_options_id_underline = rand(0, 1000);

  $nd_options_underline_effect_color = $atts['nd_options_underline_effect_color']; if ( $nd_options_underline_effect_color == '' ) { $nd_options_underline_effect_color = ''; }
  $nd_options_underline_effect = $atts['nd_options_underline_effect']; if ( $nd_options_underline_effect == '' ) { $nd_options_underline_effect = ''; }
  if ( $nd_options_underline_effect == 'yes' ) {
    $nd_options_underline_effect_class = 'nd_options_underline_effect nd_options_underline_effect_'.$nd_options_id_underline; 


    $nd_options_style = '

      .nd_options_underline_effect.nd_options_underline_effect_'.$nd_options_id_underline.' u:after {
        background-color:'.$nd_options_underline_effect_color.';
      }

    ';
    wp_add_inline_style('nd_options_text_style',$nd_options_style);

    $str .= '';

  }else{
    $nd_options_underline_effect_class = ''; 
  }


  $str .= ' <'.$nd_options_text_tag.' style="color:'.$nd_options_text_color.'; padding:'.$nd_options_text_padding.'px; text-align:'.$nd_options_text_align.'; font-size:'.$nd_options_text_font_size.'px; line-height:'.$nd_options_text_line_height.'px; letter-spacing: '.$nd_options_text_letter_spacing.'px; font-weight:'.$nd_options_text_weight.';" class=" '.$nd_options_underline_effect_class.' '.$nd_options_class.' '.$nd_options_text_family.' ">'.$nd_options_text.'</'.$nd_options_text_tag.'> ';


    $nd_options_str_shortcode = wp_kses_post( $str );
   return apply_filters('uds_shortcode_out_filter', $nd_options_str_shortcode);
}

Code file location:

nd-shortcodes/nd-shortcodes/shortcodes/custom/text/index.php

ND Shortcodes [nd_options_toogle] Shortcode

The ‘nd_options_toogle’ shortcode from the nd-shortcodes plugin is designed to create a toggle feature in WordPress. It allows for content to be hidden or displayed based on user interaction. . The shortcode accepts parameters like ‘nd_options_class’, ‘nd_options_title’, ‘nd_options_description’, and ‘nd_options_color’. These parameters allow customization of the toggle’s appearance and content. The ‘nd_options_toogle’ shortcode also enqueues a JavaScript file, ‘toogle.js’, which handles the toggle functionality. The content is shown or hidden based on user clicks.

Shortcode: [nd_options_toogle]

Parameters

Here is a list of all possible nd_options_toogle shortcode parameters and attributes:

  • nd_options_class – Defines the CSS class for the toggle section
  • nd_options_title – Sets the title of the toggle section
  • nd_options_description – Provides the description text under the title
  • nd_options_color – Specifies the background color of the toggle button

Examples and Usage

Basic example – The following shortcode displays a toggle section with a title. The content of the section will be hidden until the title is clicked.

[nd_options_toogle nd_options_title="Click me!"]This is the hidden content.[/nd_options_toogle]

Advanced examples

Here, the shortcode is used to display a toggle section with a title, a description, and a specific color. The content of the section will be hidden until the title is clicked. The color is applied to the title bar.

[nd_options_toogle nd_options_title="Click me!" nd_options_description="This is the description." nd_options_color="#FF0000"]This is the hidden content.[/nd_options_toogle]

In this example, the shortcode is used to display a toggle section with a title, a description, a specific color, and a custom CSS class. The content of the section will be hidden until the title is clicked. The color is applied to the title bar, and the custom CSS class is applied to the overall section.

[nd_options_toogle nd_options_title="Click me!" nd_options_description="This is the description." nd_options_color="#FF0000" nd_options_class="my-custom-class"]This is the hidden content.[/nd_options_toogle]

PHP Function Code

In case you have difficulties debugging what causing issues with [nd_options_toogle] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('nd_options_toogle', 'nd_options_shortcode_toogle');

Shortcode PHP function:

function nd_options_shortcode_toogle($atts, $content = null)
{  

  $atts = shortcode_atts(
  array(
    'nd_options_class' => '',
    'nd_options_title' => '',
    'nd_options_description' => '',
    'nd_options_color' => '',
  ), $atts);

  $str = '';


  wp_enqueue_script( 'nd_options_toogle_plugin', esc_url( plugins_url( 'js/toogle.js', __FILE__ ) ) );


  //get variables
  $nd_options_class = $atts['nd_options_class'];
  $nd_options_title = $atts['nd_options_title'];
  $nd_options_description = $atts['nd_options_description'];
  $nd_options_color = $atts['nd_options_color'];


  $nd_options_id_component = rand(0, 1000);



  $nd_options_script = '

  jQuery(document).ready(function() {

    //toogle
    jQuery( ".nd_options_toogle_title_open_'.$nd_options_id_component.'" ).click(function() {
      jQuery( ".nd_options_toogle_content_'.$nd_options_id_component.'" ).show( "slow", function() {
        jQuery( ".nd_options_toogle_title_open_'.$nd_options_id_component.'" ).css("display","none");
        jQuery( ".nd_options_toogle_title_close_'.$nd_options_id_component.'" ).css("display","block");
      });
    });
    jQuery( ".nd_options_toogle_title_close_'.$nd_options_id_component.'" ).click(function() {
      jQuery( ".nd_options_toogle_content_'.$nd_options_id_component.'" ).hide( "slow", function() {
        jQuery( ".nd_options_toogle_title_close_'.$nd_options_id_component.'" ).css("display","none");
        jQuery( ".nd_options_toogle_title_open_'.$nd_options_id_component.'" ).css("display","block");  
      }); 
    });

  });

  ';

  wp_add_inline_script('nd_options_toogle_plugin',$nd_options_script);


  $str .= '

    <div class="nd_options_section '.$nd_options_class.' ">

      <div class="nd_options_section nd_options_box_sizing_border_box">
        <p class="nd_options_toogle_title nd_options_first_font nd_options_font_size_17 nd_options_position_relative nd_options_padding_right_20 nd_options_padding_top_5 nd_options_padding_left_45 nd_options_padding_bottom_5">
          <span style="background-color:'.$nd_options_color.';" class="nd_options_cursor_pointer nd_options_text_align_center nd_options_toogle_title_open_'.$nd_options_id_component.' nd_options_width_25 nd_options_height_25  nd_options_position_absolute nd_options_top_0 nd_options_left_0">
            <img alt="" class="nd_options_margin_top_6" width="12" src="'.esc_url(plugins_url('icon-add-white.png', __FILE__ )).'">
          </span> 
          <span style="background-color:'.$nd_options_color.';"  class="nd_options_cursor_pointer nd_options_text_align_center nd_options_toogle_title_close_'.$nd_options_id_component.' nd_options_width_25 nd_options_display_none nd_options_height_25  nd_options_position_absolute nd_options_top_0 nd_options_left_0">
            <img alt="" class="nd_options_margin_top_6" width="12" src="'.esc_url(plugins_url('icon-less-white.png', __FILE__ )).'">
          </span>
          '.$nd_options_title.'
        </p>
      </div>
      
      <div class="nd_options_display_none nd_options_padding_20 nd_options_padding_left_45 nd_options_toogle_content_'.$nd_options_id_component.' nd_options_section nd_options_box_sizing_border_box">
        <p>'.$nd_options_description.'</p>
      </div>

    </div>

   ';

   $nd_options_str_shortcode = wp_kses_post( $str );
   return apply_filters('uds_shortcode_out_filter', $nd_options_str_shortcode);
}

Code file location:

nd-shortcodes/nd-shortcodes/shortcodes/custom/toogle/index.php

ND Shortcodes [nd_options_typewriter] Shortcode

The ‘nd_options_typewriter’ shortcode from the nd-shortcodes plugin creates a typewriter effect on the text. It allows customization of font size, color, and underline color for up to three different text strings.

Shortcode: [nd_options_typewriter]

Parameters

Here is a list of all possible nd_options_typewriter shortcode parameters and attributes:

  • nd_options_class – adds a custom CSS class to the typewriter text
  • nd_options_text_fixed – sets the static text that doesn’t change in the typewriter effect
  • nd_options_text_typed_1 – sets the first text string in the typewriter animation
  • nd_options_text_typed_2 – sets the second text string in the typewriter animation
  • nd_options_text_typed_3 – sets the third text string in the typewriter animation
  • nd_options_text_color – defines the color of the typewriter text
  • nd_options_text_font_size – controls the font size of the typewriter text
  • nd_options_text_underline_color – sets the color of the underline in the typewriter effect

Examples and Usage

Basic Example – The basic usage of the ‘nd_options_typewriter’ shortcode. This example will display a typewriter effect with a fixed text and one typed text.

[nd_options_typewriter nd_options_text_fixed="Hello" nd_options_text_typed_1="World" /]

Advanced Examples

Utilizing the shortcode to display a typewriter effect with a fixed text and three different typed texts. The texts will be typed one after the other in a loop. The color, font size, and underline color of the text can also be customized.

[nd_options_typewriter nd_options_text_fixed="Hello" nd_options_text_typed_1="World" nd_options_text_typed_2="Universe" nd_options_text_typed_3="Galaxy" nd_options_text_color="#000000" nd_options_text_font_size="18" nd_options_text_underline_color="#ff0000" /]

Using the shortcode to display a typewriter effect with a fixed text and three different typed texts, along with a custom class. The custom class can be used to apply additional styles to the typewriter effect.

[nd_options_typewriter nd_options_class="custom-class" nd_options_text_fixed="Hello" nd_options_text_typed_1="World" nd_options_text_typed_2="Universe" nd_options_text_typed_3="Galaxy" /]

PHP Function Code

In case you have difficulties debugging what causing issues with [nd_options_typewriter] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('nd_options_typewriter', 'nd_options_shortcode_typewriter');

Shortcode PHP function:

function nd_options_shortcode_typewriter($atts, $content = null)
{  

  $atts = shortcode_atts(
  array(
    'nd_options_class' => '',
    'nd_options_text_fixed' => '',
    'nd_options_text_typed_1' => '',
    'nd_options_text_typed_2' => '',
    'nd_options_text_typed_3' => '',
    'nd_options_text_color' => '',
    'nd_options_text_font_size' => '',
    'nd_options_text_underline_color' => '',
  ), $atts);


  $nd_options_id_component = rand(0, 100);
  
  $str = '';

  //get variables
  $nd_options_class = $atts['nd_options_class'];
  $nd_options_text_fixed = $atts['nd_options_text_fixed'];
  $nd_options_text_typed_1 = $atts['nd_options_text_typed_1'];
  $nd_options_text_typed_2 = $atts['nd_options_text_typed_2'];
  $nd_options_text_typed_3 = $atts['nd_options_text_typed_3'];
  $nd_options_text_color = $atts['nd_options_text_color'];
  $nd_options_text_font_size = $atts['nd_options_text_font_size'];
  $nd_options_text_underline_color = $atts['nd_options_text_underline_color'];

  
  wp_enqueue_script( 'nd_options_typed_plugin', esc_url( plugins_url( 'js/typewriter.js', __FILE__ ) ) );
  wp_enqueue_style( 'nd_options_typewriter_style', esc_url( plugins_url( 'css/typewriter.css', __FILE__ ) ) );



  $nd_options_style = '

  .nd_options_typewriter_'.$nd_options_id_component.' .typed-cursor{ 

      font-size: '.$nd_options_text_font_size.'px;
      color: '.$nd_options_text_color.';
    
    }

  ';
  wp_add_inline_style('nd_options_typewriter_style',$nd_options_style);


  $nd_options_script = '

  jQuery(document).ready(function() {

      //typed
      jQuery(".nd_options_typed_'.$nd_options_id_component.'").typed({
          stringsElement: jQuery(".nd_options_typed_strings_'.$nd_options_id_component.'"),
          typeSpeed: 100,
          backDelay: 500,
          loop: true,
          contentType: "html",
          loopCount: false
      });
   
    });

  ';
  wp_add_inline_script('nd_options_typed_plugin',$nd_options_script);
  

  
  $str .='';



  $str .= '



      <!--START typed words-->
      <div class="nd_options_display_none_all_iphone nd_options_section '.$nd_options_class.' nd_options_typewriter_'.$nd_options_id_component.' ">
          

          <strong style="color:'.$nd_options_text_color.'; font-size:'.$nd_options_text_font_size.'px; " class="nd_options_first_font">'.$nd_options_text_fixed.' </strong>

          <div class="nd_options_typed_strings_'.$nd_options_id_component.'">

              <p><strong style="color:'.$nd_options_text_color.'; font-size:'.$nd_options_text_font_size.'px;" class="nd_options_first_font"> '.$nd_options_text_typed_1.'</strong></p>
              <p><strong style="color:'.$nd_options_text_color.'; font-size:'.$nd_options_text_font_size.'px;" class="nd_options_first_font"> '.$nd_options_text_typed_2.'</strong></p>
              <p><strong style="color:'.$nd_options_text_color.'; font-size:'.$nd_options_text_font_size.'px;" class="nd_options_first_font"> '.$nd_options_text_typed_3.'</strong></p>

          </div>

          <span class="nd_options_typed_'.$nd_options_id_component.' nd_options_padding_botttom_5" style="white-space:pre; border-bottom: 5px solid '.$nd_options_text_underline_color.'; "></span>
      
      </div>
      <!--END typed words-->




  ';

  $nd_options_str_shortcode = wp_kses_post( $str );
   return apply_filters('uds_shortcode_out_filter', $nd_options_str_shortcode);
}

Code file location:

nd-shortcodes/nd-shortcodes/shortcodes/custom/typewriter/index.php

ND Shortcodes [nd_options_focus] Shortcode

The ‘nd_options_focus’ shortcode is a versatile tool within the nd-shortcodes plugin. It allows users to customize various elements, including class, layout, color, text color, background color, image, icon, title, subtitle, link, and description. It provides a flexible way to build and modify your WordPress site’s content. This shortcode is particularly useful for creating visually appealing sections with different layouts and color schemes. It also enables you to incorporate images and icons, enhancing the overall user experience. Through the ‘nd_options_link’ and ‘nd_options_image’ attributes, users can add clickable links and images respectively. Furthermore, default values are set to avoid errors if certain parameters are not specified. Shortcode: [nd_options_focus]

Shortcode: [nd_options_focus]

Parameters

Here is a list of all possible nd_options_focus shortcode parameters and attributes:

  • nd_options_class – Specifies a unique CSS class for the element.
  • nd_options_layout – Defines the layout style for the element.
  • nd_options_color – Determines the color of the element.
  • nd_options_text_color – Sets the color of the text within the element.
  • nd_options_bg_color – Defines the background color of the element.
  • nd_options_image – Specifies an image to be included with the element.
  • nd_options_icon – Sets an icon to be displayed with the element.
  • nd_options_title – Sets the title of the element.
  • nd_options_subtitle – Specifies a subtitle for the element.
  • nd_options_link – Allows you to add a hyperlink to the element.
  • nd_options_descr – Enables you to add a description to the element.

Examples and Usage

Basic example – Utilizing the shortcode to display a basic focus section with a title and subtitle.

[nd_options_focus nd_options_title="Focus Title" nd_options_subtitle="Subtitle Text" /]

Advanced examples

Here, the shortcode is used to create a more detailed focus section. This includes a title, subtitle, description, and a link. The link is created using a URL, title, target, and rel attribute. The color, text color, and background color are also customized.

[nd_options_focus nd_options_title="Focus Title" nd_options_subtitle="Subtitle Text" nd_options_descr="This is a description." nd_options_link="url:https%3A%2F%2Fwww.example.com%2F;title:Example;target:%20_blank;rel:nofollow" nd_options_color="#123456" nd_options_text_color="#abcdef" nd_options_bg_color="#fedcba" /]

In this advanced example, the shortcode is used to display a focus section with a custom layout, image, and icon. The image and icon are referenced by their attachment IDs. If no layout is specified, the default layout (“layout-1”) is used.

[nd_options_focus nd_options_layout="custom-layout" nd_options_image="123" nd_options_icon="456" /]

PHP Function Code

In case you have difficulties debugging what causing issues with [nd_options_focus] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('nd_options_focus', 'nd_options_shortcode_focus');

Shortcode PHP function:

function nd_options_shortcode_focus($atts, $content = null)
{  

  $atts = shortcode_atts(
  array(
    'nd_options_class' => '',
    'nd_options_layout' => '',
    'nd_options_color' => '',
    'nd_options_text_color' => '',
    'nd_options_bg_color' => '',
    'nd_options_image' => '',
    'nd_options_icon' => '',
    'nd_options_title' => '',
    'nd_options_subtitle' => '',
    'nd_options_link' => '',
    'nd_options_descr' => '',
  ), $atts);

  $str = '';

  //get variables
  $nd_options_class = $atts['nd_options_class'];
  $nd_options_layout = $atts['nd_options_layout'];
  $nd_options_title = $atts['nd_options_title'];
  $nd_options_subtitle = $atts['nd_options_subtitle'];
  $nd_options_color = $atts['nd_options_color'];
  $nd_options_text_color = $atts['nd_options_text_color'];
  $nd_options_bg_color = $atts['nd_options_bg_color'];
  $nd_options_descr = $atts['nd_options_descr'];

  //nd_options_link 
  $nd_options_link = vc_build_link( $atts['nd_options_link'] );
  $nd_options_link_url = $nd_options_link['url'];
  $nd_options_link_title = $nd_options_link['title'];
  $nd_options_link_target = $nd_options_link['target'];
  $nd_options_link_rel = $nd_options_link['rel'];


  //nd_options_image
  $nd_options_image_src = wp_get_attachment_image_src($atts['nd_options_image'],'large');
  $nd_options_icon_src = wp_get_attachment_image_src($atts['nd_options_icon'],'large');


  //default value for avoid error 
  if ($nd_options_layout == '') { $nd_options_layout = "layout-1"; }
  if ($nd_options_link_target == '') { $nd_options_link_target = "_self"; }
  if ($nd_options_color == '') { $nd_options_color = "#000"; }
  if ($nd_options_text_color == '') { $nd_options_text_color = "#fff"; }
  if ($nd_options_bg_color == '') { $nd_options_bg_color = "#000"; }

  // the layout selected
  $nd_options_layout = sanitize_key($nd_options_layout);
  $nd_options_layout_selected = dirname( __FILE__ ).'/layout/'.$nd_options_layout.'.php';
  include realpath($nd_options_layout_selected);
    

  $nd_options_str_shortcode = wp_kses_post( $str );    
  return apply_filters('uds_shortcode_out_filter', $nd_options_str_shortcode);
  
}

Code file location:

nd-shortcodes/nd-shortcodes/shortcodes/focus/index.php

ND Shortcodes [nd_options_price] Shortcode

The nd-shortcodes plugin’s ‘nd_options_price’ shortcode is used to display a pricing section on your WordPress site. It allows customization of class, image, title, price, description, link, and color. The shortcode generates a styled price box, complete with an image, title, and description. A clickable link styled according to the specified color is also included.

Shortcode: [nd_options_price]

Parameters

Here is a list of all possible nd_options_price shortcode parameters and attributes:

  • nd_options_class – designates the CSS class of the price section
  • nd_options_image – specifies the image to be used in the price section
  • nd_options_title – sets the title of the price section
  • nd_options_price – defines the price to be displayed
  • nd_options_description – provides a brief description for the price section
  • nd_options_link – establishes the URL link for the price section
  • nd_options_color – determines the background color of the link button

Examples and Usage

Basic example – Display a price section with a title, price, and description

[nd_options_price nd_options_title="Basic Plan" nd_options_price="$9.99" nd_options_description="This is our most basic plan. Perfect for individuals." /]

Advanced examples

Display a price section with an image, title, price, description, and a link to purchase

[nd_options_price nd_options_image="123" nd_options_title="Premium Plan" nd_options_price="$29.99" nd_options_description="This is our premium plan. Ideal for businesses." nd_options_link="url:http%3A%2F%2Fexample.com%2Fcheckout|||"]

Display a price section with a custom class, title, price, description, and a link to purchase with a custom color

[nd_options_price nd_options_class="custom-class" nd_options_title="Enterprise Plan" nd_options_price="$99.99" nd_options_description="This is our enterprise plan. Suitable for large corporations." nd_options_link="url:http%3A%2F%2Fexample.com%2Fcheckout|||" nd_options_color="#ff0000"]

PHP Function Code

In case you have difficulties debugging what causing issues with [nd_options_price] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('nd_options_price', 'nd_options_shortcode_price');

Shortcode PHP function:

function nd_options_shortcode_price($atts, $content = null)
{  

  $atts = shortcode_atts(
  array(
    'nd_options_class' => '',
    'nd_options_image' => '',
    'nd_options_title' => '',
    'nd_options_price' => '',
    'nd_options_description' => '',
    'nd_options_link' => '',
    'nd_options_color' => '',
  ), $atts);

  $str = '';

  //get variables
  $nd_options_class = $atts['nd_options_class'];
  $nd_options_title = $atts['nd_options_title'];
  $nd_options_price = $atts['nd_options_price'];
  $nd_options_description = $atts['nd_options_description'];
  $nd_options_color = $atts['nd_options_color'];

  //nd_options_link 
  $nd_options_link = vc_build_link( $atts['nd_options_link'] );
  $nd_options_link_url = $nd_options_link['url'];
  $nd_options_link_title = $nd_options_link['title'];
  $nd_options_link_target = $nd_options_link['target'];
  $nd_options_link_rel = $nd_options_link['rel'];

  //nd_options_image
  $nd_options_image_src = wp_get_attachment_image_src($atts['nd_options_image'],'large');
      
  
  $str .= '


  <!--START PRICE-->
  <div class="nd_options_section '.$nd_options_class.'">
                                        
    
    <!--START image--> 
    <div class="nd_options_section nd_options_box_sizing_border_box">

        <div class="nd_options_section nd_options_position_relative">
                
            <img alt="" class="nd_options_section" src="'.$nd_options_image_src[0].'">

            <div class="nd_options_bg_greydark_alpha_gradient_3 nd_options_position_absolute nd_options_left_0 nd_options_height_100_percentage nd_options_width_100_percentage nd_options_box_sizing_border_box">
                
                <div class="nd_options_position_absolute nd_options_bottom_30 nd_options_width_100_percentage nd_options_padding_botttom_0 nd_options_padding_50 nd_options_box_sizing_border_box nd_options_text_align_center">
                    <h3 class="nd_options_color_white nd_options_margin_0_important"><strong>'.$nd_options_title.'</strong></h3>
                    <div class="nd_options_section nd_options_height_10"></div>
                    <div class="nd_options_section nd_options_height_10 nd_options_display_none_all_iphone"></div>
                    <h1 class="nd_options_color_white nd_options_margin_0_important nd_options_font_size_60 nd_options_font_size_40_all_iphone nd_options_line_height_40_all_iphone"><strong>'.$nd_options_price.'</strong></h1>
                </div>

            </div>

        </div>
          
    </div>
    <!--END image-->


    <!--START content--> 
    <div class="nd_options_section nd_options_border_1_solid_grey">
        <div class="nd_options_section nd_options_padding_20 nd_options_box_sizing_border_box">
            
            '.$nd_options_description.'

            <div class="nd_options_section nd_options_height_20"></div>

            <div class="nd_options_width_100_percentage  nd_options_box_sizing_border_box nd_options_float_left">
                <a rel="'.$nd_options_link_rel.'" target="'.$nd_options_link_target.'" style="background-color:'.$nd_options_color.';" class="nd_options_display_inline_block nd_options_text_align_center nd_options_box_sizing_border_box nd_options_width_100_percentage nd_options_color_white nd_options_padding_10_20 nd_options_border_radius_3 " href="'.$nd_options_link_url.'">'.$nd_options_link_title.'</a>   
            </div>

        </div>
        
    </div>
    <!--END content--> 



  </div>
  <!--END PRICE-->


   ';


   $nd_options_str_shortcode = wp_kses_post( $str );
   return apply_filters('uds_shortcode_out_filter', $nd_options_str_shortcode);

}

Code file location:

nd-shortcodes/nd-shortcodes/shortcodes/price/index.php

ND Shortcodes [nd_options_progress] Shortcode

The nd-shortcodes plugin’s ‘nd_options_progress’ shortcode is designed to create a progress bar on your WordPress site. It allows you to adjust the class, layout, image, and color of the progress bar. The shortcode uses an array to store the attributes. It retrieves the image source using ‘wp_get_attachment_image_src’ and includes a default value to avoid errors. The layout is sanitized for security, and the output is filtered for safe rendering.

Shortcode: [nd_options_progress]

Parameters

Here is a list of all possible nd_options_progress shortcode parameters and attributes:

  • nd_options_class – additional CSS class for customization.
  • nd_options_layout – layout style for the progress bar.
  • nd_options_image – image ID to be displayed with the progress bar.
  • nd_options_color – color code for the progress bar.
  • nd_options_color_2 – secondary color code for the progress bar.
  • nd_options_progress – value to indicate progress percentage.

Examples and Usage

Basic example – Display a progress bar with a specific color and progress percentage.

[nd_options_progress nd_options_color="#ff0000" nd_options_progress="50" /]

Advanced examples

Display a progress bar with a specific color, secondary color, progress percentage, and a custom layout.

[nd_options_progress nd_options_color="#ff0000" nd_options_color_2="#0000ff" nd_options_progress="75" nd_options_layout="layout-2" /]

Display a progress bar with a specific image, color, and progress percentage.

[nd_options_progress nd_options_image="123" nd_options_color="#ff0000" nd_options_progress="50" /]

Display a progress bar with a specific class, color, and progress percentage.

[nd_options_progress nd_options_class="custom-class" nd_options_color="#ff0000" nd_options_progress="50" /]

Please note that in the examples above, the ‘nd_options_image’ attribute accepts the ID of the image, and the ‘nd_options_progress’ attribute accepts a value between 0 and 100 to represent the percentage of the progress.

PHP Function Code

In case you have difficulties debugging what causing issues with [nd_options_progress] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('nd_options_progress', 'nd_options_shortcode_progress');

Shortcode PHP function:

function nd_options_shortcode_progress($atts, $content = null)
{  

  $atts = shortcode_atts(
  array(
    'nd_options_class' => '',
    'nd_options_layout' => '',
    'nd_options_image' => '',
    'nd_options_color' => '',
    'nd_options_color_2' => '',
    'nd_options_progress' => '',
  ), $atts);

  $str = '';

  //get variables
  $nd_options_class = $atts['nd_options_class'];
  $nd_options_layout = $atts['nd_options_layout'];
  $nd_options_color = $atts['nd_options_color'];
  $nd_options_color_2 = $atts['nd_options_color_2'];
  $nd_options_progress = $atts['nd_options_progress'];

  //nd_options_image
  $nd_options_image_src = wp_get_attachment_image_src($atts['nd_options_image'],'large');
      

  //default value for avoid error 
  if ($nd_options_layout == '') { $nd_options_layout = "layout-1"; }

  // the layout selected
  $nd_options_layout = sanitize_key($nd_options_layout);
  $nd_options_layout_selected = dirname( __FILE__ ).'/layout/'.$nd_options_layout.'.php';
  include realpath($nd_options_layout_selected);

  $nd_options_str_shortcode = wp_kses_post( $str );
  return apply_filters('uds_shortcode_out_filter', $nd_options_str_shortcode);
  
}

Code file location:

nd-shortcodes/nd-shortcodes/shortcodes/progress/index.php

ND Shortcodes [nd_options_service] Shortcode

The ‘nd_options_service’ shortcode from the nd-shortcodes plugin creates a customizable service block. It enables users to add an image, title, description, and link to their WordPress site. The shortcode allows for various attributes, including class, image, title, description, link, and color. This flexibility lets users tailor the service block to match their site’s aesthetics. The PHP function ‘nd_options_shortcode_service’ processes these attributes, creating a dynamic HTML structure for the service block. It uses the WordPress function ‘vc_build_link’ for handling the link attributes, and ‘wp_get_attachment_image_src’ for image processing. In summary, the ‘nd_options_service’ shortcode is a handy tool for enhancing the visual appeal and functionality of your WordPress site.

Shortcode: [nd_options_service]

Parameters

Here is a list of all possible nd_options_service shortcode parameters and attributes:

  • nd_options_class – A CSS class to apply custom styles to the service block.
  • nd_options_image – The ID of the image you want to display in the service block.
  • nd_options_title – The title of the service block.
  • nd_options_description – The text that describes the service.
  • nd_options_link – A link that users can follow for more information.
  • nd_options_color – The background color of the link in the service block.

Examples and Usage

Basic usage example – Display a service section with a title, description, and a link.

[nd_options_service nd_options_title="Our Services" nd_options_description="We provide the best services in town." nd_options_link="url:%20http%3A//www.yoursite.com|title:Learn%20More|target:%20_blank|"]

Advanced examples – Display a service section with a title, description, link, and a custom class. Also, add an image and change the color of the link.

[nd_options_service nd_options_class="custom-class" nd_options_image="123" nd_options_title="Our Premium Services" nd_options_description="Experience our premium services." nd_options_link="url:%20http%3A//www.yoursite.com/premium|title:Explore%20Now|target:%20_blank|" nd_options_color="#FF0000"]

Here, the ‘nd_options_image’ attribute value should be the ID of the image you want to display. You can find this ID in your Media Library. The ‘nd_options_color’ attribute changes the color of the link. You can replace ‘#FF0000’ with any valid color code. The ‘nd_options_class’ attribute allows you to add a custom class to the service section for further customization with CSS.

PHP Function Code

In case you have difficulties debugging what causing issues with [nd_options_service] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('nd_options_service', 'nd_options_shortcode_service');

Shortcode PHP function:

function nd_options_shortcode_service($atts, $content = null)
{  

  $atts = shortcode_atts(
  array(
    'nd_options_class' => '',
    'nd_options_image' => '',
    'nd_options_title' => '',
    'nd_options_description' => '',
    'nd_options_link' => '',
    'nd_options_color' => '',
  ), $atts);

  $str = '';

  //get variables
  $nd_options_class = $atts['nd_options_class'];
  $nd_options_title = $atts['nd_options_title'];
  $nd_options_description = $atts['nd_options_description'];
  $nd_options_color = $atts['nd_options_color'];

  //nd_options_link 
  $nd_options_link = vc_build_link( $atts['nd_options_link'] );
  $nd_options_link_url = $nd_options_link['url'];
  $nd_options_link_title = $nd_options_link['title'];
  $nd_options_link_target = $nd_options_link['target'];
  $nd_options_link_rel = $nd_options_link['rel'];

  //nd_options_image
  $nd_options_image_src = wp_get_attachment_image_src($atts['nd_options_image'],'large');
      
  
  $str .= '

  <!--START SERVICE-->
  <div class="nd_options_section nd_options_position_relative '.$nd_options_class.' ">
      <img alt="" class="nd_options_position_absolute" width="50" src="'.$nd_options_image_src[0].'">
      <div class="nd_options_section nd_options_padding_left_70 nd_options_box_sizing_border_box">
          <h2 class="nd_options_margin_0_important"><strong>'.$nd_options_title.'</strong></h2>
          <div class="nd_options_section nd_options_height_20"></div>
          <p class="nd_options_margin_0_important">'.$nd_options_description.'</p>
          <div class="nd_options_section nd_options_height_20"></div>
          <a rel="'.$nd_options_link_rel.'" target="'.$nd_options_link_target.'" style="background-color:'.$nd_options_color.';" class="nd_options_display_inline_block nd_options_color_white nd_options_first_font nd_options_padding_8 nd_options_border_radius_3 nd_options_font_size_13" href="'.$nd_options_link_url.'">'.$nd_options_link_title.'</a>
      </div>
  </div>
  <!--END SERVICE-->

   ';

   $nd_options_str_shortcode = wp_kses_post( $str );
   return apply_filters('uds_shortcode_out_filter', $nd_options_str_shortcode);
   
}

Code file location:

nd-shortcodes/nd-shortcodes/shortcodes/service/index.php

ND Shortcodes [nd_options_team] Shortcode

The ‘nd_options_team’ shortcode is a powerful tool for creating dynamic team sections in WordPress. It allows for customization of class, layout, image, title, role, description, link, color, and social media links. You can display team members’ images, roles, descriptions, and social media links. This shortcode is flexible, enabling you to create unique team sections for your website.

Shortcode: [nd_options_team]

Parameters

Here is a list of all possible nd_options_team shortcode parameters and attributes:

  • nd_options_class – Specifies the CSS class of the team section
  • nd_options_layout – Defines the layout style for the team section
  • nd_options_image – Sets the image of the team member
  • nd_options_title – Determines the title or name of the team member
  • nd_options_role – Describes the role of the team member
  • nd_options_description – Provides a brief description for the team member
  • nd_options_link – Adds a link to the team member’s profile or webpage
  • nd_options_color – Sets the primary color used in the team section
  • nd_options_color_2 – Sets the secondary color used in the team section
  • nd_options_social_img_1 – Sets the first social media icon
  • nd_options_social_link_1 – Links to the first social media account
  • nd_options_social_img_2 – Sets the second social media icon
  • nd_options_social_link_2 – Links to the second social media account
  • nd_options_social_img_3 – Sets the third social media icon
  • nd_options_social_link_3 – Links to the third social media account
  • nd_options_social_img_4 – Sets the fourth social media icon
  • nd_options_social_link_4 – Links to the fourth social media account

Examples and Usage

Basic example – A simple usage of the ‘nd_options_team’ shortcode to display a team member with a name, role, and image.

[nd_options_team nd_options_title="John Doe" nd_options_role="Developer" nd_options_image="123" /]

Advanced examples

Using the ‘nd_options_team’ shortcode to display a team member with a name, role, image, description, and a link to their profile. The link will open in a new tab.

[nd_options_team nd_options_title="John Doe" nd_options_role="Developer" nd_options_image="123" nd_options_description="John is a senior developer with 5 years of experience" nd_options_link="url:%20http%3A//example.com%7Ctitle:View%20Profile%7Ctarget:%20_blank|" /]

Using the ‘nd_options_team’ shortcode to display a team member with a name, role, image, description, a link to their profile, and social media links. The profile and social media links will open in a new tab.

[nd_options_team nd_options_title="John Doe" nd_options_role="Developer" nd_options_image="123" nd_options_description="John is a senior developer with 5 years of experience" nd_options_link="url:%20http%3A//example.com%7Ctitle:View%20Profile%7Ctarget:%20_blank|" nd_options_social_img_1="456" nd_options_social_link_1="url:%20http%3A//facebook.com%7Ctitle:Facebook%7Ctarget:%20_blank|" nd_options_social_img_2="789" nd_options_social_link_2="url:%20http%3A//twitter.com%7Ctitle:Twitter%7Ctarget:%20_blank|" /]

PHP Function Code

In case you have difficulties debugging what causing issues with [nd_options_team] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('nd_options_team', 'nd_options_shortcode_team');

Shortcode PHP function:

function nd_options_shortcode_team($atts, $content = null)
{  

  $atts = shortcode_atts(
  array(
    'nd_options_class' => '',
    'nd_options_layout' => '',
    'nd_options_image' => '',
    'nd_options_title' => '',
    'nd_options_role' => '',
    'nd_options_description' => '',
    'nd_options_link' => '',
    'nd_options_color' => '',
    'nd_options_color_2' => '',
    'nd_options_social_img_1' => '',
    'nd_options_social_link_1' => '',
    'nd_options_social_img_2' => '',
    'nd_options_social_link_2' => '',
    'nd_options_social_img_3' => '',
    'nd_options_social_link_3' => '',
    'nd_options_social_img_4' => '',
    'nd_options_social_link_4' => '',
  ), $atts);

  $str = '';

  //get variables
  $nd_options_class = $atts['nd_options_class'];
  $nd_options_layout = $atts['nd_options_layout'];
  $nd_options_title = $atts['nd_options_title'];
  $nd_options_role = $atts['nd_options_role'];
  $nd_options_description = $atts['nd_options_description'];
  $nd_options_color = $atts['nd_options_color'];
  $nd_options_color_2 = $atts['nd_options_color_2'];

  //nd_options_link 
  $nd_options_link = vc_build_link( $atts['nd_options_link'] );
  $nd_options_link_url = $nd_options_link['url'];
  $nd_options_link_title = $nd_options_link['title'];
  $nd_options_link_target = $nd_options_link['target'];
  $nd_options_link_rel = $nd_options_link['rel'];


  $nd_options_social_link_1 = vc_build_link( $atts['nd_options_social_link_1'] );
  $nd_options_social_link_1_url = $nd_options_social_link_1['url'];
  $nd_options_social_link_1_title = $nd_options_social_link_1['title'];
  $nd_options_social_link_1_target = $nd_options_social_link_1['target'];
  $nd_options_social_link_1_rel = $nd_options_social_link_1['rel'];

  $nd_options_social_link_2 = vc_build_link( $atts['nd_options_social_link_2'] );
  $nd_options_social_link_2_url = $nd_options_social_link_2['url'];
  $nd_options_social_link_2_title = $nd_options_social_link_2['title'];
  $nd_options_social_link_2_target = $nd_options_social_link_2['target'];
  $nd_options_social_link_2_rel = $nd_options_social_link_2['rel'];

  $nd_options_social_link_3 = vc_build_link( $atts['nd_options_social_link_3'] );
  $nd_options_social_link_3_url = $nd_options_social_link_3['url'];
  $nd_options_social_link_3_title = $nd_options_social_link_3['title'];
  $nd_options_social_link_3_target = $nd_options_social_link_3['target'];
  $nd_options_social_link_3_rel = $nd_options_social_link_3['rel'];

  $nd_options_social_link_4 = vc_build_link( $atts['nd_options_social_link_4'] );
  $nd_options_social_link_4_url = $nd_options_social_link_4['url'];
  $nd_options_social_link_4_title = $nd_options_social_link_4['title'];
  $nd_options_social_link_4_target = $nd_options_social_link_4['target'];
  $nd_options_social_link_4_rel = $nd_options_social_link_4['rel'];

  //nd_options_image
  $nd_options_image_src = wp_get_attachment_image_src($atts['nd_options_image'],'large');
  $nd_options_social_img_1 = wp_get_attachment_image_src($atts['nd_options_social_img_1'],'large');
  $nd_options_social_img_2 = wp_get_attachment_image_src($atts['nd_options_social_img_2'],'large');
  $nd_options_social_img_3 = wp_get_attachment_image_src($atts['nd_options_social_img_3'],'large');
  $nd_options_social_img_4 = wp_get_attachment_image_src($atts['nd_options_social_img_4'],'large');
      
  
  //default value for avoid error 
  if ($nd_options_link_target == '') { $nd_options_link_target = "_self"; }
  if ($nd_options_layout == '') { $nd_options_layout = "layout-1"; }

  // the layout selected
  $nd_options_layout = sanitize_key($nd_options_layout);
  $nd_options_layout_selected = dirname( __FILE__ ).'/layout/'.$nd_options_layout.'.php';
  include realpath($nd_options_layout_selected);

  $nd_options_str_shortcode = wp_kses_post( $str );
  return apply_filters('uds_shortcode_out_filter', $nd_options_str_shortcode);
  
}

Code file location:

nd-shortcodes/nd-shortcodes/shortcodes/team/index.php

ND Shortcodes [nd_options_testimonial] Shortcode

The nd-shortcodes plugin’s ‘nd_options_testimonial’ shortcode is used to display testimonials on your website. It allows customization of class, layout, color, testimonial text, image, name, and role. This shortcode fetches the specified image and testimonial details, sanitizes the layout key, includes the selected layout file, and applies filters to the final output. It ensures the safe and secure display of testimonials.

Shortcode: [nd_options_testimonial]

Parameters

Here is a list of all possible nd_options_testimonial shortcode parameters and attributes:

  • nd_options_class – Assigns a specific class to the testimonial for custom styling.
  • nd_options_layout – Defines the layout style of the testimonial.
  • nd_options_color – Sets the color scheme of the testimonial.
  • nd_options_testimonial – The actual testimonial text to be displayed.
  • nd_options_image – The image attached to the testimonial, generally a picture of the person who gave the testimonial.
  • nd_options_name – The name of the person who gave the testimonial.
  • nd_options_role – The role or designation of the person who gave the testimonial.

Examples and Usage

Basic Example – An example of a simple usage of the nd-shortcodes plugin shortcode to add a testimonial.

[nd_options_testimonial nd_options_testimonial="This is a great product!" nd_options_name="John Doe" nd_options_role="CEO"]

Advanced Examples

Adding a testimonial with a specific layout, color, and an attached image.

[nd_options_testimonial nd_options_layout="layout-2" nd_options_color="#000000" nd_options_testimonial="I love this service!" nd_options_name="Jane Smith" nd_options_role="Manager" nd_options_image="12"]

Adding a testimonial with a custom class for additional CSS styling.

[nd_options_testimonial nd_options_class="custom-testimonial" nd_options_testimonial="Best in the market!" nd_options_name="Robert Brown" nd_options_role="Customer"]

Note: In the advanced examples, the ‘nd_options_image’ attribute expects the ID of the image you want to display. You can find this ID in your WordPress media library.

PHP Function Code

In case you have difficulties debugging what causing issues with [nd_options_testimonial] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('nd_options_testimonial', 'nd_options_shortcode_testimonial');

Shortcode PHP function:

function nd_options_shortcode_testimonial($atts, $content = null)
{  

  $atts = shortcode_atts(
  array(
    'nd_options_class' => '',
    'nd_options_layout' => '',
    'nd_options_color' => '',
    'nd_options_testimonial' => '',
    'nd_options_image' => '',
    'nd_options_name' => '',
    'nd_options_role' => '',
  ), $atts);

  $str = '';

  //get variables
  $nd_options_class = $atts['nd_options_class'];
  $nd_options_layout = $atts['nd_options_layout'];
  $nd_options_color = $atts['nd_options_color'];
  $nd_options_testimonial = $atts['nd_options_testimonial'];
  $nd_options_name = $atts['nd_options_name'];
  $nd_options_role = $atts['nd_options_role'];

  //nd_options_image
  $nd_options_image_src = wp_get_attachment_image_src($atts['nd_options_image'],'thumbnail');



  //default value for avoid error 
  if ($nd_options_layout == '') { $nd_options_layout = "layout-1"; }

  //the layout selected
  $nd_options_layout = sanitize_key($nd_options_layout);
  $nd_options_layout_selected = dirname( __FILE__ ).'/layout/'.$nd_options_layout.'.php';
  include realpath($nd_options_layout_selected);


  //check datas
  $nd_options_allowed_html = [
    'div'      => [  
      'id' => [],
      'class' => [],
      'style' => [],
    ],
    'p'      => [
      'id' => [],
      'class' => [],
      'style' => [],
    ],
    'h4'      => [
      'id' => [],
      'class' => [],
      'style' => [],
    ],
    'img'      => [
      'id' => [],
      'class' => [],
      'style' => [],
      'src' => [],
      'width' => [],
      'height' => [],
      'alt' => [],
    ],
  ];

  $str = wp_kses( $str, $nd_options_allowed_html );
 
  
  return apply_filters('uds_shortcode_out_filter', $str);

}

Code file location:

nd-shortcodes/nd-shortcodes/shortcodes/testimonial/index.php

Conclusion

Now that you’ve learned how to embed the ND Shortcodes Plugin shortcodes, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.

Related Shortcodes

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *