Support » Plugin: Shortcake (Shortcode UI) » Could someone tell me how this works?

  • I dont get this but I like the screenshots. How to get this started? register “UI”, what is that? I tried to analyze the Github, but I just out of ideas. There is no menu, no “add” options or anything anywhere as I can see in twentysixteen active Theme.

Viewing 3 replies - 1 through 3 (of 3 total)
  • 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.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Could someone tell me how this works?’ is closed to new replies.