treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Wordpress search output.

  • how can i customize the way the search return looks?

    http://attilahajzer.host-ed.net/?s=s

    searching "s" because i know there would be multiple results.

    my sample post shows up, as well as my pages, how can i encorperate the sidebar? am i going to need a page template?
  • this might come as a weird question. but how do i select the posts individually? because in reality they are all h2's spans, and p's group together? how would i give the background of just the individual post a background-color, or padding or something?I just want them to be able to be customizable
  • Go into the loop which produces those posts and wrap them in this:

    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

    If you give each post a category it'll give it a class like 'category-resume' which you can then style accordingly.
  • I didn't see your earlier questions. Search results are displayed using the search.php file. Within that you can add get_sidebar to display it.
  • that would be loop. php? or search.php?
  • Depends on how your set up, but usually the search results page template will be search.php and the loop for outputting the posts will be in loop.php. The appropriate loop from loop.php will be called from within search.php.
  • okay. so where in my loop.php would i put the code. this is what my loop php is.

    <?php
    /**
    * The loop that displays posts.
    *
    * The loop displays the posts and the post content. See
    * http://codex.wordpress.org/The_Loop to understand it and
    * http://codex.wordpress.org/Template_Tags to understand
    * the tags used in it.
    *
    * This can be overridden in child themes with loop.php or
    * loop-template.php, where 'template' is the loop context
    * requested by a template. For example, loop-index.php would
    * be used if it exists and we ask for the loop with:
    * <code>get_template_part( 'loop', 'index' );

    *
    * @package WordPress
    * @subpackage Starkers
    * @since Starkers 3.0
    */
    ?>

    <?php<br /> /* Start the Loop.
    *
    * In Twenty Ten we use the same loop in multiple contexts.
    * It is broken into three main parts: when we're displaying
    * posts that are in the gallery category, when we're displaying
    * posts in the asides category, and finally all other posts.
    *
    * Additionally, we sometimes check for whether we are on an
    * archive page, a search page, etc., allowing for small differences
    * in the loop on each template without actually duplicating
    * the rest of the loop that is shared.
    *
    * Without further ado, the loop:
    */ ?>
    <?php while ( have_posts() ) : the_post(); ?>

    <?php /* How to display posts in the Gallery category. */ ?>

    <?php if ( in_category( _x('gallery', 'gallery category slug', 'twentyten') ) ) : ?>
    " title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?>
    <?php twentyten_posted_on(); ?>

    <?php if ( post_password_required() ) : ?>
    <?php the_content(); ?>
    <?php else : ?>
    <?php<br /> $images = get_children( array( 'post_parent' => $post->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order', 'order' => 'ASC', 'numberposts' => 999 ) );
    $total_images = count( $images );
    $image = array_shift( $images );
    $image_img_tag = wp_get_attachment_image( $image->ID, 'thumbnail' );
    ?>
    "><?php echo $image_img_tag; ?>

    <?php printf( __( 'This gallery contains <a %1$s>%2$s photos.', 'twentyten' ),
    'href="' . get_permalink() . '" title="' . sprintf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ) . '" rel="bookmark"',
    $total_images
    ); ?>

    <?php the_excerpt(); ?>
    <?php endif; ?>

    " title="<?php esc_attr_e( 'View posts in the Gallery category', 'twentyten' ); ?>"><?php _e( 'More Galleries', 'twentyten' ); ?>
    |
    <?php comments_popup_link( __( 'Leave a comment', 'twentyten' ), __( '1 Comment', 'twentyten' ), __( '% Comments', 'twentyten' ) ); ?>
    <?php edit_post_link( __( 'Edit', 'twentyten' ), '|', '' ); ?>

    <?php /* How to display posts in the asides category */ ?>

    <?php elseif ( in_category( _x('asides', 'asides category slug', 'twentyten') ) ) : ?>

    <?php if ( is_archive() || is_search() ) : // Display excerpts for archives and search. ?>
    <?php the_excerpt(); ?>
    <?php else : ?>
    <?php the_content( __( 'Continue reading →', 'twentyten' ) ); ?>
    <?php endif; ?>

    <?php twentyten_posted_on(); ?>
    |
    <?php comments_popup_link( __( 'Leave a comment', 'twentyten' ), __( '1 Comment', 'twentyten' ), __( '% Comments', 'twentyten' ) ); ?>
    <?php edit_post_link( __( 'Edit', 'twentyten' ), '| ', '' ); ?>

    <?php /* How to display all other posts. */ ?>

    <?php else : ?>

    " title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?>
    <?php twentyten_posted_on(); ?>

    <?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
    <?php the_excerpt(); ?>
    <?php else : ?>
    <?php the_content( __( 'Continue reading →', 'twentyten' ) ); ?>
    <?php wp_link_pages( array( 'before' => '' . __( 'Pages:', 'twentyten' ), 'after' => '' ) ); ?>
    <?php endif; ?>

    <?php<br /> $tags_list = get_the_tag_list( '', ', ' );
    if ( $tags_list ):
    ?>
    <?php printf( __( 'Tagged %2$s', 'twentyten' ), 'entry-utility-prep entry-utility-prep-tag-links', $tags_list ); ?>
    |
    <?php endif; ?>
    <?php comments_template( '', true ); ?>


    <?php endif; // This was the if statement that broke the loop into three parts based on categories. ?>

    <?php endwhile; // End the loop. Whew. ?>




    <?php /* Display navigation to next/previous pages when applicable */ ?>
    <?php if ( $wp_query->max_num_pages > 1 ) : ?>
    <?php next_posts_link( __( '← Older posts', 'twentyten' ) ); ?>
    <?php previous_posts_link( __( 'Newer posts →', 'twentyten' ) ); ?>
    <?php endif; ?>

  • Have a read through this part and see if you can figure it out:



    <?php /* How to display all other posts. */ ?>

    <?php else : ?>

    " title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?>
    <?php twentyten_posted_on(); ?>

    <?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
    <?php the_excerpt(); ?>
    <?php else : ?>
    <?php the_content( __( 'Continue reading →', 'twentyten' ) ); ?>
    <?php wp_link_pages( array( 'before' => '' . __( 'Pages:', 'twentyten' ), 'after' => '' ) ); ?>
    <?php endif; ?>


  • <?php /* How to display all other posts. */ ?>

    <?php else : ?>

    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    " title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?>
    <?php twentyten_posted_on(); ?>

    <?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
    <?php the_excerpt(); ?>
    </div>

    <?php else : ?>
    <?php the_content( __( 'Continue reading →', 'twentyten' ) ); ?>
    <?php wp_link_pages( array( 'before' => '' . __( 'Pages:', 'twentyten' ), 'after' => '' ) ); ?>
    <?php endif; ?>


    like that?
  • That should work yep, but I'd move the closing </div> to before the last endif, as at the moment it's within the if statement which is checking whether it's an archive or search. If it isn't one of those 2 then it wouldn't close the div. Give it a go and then view your source and see whether it successfully wraps a div with a unique class around each post.
  • im looking at my loop.php and howcome you removed the permalink?
  • I didn't, I copied and pasted right from the code you posted. It must have been removed by the css-tricks code formatting when you posted it.
  • @attilahajzer, did you manage to get it to work ok?
  • No. forsome reason the div doesn't show up AT ALL! in the view source.
  • It worked!! for somereason it wouldn't work in the editor built into wordpress. so when i got home from school i tried again through a text editor, and uploaded it via FTP. and it worked :) but now each of them have seperate classes and ID's how do i target these?
  • it doesn't show an end div.
  • Move the ending </div> to after the last 'endif' in the code above and you should be golden.

    You can then target each post by their id or class name eg: .search-results .post-69{
    However if you ever deleted/rewrote a post it would have a different post number and therefore a different class, therefore it would be better practice to style them by category. Just give each post a category and then style them like so .search-results .category-resume{.
  • Thank you! Ill do that when home from school. i can't wait!
  • howcome i can't just give it a class?
  • You can. You can give it whatever class you like within the loop. The loop is simply the PHP which produces the HTML markup for each post, so you can wrap it in whatever HTML tags you like. You mentioned in your 2nd post though that you wanted to select posts individually, and using the WordPress post_class() function gives each post a unique class you can use to target it with.

    Just a thought, but have you ever considered investing in Chris's book Digging into WordPress? This is all explained very thoroughly in there. I'd highly recommend it.

    John
  • Oh okay, well what i meant was be able to have some sort of background for each post, rather then just the entire wrap of all posts being one color background.
  • Well that's what the code above does, it doesn't wrap the whole set of posts, it wraps each post in a div so that you can style them however you like. If you wanted to wrap the whole set in a div you'd do that outside of the loop, if it's inside the loop though then that div will be produced multiple times - once for each post. I just checked your link again and it looks like you have it figured out now.