Customize Posts Shortcode by CSS
| CSS example 1 | CSS example 2 | ||||
|
|
|
Customize Posts Shortcode by Template
By default, Shortcodes Ultimate looks for custom templates here: /wp-content/themes/your-theme/su-posts-templates/
So you should create a subfolder of your current them called /su-posts-templates/ and then you can create a new custom template file.
Create a custom Template
Create a new php with whatever filename you want. I’ll use my-custom-loop.php
Now you can add the PHP loop that the shortcode will use to generate the HTML on the front-end.
For example, lets say I wanted to create a custom loop to display a custom field from Advanced Custom Fields called review_rating. It might look like this.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?php if ( $posts->have_posts() ) : ?> <div class="su-posts my-custom-loop"> <?php while ( $posts->have_posts() ) : ?> // check for posts <?php $posts->the_post(); ?> // display each post in the loop <a href="<?php the_permalink(); ?>"> <div class="post-image"> <?php the_post_thumbnail( 'medium_large' ); ?> </div> </a> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> <div class="review-rating-wrap"> <span class="review-rating"><?php the_field('review_rating'); ?></span> </div> <?php endwhile; ?> </div> <?php else : ?> <p>Posts not found!</p> <?php endif; ?> |
Now save your new template in the /su-posts-templates/ folder of your theme.
Next up, write the custom CSS that will style your template on the front end.
Inserting Custom Templates
When inserting the su_posts shortcode, you can specify a template right in the insertion dialogue.
Make sure to include the path to the folder your loop templates are in (relative to your theme).
You can also add the template directly to the shortcode. Like this:
|
1 |
[su_posts template="su-posts-templates/my-custom-loop.php"] |
