Create shortcode use anywhere in WordPress

WordPress short-codes act as shortcuts that allow you to embed elements into a post or page quickly. These usually consist of a single line of code within square brackets, such as [yourshortcode], for example. This code will display a predetermined feature on the front end of your site.

Here is the shortcode.

<?php 

// testimonials slider

add_shortcode( 'list-posts-testimonial', 'testimonial_listing_shortcode' );

function testimonial_listing_shortcode( $atts ) {

  ob_start();

   $query = new WP_Query( array(

        'post_type' => 'testimonial',

        'posts_per_page' => -1,

        'order' => 'ASC',

        'orderby' => 'date',

        'menu_order'=>'ASC',

    ) );

if ( $query->have_posts() ) { 

?>

<div class="testimonial-slider-sec">

    <div class="owl-carousel owl-theme testimonial-slider">

        <?php while ( $query->have_posts() ) : $query->the_post(); ?>

        <div class="testimonial-items">

            <div class="testimonial-box">

                <div class="testimonial-img">

                 <img src="<?php echo get_the_post_thumbnail_url();  ?>" alt="testimonial-image">

            </div>

                <div class="testimonial-content"> 

                <h4><?php the_title(); ?></h4>

                    <?php the_field('designation'); ?>

                </div>

            </div>

        </div>

        <?php endwhile; ?>

        <?php wp_reset_query(); ?>

    </div>

    </div>

<?php 

    $myvariable = ob_get_clean();

        return $myvariable;

    } 

}


This shortcode can be used any where in WordPress pages.

[list-posts-testimonial]

It can be modified as per requirement.

Free Download My Bakkery Single page website Responsive HTML5 Template

My Bakery is a Responsive HTML theme for Bakery websites.  which helps you to build your own site. My Bakery perfectly fits the trendy cakery & bakery website with a strong, sweet, and elegant style. It embodies a sensible design with a product-centered layout to captivate every customer’s heart. 

Key Features

• Bootstrap 
• Developer-friendly  & Clean HTML5 and CSS3 code
• Google Fonts Support
• Single page theme
• Fully Customization
• Unique Bakery
• Responsive layout
• 
  

Download free HTML: My Bakery

Created by: Web Code Addict

How to include files in Wordpress function file?

 To include any file in the function file of WordPress just creates a file with the name

 i.e custom.php
                   
                              custom.php

<?php


====================Your code===============

?>


Go to function.php

Use anyone.

1) include ()

 Include function includes the specified file and it will throw PHP warning if the file isn't found.

include(dirname( ABSPATH ) .'/admin-page.php');

this will return /var/www/vhosts/foo.bar/httpdocs/includes/baz.php

2) include_once() 
include_once() works as inlude() and it will not include file
 again if already included.
include_once( get_stylesheet_directory() .'/admin-page.php');

3)  require()
require() works same as include() but PHP fatal error will be trown 
if the file is not exists
require(dirname( ABSPATH ) .'/admin-page.php');
4) require_once()
require_once() performs as require() but fill will be not included 
second time.

require_once( get_stylesheet_directory() .'/admin-page.php');

For Parent Theme: get_template_directory()
or get_template_directory_uri()

For Child Theme: get_stylesheet_directory()
or get_stylesheet_directory_uri()

Synchronization of two Owl Carousel for same post type

 Make sure to add OWL CAROUSEL css and js file

<div class="work-slider">
      <?php $query = new WP_Query( array(
        'post_type' => 'your post type name',
        'posts_per_page' => -1,
        'order' => 'ASC',
        'orderby' => 'date',
        'menu_order'=>'ASC',
    ) );

   if ( $query->have_posts() ) { ?>
<div id="work-text" class="owl-carousel owl-theme">
    <?php while ( $query->have_posts() ) : $query->the_post(); ?>
  <div class="item">
    <h4><?php the_title(); ?></h4> 
    <?php the_content();?>
    </div>
    <?php endwhile; ?>
        <?php wp_reset_query(); ?>
  
</div>
<?php } ?>

<?php $query = new WP_Query( array(
        'post_type' => 'your post type name',
        'posts_per_page' => -1,
        'order' => 'ASC',
        'orderby' => 'date',
        'menu_order'=>'ASC',
    ) );

   if ( $query->have_posts() ) { ?>
<div id="work-videos" class="owl-carousel owl-theme">
     <?php while ( $query->have_posts() ) : $query->the_post(); ?>
    <div class="item">
        <div class="work-video">
            <?php the_post_thumbnail(); ?>
            <video width="320" height="240" controls="false" 

autoplay="autoplay" loop autoplay muted> 
                <source src="video.mp4" type="video/mp4">
                <source src="movie.ogg" type="video/ogg">
            </video>
        </div>
    </div>
  <?php endwhile; ?>
        <?php wp_reset_query(); ?>
  
</div>
<?php                          } ?>
</div>

<script>
jQuery(document).ready(function() {

  var slide1 = jQuery("#work-text");
  var slide2 = jQuery("#work-videos");
  var slideSecondary = true;

  slide1.owlCarousel({
    items : 1,
    slideSpeed : 2000,
    nav: false,
    autoplay: false,
    dots: false,
    loop: true,
    responsiveRefreshRate : 200,

  }).on('changed.owl.carousel', slidePosition);

  slide2
    .on('initialized.owl.carousel', function () {
      slide2.find(".owl-item").eq(0).addClass("current");
    })
    .owlCarousel({
    items : 1,
    dots: false,
    nav: false,
    loop: true,
    stagePadding: 50,
    smartSpeed: 200,
    slideSpeed : 500,
    slideBy: slidesPerPage, 
    responsiveRefreshRate : 100
  }).on('changed.owl.carousel', slidePosition2);

  function slidePosition(el) {
   var count = el.item.count-1;
    var current = Math.round(el.item.index - (el.item.count/2) - .5);
    
    if(current < 0) {
      current = count;
    }
    if(current > count) {
      current = 0;
    }
    
   slide2
      .find(".owl-item")
      .removeClass("current")
      .eq(current)
      .addClass("current");
    var onscreen = slide2.find('.owl-item.active').length - 1;
    var start = slide2.find('.owl-item.active').first().index();
    var end = slide2.find('.owl-item.active').last().index();
    
    if (current > end) {
      slide2.data('owl.carousel').to(current, 100, true);
    }
    if (current < start) {
      slide2.data('owl.carousel').to(current - onscreen, 100, true);
    }
  }
  
  function slidePosition2(el) {
    if(slideSecondary) {
      var number = el.item.index;
      slide1.data('owl.carousel').to(number, 100, true);
    }
  }
  
  slide2.on("click", ".owl-item", function(e){
    e.preventDefault();
    var number = jQuery(this).index();
    slide1.data('owl.carousel').to(number, 300, true);
  });
});

</script>