WordPress

How to create custom shortcode in WordPress?

Shortcode in WordPress.

In WordPress we can create custom shortcodes and we can show its output anywhere on the site. To create a shortcode, we will use WordPress built in function add_shortcode(), this function required two parameters, first “shortcode” and others “callback function”; callback function is the function that we will create in theme’s functions.php file.

function theme_name_movies_shortcode($atts = [])
{
$a = shortcode_atts( array(
    'no_of_posts' => 5,
    'title' => "Movies List"
), $atts );
 
$the_query = new WP_Query( array(
    'post_type' => 'movies',
    'posts_per_page' => $a['no_of_posts'],
));
if ( $the_query->have_posts() ) : ?>
    <h2><?php echo $a['title']?></h2>
  <ul>
   <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
       <li><a href="<?php echo get_permalink($the_query->ID)?>"><?php the_title(); ?></a></li>
   <?php
   endwhile;
    ?>
  </ul>
   <?php wp_reset_postdata();
else :
    __('No Movies');
endif;
 
}
add_shortcode(“movies_list”, “theme_name_movies_shortcode”);

For reference, check following function, suppose there is custom post type named “movies” and you want to show movie list in sidebar.

Now you can use “movies_list” shortcode in your website as following ways.

// Use shortcode in a PHP file. 
echo do_shortcode( '[movies_list no_of_posts="5" title="Movies"]' ); 

Or you can add following statement in “text” widget.

[movies_list no_of_posts="5" title="Latest Films"]

That’s it. Hope this will help.

websourceblog

ReactJs, NodeJs, Amazon Web Services, Symfony, Laravel, CodeIgniter, Zend Framework, WordPress, Drupal, Magento, Angular

Recent Posts

How to Add an Addon Domain in GoDaddy with Web Hosting Deluxe

Add an Addon Domain in GoDaddy with Web Hosting Deluxe (Step-by-Step Guide). If you are…

1 month ago

Developing a RESTful API with Node.js, Express.js, MongoDB, and TypeScript

The ability to create reliable APIs is essential in today's web development environment. I'll show…

3 months ago

XML in REST API response and SOAP XML.

The difference between XML that we get in response to any REST API and XML…

9 months ago

How to install and configure Apache2 on WSL2?

I hope you already have WSL2 installed and enabled. So, setting up Apache2 on WSL2…

1 year ago

How to install NVM on Windows?

Install NVM on Windows Node Js is a JavaScript runtime environment used widely in today’s…

1 year ago

How to reset WSL 2 user’s password?

You can easily reset WSL 2 users' password, by just following the following steps. Open…

1 year ago