Ultimate Lists: How To Use Shortcodes Ultimate to Build Great Lists In WordPress

by | Mar 27, 2023 | Design

Shortcodes Ultimate is a popular WordPress plugin that provides a variety of shortcodes that allow users to add various functionality and design elements to their website. One of the most useful shortcodes in the plugin is the su_post shortcode, which allows users to display posts on their website with customizable options.

In this article, we will go over how to use the su_post shortcode, including its syntax, available attributes, and some examples of how to use it.

Syntax of su_post Shortcode

To display a post using the su_post shortcode, you would use the following syntax:

Ultimate Lists: How To Use Shortcodes Ultimate to Build Great Lists In WordPress

“post_ID” is the ID number of the post you want to display.

Attributes of su_post Shortcode

The su_post shortcode has a number of attributes that you can use to customize the way your posts are displayed. Here are the available attributes:

id

The “id” attribute is required for the su_post shortcode, as it specifies which post to display. To use this attribute, you need to replace “post_ID” in the basic syntax with the actual ID number of the post you want to display.

For example, if the ID number of the post you want to display is 123, you would use the following code:

Ultimate Lists: How To Use Shortcodes Ultimate to Build Great Lists In WordPress

post_type

By default, the su_post shortcode displays posts from the “post” post type. However, you can use the “post_type” attribute to display posts from other post types, such as “page” or a custom post type.

To use this attribute, simply add it to the shortcode and set its value to the post type you want to display. For example, to display a page with ID 456, you would use the following code:

Ultimate Lists: How To Use Shortcodes Ultimate to Build Great Lists In WordPress

class

The “class” attribute allows you to add custom CSS classes to the HTML elements generated by the shortcode. This can be useful for styling the output of the shortcode with CSS.

To use this attribute, simply add it to the shortcode and set its value to the CSS class(es) you want to use. For example, to add the class “my-custom-class” to the output of the shortcode, you would use the following code:

Ultimate Lists: How To Use Shortcodes Ultimate to Build Great Lists In WordPress

template

The “template” attribute allows you to use a custom template file to display the post. This can be useful if you want to display posts in a specific way that is not possible with the default output of the shortcode.

To use this attribute, simply add it to the shortcode and set its value to the file path of the template you want to use. For example, to use a template file called “news-loop.php” located in your theme’s directory, you would use the following code:

Ultimate Lists: How To Use Shortcodes Ultimate to Build Great Lists In WordPress
<ul class="su-posts su-posts-news-loop">
<?php
// Posts are found
if (isset($args['data'])) {
$posts = $args['data'];
}
if ( $posts->have_posts() ) {
$cat_singular = array(
'blog' => 'Blog',
'case-study' => 'Case Study',
'company-update' => 'Company Update', 
'new' => 'News',
'resources' => 'Resources',
'videos' => 'Videos'
);

$cat_css = array(
'blog' => 'blog',
'case-study' => 'case-study',
'company-update' => 'company-update', 
'new' => 'news',
'resources' => 'resource',
'videos' => 'video'
);

$cat_img = array(
'blog' => '/wp-content/themes/CustomTheme/assets/img/article-sm.png', n
'articles-whitepapers' => '/wp-content/themes/CustomTheme/assets/img/article-sm.png',
'case-studies' => '/wp-content/themes/CustomTheme/assets/img/case_study-sm.png',
'new' => '/wp-content/themes/CustomTheme/assets/img/article-sm.png',
'resources' => '/wp-content/themes/CustomTheme/assets/img/article-sm.png',
'videos' => '/wp-content/themes/CustomTheme/assets/img/video-sm.png'
); 


$roundout = 0;
while ( $posts->have_posts() ) {
$posts->the_post();
global $post;

$singular = 'N/A';
$css = 'na'; 
$roundout++;

$categories = get_the_category(); 
$tags = get_the_tags(); 

// print print_r($categories, TRUE);

// should be one per...
foreach ($categories as $cat) {
if (array_key_exists($cat->slug, $cat_singular)) {
$cat_slug = $cat->slug; 
$singular = $cat_singular[$cat_slug];
if (isset($cat_css[$cat_slug])) {
$css = $cat_css[$cat_slug];
} 
else {
$css = '';
}
if (isset($cat_img[$cat_slug])) {
$img = $cat_img[$cat_slug];
} 
else {
$img = '';
}

break;
}
}
// get all tags
$tag_list = "";
$comma = "";
if ($tags) {
foreach ($tags as $tag) {
$tag_list .= $comma.'<a href="' . esc_attr( get_tag_link( $tag->term_id ) ) . '">' . __( $tag->name ) . '</a>';
$comma = ", ";
}
} 
?>
<li id="su-post-<?php the_ID(); ?>" class="su-post <?php print $css; ?>-grid"><a href="<?php the_permalink(); ?>">
<?php if ($loop_thumb = get_the_post_thumbnail_url() ) { ?>
<div class="su-top" style="background-image: url('<?php echo $loop_thumb; ?>');">
<?php }
else {
?>
<div class="su-top" style="background-color: #888888;">
<?php } ?>
<img src="/wp-content/uploads/2023/01/blank.png" style="width: 100%; height: 25vh;" />
</div>
<div class="su-middle"> 
<h3 class="su-post-title rightarrow"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<em><?php echo $tag_list; ?></em>
<?php 
if ($excerpt = get_the_excerpt()) {
print "<p>".$excerpt."</p>"; 
print "<br/>";
}
?>
<?php print $runtime; ?>
</div> 
<div class="su-bottom">
<span class="date"><?php print get_the_date('F j, Y', get_the_ID()) ?></span>
<span class="link"><a class="rightarrow" href="<?php the_permalink(); ?>">Link</a></span>
</div>

</li>
<?php
}
}
// Posts not found
else {
?>
<li><?php _e( 'No Results', 'shortcodes-ultimate' ) ?></li>
<?php
}
?>
</ul>

The news-loop.php goes into the templates sub-directory of the site’s active theme. When the template loops through the su_posts result, the template will handle the output. In our example, the control of the output lets us add more formatting and supporting information.

The su_posts shortcode is a versatile tool that can be used in many different ways to improve the functionality and user experience of your website. Shortcodes Ultimate is a popular WordPress plugin that provides a variety of useful shortcodes for adding various elements to your website.

There are even more advanced ways to make use of the su_post shortcode. Want to know more?

WordPress Drama – The Latest Update

If you don't know what WordPress is or the recent discussions about it, let's talk. WordPress is a widely used platform that allows people to easily create and manage websites, and lately, there have been some important debates about its future direction that are...

Retiring Web Designers: Secure Your Legacy and Earn Recurring Income with Web321

After years of crafting beautiful websites and building strong client relationships, you’re considering retirement. It’s a significant decision that brings both excitement for the future and concern for the clients you’ve supported over the years. What will happen to them once you step away? How can you ensure they’re in good hands without abandoning them?

ECommerce Transaction Alternatives For WordPress.

When choosing an alternative to WooCommerce, consider specific needs, such as the type of products you’re selling, payment requirements, and desired features. Each of these plugins offers unique strengths that may better suit your ecommerce goals.

Setting Up A Custom Color Scheme For Divi

I have attached the file that I used my case.One Divi feature is”Color Scheme.” It presets for green, orange, pink, red and its default blue color schemes that influence the colors of borders, buttons and other accents on a baseline Divi theme. What happens if none of...

Webflow Price Increases

Webflow's recent price increase of approximately 44% for its CMS plans has sparked significant reactions among its user base, particularly among freelancers, agencies, and developers. Here are some key points and side effects based on user feedback: User Reactions and...

NXDOMAIN and DNS_PROBE_FINISHED_NXDOMAIN

An NXDOMAIN error, which stands for “Non-Existent Domain,” occurs when a domain name cannot be resolved by DNS servers. This error is common in various contexts, including WordPress sites.

9 Trends & Flexes In 2024 Web Design

The landscape of web design continues to evolve, embracing new technologies and design philosophies that enhance user experience, accessibility, and visual appeal.

Give Marketers A Perk: A Marketing Job WITHOUT Website Management

With all of the talk of workplace overload and the heavy job requirements, taking something off of a marketer’s plate provides two big wins: it give the marketer more breathing room to accomplish the important things in their job; and it offers the business owner some continuity on the public face of their brand– their website. Here’s our exhaustive list of ways a WordPress maintenance plan can help a marketer do their job better.

The Juggling Act of Priorities for a WordPress Developer

Being a WordPress developer is akin to performing a delicate juggling act. With numerous tasks requiring attention, from translating visual designs into functional websites to ensuring optimal performance and security, managing priorities becomes crucial. We put a lot of effort putting together an in-depth look at how a WordPress developer can effectively balance these responsibilities.

SEO In the World of Artificial Intelligence

Getting An Audience via Search Engine Optimized Content There's a new sheriff in town. Its name is "Search Generative Experience." For a while now, Google has been moving from being the world's biggest index of web pages do being the destination unto itself. Its...

Stripe vs Square vs Paypal

Here’s a quick rundown of these three major ecommerce providers and how they compare to each other. In my 25+ years of ecommerce rollouts, I have dealt with Stripe, Square and Paypal implementations as well as deployments with other providers like Authorize.net, Beanstream (WorldPay), Moneris and others. I really think the three in this article can satisfy most use cases.

Five Tips For AI In Content Creation

There’s a lot to consider about the practical aspects of creating content with AI but also the creative collaboration between human intelligence and artificial intelligence.

Understanding CSS Media Queries

CSS media queries are a powerful tool that allow you to apply different styles based on the characteristics of the device or viewport. They enable you to create responsive designs that adapt to different screen sizes, resolutions, and device types (desktop, tablet, mobile, etc.).