Could someone tell me how this works?

Hi Jonas,

This plug-in is purely based on developers. If you want to create a shortcode component, you should have experience in coding ??

Regards,
Mathias Holmbo

Well, sometimes the most obvius might be hidden for the most experienced. In those cases a “kick” in the right direction is all whats needed. So, @mathiasholmbo, if you have a “kick” to offer, I would be happy. I know shortcodes coding, full PHP and most of WordPress API.

Here I have a grid component, that I used on a website I built a year ago (Might be better ways to code it now?) @jonas-lundman.
But this pretty much sums up most of the possibilities within the shortcake ui.

Ex. sc_grid_component.php

<?php
/**
 * Shortcode for query grid component.
 */
add_shortcode( 'query_grid_component', 'sc_query_grid_component' );
function sc_query_grid_component( $attr ) {

	// Add shortcode attributes.
	$shortcode_attributes = array(
		'posts_per_page' => '',
		'post_type'      => '',
		'post_columns'   => '',
		'post_orderby'   => '',
		'post_order'     => ''
	);

	// Extract attributes.
	extract(
		shortcode_atts(
			$shortcode_attributes,
			$attr
		)
	);

	// Check if post_columns isset and not empty. if not, set post_columns to 4.
	$column = $thumbnail = '';
	switch ( $post_columns ) {
		case '1' :
			$column = '12';
			break;
		case '2' :
			$column = '6';
			break;
		case '3' :
			$column = '4';
			break;
		case '4' :
			$column = '3';
			break;
		case '6' :
			$column = '2';
			break;
		default :
			$column = '4';
			break;
	}

	$args = array(
		'post_type'      => isset( $post_type ) ? $post_type : 'post',
		'posts_per_page' => isset( $posts_per_page ) ? $posts_per_page : get_option( 'posts_per_page' ),
		'orderby'        => isset( $post_orderby ) ? $post_orderby : 'date',
		'order'          => isset( $post_order ) ? $post_order : 'DESC'
	);

	$query = new WP_Query( $args );

	if ( $query->have_posts() ) {
		$output = '<div class="row">';
		while ( $query->have_posts() ) {
			$query->the_post();

			$output .= '<div class="col-xs-6 col-sm-' . $column . '">';
			$output .= '<a class="sc-grid-component" href="' . get_the_permalink() . '">';
			$output .= '<span class="sc-grid-component-date">' . get_the_date('j F Y') . '</span>';

			if ( has_post_thumbnail( $query->ID ) ) {

				switch ( $column ) {
					case  '12' :
						$output .= get_the_post_thumbnail( $query->ID, 'theme-top-image' );
						break;
					case  '6' :
						$output .= get_the_post_thumbnail( $query->ID, 'image_560_160' );
						break;
					default :
						$output .= get_the_post_thumbnail( $query->ID, 'image_366_160' );
						break;
				}
			}
			$output .= '<h3>' . get_the_title() . '</h3>';
			$output .= '<p>' . wp_trim_words(get_the_excerpt(), 10) . '</p>';
			$output .= '</a>';
			$output .= '</div>'; // Close .col-sm-$grid_size

		}
		$output .= '</div>'; #<!-- /.row -->
	} elseif ( current_user_can( 'edit_post' ) ) {
		$output = __( 'Error. There is no content based on your options.', 'igniters' );
	}

	wp_reset_postdata();

	return $output;
}

/**
 * Shortcake.
 */
if ( function_exists( 'shortcode_ui_register_for_shortcode' ) ) {

	add_action( 'init', 'shortcake_query_grid_component' );
	function shortcake_query_grid_component() {

		$attrs = array(
			array(
				'label'       => esc_html__( 'Post type to be displayed', 'igniters' ),
				'attr'        => 'post_type',
				'type'        => 'select',
				'description' => esc_html__( 'Select the post type you would want to display', 'igniters' ),
				'options'      => array(
					'post'    => __( 'Posts', 'igniters' ),
					'product' => __( 'Products', 'igniters' ),
					'page'    => __( 'Pages', 'igniters' ),
				)
			),
			array(
				'label'       => esc_html__( 'Amount of posts to show', 'igniters' ),
				'attr'        => 'posts_per_page',
				'type'        => 'text',
				'description' => esc_html__( 'Enter the amount of posts that should be displayed. E.g. -1 will display all posts or using 10 will show 10 posts.', 'igniters' ),
			),
			array(
				'label'       => esc_html__( 'Select columns per row', 'igniters' ),
				'attr'        => 'post_columns',
				'type'        => 'select',
				'description' => esc_html__( 'Select the amount of columns you would want to display per row.', 'igniters' ),
				'options'      => array(
					'1' => __( 'One Column', 'igniters' ),
					'2' => __( 'Two Columns', 'igniters' ),
					'3' => __( 'Three Columns', 'igniters' ),
					'4' => __( 'Four Columns', 'igniters' ),
					'6' => __( 'Six Columns', 'igniters' )
				)
			),
			array(
				'label'       => esc_html__( 'Select order', 'igniters' ),
				'attr'        => 'post_orderby',
				'type'        => 'select',
				'description' => esc_html__( 'Select the order the posts should be displayed in.', 'igniters' ),
				'options'      => array(
					'date'       => __( 'Date', 'wordpress' ),
					'title'      => __( 'Title', 'wordpress' ),
					'menu_order' => __( 'Custom Order', 'igniters' ),
					'modified'   => __( 'Modified', 'wordpress' ),
				)
			),
			array(
				'label'       => esc_html__( 'Select order direction (ASC/DESC)', 'igniters' ),
				'attr'        => 'post_order',
				'type'        => 'select',
				'description' => esc_html__( 'Order Ascending or Descending.', 'igniters' ),
				'options'      => array(
					'DESC' => __( 'Descending', 'igniters' ),
					'ASC'  => __( 'Ascending', 'igniters' )
				)
			),
		);

		// Call shortcode_ui and add it to the interface.
		shortcode_ui_register_for_shortcode( 'query_grid_component', array(
				'label'         => esc_html__( 'Query component (grid)', 'igniters' ),
				'listItemImage' => 'dashicons-format-aside',
				'attrs'         => $attrs
			)
		);
	}
}

And after this, require the new file in your functions.php.

Then, when you want to add it to a section/row/column, you use the SiteOrigin Editor and click the “Add Post Element” and then you have an overview of your components, which you can add.