How to Display a List of Categories on a Page in WordPress

function mc_categories_list()
{
	$args = array( 'hide_empty' => '0', 'exclude'=>'1');
	$categories = get_categories($args);
	if($categories){
		
	
		?>

<style>
	
	#myInput {
  /*background-image: url('/css/searchicon.png'); 
		
		*/
		/* Add a search icon to input */
  background-position: 10px 12px; /* Position the search icon */
  background-repeat: no-repeat; /* Do not repeat the icon image */
  width: 100%; /* Full-width */
  font-size: 16px; /* Increase font-size */
  padding: 12px 20px 12px 40px; /* Add some padding */
  border: 1px solid #ddd; /* Add a grey border */
  margin-bottom: 12px; /* Add some space below the input */
}

#myUL {
  /* Remove default list styling */
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li a {
  border: 1px solid #ddd; /* Add a border to all links */
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6; /* Grey background color */
  padding: 12px; /* Add some padding */
  text-decoration: none; /* Remove default text underline */
  font-size: 18px; /* Increase the font-size */
  color: black; /* Add a black text color */
  display: block; /* Make it into a block element to fill the whole list */
}

#myUL li a:hover:not(.header) {
  background-color: #eee; /* Add a hover effect to all links, except for headers */
}
	
</style>

<script>
function myFunction() {
  // Declare variables
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById('myInput');
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName('li');

  // Loop through all list items, and hide those who don't match the search query
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}
</script>
	
	<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
	<ul id="myUL">
	
	
	
	<?php
		
		
		foreach($categories as $key => $category) {
			
			
			
			// echo '<li>';
			echo '<div class="grid-33 tablet-grid-33 mobile-grid-100">';
			
			$link = get_term_link($category);
			
			$size = "thumbnail";
			$image = get_field('category_speaker_image', 'category_'.$category->term_id);  
			
			// Image variables.
			$url = $image['url'];
			$title = $image['title'];
			$alt = $image['alt'];
			$caption = $image['caption'];

    		// Thumbnail size attributes.
			$size = 'thumbnail';
			$thumb = $image['sizes'][ $size ];
			$width = $image['sizes'][ $size . '-width' ];
			$height = $image['sizes'][ $size . '-height' ];

			
			?>
				
					<a href="<?php echo esc_attr($link); ?>" title="<?php echo esc_attr($title); ?>">
				    <img src="<?php echo esc_url($thumb); ?>" loading="lazy" alt="<?php echo esc_attr($alt); ?>" />
    			    </a>				
		
				<?php							
			
			
			echo '<p><a href="'.$link.'">' . $category->name . '</a></p>';
			
			// echo '</li>';
			
			echo '</div>';
		} 
		?>
		
		</ul>
			
		<?php
	
		
	}  

}
add_shortcode('mc-speakers', 'mc_categories_list');