Wordpress bootstrap slider/carousel without extra plugin 30.10.18

1.
create posts with featured images and categorize them into groups.
the category name will be used for you shortnames.

to show the feature pictures directly in your post list you can add the following code to your functions.php theme file:

add_filter('manage_posts_columns', 'posts_columns', 5);
add_action('manage_posts_custom_column', 'posts_custom_columns', 5, 2);

add_filter('manage_post-type_posts_columns', 'posts_columns', 5);
add_action('manage_post-type_posts_custom_column', 'posts_custom_columns', 5, 2);
function posts_columns($defaults){
    $defaults['riv_post_thumbs'] = __('Thumbs');
    return $defaults;
}
function posts_custom_columns($column_name, $id){
    if($column_name === 'riv_post_thumbs'){
		if( has_post_thumbnail() ) {
	    	echo the_post_thumbnail('medium');
	 	} else {
	    	_e('No Thumbnail For Post');
        }
        
	echo "
	
<style> .column-riv_post_thumbs img{ max-height: 300px; max-width: 250px;     } </style>
"; } }

2.
create a file inside your theme folder inc/slider.php 
with the content:

require get_template_directory() . '/inc/slider.php';
function render_slider($s)
{
  $html = [];
  if(count($s) > 0):
  $html[] = '<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">';
  $html[] = '<ol class="carousel-indicators">';

for($i=0;$i<count($s);$i++):
    $a = ($i == 0) ? 'class="active"' : '';
    $html[] = '<li data-target="#myCarousel" data-slide-to="'.$i.'" '. $a . '></li>';
  endfor;
  $html[] = '</ol>';
  $html[] = '<div class="carousel-inner">';

for($i=0;$i<count($s);$i++):
      $a = ($i == 0) ? 'active' : '';
      $html[] = '<div class="carousel-item '.$a .'">';
      $html[] = '<img class="first-slide" src="'. $s[$i]['img'] . '" alt="'. $s[$i]['title'].'">';
      $html[] = '<div class="container">';
      $html[] = '<div class="carousel-caption text-left">';
      $html[] = '</div>';
      $html[] = '</div>';
      $html[] = '</div>';
    endfor;

$html[] = '</div>';
  $html[] = '</div>';
  endif;
  return join("\n",$html);

}

3.
add this function to your functions.php theme file:

function slider_code($atts = [], $content = null, $tag = '')
{
  $a = array_change_key_case((array)$atts, CASE_LOWER);
  $slides = [];
  $args = ['category_name' => $a['category'], 'nopaging'=>true, 'posts_per_page'=>5,'orderby'=>'title','order'=>'asc'];
  $slider_query = new WP_Query($args);
  if($slider_query->have_posts()):
    while($slider_query->have_posts())
    {
      $slider_query->the_post();
      if(has_post_thumbnail()):
        $a2 = [];
        $thumb_id = get_post_thumbnail_id();
        $thumb_url_array = wp_get_attachment_image_src($thumb_id, 'full', true);
        $thumb_url = $thumb_url_array[0];
        $a2['title'] = get_the_title();
	$a2['excerpt'] = get_the_excerpt();
        $a2['img'] = $thumb_url;
        $slides[] = $a2;
      endif;
      }
  endif;
wp_reset_postdata();
return render_slider($slides);
}
add_shortcode('slider_code', 'slider_code');

https://www.lyrathemes.com/bootstrap-carousel-tutorial/

Anonymous

Wordpress bootstrap slider/carousel without extra plugin 30.10.18

Information Epoch 1751349028