Lightweight Grid Columns Shortcode

Below, you’ll find a detailed guide on how to add the Lightweight Grid Columns 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 Lightweight Grid Columns Plugin shortcode not to show or not to work correctly.

Before starting, here is an overview of the Lightweight Grid Columns Plugin and the shortcodes it provides:

Lightweight Grid Columns

"Lightweight Grid Columns is a user-friendly WordPress plugin that provides simple and efficient solutions for creating responsive grid layouts. It's perfect for enhancing your site's visual appeal."

★★★★☆ (42) Active Installs: 20000+ Tested with: 5.1.17 PHP Version: false

Included Shortcodes:

• [lgc_column]

Lightweight Grid Columns [lgc_column] Shortcode

The Lightweight Grid Columns plugin shortcode, ‘lgc_column’, is used to create customizable grid-based layouts. It allows you to define the grid size for different devices and apply various styles. The shortcode function ‘lgc_columns_shortcode’ extracts attributes like grid size, tablet grid, mobile grid, last, class, style, equal heights, and id. It enqueues a script for equal heights if set to true. The function then formats the content within the grid layout, applying the defined attributes. It returns the balanced content for display.

Shortcode: [lgc_column]

Parameters

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

• grid – determines the width of the column in percentage
• tablet_grid – sets the column width on tablet devices
• mobile_grid – defines the column width on mobile devices
• last – if set to ‘true’, it adds a clear div after the column
• class – allows to add additional CSS classes to the column
• style – lets you include inline CSS styles
• equal_heights – if true, it makes all columns of the same height
• id – sets a unique identifier for the column

Examples and Usage

Basic example – The following shortcode is a basic usage example for the lightweight-grid-columns plugin. It creates a grid column with a width of 50% for all devices.

[lgc_column grid="50" /]

Advanced examples

1. The shortcode below creates a grid column with different widths for different devices. It specifies a 70% width for desktop, 50% width for tablet, and 100% width for mobile devices.

[lgc_column grid="70" tablet_grid="50" mobile_grid="100" /]

2. This shortcode creates a grid column with an additional CSS class and inline style. It also specifies the ‘last’ attribute as ‘true’, which clears the float after this column.

[lgc_column grid="50" class="my-class" style="background-color: #eee;" last="true" /]

3. The below shortcode creates a grid column with equal heights enabled and a unique ID. The content inside the shortcode will be processed by WordPress shortcodes.

[lgc_column grid="50" equal_heights="true" id="my-column"]Your content here[/lgc_column]

PHP Function Code

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

Shortcode line:

add_shortcode( 'lgc_column', 'lgc_columns_shortcode' );

Shortcode PHP function:

function lgc_columns_shortcode( $atts , $content = null ) {
		extract( shortcode_atts(
			array(
				'grid' => '50',
				'tablet_grid' => '50',
				'mobile_grid' => '100',
				'last' => '',
				'class' => '',
				'style' => '',
				'equal_heights' => 'true',
				'id' => ''
			), $atts )
		);

		if ( 'true' == $equal_heights ) {
			wp_enqueue_script( 'lgc-matchHeight' );
		}

		$content = sprintf(
			'<div %9$s class="lgc-column lgc-grid-parent %1$s %2$s %3$s %4$s %5$s"><div %6$s class="inside-grid-column">%7$s</div></div>%8$s',
			'lgc-grid-' . intval( $grid ),
			'lgc-tablet-grid-' . intval( $tablet_grid ),
			'lgc-mobile-grid-' . intval( $mobile_grid ),
			( 'true' == $equal_heights ) ? 'lgc-equal-heights' : '',
			esc_attr( $class ),
			( '' !== $style ) ? ' style="' . esc_attr( $style ) . '"' : '',
			do_shortcode( $content ),
			( 'true' == $last ) ? '<div class="lgc-clear"></div>' : '',
			( '' !== $id ) ? 'id="' . esc_attr( $id ) . '"' : ''
		);

		return force_balance_tags( $content );
	}

Code file location:

lightweight-grid-columns/lightweight-grid-columns/lightweight-grid-columns.php

Conclusion

Now that you’ve learned how to embed the Lightweight Grid Columns 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.