WP Dark Mode Shortcode

Below, you’ll find a detailed guide on how to add the WP Dark Mode Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Wp Dark Mode Plugin shortcode not to show or not to work correctly.

Before starting, here is an overview of the Wp Dark Mode Plugin and the shortcodes it provides:

WP Dark Mode – Best Dark Mode Plugin for WordPress with Social Sharing

"WP Dark Mode is an advanced WordPress plugin that enables a user-friendly dark mode on your website. It also offers social sharing features for enhanced user interaction."

★★★★☆ (308) Active Installs: 20000+ Tested with: 6.3.2 PHP Version: 5.6

Included Shortcodes:

• [wp_dark_mode]

WP Dark Mode [wp_dark_mode] Shortcode

The WP Dark Mode shortcode is a powerful tool that allows you to render a dark mode button on your WordPress site. It offers customizable attributes for floating, class, and style. The function checks if the dark mode is enabled and sanitizes user input for safety. The shortcode also checks for a valid license and custom switch icon, and adjusts the switch position and style accordingly.

Shortcode: [wp_dark_mode]

Parameters

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

• floating – Determines if the dark mode switch is floating or not
• class – Allows adding a custom CSS class to the button
• style – Specifies the visual style of the dark mode switch

Examples and Usage

Basic example – The shortcode is used to display the dark mode button with default settings.

[wp_dark_mode /]

Advanced examples

Using the shortcode to display the dark mode button with a floating style.

[wp_dark_mode floating="yes" /]

Using the shortcode to display the dark mode button with a custom class.

[wp_dark_mode class="custom-class" /]

Using the shortcode to display the dark mode button with a specific style.

[wp_dark_mode style="2" /]

Using the shortcode to display the dark mode button with multiple parameters. In this example, the button is floating, has a custom class, and uses a specific style.

[wp_dark_mode floating="yes" class="custom-class" style="2" /]

PHP Function Code

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

Shortcode line:

add_shortcode( 'wp_dark_mode', [ $this, 'render_dark_mode_btn' ] );

Shortcode PHP function:

function render_dark_mode_btn( $atts = [] ) {
			// Return if the dark mode is disabled.
			if ( ! wp_dark_mode_enabled() ) {
				return '';
			}

			$atts = shortcode_atts(
				[
					'floating' => 'no',
					'class'    => '',
					'style'    => 1,
				],
				// Allowing only these three attributes from user, which are checked and sanitized.
				[
					'floating' => isset( $atts['floating'] ) ? sanitize_text_field( wp_unslash( $atts['floating'] ) ) : 'no',
					'class'    => isset( $atts['class'] ) ? sanitize_text_field( wp_unslash( $atts['class'] ) ) : '',
					'style'    => isset( $atts['style'] ) ? sanitize_text_field( wp_unslash( $atts['style'] ) ) : 1,
				]
			);

			$is_floating = 'yes' === $atts['floating'];
			$style       = absint( $atts['style'] );
			$custom_icon = false;

			// Check if the custom switch icon is enabled.
			if ( $this->is_license_valid() ) {
				$custom_icon = 'on' === esc_attr( wp_dark_mode_get_settings( 'wp_dark_mode_switch', 'custom_switch_icon', 'off' ) );
			}

			// Check if the switch is floating.
			if ( $is_floating ) {

				if ( 'on' === esc_attr( wp_dark_mode_get_settings( 'wp_dark_mode_switch', 'enable_cta', 'off' ) ) ) {
					$atts['cta_text'] = esc_html( wp_dark_mode_get_settings( 'wp_dark_mode_switch', 'cta_text' ) );
				}

				// Get the switch position.
				$position = esc_attr( wp_dark_mode_get_settings( 'wp_dark_mode_switch', 'switcher_position', 'right_bottom' ) );
				if ( 'custom' === $position ) {
					$position = esc_attr( wp_dark_mode_get_settings( 'wp_dark_mode_switch', 'switch_side', 'right_bottom' ) );
				}

				$atts['position'] = $position;
			}

			ob_start();

			if ( $custom_icon ) {
				wp_dark_mode()->get_template( 'btn-custom', $atts );
			} else {

				// Reset the style if the license is not valid.
				if ( ! $this->is_license_valid() && $style > 3 ) {
					$style = 1;
				}
				$template = wp_sprintf( 'btn-%s.php', $style );

				if ( 14 === $style && ! $is_floating ) {
					wp_dark_mode()->get_template( 'btn-2', $atts );
				} elseif ( file_exists( WP_DARK_MODE_TEMPLATES . '/' . $template ) ) {
					wp_dark_mode()->get_template( wp_sprintf( 'btn-%s', $style ), $atts);
				} else {
					wp_dark_mode()->get_template( 'btn-1', $atts);
				}
			}

			$html = ob_get_clean();

			return wp_kses( $html, wpdm_extended_kses() );
		}

Code file location:

wp-dark-mode/wp-dark-mode/includes/class-shortcode.php

Conclusion

Now that you’ve learned how to embed the WP Dark Mode Plugin shortcode, 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.