• Hi guys, I’m new and need help with something. I am making a website for a business that wants to display all their instruments (photos with their measurements) as shown below.

    https://ibb.co/gSf3eF

    Then they want that when someone searches for an instrument, for example “piano”, only this post shows up.
    My current search does this, the problem you can see below is that the result found is displayed very poorly. Title and measurements are displayed all in one line and there is no image.

    https://ibb.co/bLyjmv

    What I would like for it to show is the same thing when you scroll through all instruments, except only the matching ones would be displayed. I hope you guys can understand what I mean!

    I am on localhost (the client will give me access to his host and domain after our meeting). Theme is Sydney (free version). I have many plugins installed, the search one is called “Search & Filter”. I have also installed:
    – Contact form 7
    – GTranslate
    – Page Builder by SiteOrigin
    – Post Types Order
    – SMTP Mailer
    – Social Media and Share Icons (Ultimate Social Media)
    – Sydney Toolbox
    – Wordfence Security
    – WP Google Maps
    – WPGlobus
    – Yoast SEO

    The posts’ format is Image, no featured image, title ‘Guitar’ for example, and this is the code for it (piano is similar):

    <div id="pl-312" class="panel-layout">
    <div id="pg-312-0" class="panel-grid panel-has-style">
    <div class="panel-row-style panel-row-style-for-312-0" style="padding: 100px 0;" data-overlay="true">
    <div id="pgc-312-0-0" class="panel-grid-cell" data-weight="1">
    <div id="panel-312-0-0-0" class="widget_text so-panel widget widget_custom_html panel-first-child panel-last-child" data-index="0" data-style="{">
    <div class="widget_text panel-widget-style panel-widget-style-for-312-0-0-0" style="text-align: left;" data-headings-color="#443f3f" data-title-color="#443f3f">
    <h3 class="widget-title">Guitar</h3>
    <div><img class="alignnone size-full wp-image-313" src="http://localhost/wordpress/wp-content/uploads/2017/09/Electric-Guitar-Clip-Art-PNG.png" alt="" width="958" height="510" /></div>
    <div class="textwidget custom-html-widget">Width: 150cm<br />
    Height: 180cm</div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>

    I hope this is enough info and you can help me out! Thanks in advance! (Reposting because I really need to figure this out!!)

Viewing 5 replies - 1 through 5 (of 5 total)
  • If I’m understanding correctly, you just need to create a child theme and edit the search.php.

    Thread Starter bbabyboy

    (@bbabyboy)

    @unfinishedcode Thank you for your answer! I know how to make child themes but I don’t know the code to make the search functionality I want work. :/ Can you help me out please?

    Download a copy of search.php from the theme you are using, keep the name the same, stick it in your child theme’s directory, modify it to display the way you want.

    Thread Starter bbabyboy

    (@bbabyboy)

    @unfinishedcode okay thanks! So this is the code I should change I think and it should be already displaying the images from the posts as they are in the content too?

    content-search.php

    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    
    	<header class="entry-header">
    		<?php the_title( sprintf( '<h2 class="title-post entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
    
    		<?php if ( 'post' == get_post_type() && get_theme_mod('hide_meta_index') != 1 ) : ?>
    		<div class="meta-post">
    			<?php sydney_posted_on(); ?>
    		</div><!-- .entry-meta -->
    		<?php endif; ?>
    	</header><!-- .entry-header -->
    
    	<div class="entry-post">
    		<?php if ( (get_theme_mod('full_content_home') == 1 && is_home() ) || (get_theme_mod('full_content_archives') == 1 && is_archive() ) ) : ?>
    			<?php the_content(); ?>
    		<?php else : ?>
    			<?php the_excerpt(); ?>
    		<?php endif; ?>
    
    		<?php
    			wp_link_pages( array(
    				'before' => '<div class="page-links">' . __( 'Pages:', 'sydney' ),
    				'after'  => '</div>',
    			) );
    		?>
    	</div><!-- .entry-post -->
    
    	<footer class="entry-footer">
    		<?php sydney_entry_footer(); ?>
    	</footer><!-- .entry-footer -->
    </article><!-- #post-## -->

    search.php

    <div id="primary" class="content-area col-md-9">
    		<main id="main" class="post-wrap" role="main">
    
    		<?php if ( have_posts() ) : ?>
    
    			<header class="page-header">
    				<h3><?php printf( __( 'Search Results for: %s', 'sydney' ), '<span>' . get_search_query() . '</span>' ); ?></h31>
    			</header><!-- .page-header -->
    
    			<?php /* Start the Loop */ ?>
    			<?php while ( have_posts() ) : the_post(); ?>
    
    				<?php
    				/**
    				 * Run the loop for the search to output the results.
    				 * If you want to overload this in a child theme then include a file
    				 * called content-search.php and that will be used instead.
    				 */
    				get_template_part( 'content', 'search' );
    				?>
    
    			<?php endwhile; ?>
    
    			<?php the_posts_navigation(); ?>
    
    		<?php else : ?>
    
    			<?php get_template_part( 'content', 'none' ); ?>
    
    		<?php endif; ?>
    
    		</main><!-- #main -->
    	</div><!-- #primary -->
    • This reply was modified 8 years, 8 months ago by bbabyboy.

    just search-content.php. No it won’t display images by default. If you set a featured image on your posts, you have to call it separately like so

    <?php if (has_post_thumbnail()) { ?>
    	<?php the_post_thumbnail(); ?>
    <?php } ?>

    Here is a link to the documentation.

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

The topic ‘Search doesn’t display formatted posts with image’ is closed to new replies.