Below, you’ll find a detailed guide on how to add the WP Ultimate Post Grid Shortcodes to your WordPress website, including their parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the WP Ultimate Post Grid Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the WP Ultimate Post Grid Plugin and the shortcodes it provides:
"WP Ultimate Post Grid is an innovative WordPress plugin designed to create flexible and attractive post grids. It allows for easy customization, enhancing the look and functionality of your site."
- [wpupg-grid-limit]
- [wpupg-grid-with-filters]
- [wpupg-grid]
- [wpupg-filter]
- [wpupg-icon]
WP Ultimate Post Grid [wpupg-grid-limit] Shortcode
The WP Ultimate Post Grid plugin shortcode, ‘wpupg-grid-limit’, provides a way to limit the number of posts displayed in a grid. The shortcode takes an ‘id’ attribute, which corresponds to the ID of the grid. The Grid Limit Rules class then handles the rest based on these attributes.
Shortcode: [wpupg-grid-limit]
Parameters
Here is a list of all possible wpupg-grid-limit shortcode parameters and attributes:
id– Specifies the unique identifier for the grid
Examples and Usage
Basic example – Utilizes the shortcode to establish a grid limit by indicating the ID.
[wpupg-grid-limit id=5 /]Advanced examples
Applying multiple shortcodes to define several grid limits by their IDs. This allows you to have different grid limits for various sections of your website.
[wpupg-grid-limit id=5 /]
[wpupg-grid-limit id=10 /]
[wpupg-grid-limit id=15 /]Using the shortcode without an ID, which will return an empty output. This is useful when you want to define a grid limit but don’t have the specific ID yet.
[wpupg-grid-limit /]PHP Function Code
In case you have difficulties debugging what causing issues with [wpupg-grid-limit] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'wpupg-grid-limit', array( __CLASS__, 'grid_limit_shortcode' ) );Shortcode PHP function:
function grid_limit_shortcode( $atts ) {
$atts = shortcode_atts( array(
'id' => '',
), $atts, 'wpupg_grid_limit' );
// Just output empty. Grid Limit Rules class will handle the rest based on the shortcode attributes.
return '';
}
Code file location:
wp-ultimate-post-grid/wp-ultimate-post-grid/includes/public/class-wpupg-shortcode.phpWP Ultimate Post Grid [wpupg-grid-with-filters] Shortcode
The WP Ultimate Post Grid shortcode enables the creation of dynamic grids with filters. This shortcode accepts ‘id’ and ‘align’ attributes. It retrieves the grid specified by the ‘id’, aligns it as per the ‘align’ attribute, and then outputs the entire grid. The grid’s JavaScript arguments are also added for enhanced functionality.
Shortcode: [wpupg-grid-with-filters]
Parameters
Here is a list of all possible wpupg-grid-with-filters shortcode parameters and attributes:
id– It’s the unique identifier of the grid.align– Aligns the grid to left, right or center.
Examples and Usage
Basic example – Display a grid with default alignment by simply providing the grid ID.
[wpupg-grid-with-filters id="your_grid_id" /]Advanced examples
Align the grid to the center. The available alignment options are ‘left’, ‘center’, and ‘right’. If no alignment is specified, the default is ‘left’.
[wpupg-grid-with-filters id="your_grid_id" align="center" /]Display a grid with a custom ID and align it to the right. This can be useful when you want to display multiple grids on the same page with different alignments.
[wpupg-grid-with-filters id="custom_grid_id" align="right" /]Remember to replace ‘your_grid_id’ and ‘custom_grid_id’ with the actual grid IDs that you want to display. The grid ID is a unique identifier for each grid and can be found in the grid settings in your WordPress admin area.
PHP Function Code
In case you have difficulties debugging what causing issues with [wpupg-grid-with-filters] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'wpupg-grid-with-filters', array( __CLASS__, 'grid_with_filters_shortcode' ) );Shortcode PHP function:
function grid_with_filters_shortcode( $atts ) {
$output = '';
$atts = shortcode_atts( array(
'id' => '',
'align' => '',
), $atts, 'wpupg_grid_with_filters' );
$slug = strtolower( trim( $atts['id'] ) );
unset( $atts['id'] );
$grid = WPUPG_Grid_Manager::get_grid( $slug );
if ( $grid ) {
WPUPG_Assets::load();
$output = WPUPG_Grid_Output::entire( $grid, $atts );
WPUPG_Assets::add_js_data( 'wpupg_grid_args_' . $grid->id(), $grid->get_javascript_args() );
}
return $output;
}
Code file location:
wp-ultimate-post-grid/wp-ultimate-post-grid/includes/public/class-wpupg-shortcode.phpWP Ultimate Post Grid [wpupg-grid] Shortcode
The WP Ultimate Post Grid shortcode is a tool that displays a specific grid on your webpage. This shortcode takes two parameters, ‘id’ and ‘align’. The ‘id’ parameter is used to specify the grid to be displayed, while the ‘align’ parameter adjusts the grid’s alignment. If a grid with the specified ‘id’ exists, the shortcode will output the grid and its associated JavaScript data.
Shortcode: [wpupg-grid]
Parameters
Here is a list of all possible wpupg-grid shortcode parameters and attributes:
id– Specifies the unique identifier for the grid.align– Determines the alignment of the grid on the page.
Examples and Usage
Basic example – A simple usage of the shortcode to display a grid by its ID.
[wpupg-grid id="my-grid-id" /]Advanced examples
Displaying a grid with a specific alignment. The ‘align’ attribute can take values like ‘left’, ‘right’, ‘center’, etc. Here, we are aligning the grid to the center.
[wpupg-grid id="my-grid-id" align="center" /]Displaying a grid without specifying the ID. In this case, the plugin will try to display the first available grid.
[wpupg-grid /]Displaying a grid with a non-existing ID. In this case, the plugin will not display anything.
[wpupg-grid id="non-existing-id" /]Please note that the actual output depends on the grids you have created in your WordPress admin area. The ‘id’ attribute should match the slug of the grid you want to display.
PHP Function Code
In case you have difficulties debugging what causing issues with [wpupg-grid] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'wpupg-grid', array( __CLASS__, 'grid_shortcode' ) );Shortcode PHP function:
function grid_shortcode( $atts ) {
$output = '';
$atts = shortcode_atts( array(
'id' => '',
'align' => '',
), $atts, 'wpupg_grid' );
$slug = strtolower( trim( $atts['id'] ) );
unset( $atts['id'] );
$grid = WPUPG_Grid_Manager::get_grid( $slug );
if ( $grid ) {
WPUPG_Assets::load();
$output = WPUPG_Grid_Output::grid( $grid, $atts );
WPUPG_Assets::add_js_data( 'wpupg_grid_args_' . $grid->id(), $grid->get_javascript_args() );
}
return $output;
}
Code file location:
wp-ultimate-post-grid/wp-ultimate-post-grid/includes/public/class-wpupg-shortcode.phpWP Ultimate Post Grid [wpupg-filter] Shortcode
The WP Ultimate Post Grid shortcode is a powerful tool that enables dynamic filtering of posts within a grid layout. It allows you to specify a unique ‘id’ for each grid, and customize the ‘filter’ and ‘align’ options. If no filter is specified, it applies all available filters. If a specific filter is given, it applies that filter only. The shortcode outputs the filtered grid.
Shortcode: [wpupg-filter]
Parameters
Here is a list of all possible wpupg-filter shortcode parameters and attributes:
id– The unique identifier of the grid you want to filter.filter– The specific filter to apply to the grid. Leave blank for all filters.align– Adjusts the alignment of the grid on the page.
Examples and Usage
Basic example – A simple usage of the WP Ultimate Post Grid shortcode to filter a specific grid by its ID.
[wpupg-filter id="myGridId" /]Advanced examples
Displaying a specific grid with a specified filter.
[wpupg-filter id="myGridId" filter="myFilter" /]Aligning the grid to the center of the page.
[wpupg-filter id="myGridId" align="center" /]Combining multiple parameters to display a specific grid with a specified filter and alignment.
[wpupg-filter id="myGridId" filter="myFilter" align="center" /]PHP Function Code
In case you have difficulties debugging what causing issues with [wpupg-filter] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'wpupg-filter', array( __CLASS__, 'filter_shortcode' ) );Shortcode PHP function:
function filter_shortcode( $atts ) {
$output = '';
$atts = shortcode_atts( array(
'id' => '',
'filter' => '',
'align' => '',
), $atts, 'wpupg_filter' );
$slug = strtolower( trim( $atts['id'] ) );
unset( $atts['id'] );
$grid = WPUPG_Grid_Manager::get_grid( $slug );
if ( $grid ) {
WPUPG_Assets::load();
if ( ! $atts['filter'] ) {
$output = WPUPG_Grid_Output::filters( $grid, $atts );
} else {
$filter = $grid->filter( $atts['filter'] );
if ( $filter ) {
$output = WPUPG_Grid_Output::filter( $grid, $filter, $atts );
}
}
}
return $output;
}
Code file location:
wp-ultimate-post-grid/wp-ultimate-post-grid/includes/public/class-wpupg-shortcode.phpWP Ultimate Post Grid [wpupg-icon] Shortcode
The WP Ultimate Post Grid shortcode is used to display a custom icon in your posts. It allows you to select an icon, set its color, size, style, and alignment. It also includes the option to add a decorative line before or after the icon, with customizable color. This shortcode is an effective way to enhance the visual appeal of your posts.
Shortcode: [wpupg-icon]
Parameters
Here is a list of all possible wpupg-icon shortcode parameters and attributes:
icon– Defines the icon to be displayedicon_color– Sets the color of the iconstyle– Determines the style of the icon shortcodeicon_size– Adjusts the size of the iconalign– Aligns the icon to the left, right or centerdecoration– Adds decoration to the icon, like a lineline_color– Changes the color of the decoration line
Examples and Usage
Basic example – Displaying an icon with a specific color.
[shortcode icon="heart" icon_color="#FF0000" /]Advanced examples
Displaying an icon with a specific color and size. If the size is not 16px, the shortcode will adjust the font-size and height accordingly.
[shortcode icon="heart" icon_color="#FF0000" icon_size="32px" /]Displaying an icon with a specific color, size, and style. The shortcode allows for different styles to be chosen from. In this example, we’re using the ‘separate’ style. We’re also aligning the icon to the center and adding a line decoration with a specific color.
[shortcode icon="heart" icon_color="#FF0000" icon_size="32px" style="separate" align="center" decoration="line" line_color="#00FF00" /]PHP Function Code
In case you have difficulties debugging what causing issues with [wpupg-icon] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( $shortcode, array( get_called_class(), 'shortcode' ) );Shortcode PHP function:
function shortcode( $atts ) {
$atts = parent::get_attributes( $atts );
$icon = '';
if ( $atts['icon'] ) {
$icon = WPUPG_Icon::get( $atts['icon'], $atts['icon_color'] );
if ( $icon ) {
$icon = '<span class="wpupg-icon" aria-hidden="true">' . $icon . '</span> ';
}
}
if ( ! $icon ) {
return '';
}
// Output.
$classes = array(
'wpupg-icon-shortcode',
'wpupg-icon-shortcode-' . $atts['style'],
);
$before_icon = '';
$after_icon = '';
$style = '';
if ( '16px' !== $atts['icon_size'] ) {
$style .= 'font-size: ' . $atts['icon_size'] . ';';
$style .= 'height: ' . $atts['icon_size'] . ';';
}
if ( 'separate' === $atts['style'] ) {
$classes[] = 'wpupg-align-' . $atts['align'];
$classes[] = 'wpupg-icon-decoration-' . $atts['decoration'];
if ( 'line' === $atts['decoration'] ) {
if ( 'left' === $atts['align'] || 'center' === $atts['align'] ) {
$after_icon = '<div class="wpupg-decoration-line" style="border-color: ' . esc_attr( $atts['line_color'] ) . '"></div>';
}
if ( 'right' === $atts['align'] || 'center' === $atts['align'] ) {
$before_icon = '<div class="wpupg-decoration-line" style="border-color: ' . esc_attr( $atts['line_color'] ) . '"></div>';
}
}
}
$output = '<div class="' . esc_attr( implode( ' ', $classes ) ) . '" style="' . esc_attr( $style ) .'">' . $before_icon . $icon . $after_icon . '</div>';
return apply_filters( parent::get_hook(), $output, $atts );
}
Code file location:
wp-ultimate-post-grid/wp-ultimate-post-grid/includes/public/class-wpupg-template-shortcode.phpConclusion
Now that you’ve learned how to embed the WP Ultimate Post Grid Plugin shortcodes, 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.
Leave a Reply