Shortcodes Generator

Overview

Use this tool to create custom code for Shortcodes with add_shortcode() function.

Usage

  • Fill in the user-friendly form.
  • Click the “Update Code” button.
  • Copy the code to your project.
  • Or save it as a snippet and share with the community.
Shortcode tag in the content.
e.g. [tag]
The function used in the code.
Self-closing shortcode: [tag]
Enclosing shortcode: [tag]content[/tag]
Enable attributes such as
[tag foo="123" bar="456"].
Use "shortcode_atts_{$shortcode}" filter, to allow shortcode attributes filtering.
Set custom filter name.
Attribute name. Lowercase.
Default value.
e.g. [tag attr_name="default_value"]
Attribute name. Lowercase.
Default value.
Attribute name. Lowercase.
Default value.
Custom code to generate the output.
Should only "return" the text, never produce the output directly.
  Save Snippet
// Add Shortcode
function news_posts() {

	
	// WP_Query arguments
	$args = array(
		'post_type'              => 'post',
		'posts_per_page'         => '-1',
	);
	?>
	<div class='post-stack js-masonry' data-masonry-options='{ "itemSelector": ".post", "columnWidth": ".sizer", "gutter":  ".gutter-sizer" }'>
	<?php 
	echo "<div class='sizer'></div>";
	echo "<div class='gutter-sizer'></div>";
	// The Query
	$query = new WP_Query( $args );
	
	// The Loop
	if ( $query->have_posts() ) {
		while ( $query->have_posts() ) {
			$query->the_post(); ?>
			<div class="post bg-primary">
	 		<?php if ( has_post_thumbnail()) : ?>
				<div class="feat-img">
	    		<?php the_post_thumbnail('large'); ?>
				</div>
	    <?php endif; ?>
	
	    <div class="post-content">
	        <span class="subtitle"><?php the_field('pretitle'); ?></span>
	        <h3 class="post-title"><?php the_title(); ?></h3>
	        <div class="text">
	        	<?php the_content(); ?>
	        </div>
					<?php if( get_field('external_link_label') ): ?>
	        <div class="link">
	            <a class="btn btn-outline-white btn-outline-light" href="<?php the_field('external_link'); ?>"><?php the_field('external_link_label'); ?></a>
	        </div>
	        <?php endif; ?>
	    </div>
		</div>
	
		<?php }
	}
	// Restore original Post Data
	wp_reset_postdata();
	echo "</div>";
	

}
add_shortcode( 'newsposts', 'news_posts' );