WordPress Experts

Tag: WordPress Shortcode

  • How to display product price using shortcode

    Here is the code snippet that you can use to create a shortcode and use it in any of your posts or pages to display the price of a specific product. You just have to specify the woocommerce product ID of that product like the given example. [woo_product_price id=20]

    function wptips_woo_price_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'id' => null,
    ), $atts, 'woocommerce_price' );

    $html = '';

    if( intval( $atts['id'] ) > 0 && function_exists( 'wc_get_product' ) ){
         $_product = wc_get_product( $atts['id'] );
         $html = $_product->get_price();
    }
    return $html;
}
add_shortcode( 'woo_product_price', 'wptips_woo_price_shortcode' );

  • How to execute shortcode in any string or custom field in WordPress

    You can use WordPress filter the_content and apply it to any string or custom field data to display its HTML content as well as render or execute any shortcode in it.

    Here is a code snippet, where a string with some HTML content and a shortcode in it.

    // $data is defined as a string with HTML code as well as WordPress shortcode in it
$data = '<div class="custom-html-code"> <h2> Here is a list of Recent Posts</h2> [recent-posts posts="5"]</div>';
echo apply_filters( 'the_content', $data);

    The above code will not just display the HTML code, But also when it encounters the [recent-posts] shortcode, it will execute it. It will also apply any other filter that has been applied to the_content filter.

    Now let’s say, you have a custom Textarea field that you created using ACF ( advanced custom fields plugin) in your custom post, and it has HTML data as well as shortcodes. In that case, you can use code as shown in the example below.

    // CODE FOR ACF CUSTOM FIELD
echo apply_filters( 'the_content', get_field("field_name_here") ); 

// CODE FOR Other custom field using post meta data function
echo apply_filters( 'the_content', get_post_meta($post->ID,"field_name_here",true) );

  • How to create a short code to display recent posts

    You may want to display most recent posts of your website in your WordPress website post or page. You can achieve that creating a custom WordPress shortcode. Let me first explain what is a WordPress shortcode and how it works.

    What is a WordPress shortcode?

    WordPress Shortcode is a feature defined in WordPress core that allows you to define a code programmatically for any dynamic content. You can then use the code inside WordPress post editor, page editor, custom post editor, or WordPress widget. You have to use the defined code wherever you want to display the dynamic content, and you can see the new dynamic content in place of the code in front-end. WordPress shortcode is one of the most important features in WordPress that makes it very easy to use.

    add_shortcode function

    To define a custom WordPress shortcode, you have to use a WordPress core function called add_shortcode. It accepts two parameters, the tag or code name in string format and a callback function name. The call back function should have a definition of the dynamic content that you want to return in place of the shortcode. Remember, the call back function should always return the dynamic content that you want to display.

    Here is an example of creating a Hello World shortcode.

    <?php
add_shortcode( 'hello_world', 'wptips_helloworld' );
function wptips_helloworld( $atts ) {
    return "Hello World";
}
?>

    Once you have defined the above shortcode, you can call the shortcode by using the code [hello_world] . It will show as “Hello World” , in frontend.

    Now, Lets create a custom shortcode to display 5 recent posts.

    <?php
function wptips_recent_posts_shortcode($atts){
$query = new WP_Query(array( 'orderby' => 'date', 'posts_per_page' => '5') );
$list = '<ul class="recent-posts">';
  while($query->have_posts()) : $query->the_post();
		$list .= '<li>' . get_the_date() . '<a href="' . get_permalink() . '">' . get_the_title() . '</a>' . '<br />' . get_the_excerpt() . '</li>';
  endwhile;
wp_reset_query();
$list .= '</ul>';
  return $list;
}
add_shortcode('recent-posts', 'wptips_recent_posts_shortcode');
?>