Support » Plugins and Hacks » Hacks » Open posts as accordion on front page

  • Ottens


    What I’m hoping to accomplish: similar to the “Latest News” area in the new Reuters site.

    My front page currently displays the title and excerpt of a post, along with a thumbnail. I want to keep that basic structure, but have the main post appear, accordion-style, when readers click either the title or the thumbnail, or the “block” for that matter, as is the case on the Reuters site, both of which now link to the single post.

    I’ve been trying different plugins and reading through similar topics, but so far what I’ve found either doesn’t quite give me what I want (like an expanded “Read More” functionality; most of my articles don’t have a “Read More” link in them) or I can’t make sense of the coding. I can manage CSS, PHP and HTML, but I’m a Javascript-novice. I’d rather avoid Javascript altogether, in fact. But I wouldn’t consider myself a professional so be gentle.

    Can it be done? If so, how?

    Thanks for your help.

Viewing 6 replies - 1 through 6 (of 6 total)
  • ianhaycox


    I know you said no Javascript, but the accordion jQuery widget is easy to use.

    To get you started,

    1. Add the following to your theme’s functions.php

    function add_accordion_script() {
      wp_enqueue_script('acc', get_template_directory_uri() . '/acc.js', array('jquery-ui-accordion'));
    add_action('wp_enqueue_scripts', 'add_accordion_script');

    This enqueues the javascript file acc.js and the all the jQuery dependencies for the jQuery accordion.

    2. Create acc.js in your themes directory thus:

    jQuery(document).ready(function($) {
    	$( "#accordion" ).accordion({
                header: "div.accordion-header",
                collapsible: true,
                active:false });

    This basically says, apply the accordion to a element with the id accordion, start collapsed, and each section starts with a DIV with the class accordion-header

    3. Finally modify your theme page to something like this:

    <?php if (have_posts()): ?>
        <div id="accordion">
        <?php while (have_posts()) : the_post();?>
            <div class="accordion-header">
                <h1><?php the_title();?></h1>
                <?php the_excerpt();?>
    	<div><?php the_content();?></div>
        <?php endwhile; ?>
    <?php else:?>
        <p><?php _e('No posts'); ?></p>
    <?php endif;?>

    So the all the posts are wrapped in a <div id=”accordion”> which ties up with $( “#accordion” ) in the JS file.

    Each post title and excerpt is then wrapped with the class accordion-header and the full content in the div below.

    See and the API docs for the meaning of header, collapsible, active

    The CSS might need fiddling with if the excerpts are long.

    That should get you started.


    Thanks for your reply, Ian.

    That works, although not quite the way I want it to. The beauty of Reuters’ design is that clicking the link doesn’t just expand to give you the content, it actually seems to take you to a different page (as in: the URL changes). The usual jQuery Accordions don’t do this, they keep you on the same page. I’ve been searching online for a while but can’t find how to imitate the Reuters system.


    Moderator bcworkz


    I personally would not say loading a new page is a beautiful design, but no matter. One approach would be to alter how single requests are handled. The single query could be modified to return all the posts on the home page. The single template runs the loop just like the home page, with the one exception that when the requested post comes up in the loop, the entire contents are displayed instead of title and excerpt.

    That makes sense. So how would I do that?

    Thanks for your help.

    Moderator bcworkz


    Er, good question. I’m not sure, it was just a germ of an idea. The answer partly depends on your theme. I suppose you would start by hooking the ‘pre_get_posts’ action. First be sure the query is for a single post. Then you would somehow make note of the requested post, perhaps by getting the slug out of the URL. Then alter the query to return a homepage-like array of posts.

    Then we need to ensure the theme loads a single template though the query now returns several posts. There must be a load template filter or something to work off of, I’m not sure. Or it may work without intervention, experimentation is called for.

    Finally, alter the single template to work much like the home page, except it checks if the current post’s slug (or some other means of ID) matches the original request. In that case, output the entire content for that one post.

    That’s about all I can offer off the top of my head. I’m pretty sure it will work. From here it’s a matter of diving in and beginning to code the various aspects and see how things develop. You’ll need several test runs just to see what sort of data you have to work with.

    Hi Ian,

    When you say ‘3. Finally modify your theme page to something like this:..’, what theme page are you talking about.

    I followed the rest of the instructions but this one stumped me.



Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Open posts as accordion on front page’ is closed to new replies.