Grow your CSS skills. Land your dream job.

(WordPress) Display Pages As Unordered List

  • # June 1, 2011 at 12:11 pm

    Hey there,

    I’m trying to get WordPress to display an unordered list of pages in one of my templates. I’m trying to achieve something like this.




    • < ?php the_post_thumbnail(); ?>

      Page Title


      Page Description


      Link to page


    Any help will be appreciated. Thanks in advance.

    # June 1, 2011 at 12:24 pm

    Since I don’t think the_excerpt is going to give you exactly what you want, I would create a custom field called ‘description’. What the code below does is check to see if that field has been filled in, if it has it will display it.

    The query at the top of the page makes sure that it is only looping through pages. If you want it to loop through specific sections you’ll need to dig a little deeper into the query.

    < ?php query_posts('post_type=page'); ?>
    < ?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

    < ?php the_post_thumbnail(); ?>

    < ?php the_title(); ?>



    < ?php
    $description= get_post_meta($post->ID, 'description', true);

    if ($url) {
    echo "

    $description

    ";
    }
    ?>

    ">Link to page
    < ?php endwhile; endif; ?>
    # June 1, 2011 at 12:45 pm

    @TheDoc, that’s perfect, it’s worked a treat.


    < ?php query_posts('post_type=page'); ?>
    < ?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

    < ?php the_post_thumbnail(); ?>

    < ?php the_title(); ?>




    < ?php
    global $wp_query;
    $postid = $wp_query->post->ID;
    echo get_post_meta($postid, 'description', true);
    ?>



    ">Link to page
    < ?php endwhile; endif; ?>

    Any idea on how I’d call sub-pages, for example, if I only wanted to show pages that are children of a parent page called “Culture”?

    # June 1, 2011 at 12:53 pm

    No problemo. Just change the ’11′ in the example below to the Culture’s page id:

    < ?php query_posts('post_type=page&post_parent=11'); ?>
    # June 1, 2011 at 1:02 pm

    Perfect dude!!! You’re the man! One last thing, I’m trying to use box resizing to automatically resize my post thumbnails, but it doesn’t seem to be working. I’m putting this in my functions.php file.

    set_post_thumbnail_size( 225, 159 );
    # June 1, 2011 at 1:07 pm

    I always like being a little more specific with my post thumbnails:

    // post thumbnail support
    if ( function_exists( 'add_image_size' ) ) add_theme_support( 'post-thumbnails' );

    if ( function_exists( 'add_image_size' ) ) {
    add_image_size( 'culture-page-listing', 225, 159, true ); // Culture Child Page Listing
    add_image_size( 'other-size', 130, 130, true ); // Other use
    }

    Then in your template:

    < ?php the_post_thumbnail('culture-page-listing'); ?>

    The ‘true’ means it will hard crop the image to make sure it fits your dimensions exactly. I prefer it as it ensures all of the images will be similar.

    You might need to regenerate your thumbnails. There is a plugin to do this (so you don’t have to re-upload all of your images).

    http://wordpress.org/extend/plugins/regenerate-thumbnails/

    # June 1, 2011 at 1:12 pm

    Thanks for the tip, that’s a much better way! Thanks again!!!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".