Column Shortcodes

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

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

Column Shortcodes

"Column Shortcodes is a WordPress plugin that allows you to easily add columns to your posts or pages. With its simple interface, creating well-structured layouts is a breeze."

★★★★☆ (135) Active Installs: 100000+ Tested with: 6.0.6 PHP Version: false

Included Shortcodes:

• [columns]

Column [columns] Shortcode

The Column-Shortcodes plugin shortcode is a powerful tool that customizes the layout of your content. It creates a content column with optional parameters for ID, class, and padding. The shortcode uses the ‘columns’ function to sanitize and assign attributes. It also includes a padding generator that splits padding attributes into top, right, bottom, and left. If the shortcode name ends with ‘_last’, it adds a ‘last_column’ class. The function wraps the content in a div tag with the assigned ID, class, and padding, providing a flexible layout tool.

Shortcode: [columns]

Parameters

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

• id – A unique ID for the individual column
• class – CSS class to apply specific styles to the column
• padding – Defines the space around the content in the column

Examples and Usage

Basic example – A basic usage of the column shortcode plugin might be to create a column with a specific ID and class. This can be useful for styling purposes.

[columns id="column1" class="myClass" /]

Advanced examples

Here, we use the column shortcode to create a column with a specific ID, class, and padding. The padding attribute allows us to control the space around the content inside the column.

[columns id="column1" class="myClass" padding="10px 20px 10px 20px" /]

In this example, we use the column shortcode to create a column with a specific ID, class, and padding. We specify different padding values for the top, right, bottom, and left sides of the column.

[columns id="column1" class="myClass" padding="10px 20px 30px 40px" /]

In this example, we use the column shortcode to create a column with a specific ID and class, and no padding. This can be useful if you want the column to take up the full width of its container.

[columns id="column1" class="myClass" padding="0" /]

PHP Function Code

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

Shortcode line:

add_shortcode( $shortcode['name'], array( $this, 'columns' ) );

Shortcode PHP function:

function columns( $atts, $content = null, $name = '' ) {

		$atts = shortcode_atts( array(
			"id"      => '',
			"class"   => '',
			"padding" => '',
		), $atts );

		$id = sanitize_text_field( $atts['id'] );
		$class = sanitize_text_field( $atts['class'] );
		$padding = sanitize_text_field( $atts['padding'] );

		$id = ( $id <> '' ) ? " id='" . esc_attr( $id ) . "'" : '';
		$class = ( $class <> '' ) ? esc_attr( ' ' . $class ) : '';

		$content = $this->content_helper( $content );

		// padding generator
		if ( $padding <> '' ) {
			$parts = explode( " ", $padding );

			// check for '0' values. if true we will split padding attributes into top,right,bottom and left.
			if ( $parts && in_array( '0', $parts ) ) {
				$padding = ! empty( $parts[0] ) ? "padding-top:{$parts[0]};" : '';
				$padding .= ! empty( $parts[1] ) ? "padding-right:{$parts[1]};" : '';
				$padding .= ! empty( $parts[2] ) ? "padding-bottom:{$parts[2]};" : '';
				$padding .= ! empty( $parts[3] ) ? "padding-left:{$parts[3]};" : '';
			} else {
				$padding = "padding:{$padding};";
			}

			// wraps the content in an extra div with padding applied
			$content = '<div style="' . esc_attr( $padding ) . '">' . $content . '</div>';
		}

		// last class
		$pos = strpos( $name, '_last' );

		if ( false !== $pos ) {
			$name = str_replace( '_last', ' last_column', $name );
		}

		// remove prefix from class name
		if ( $this->get_prefix() ) {
			$name = str_replace( $this->get_prefix(), '', $name );
		}

		$output = "<div{$id} class='content-column {$name}{$class}'>{$content}</div>";

		if ( false !== $pos ) {
			$output .= "<div class='clear_column'></div>";
		}

		return $output;
	}

Code file location:

column-shortcodes/column-shortcodes/column-shortcodes.php

Conclusion

Now that you’ve learned how to embed the Column Shortcodes 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.