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

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…

1 month ago

XML in REST API response and SOAP XML.

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

6 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…

10 months ago

How to install NVM on Windows?

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

12 months 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

DreamHost Web Hosting

DreamHost a web hosting company, founded in 1997. It is offering sort of hosting services,…

2 years ago