Custom no results search page

  • Jon

    (@duffydjcoat)


    9 years, 1 month ago

    Hi there and many thanks in advance for any help with my issue here:

    In summary:

    My theme is loading the “content-none.php” to display the search results and the search with “no results“. The 404 page was also being served from this page, but I have since removed it from there and customized the 404 the template. I’ve put the html divs in there and it’s working fine, in full width, as in the other theme pages. Just to be clear, the pages are all full width in the theme, except the Blog page which has the side bar.

    The content-none.php page has the following:

    */
?>

<section class="no-results not-found">
    <header class="page-header">
        <h3 class="page-title"><?php _e( '' ); ?></h3>
    </header><!-- .page-header -->

    <div class="page-content">
        <?php if ( is_home() && current_user_can( 'publish_posts' ) ) : ?>

            <p><?php printf( __( 'Ready to publish your first post? <a href="https://www.mywebsite">Get started here</a>.', 'wpzoom' ), esc_url( admin_url( 'post-new.php' ) ) ); ?></p>

        <?php elseif ( is_search() ) : ?>

            <h3 class="search-title">
<?php echo $wp_query->found_posts; ?> <?php _e( 'Search results found for', 'locale' ); ?>: "<?php the_search_query(); ?>"
</h3>
            <?php get_search_form(); ?>

        <?php else : ?>

            <?php get_search_form(); ?>

        <?php endif; ?>

    The problem:

    When people search for a term in my website and they get “no results” however the page is inheriting the styling and the h1 from the “blog” page and I haven’t found a way to override this. I’ve tried calling in the divs and CSS that work in the 404 page, but it doesn’t go full width.

    Please not that I want the “search results” to display the results as in the blog page, meaning that IS NOT full width. I only want it to be full width when the “search” query doesn’t find any matching term.

    I’ve created a page named “no-results.php” and all the HTML that I need is there, but how can I tell the system not to load the blog styling and accept the full width?

    This is the code from the no-results.php that I’ve created:

    <?php
/*
Template Name: Search
*/
?>

<?php get_header(); ?>

 <main id="main" class="site-main" role="main">

    <?php get_search_form(); ?>

<?php if ( option::is_on( 'featured_posts_show' ) ) : ?>

<?php endif; ?>

<div class="widgetized-section">
 <h2 class="section-title"></h2>
    <?php if ( ! function_exists( 'dynamic_sidebar' ) || ! dynamic_sidebar( 'home-full' ) ) : ?>

    <?php endif; ?>
</div>

    </main><!-- #main -->

<?php get_footer(); ?>

    What’s on the CSS that I’m not being able to override:

    .recent-posts {
    max-width: 970px;
    margin: 0 auto;
    padding: 0 10px;
}

    When I inspect the element in Chrome I can see that is wrapped in a section named: <section class="recent-posts">. This affects the search results and no results pages as wells as the blog. So, I can I override just one?

    Many thanks in advance for your help.

Viewing 3 replies - 1 through 3 (of 3 total)

  • what theme are you working with?

    does the theme output any CSS classes via body_class()?

    if yes, you should have a .search and .search-no-results CSS to base your styling on.

    it might help if you can post a link to a ‘no-results’ search page.

    Thread Starter Jon

    (@duffydjcoat)

    Hi Michael,

    Thanks for your answer.

    There’s no search and search no results in the CSS. Only search-form .search-submitbut this is for the the search form only, no the search page.

    The theme is this one:

    https://demo.wpzoom.com/inspiro/

    And when you get a search with no results:

    https://demo.wpzoom.com/inspiro/?s=dsvcvbr544

    As you can see in the example above it loads the blog page and it’s styling, no full width.

    No sure about the first question, but I did find that in the header code:

    <!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

    <?php wp_head(); ?>
</head>
<strong><body <?php body_class(); ?>></strong>

<?php get_sidebar(); ?>

<div class="site">

<header class="site-header">
    <nav class="navbar <?php if (inspiro_maybeWithCover()) echo 'page-with-cover'; ?> " role="navigation">
        <div class="wrap">
             <div class="navbar-header">

                <div class="navbar-brand">
                    <?php if ( ! option::get( 'misc_logo_path' ) ) echo '<h1>'; ?>

                    <a href="<?php echo home_url(); ?>" title="<?php bloginfo( 'description' ); ?>">
                        <?php if ( ! option::get( 'misc_logo_path' ) ) { bloginfo( 'name' ); } else { ?>
                            <img src="<?php echo ui::logo(); ?>" alt="<?php bloginfo( 'name' ); ?>" />
                        <?php } ?>
                    </a>

                    <?php if ( ! option::get( 'misc_logo_path' ) ) echo '</h1>'; ?>
                </div><!-- .navbar-brand -->
            </div>

            <?php if ( has_nav_menu( 'primary' ) || is_active_sidebar( 'sidebar' ) ) : ?>

                <button type="button" class="navbar-toggle">
                    <span class="sr-only"><?php _e( 'Toggle sidebar & navigation', 'wpzoom' ); ?></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <div class="navbar-collapse collapse">

                    <?php
                    wp_nav_menu( array(
                        'menu_class'     => 'nav navbar-nav dropdown sf-menu',
                        'theme_location' => 'primary',
                        'items_wrap'     => '<ul id="%1$s" class="%2$s">%3$s' . diamond_wc_menu_cartitem() . '</ul>',
                        'container'      => false
                    ) );
                    ?>

                </div><!-- .navbar-collapse -->

            <?php endif; ?>

        </div>
    </nav><!-- .navbar -->
</header><!-- .site-header -->

    not in the CSS files, but in the html output in the browser, in the <body> tag;

    see from the ‘no-results’ search page:

    <body class="search search-no-results inspiro--with-page-nav">

    maybe the guys from wpzoom can help you with your idea?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Custom no results search page’ is closed to new replies.