How to create custom search page

Question

So I'm trying to make my search.php file loop through three custom post types when doing a search.

I currently have three cpts , post, anime, peliculas and I'm currently using a function that will look for the title only so when somebody types something into the search input, the template should display all the posts in the said cpts that match the keyword and if there's not post....let's say in anime, then it should display a message of post not found(in that cpt).

To make it more clear and easy to understand, this is what I'm trying to achive:

This is the first time in which I do something like this, so I'm inexperienced but I still tried to modified it by creating some custom query's in the search.php file but it did not work.

Here is my template that I'm using:

<?php get_header(); ?>
<div class="container">
    <?php echo get_breadcrumb(); ?>
    <div class="row">
        <div class="col-md-12">
            <h1 class="page-header"><?php wp_title(''); ?></h1>
            <!-- Posts  -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h1 class="panel-title"><i class="fa fa-eye" aria-hidden="true"></i> Posts</h1>
                </div>
                <div class="panel-body scrolling-wrapper" id="video_player">
                    <?php if(have_posts()) : while(have_posts()) : the_post(); ?>
                    <div class="col-md-6 resultados_search text-center card">
                        <a href="<?php the_permalink(); ?>">
                            <img src="<?php the_post_thumbnail_url() ?>" alt="" style="width: 100%;min-height: 300px;height: 300px;">
                        </a>
                        <figcaption>
                            <span class="pull-left"><?php the_title(); ?></span>
                        </figcaption>
                    </div>
                <?php endwhile; ?>
                <?php else : ?>
                    <div class="alert alert-danger" id="alerta_error">Ningun post con la keyword</div>
                <?php endif; ?>
                <?php wp_reset_query(); ?>
                </div>
            </div>
            <!-- Animes -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h1 class="panel-title"><i class="fa fa-eye" aria-hidden="true"></i> Animes</h1>
                </div>
                <div class="panel-body scrolling-wrapper" id="video_player">
                    <?php
                        $animes = new WP_Query(array(
                            'post_type' => 'anime',
                            'post_status'   => 'publish',
                            'post_parent' => 0,
                            'public'    => true,
                        ));
                    ?>
                    <?php if($animes->have_posts()) : while($animes->have_posts()) : $animes->the_post(); ?>
                    <div class="col-md-2 resultados_search text-center card">
                        <a href="<?php the_permalink(); ?>">
                            <img src="<?php the_post_thumbnail_url() ?>" alt="" style="width: 100%;min-height: 300px;height: 300px;">
                        </a>
                        <figcaption>
                            <span class="pull-left"><?php the_title(); ?></span>
                        </figcaption>
                    </div>
                <?php endwhile; ?>
                <?php else : ?>
                    <div class="alert alert-danger" id="alerta_error">Ningun post con la keyword</div>
                <?php endif; ?>
                <?php wp_reset_query(); ?>
                </div>
            </div>
            <!-- Peliculas -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h1 class="panel-title"><i class="fa fa-eye" aria-hidden="true"></i> Peliculas</h1>
                </div>
                <div class="panel-body scrolling-wrapper" id="video_player">
                    <?php
                        $peliculas = new WP_Query(array(
                            'post_type' => 'peliculas',
                            'post_status'   => 'publish',
                            'post_parent' => 0,
                            'public'    => true,
                        ));
                    ?>
                    <?php if($peliculas->have_posts()) : while($peliculas->have_posts()) : $peliculas->the_post(); ?>
                    <div class="col-md-2 resultados_search text-center card">
                        <a href="<?php the_permalink(); ?>">
                            <img src="<?php the_post_thumbnail_url() ?>" alt="" style="width: 100%;min-height: 300px;height: 300px;">
                        </a>
                        <figcaption>
                            <span class="pull-left"><?php the_title(); ?></span>
                        </figcaption>
                    </div>
                <?php endwhile; ?>
                <?php else : ?>
                    <div class="alert alert-danger" id="alerta_error">Ningun post con la keyword</div>
                <?php endif; ?>
                <?php wp_reset_query(); ?>
                </div>
            </div>
        </div>
    </div>
</div>
<?php get_footer(); ?>

Thanks in advance.

NOTE: If possible I just would like to use a single file(search.php) without having to create custom-page template....though if it is really necessary then I will do.

Answer 1

you dont need extra queries, all you would need is to sort the search results by post type. you can find a way to do so here. and then, inside your search.php template, you would need to check for the post-types and act accodringly..

while (have_posts()) : the_post();
    $post_type = get_post_field( 'post_type', get_the_ID() );
    if ( $post_type === 'anime' ) :
        //load a template or place your code here
        get_template_part( 'template-parts/content', 'my-super-anime-template' );
        //this example would load /your-theme/template-parts/content-my-super-anime-template.php
    else :
        //or pass a variable
        get_template_part( 'template-parts/content', $post_type );
        //this example would load /your-theme/template-parts/content-post.php
    endif;
endwhile;