How to create custom search page

custom page template

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.

Read more here:: How to create custom search page

Leave a Reply

Your email address will not be published. Required fields are marked *